summaryrefslogtreecommitdiff
path: root/spec/frontend/nav
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/nav')
-rw-r--r--spec/frontend/nav/components/new_nav_toggle_spec.js98
1 files changed, 98 insertions, 0 deletions
diff --git a/spec/frontend/nav/components/new_nav_toggle_spec.js b/spec/frontend/nav/components/new_nav_toggle_spec.js
new file mode 100644
index 00000000000..f09bdef8caa
--- /dev/null
+++ b/spec/frontend/nav/components/new_nav_toggle_spec.js
@@ -0,0 +1,98 @@
+import { mount, createWrapper } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import { getByText as getByTextHelper } from '@testing-library/dom';
+import { GlToggle } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/flash';
+import { s__ } from '~/locale';
+
+jest.mock('~/flash');
+
+const TEST_ENDPONT = 'https://example.com/toggle';
+
+describe('NewNavToggle', () => {
+ let wrapper;
+
+ const findToggle = () => wrapper.findComponent(GlToggle);
+
+ const createComponent = (propsData = { enabled: false }) => {
+ wrapper = mount(NewNavToggle, {
+ propsData: {
+ endpoint: TEST_ENDPONT,
+ ...propsData,
+ },
+ });
+ };
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ const getByText = (text, options) =>
+ createWrapper(getByTextHelper(wrapper.element, text, options));
+
+ it('renders its title', () => {
+ createComponent();
+ expect(getByText('Navigation redesign').exists()).toBe(true);
+ });
+
+ describe('when user preference is enabled', () => {
+ beforeEach(() => {
+ createComponent({ enabled: true });
+ });
+
+ it('renders the toggle as enabled', () => {
+ expect(findToggle().props('value')).toBe(true);
+ });
+ });
+
+ describe('when user preference is disabled', () => {
+ beforeEach(() => {
+ createComponent({ enabled: false });
+ });
+
+ it('renders the toggle as disabled', () => {
+ expect(findToggle().props('value')).toBe(false);
+ });
+ });
+
+ describe('changing the toggle', () => {
+ useMockLocationHelper();
+ let mock;
+
+ beforeEach(() => {
+ mock = new MockAdapter(axios);
+ createComponent();
+ });
+
+ it('reloads the page on success', async () => {
+ mock.onPut(TEST_ENDPONT).reply(200);
+ findToggle().vm.$emit('change');
+ await waitForPromises();
+
+ expect(window.location.reload).toHaveBeenCalled();
+ });
+
+ it('shows an alert on error', async () => {
+ mock.onPut(TEST_ENDPONT).reply(500);
+ findToggle().vm.$emit('change');
+ await waitForPromises();
+
+ expect(createAlert).toHaveBeenCalledWith(
+ expect.objectContaining({
+ message: s__(
+ 'NorthstarNavigation|Could not update the new navigation preference. Please try again later.',
+ ),
+ }),
+ );
+ expect(window.location.reload).not.toHaveBeenCalled();
+ });
+
+ afterEach(() => {
+ mock.restore();
+ });
+ });
+});