Skip to content

G
gitlab-ce
Commit f8c7f771 authored by Stanislav Lashmanov's avatar Stanislav Lashmanov
Browse files
Options

Refactor nextTick to use direct import from Vue package 

RFC: https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/47
parent 79f66000
Show whitespace changes
Inline Side-by-side
Showing with 680 additions and 788 deletions
spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
View file @ f8c7f771
import { GlModal, GlSearchBoxByType } from '@gitlab/ui'; import { GlModal, GlSearchBoxByType } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import getDiffWithCommit from 'test_fixtures/merge_request_diffs/with_commit.json'; import getDiffWithCommit from 'test_fixtures/merge_request_diffs/with_commit.json';
import AddReviewItemsModal from '~/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue'; import AddReviewItemsModal from '~/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue';
...@@ -84,13 +84,12 @@ describe('AddContextCommitsModal', () => { ...@@ -84,13 +84,12 @@ describe('AddContextCommitsModal', () => {
expect(findModal().attributes('ok-disabled')).toBe('true'); expect(findModal().attributes('ok-disabled')).toBe('true');
}); });
it('enabled ok button when atleast one row is selected', () => { it('enabled ok button when atleast one row is selected', async () => {
wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findModal().attributes('ok-disabled')).toBeFalsy(); expect(findModal().attributes('ok-disabled')).toBeFalsy();
}); });
}); });
});
describe('when in second tab, renders a modal with', () => { describe('when in second tab, renders a modal with', () => {
beforeEach(() => { beforeEach(() => {
...@@ -100,12 +99,11 @@ describe('AddContextCommitsModal', () => { ...@@ -100,12 +99,11 @@ describe('AddContextCommitsModal', () => {
expect(findModal().attributes('ok-disabled')).toBe('true'); expect(findModal().attributes('ok-disabled')).toBe('true');
}); });
it('an enabled ok button when atleast one row is selected', () => { it('an enabled ok button when atleast one row is selected', async () => {
wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findModal().attributes('ok-disabled')).toBeFalsy(); expect(findModal().attributes('ok-disabled')).toBeFalsy();
}); });
});
it('a disabled ok button in first tab, when row is selected in second tab', () => { it('a disabled ok button in first tab, when row is selected in second tab', () => {
createWrapper({ selectedContextCommits: [commit] }); createWrapper({ selectedContextCommits: [commit] });
...@@ -114,35 +112,32 @@ describe('AddContextCommitsModal', () => { ...@@ -114,35 +112,32 @@ describe('AddContextCommitsModal', () => {
}); });
describe('has an ok button when clicked calls action', () => { describe('has an ok button when clicked calls action', () => {
it('"createContextCommits" when only new commits to be added ', () => { it('"createContextCommits" when only new commits to be added ', async () => {
wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
findModal().vm.$emit('ok'); findModal().vm.$emit('ok');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(createContextCommits).toHaveBeenCalledWith(expect.anything(), { expect(createContextCommits).toHaveBeenCalledWith(expect.anything(), {
commits: [{ ...commit, isSelected: true }], commits: [{ ...commit, isSelected: true }],
forceReload: true, forceReload: true,
}); });
}); });
}); it('"removeContextCommits" when only added commits are to be removed ', async () => {
it('"removeContextCommits" when only added commits are to be removed ', () => {
wrapper.vm.$store.state.toRemoveCommits = [commit.short_id]; wrapper.vm.$store.state.toRemoveCommits = [commit.short_id];
findModal().vm.$emit('ok'); findModal().vm.$emit('ok');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), true); expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), true);
}); });
}); it('"createContextCommits" and "removeContextCommits" when new commits are to be added and old commits are to be removed', async () => {
it('"createContextCommits" and "removeContextCommits" when new commits are to be added and old commits are to be removed', () => {
wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }];
wrapper.vm.$store.state.toRemoveCommits = [commit.short_id]; wrapper.vm.$store.state.toRemoveCommits = [commit.short_id];
findModal().vm.$emit('ok'); findModal().vm.$emit('ok');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(createContextCommits).toHaveBeenCalledWith(expect.anything(), { expect(createContextCommits).toHaveBeenCalledWith(expect.anything(), {
commits: [{ ...commit, isSelected: true }], commits: [{ ...commit, isSelected: true }],
}); });
expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), undefined); expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), undefined);
}); });
}); });
});
describe('has a cancel button when clicked', () => { describe('has a cancel button when clicked', () => {
it('does not call "createContextCommits" or "removeContextCommits"', () => { it('does not call "createContextCommits" or "removeContextCommits"', () => {
......
spec/frontend/admin/users/components/modals/delete_user_modal_spec.js
View file @ f8c7f771
import { GlButton, GlFormInput, GlSprintf } from '@gitlab/ui'; import { GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DeleteUserModal from '~/admin/users/components/modals/delete_user_modal.vue'; import DeleteUserModal from '~/admin/users/components/modals/delete_user_modal.vue';
import UserDeletionObstaclesList from '~/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue'; import UserDeletionObstaclesList from '~/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue';
import ModalStub from './stubs/modal_stub'; import ModalStub from './stubs/modal_stub';
...@@ -82,11 +83,11 @@ describe('User Operation confirmation modal', () => { ...@@ -82,11 +83,11 @@ describe('User Operation confirmation modal', () => {
}); });
describe('with incorrect username', () => { describe('with incorrect username', () => {
beforeEach(() => { beforeEach(async () => {
createComponent(); createComponent();
setUsername(badUsername); setUsername(badUsername);
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('shows incorrect username', () => { it('shows incorrect username', () => {
...@@ -100,11 +101,11 @@ describe('User Operation confirmation modal', () => { ...@@ -100,11 +101,11 @@ describe('User Operation confirmation modal', () => {
}); });
describe('with correct username', () => { describe('with correct username', () => {
beforeEach(() => { beforeEach(async () => {
createComponent(); createComponent();
setUsername(username); setUsername(username);
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('shows correct username', () => { it('shows correct username', () => {
...@@ -117,10 +118,10 @@ describe('User Operation confirmation modal', () => { ...@@ -117,10 +118,10 @@ describe('User Operation confirmation modal', () => {
}); });
describe('when primary action is submitted', () => { describe('when primary action is submitted', () => {
beforeEach(() => { beforeEach(async () => {
findPrimaryButton().vm.$emit('click'); findPrimaryButton().vm.$emit('click');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('clears the input', () => { it('clears the input', () => {
...@@ -136,10 +137,10 @@ describe('User Operation confirmation modal', () => { ...@@ -136,10 +137,10 @@ describe('User Operation confirmation modal', () => {
}); });
describe('when secondary action is submitted', () => { describe('when secondary action is submitted', () => {
beforeEach(() => { beforeEach(async () => {
findSecondaryButton().vm.$emit('click'); findSecondaryButton().vm.$emit('click');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('has correct form attributes and calls submit', () => { it('has correct form attributes and calls submit', () => {
...@@ -168,7 +169,7 @@ describe('User Operation confirmation modal', () => { ...@@ -168,7 +169,7 @@ describe('User Operation confirmation modal', () => {
it("shows enabled buttons when user's name is entered without whitespace", async () => { it("shows enabled buttons when user's name is entered without whitespace", async () => {
setUsername('John Smith'); setUsername('John Smith');
await wrapper.vm.$nextTick(); await nextTick();
expect(findPrimaryButton().attributes('disabled')).toBeUndefined(); expect(findPrimaryButton().attributes('disabled')).toBeUndefined();
expect(findSecondaryButton().attributes('disabled')).toBeUndefined(); expect(findSecondaryButton().attributes('disabled')).toBeUndefined();
......
spec/frontend/admin/users/components/modals/user_modal_manager_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import UserModalManager from '~/admin/users/components/modals/user_modal_manager.vue'; import UserModalManager from '~/admin/users/components/modals/user_modal_manager.vue';
import ModalStub from './stubs/modal_stub'; import ModalStub from './stubs/modal_stub';
...@@ -50,14 +51,14 @@ describe('Users admin page Modal Manager', () => { ...@@ -50,14 +51,14 @@ describe('Users admin page Modal Manager', () => {
expect(() => wrapper.vm.show({ glModalAction: 'action1' })).toThrow(); expect(() => wrapper.vm.show({ glModalAction: 'action1' })).toThrow();
}); });
it('renders modal with expected props when valid configuration is passed', () => { it('renders modal with expected props when valid configuration is passed', async () => {
createComponent(); createComponent();
wrapper.vm.show({ wrapper.vm.show({
glModalAction: 'action1', glModalAction: 'action1',
extraProp: 'extraPropValue', extraProp: 'extraPropValue',
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
const modal = findModal(); const modal = findModal();
expect(modal.exists()).toBeTruthy(); expect(modal.exists()).toBeTruthy();
expect(modal.vm.$attrs.csrfToken).toEqual('dummyCSRF'); expect(modal.vm.$attrs.csrfToken).toEqual('dummyCSRF');
...@@ -65,7 +66,6 @@ describe('Users admin page Modal Manager', () => { ...@@ -65,7 +66,6 @@ describe('Users admin page Modal Manager', () => {
expect(modal.vm.showWasCalled).toBeTruthy(); expect(modal.vm.showWasCalled).toBeTruthy();
}); });
}); });
});
describe('click handling', () => { describe('click handling', () => {
let button; let button;
...@@ -101,7 +101,7 @@ describe('Users admin page Modal Manager', () => { ...@@ -101,7 +101,7 @@ describe('Users admin page Modal Manager', () => {
it('renders the modal when the button is clicked', async () => { it('renders the modal when the button is clicked', async () => {
button.click(); button.click();
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal().exists()).toBe(true); expect(findModal().exists()).toBe(true);
}); });
...@@ -110,7 +110,7 @@ describe('Users admin page Modal Manager', () => { ...@@ -110,7 +110,7 @@ describe('Users admin page Modal Manager', () => {
button.removeAttribute('data-gl-modal-action'); button.removeAttribute('data-gl-modal-action');
button.click(); button.click();
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal().exists()).toBe(false); expect(findModal().exists()).toBe(false);
}); });
...@@ -118,7 +118,7 @@ describe('Users admin page Modal Manager', () => { ...@@ -118,7 +118,7 @@ describe('Users admin page Modal Manager', () => {
it('does not render the modal when a button without the selector class is clicked', async () => { it('does not render the modal when a button without the selector class is clicked', async () => {
button2.click(); button2.click();
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal().exists()).toBe(false); expect(findModal().exists()).toBe(false);
}); });
......
spec/frontend/alert_management/components/alert_management_table_spec.js
View file @ f8c7f771
...@@ -2,6 +2,7 @@ import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@ ...@@ -2,6 +2,7 @@ import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json'; import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json';
...@@ -169,7 +170,7 @@ describe('AlertManagementTable', () => { ...@@ -169,7 +170,7 @@ describe('AlertManagementTable', () => {
loading: false, loading: false,
}); });
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find(GlTable).exists()).toBe(true); expect(wrapper.find(GlTable).exists()).toBe(true);
expect(findAlertsTable().find(GlIcon).classes('icon-critical')).toBe(true); expect(findAlertsTable().find(GlIcon).classes('icon-critical')).toBe(true);
......
spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
View file @ f8c7f771
import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter'; import AxiosMockAdapter from 'axios-mock-adapter';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql'; import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql'; import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
...@@ -70,7 +70,7 @@ describe('AlertsSettingsWrapper', () => { ...@@ -70,7 +70,7 @@ describe('AlertsSettingsWrapper', () => {
async function destroyHttpIntegration(localWrapper) { async function destroyHttpIntegration(localWrapper) {
await jest.runOnlyPendingTimers(); await jest.runOnlyPendingTimers();
await localWrapper.vm.$nextTick(); await nextTick();
localWrapper localWrapper
.find(IntegrationsList) .find(IntegrationsList)
......
spec/frontend/analytics/shared/components/daterange_spec.js
View file @ f8c7f771
import { GlDaterangePicker } from '@gitlab/ui'; import { GlDaterangePicker } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { useFakeDate } from 'helpers/fake_date'; import { useFakeDate } from 'helpers/fake_date';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import Daterange from '~/analytics/shared/components/daterange.vue'; import Daterange from '~/analytics/shared/components/daterange.vue';
...@@ -48,7 +49,7 @@ describe('Daterange component', () => { ...@@ -48,7 +49,7 @@ describe('Daterange component', () => {
}); });
describe('with a minDate being set', () => { describe('with a minDate being set', () => {
it('emits the change event with the minDate when the user enters a start date before the minDate', () => { it('emits the change event with the minDate when the user enters a start date before the minDate', async () => {
const startDate = new Date('2019-09-01'); const startDate = new Date('2019-09-01');
const endDate = new Date('2019-09-30'); const endDate = new Date('2019-09-30');
const minDate = new Date('2019-06-01'); const minDate = new Date('2019-06-01');
...@@ -60,11 +61,10 @@ describe('Daterange component', () => { ...@@ -60,11 +61,10 @@ describe('Daterange component', () => {
input.setValue('2019-01-01'); input.setValue('2019-01-01');
input.trigger('change'); input.trigger('change');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]); expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]);
}); });
}); });
});
describe('with a maxDateRange being set', () => { describe('with a maxDateRange being set', () => {
beforeEach(() => { beforeEach(() => {
......
spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
View file @ f8c7f771
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { nextTick } from 'vue';
import { mountExtended } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import { stubComponent } from 'helpers/stub_component'; import { stubComponent } from 'helpers/stub_component';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
...@@ -99,9 +100,9 @@ describe('ProjectsDropdownFilter component', () => { ...@@ -99,9 +100,9 @@ describe('ProjectsDropdownFilter component', () => {
const findDropdownFullPathAtIndex = (index) => const findDropdownFullPathAtIndex = (index) =>
findDropdownAtIndex(index).find('[data-testid="project-full-path"]'); findDropdownAtIndex(index).find('[data-testid="project-full-path"]');
const selectDropdownItemAtIndex = (index) => { const selectDropdownItemAtIndex = async (index) => {
findDropdownAtIndex(index).find('button').trigger('click'); findDropdownAtIndex(index).find('button').trigger('click');
return wrapper.vm.$nextTick(); await nextTick();
}; };
// NOTE: Selected items are now visually separated from unselected items // NOTE: Selected items are now visually separated from unselected items
...@@ -132,7 +133,7 @@ describe('ProjectsDropdownFilter component', () => { ...@@ -132,7 +133,7 @@ describe('ProjectsDropdownFilter component', () => {
expect(spyQuery).toHaveBeenCalledTimes(1); expect(spyQuery).toHaveBeenCalledTimes(1);
await wrapper.vm.$nextTick(() => { await nextTick();
expect(spyQuery).toHaveBeenCalledWith({ expect(spyQuery).toHaveBeenCalledWith({
query: getProjects, query: getProjects,
variables: { variables: {
...@@ -144,7 +145,6 @@ describe('ProjectsDropdownFilter component', () => { ...@@ -144,7 +145,6 @@ describe('ProjectsDropdownFilter component', () => {
}); });
}); });
}); });
});
describe('highlighted items', () => { describe('highlighted items', () => {
const blockDefaultProps = { multiSelect: true }; const blockDefaultProps = { multiSelect: true };
...@@ -193,7 +193,7 @@ describe('ProjectsDropdownFilter component', () => { ...@@ -193,7 +193,7 @@ describe('ProjectsDropdownFilter component', () => {
expect(wrapper.text()).toContain('2 projects selected'); expect(wrapper.text()).toContain('2 projects selected');
findClearAllButton().trigger('click'); findClearAllButton().trigger('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.text()).not.toContain('2 projects selected'); expect(wrapper.text()).not.toContain('2 projects selected');
expect(wrapper.text()).toContain('Select projects'); expect(wrapper.text()).toContain('Select projects');
...@@ -366,10 +366,9 @@ describe('ProjectsDropdownFilter component', () => { ...@@ -366,10 +366,9 @@ describe('ProjectsDropdownFilter component', () => {
selectDropdownItemAtIndex(0); selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(1); selectDropdownItemAtIndex(1);
await wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findDropdownButton().text()).toBe('2 projects selected'); expect(findDropdownButton().text()).toBe('2 projects selected');
}); });
}); });
}); });
});
}); });
spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
View file @ f8c7f771
import { GlAlert } from '@gitlab/ui'; import { GlAlert } from '@gitlab/ui';
import { GlLineChart } from '@gitlab/ui/dist/charts'; import { GlLineChart } from '@gitlab/ui/dist/charts';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
...@@ -164,7 +164,7 @@ describe('UsageTrendsCountChart', () => { ...@@ -164,7 +164,7 @@ describe('UsageTrendsCountChart', () => {
.spyOn(wrapper.vm.$apollo.queries[identifier], 'fetchMore') .spyOn(wrapper.vm.$apollo.queries[identifier], 'fetchMore')
.mockImplementation(jest.fn().mockRejectedValue()); .mockImplementation(jest.fn().mockRejectedValue());
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('calls fetchMore', () => { it('calls fetchMore', () => {
......
spec/frontend/analytics/usage_trends/components/users_chart_spec.js
View file @ f8c7f771
import { GlAlert } from '@gitlab/ui'; import { GlAlert } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts'; import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import UsersChart from '~/analytics/usage_trends/components/users_chart.vue'; import UsersChart from '~/analytics/usage_trends/components/users_chart.vue';
...@@ -67,7 +67,7 @@ describe('UsersChart', () => { ...@@ -67,7 +67,7 @@ describe('UsersChart', () => {
describe('without data', () => { describe('without data', () => {
beforeEach(async () => { beforeEach(async () => {
wrapper = createComponent({ users: [] }); wrapper = createComponent({ users: [] });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders an no data message', () => { it('renders an no data message', () => {
...@@ -86,7 +86,7 @@ describe('UsersChart', () => { ...@@ -86,7 +86,7 @@ describe('UsersChart', () => {
describe('with data', () => { describe('with data', () => {
beforeEach(async () => { beforeEach(async () => {
wrapper = createComponent({ users: mockCountsData2 }); wrapper = createComponent({ users: mockCountsData2 });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('hides the skeleton loader', () => { it('hides the skeleton loader', () => {
...@@ -107,7 +107,7 @@ describe('UsersChart', () => { ...@@ -107,7 +107,7 @@ describe('UsersChart', () => {
describe('with errors', () => { describe('with errors', () => {
beforeEach(async () => { beforeEach(async () => {
wrapper = createComponent({ loadingError: true }); wrapper = createComponent({ loadingError: true });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders an error message', () => { it('renders an error message', () => {
...@@ -134,7 +134,7 @@ describe('UsersChart', () => { ...@@ -134,7 +134,7 @@ describe('UsersChart', () => {
}); });
jest.spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore'); jest.spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore');
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('requests data twice', () => { it('requests data twice', () => {
...@@ -147,7 +147,7 @@ describe('UsersChart', () => { ...@@ -147,7 +147,7 @@ describe('UsersChart', () => {
}); });
describe('when the fetchMore query throws an error', () => { describe('when the fetchMore query throws an error', () => {
beforeEach(() => { beforeEach(async () => {
wrapper = createComponent({ wrapper = createComponent({
users: mockCountsData2, users: mockCountsData2,
additionalData: mockCountsData1, additionalData: mockCountsData1,
...@@ -156,7 +156,7 @@ describe('UsersChart', () => { ...@@ -156,7 +156,7 @@ describe('UsersChart', () => {
jest jest
.spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore') .spyOn(wrapper.vm.$apollo.queries.users, 'fetchMore')
.mockImplementation(jest.fn().mockRejectedValue()); .mockImplementation(jest.fn().mockRejectedValue());
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('calls fetchMore', () => { it('calls fetchMore', () => {
......
spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
View file @ f8c7f771
import { GlFormCheckbox, GlLink } from '@gitlab/ui'; import { GlFormCheckbox, GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import UpdateKeepLatestArtifactProjectSetting from '~/artifacts_settings/graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql'; import UpdateKeepLatestArtifactProjectSetting from '~/artifacts_settings/graphql/mutations/update_keep_latest_artifact_project_setting.mutation.graphql';
...@@ -109,13 +109,13 @@ describe('Keep latest artifact checkbox', () => { ...@@ -109,13 +109,13 @@ describe('Keep latest artifact checkbox', () => {
}); });
it('sets correct setting value in checkbox with query result', async () => { it('sets correct setting value in checkbox with query result', async () => {
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('checkbox is enabled when application setting is enabled', async () => { it('checkbox is enabled when application setting is enabled', async () => {
await wrapper.vm.$nextTick(); await nextTick();
expect(findCheckbox().attributes('disabled')).toBeUndefined(); expect(findCheckbox().attributes('disabled')).toBeUndefined();
}); });
......
spec/frontend/badges/components/badge_settings_spec.js
View file @ f8c7f771
import { GlModal } from '@gitlab/ui'; import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import BadgeList from '~/badges/components/badge_list.vue'; import BadgeList from '~/badges/components/badge_list.vue';
import BadgeListRow from '~/badges/components/badge_list_row.vue'; import BadgeListRow from '~/badges/components/badge_list_row.vue';
...@@ -40,7 +40,7 @@ describe('BadgeSettings component', () => { ...@@ -40,7 +40,7 @@ describe('BadgeSettings component', () => {
const button = wrapper.find('[data-testid="delete-badge"]'); const button = wrapper.find('[data-testid="delete-badge"]');
button.vm.$emit('click'); button.vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
const modal = wrapper.find(GlModal); const modal = wrapper.find(GlModal);
expect(modal.isVisible()).toBe(true); expect(modal.isVisible()).toBe(true);
......
spec/frontend/batch_comments/components/draft_note_spec.js
View file @ f8c7f771
import { getByRole } from '@testing-library/dom'; import { getByRole } from '@testing-library/dom';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { stubComponent } from 'helpers/stub_component'; import { stubComponent } from 'helpers/stub_component';
import DraftNote from '~/batch_comments/components/draft_note.vue'; import DraftNote from '~/batch_comments/components/draft_note.vue';
import { createStore } from '~/batch_comments/stores'; import { createStore } from '~/batch_comments/stores';
...@@ -71,30 +72,25 @@ describe('Batch comments draft note component', () => { ...@@ -71,30 +72,25 @@ describe('Batch comments draft note component', () => {
); );
}); });
it('sets as loading when draft is publishing', (done) => { it('sets as loading when draft is publishing', async () => {
createComponent(); createComponent();
wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1); wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1);
wrapper.vm.$nextTick(() => { await nextTick();
const publishNowButton = wrapper.find({ ref: 'publishNowButton' }); const publishNowButton = wrapper.find({ ref: 'publishNowButton' });
expect(publishNowButton.props().loading).toBe(true); expect(publishNowButton.props().loading).toBe(true);
done();
});
}); });
}); });
describe('update', () => { describe('update', () => {
it('dispatches updateDraft', (done) => { it('dispatches updateDraft', async () => {
createComponent(); createComponent();
const note = wrapper.find(NoteableNote); const note = wrapper.find(NoteableNote);
note.vm.$emit('handleEdit'); note.vm.$emit('handleEdit');
wrapper.vm await nextTick();
.$nextTick()
.then(() => {
const formData = { const formData = {
note: draft, note: draft,
noteText: 'a', noteText: 'a',
...@@ -107,9 +103,6 @@ describe('Batch comments draft note component', () => { ...@@ -107,9 +103,6 @@ describe('Batch comments draft note component', () => {
'batchComments/updateDraft', 'batchComments/updateDraft',
formData, formData,
); );
})
.then(done)
.catch(done.fail);
}); });
}); });
...@@ -127,7 +120,7 @@ describe('Batch comments draft note component', () => { ...@@ -127,7 +120,7 @@ describe('Batch comments draft note component', () => {
}); });
describe('quick actions', () => { describe('quick actions', () => {
it('renders referenced commands', (done) => { it('renders referenced commands', async () => {
createComponent(); createComponent();
wrapper.setProps({ wrapper.setProps({
draft: { draft: {
...@@ -138,14 +131,11 @@ describe('Batch comments draft note component', () => { ...@@ -138,14 +131,11 @@ describe('Batch comments draft note component', () => {
}, },
}); });
wrapper.vm.$nextTick(() => { await nextTick();
const referencedCommands = wrapper.find('.referenced-commands'); const referencedCommands = wrapper.find('.referenced-commands');
expect(referencedCommands.exists()).toBe(true); expect(referencedCommands.exists()).toBe(true);
expect(referencedCommands.text()).toContain('test command'); expect(referencedCommands.text()).toContain('test command');
done();
});
}); });
}); });
......
spec/frontend/blob/components/blob_edit_header_spec.js
View file @ f8c7f771
import { GlFormInput, GlButton } from '@gitlab/ui'; import { GlFormInput, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BlobEditHeader from '~/blob/components/blob_edit_header.vue'; import BlobEditHeader from '~/blob/components/blob_edit_header.vue';
describe('Blob Header Editing', () => { describe('Blob Header Editing', () => {
...@@ -40,7 +41,7 @@ describe('Blob Header Editing', () => { ...@@ -40,7 +41,7 @@ describe('Blob Header Editing', () => {
}); });
describe('functionality', () => { describe('functionality', () => {
it('emits input event when the blob name is changed', () => { it('emits input event when the blob name is changed', async () => {
const inputComponent = wrapper.find(GlFormInput); const inputComponent = wrapper.find(GlFormInput);
const newValue = 'bar.txt'; const newValue = 'bar.txt';
...@@ -51,11 +52,10 @@ describe('Blob Header Editing', () => { ...@@ -51,11 +52,10 @@ describe('Blob Header Editing', () => {
}); });
inputComponent.vm.$emit('change'); inputComponent.vm.$emit('change');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted().input[0]).toEqual([newValue]); expect(wrapper.emitted().input[0]).toEqual([newValue]);
}); });
}); });
});
describe.each` describe.each`
props | expectedDisabled props | expectedDisabled
......
spec/frontend/blob/components/blob_header_spec.js
View file @ f8c7f771
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BlobHeader from '~/blob/components/blob_header.vue'; import BlobHeader from '~/blob/components/blob_header.vue';
import DefaultActions from '~/blob/components/blob_header_default_actions.vue'; import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
import BlobFilepath from '~/blob/components/blob_header_filepath.vue'; import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
...@@ -139,26 +140,24 @@ describe('Blob Header Default Actions', () => { ...@@ -139,26 +140,24 @@ describe('Blob Header Default Actions', () => {
expect(wrapper.vm.viewer).toBe(null); expect(wrapper.vm.viewer).toBe(null);
}); });
it('watches the changes in viewer data and emits event when the change is registered', () => { it('watches the changes in viewer data and emits event when the change is registered', async () => {
factory(); factory();
jest.spyOn(wrapper.vm, '$emit'); jest.spyOn(wrapper.vm, '$emit');
wrapper.vm.viewer = newViewer; wrapper.vm.viewer = newViewer;
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer); expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer);
}); });
});
it('does not emit event if the switcher is not rendered', () => { it('does not emit event if the switcher is not rendered', async () => {
factory(true); factory(true);
expect(wrapper.vm.showViewerSwitcher).toBe(false); expect(wrapper.vm.showViewerSwitcher).toBe(false);
jest.spyOn(wrapper.vm, '$emit'); jest.spyOn(wrapper.vm, '$emit');
wrapper.vm.viewer = newViewer; wrapper.vm.viewer = newViewer;
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.vm.$emit).not.toHaveBeenCalled(); expect(wrapper.vm.$emit).not.toHaveBeenCalled();
}); });
}); });
});
}); });
spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
View file @ f8c7f771
import { GlButtonGroup, GlButton } from '@gitlab/ui'; import { GlButtonGroup, GlButton } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue'; import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
import { import {
RICH_BLOB_VIEWER, RICH_BLOB_VIEWER,
...@@ -72,26 +73,24 @@ describe('Blob Header Viewer Switcher', () => { ...@@ -72,26 +73,24 @@ describe('Blob Header Viewer Switcher', () => {
expect(wrapper.vm.$emit).not.toHaveBeenCalled(); expect(wrapper.vm.$emit).not.toHaveBeenCalled();
}); });
it('emits an event when a Rich Viewer button is clicked', () => { it('emits an event when a Rich Viewer button is clicked', async () => {
factory(); factory();
expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER); expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
richBtn.vm.$emit('click'); richBtn.vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', RICH_BLOB_VIEWER); expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', RICH_BLOB_VIEWER);
}); });
});
it('emits an event when a Simple Viewer button is clicked', () => { it('emits an event when a Simple Viewer button is clicked', async () => {
factory({ factory({
value: RICH_BLOB_VIEWER, value: RICH_BLOB_VIEWER,
}); });
simpleBtn.vm.$emit('click'); simpleBtn.vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', SIMPLE_BLOB_VIEWER); expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', SIMPLE_BLOB_VIEWER);
}); });
}); });
});
}); });
spec/frontend/boards/board_card_inner_spec.js
View file @ f8c7f771
import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui'; import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
import { range } from 'lodash'; import { range } from 'lodash';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { nextTick } from 'vue';
import setWindowLocation from 'helpers/set_window_location_helper'; import setWindowLocation from 'helpers/set_window_location_helper';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { mountExtended } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
...@@ -261,7 +262,7 @@ describe('Board card component', () => { ...@@ -261,7 +262,7 @@ describe('Board card component', () => {
], ],
}); });
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe( expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
'test_image_from_avatar_url?width=24', 'test_image_from_avatar_url?width=24',
...@@ -376,7 +377,7 @@ describe('Board card component', () => { ...@@ -376,7 +377,7 @@ describe('Board card component', () => {
}, },
}); });
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('99+'); expect(wrapper.find('.board-card-assignee .avatar-counter').text().trim()).toEqual('99+');
}); });
...@@ -399,7 +400,7 @@ describe('Board card component', () => { ...@@ -399,7 +400,7 @@ describe('Board card component', () => {
it('does not render label if label does not have an ID', async () => { it('does not render label if label does not have an ID', async () => {
wrapper.setProps({ item: { ...issue, labels: [label1, { title: 'closed' }] } }); wrapper.setProps({ item: { ...issue, labels: [label1, { title: 'closed' }] } });
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.findAll(GlLabel).length).toBe(1); expect(wrapper.findAll(GlLabel).length).toBe(1);
expect(wrapper.text()).not.toContain('closed'); expect(wrapper.text()).not.toContain('closed');
......
spec/frontend/boards/board_list_spec.js
View file @ f8c7f771
import Draggable from 'vuedraggable'; import Draggable from 'vuedraggable';
import { nextTick } from 'vue';
import { DraggableItemTypes } from 'ee_else_ce/boards/constants'; import { DraggableItemTypes } from 'ee_else_ce/boards/constants';
import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame'; import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
...@@ -65,14 +66,14 @@ describe('Board list component', () => { ...@@ -65,14 +66,14 @@ describe('Board list component', () => {
it('shows new issue form', async () => { it('shows new issue form', async () => {
wrapper.vm.toggleForm(); wrapper.vm.toggleForm();
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-new-issue-form').exists()).toBe(true); expect(wrapper.find('.board-new-issue-form').exists()).toBe(true);
}); });
it('shows new issue form after eventhub event', async () => { it('shows new issue form after eventhub event', async () => {
eventHub.$emit(`toggle-issue-form-${wrapper.vm.list.id}`); eventHub.$emit(`toggle-issue-form-${wrapper.vm.list.id}`);
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-new-issue-form').exists()).toBe(true); expect(wrapper.find('.board-new-issue-form').exists()).toBe(true);
}); });
...@@ -86,7 +87,7 @@ describe('Board list component', () => { ...@@ -86,7 +87,7 @@ describe('Board list component', () => {
it('shows count list item', async () => { it('shows count list item', async () => {
wrapper.vm.showCount = true; wrapper.vm.showCount = true;
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-list-count').exists()).toBe(true); expect(wrapper.find('.board-list-count').exists()).toBe(true);
expect(wrapper.find('.board-list-count').text()).toBe('Showing all issues'); expect(wrapper.find('.board-list-count').text()).toBe('Showing all issues');
...@@ -95,7 +96,7 @@ describe('Board list component', () => { ...@@ -95,7 +96,7 @@ describe('Board list component', () => {
it('sets data attribute with invalid id', async () => { it('sets data attribute with invalid id', async () => {
wrapper.vm.showCount = true; wrapper.vm.showCount = true;
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-list-count').attributes('data-issue-id')).toBe('-1'); expect(wrapper.find('.board-list-count').attributes('data-issue-id')).toBe('-1');
}); });
}); });
...@@ -127,7 +128,7 @@ describe('Board list component', () => { ...@@ -127,7 +128,7 @@ describe('Board list component', () => {
}, },
}); });
await wrapper.vm.$nextTick(); await nextTick();
expect(findIssueCountLoadingIcon().exists()).toBe(true); expect(findIssueCountLoadingIcon().exists()).toBe(true);
}); });
...@@ -139,9 +140,9 @@ describe('Board list component', () => { ...@@ -139,9 +140,9 @@ describe('Board list component', () => {
}, },
}); });
await wrapper.vm.$nextTick(); await nextTick();
await waitForPromises(); await waitForPromises();
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues'); expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues');
}); });
...@@ -158,7 +159,7 @@ describe('Board list component', () => { ...@@ -158,7 +159,7 @@ describe('Board list component', () => {
it('sets background to bg-danger-100', async () => { it('sets background to bg-danger-100', async () => {
wrapper.setProps({ list: { issuesCount: 4, maxIssueCount: 3 } }); wrapper.setProps({ list: { issuesCount: 4, maxIssueCount: 3 } });
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find('.bg-danger-100').exists()).toBe(true); expect(wrapper.find('.bg-danger-100').exists()).toBe(true);
}); });
}); });
......
spec/frontend/boards/components/board_add_new_column_trigger_spec.js
View file @ f8c7f771
import { GlButton } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mountExtended } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue'; import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
...@@ -49,7 +49,7 @@ describe('BoardAddNewColumnTrigger', () => { ...@@ -49,7 +49,7 @@ describe('BoardAddNewColumnTrigger', () => {
it('shows the tooltip', async () => { it('shows the tooltip', async () => {
wrapper.find(GlButton).vm.$emit('click'); wrapper.find(GlButton).vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
const tooltip = findTooltipText(); const tooltip = findTooltipText();
......
spec/frontend/boards/components/board_blocked_icon_spec.js
View file @ f8c7f771
import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui'; import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
...@@ -39,7 +39,7 @@ describe('BoardBlockedIcon', () => { ...@@ -39,7 +39,7 @@ describe('BoardBlockedIcon', () => {
const mouseenter = async () => { const mouseenter = async () => {
findGlIcon().vm.$emit('mouseenter'); findGlIcon().vm.$emit('mouseenter');
await wrapper.vm.$nextTick(); await nextTick();
await waitForApollo(); await waitForApollo();
}; };
......
spec/frontend/boards/components/board_card_spec.js
View file @ f8c7f771
import { GlLabel } from '@gitlab/ui'; import { GlLabel } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import BoardCard from '~/boards/components/board_card.vue'; import BoardCard from '~/boards/components/board_card.vue';
...@@ -65,12 +65,12 @@ describe('Board card', () => { ...@@ -65,12 +65,12 @@ describe('Board card', () => {
const selectCard = async () => { const selectCard = async () => {
wrapper.trigger('click'); wrapper.trigger('click');
await wrapper.vm.$nextTick(); await nextTick();
}; };
const multiSelectCard = async () => { const multiSelectCard = async () => {
wrapper.trigger('click', { ctrlKey: true }); wrapper.trigger('click', { ctrlKey: true });
await wrapper.vm.$nextTick(); await nextTick();
}; };
beforeEach(() => { beforeEach(() => {
......
spec/frontend/boards/components/board_list_header_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import Vuex from 'vuex'; import Vuex from 'vuex';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
...@@ -148,7 +148,7 @@ describe('Board List Header Component', () => { ...@@ -148,7 +148,7 @@ describe('Board List Header Component', () => {
findCaret().vm.$emit('click'); findCaret().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(toggleListCollapsedSpy).toHaveBeenCalledTimes(1); expect(toggleListCollapsedSpy).toHaveBeenCalledTimes(1);
}); });
...@@ -156,7 +156,7 @@ describe('Board List Header Component', () => { ...@@ -156,7 +156,7 @@ describe('Board List Header Component', () => {
createComponent({ withLocalStorage: false, currentUserId: 1 }); createComponent({ withLocalStorage: false, currentUserId: 1 });
findCaret().vm.$emit('click'); findCaret().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(updateListSpy).toHaveBeenCalledTimes(1); expect(updateListSpy).toHaveBeenCalledTimes(1);
expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(null); expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(null);
...@@ -168,7 +168,7 @@ describe('Board List Header Component', () => { ...@@ -168,7 +168,7 @@ describe('Board List Header Component', () => {
}); });
findCaret().vm.$emit('click'); findCaret().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(updateListSpy).not.toHaveBeenCalled(); expect(updateListSpy).not.toHaveBeenCalled();
expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(String(isCollapsed())); expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(String(isCollapsed()));
......
spec/frontend/boards/components/board_new_issue_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import BoardNewIssue from '~/boards/components/board_new_issue.vue'; import BoardNewIssue from '~/boards/components/board_new_issue.vue';
import BoardNewItem from '~/boards/components/board_new_item.vue'; import BoardNewItem from '~/boards/components/board_new_item.vue';
...@@ -45,7 +45,7 @@ describe('Issue boards new issue form', () => { ...@@ -45,7 +45,7 @@ describe('Issue boards new issue form', () => {
beforeEach(async () => { beforeEach(async () => {
wrapper = createComponent(); wrapper = createComponent();
await wrapper.vm.$nextTick(); await nextTick();
}); });
afterEach(() => { afterEach(() => {
...@@ -66,7 +66,7 @@ describe('Issue boards new issue form', () => { ...@@ -66,7 +66,7 @@ describe('Issue boards new issue form', () => {
it('calls addListNewIssue action when `board-new-item` emits form-submit event', async () => { it('calls addListNewIssue action when `board-new-item` emits form-submit event', async () => {
findBoardNewItem().vm.$emit('form-submit', { title: 'Foo' }); findBoardNewItem().vm.$emit('form-submit', { title: 'Foo' });
await wrapper.vm.$nextTick(); await nextTick();
expect(addListNewIssuesSpy).toHaveBeenCalledWith(expect.any(Object), { expect(addListNewIssuesSpy).toHaveBeenCalledWith(expect.any(Object), {
list: mockList, list: mockList,
issueInput: { issueInput: {
...@@ -83,7 +83,7 @@ describe('Issue boards new issue form', () => { ...@@ -83,7 +83,7 @@ describe('Issue boards new issue form', () => {
jest.spyOn(eventHub, '$emit').mockImplementation(); jest.spyOn(eventHub, '$emit').mockImplementation();
findBoardNewItem().vm.$emit('form-cancel'); findBoardNewItem().vm.$emit('form-cancel');
await wrapper.vm.$nextTick(); await nextTick();
expect(eventHub.$emit).toHaveBeenCalledWith(`toggle-issue-form-${mockList.id}`); expect(eventHub.$emit).toHaveBeenCalledWith(`toggle-issue-form-${mockList.id}`);
}); });
......
spec/frontend/boards/components/board_new_item_spec.js
View file @ f8c7f771
import { GlForm, GlFormInput, GlButton } from '@gitlab/ui'; import { GlForm, GlFormInput, GlButton } from '@gitlab/ui';
import { nextTick } from 'vue';
import { mountExtended } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import BoardNewItem from '~/boards/components/board_new_item.vue'; import BoardNewItem from '~/boards/components/board_new_item.vue';
...@@ -44,7 +45,7 @@ describe('BoardNewItem', () => { ...@@ -44,7 +45,7 @@ describe('BoardNewItem', () => {
expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true); expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true);
wrapper.find(GlFormInput).vm.$emit('input', 'hello'); wrapper.find(GlFormInput).vm.$emit('input', 'hello');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.findByTestId('create-button').props('disabled')).toBe(false); expect(wrapper.findByTestId('create-button').props('disabled')).toBe(false);
}); });
...@@ -54,7 +55,7 @@ describe('BoardNewItem', () => { ...@@ -54,7 +55,7 @@ describe('BoardNewItem', () => {
it('disables the Create Issue button', async () => { it('disables the Create Issue button', async () => {
wrapper.find(GlFormInput).vm.$emit('input', ' '); wrapper.find(GlFormInput).vm.$emit('input', ' ');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true); expect(wrapper.findByTestId('create-button').props('disabled')).toBe(true);
}); });
...@@ -124,7 +125,7 @@ describe('BoardNewItem', () => { ...@@ -124,7 +125,7 @@ describe('BoardNewItem', () => {
it('emits `form-cancel` event and clears title value when `reset` is triggered on gl-form', async () => { it('emits `form-cancel` event and clears title value when `reset` is triggered on gl-form', async () => {
titleInput().setValue('Foo'); titleInput().setValue('Foo');
await wrapper.vm.$nextTick(); await nextTick();
expect(titleInput().element.value).toBe('Foo'); expect(titleInput().element.value).toBe('Foo');
await glForm().trigger('reset'); await glForm().trigger('reset');
......
spec/frontend/boards/components/board_settings_sidebar_spec.js
View file @ f8c7f771
import { GlDrawer, GlLabel } from '@gitlab/ui'; import { GlDrawer, GlLabel } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { MountingPortal } from 'portal-vue'; import { MountingPortal } from 'portal-vue';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { stubComponent } from 'helpers/stub_component'; import { stubComponent } from 'helpers/stub_component';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
...@@ -86,7 +86,7 @@ describe('BoardSettingsSidebar', () => { ...@@ -86,7 +86,7 @@ describe('BoardSettingsSidebar', () => {
findDrawer().vm.$emit('close'); findDrawer().vm.$emit('close');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find(GlDrawer).exists()).toBe(false); expect(wrapper.find(GlDrawer).exists()).toBe(false);
}); });
...@@ -96,7 +96,7 @@ describe('BoardSettingsSidebar', () => { ...@@ -96,7 +96,7 @@ describe('BoardSettingsSidebar', () => {
sidebarEventHub.$emit('sidebar.closeAll'); sidebarEventHub.$emit('sidebar.closeAll');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.find(GlDrawer).exists()).toBe(false); expect(wrapper.find(GlDrawer).exists()).toBe(false);
}); });
......
spec/frontend/boards/components/sidebar/board_editable_item_spec.js
View file @ f8c7f771
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BoardSidebarItem from '~/boards/components/sidebar/board_editable_item.vue'; import BoardSidebarItem from '~/boards/components/sidebar/board_editable_item.vue';
describe('boards sidebar remove issue', () => { describe('boards sidebar remove issue', () => {
...@@ -79,17 +80,16 @@ describe('boards sidebar remove issue', () => { ...@@ -79,17 +80,16 @@ describe('boards sidebar remove issue', () => {
createComponent({ canUpdate: true, slots }); createComponent({ canUpdate: true, slots });
findEditButton().vm.$emit('click'); findEditButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findCollapsed().isVisible()).toBe(false); expect(findCollapsed().isVisible()).toBe(false);
expect(findExpanded().isVisible()).toBe(true); expect(findExpanded().isVisible()).toBe(true);
}); });
});
it('hides the header while editing if `toggleHeader` is true', async () => { it('hides the header while editing if `toggleHeader` is true', async () => {
createComponent({ canUpdate: true, props: { toggleHeader: true } }); createComponent({ canUpdate: true, props: { toggleHeader: true } });
findEditButton().vm.$emit('click'); findEditButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(findEditButton().isVisible()).toBe(false); expect(findEditButton().isVisible()).toBe(false);
expect(findTitle().isVisible()).toBe(false); expect(findTitle().isVisible()).toBe(false);
...@@ -101,14 +101,14 @@ describe('boards sidebar remove issue', () => { ...@@ -101,14 +101,14 @@ describe('boards sidebar remove issue', () => {
beforeEach(async () => { beforeEach(async () => {
createComponent({ canUpdate: true }); createComponent({ canUpdate: true });
findEditButton().vm.$emit('click'); findEditButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('hides expanded section and displays collapsed section', async () => { it('hides expanded section and displays collapsed section', async () => {
expect(findExpanded().isVisible()).toBe(true); expect(findExpanded().isVisible()).toBe(true);
document.body.click(); document.body.click();
await wrapper.vm.$nextTick(); await nextTick();
expect(findCollapsed().isVisible()).toBe(true); expect(findCollapsed().isVisible()).toBe(true);
expect(findExpanded().isVisible()).toBe(false); expect(findExpanded().isVisible()).toBe(false);
...@@ -117,7 +117,7 @@ describe('boards sidebar remove issue', () => { ...@@ -117,7 +117,7 @@ describe('boards sidebar remove issue', () => {
it('emits events', async () => { it('emits events', async () => {
document.body.click(); document.body.click();
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.emitted().close).toHaveLength(1); expect(wrapper.emitted().close).toHaveLength(1);
expect(wrapper.emitted()['off-click']).toHaveLength(1); expect(wrapper.emitted()['off-click']).toHaveLength(1);
...@@ -129,7 +129,7 @@ describe('boards sidebar remove issue', () => { ...@@ -129,7 +129,7 @@ describe('boards sidebar remove issue', () => {
findEditButton().vm.$emit('click'); findEditButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.emitted().open.length).toBe(1); expect(wrapper.emitted().open.length).toBe(1);
}); });
...@@ -139,7 +139,7 @@ describe('boards sidebar remove issue', () => { ...@@ -139,7 +139,7 @@ describe('boards sidebar remove issue', () => {
findEditButton().vm.$emit('click'); findEditButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
wrapper.vm.collapse({ emitEvent: false }); wrapper.vm.collapse({ emitEvent: false });
......
spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
View file @ f8c7f771
import { GlAlert, GlFormInput, GlForm } from '@gitlab/ui'; import { GlAlert, GlFormInput, GlForm } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
import { createStore } from '~/boards/stores'; import { createStore } from '~/boards/stores';
...@@ -75,7 +76,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { ...@@ -75,7 +76,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
}); });
findFormInput().vm.$emit('input', TEST_TITLE); findFormInput().vm.$emit('input', TEST_TITLE);
findForm().vm.$emit('submit', { preventDefault: () => {} }); findForm().vm.$emit('submit', { preventDefault: () => {} });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('collapses sidebar and renders new title', () => { it('collapses sidebar and renders new title', () => {
...@@ -98,7 +99,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { ...@@ -98,7 +99,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
jest.spyOn(wrapper.vm, 'setActiveItemTitle').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'setActiveItemTitle').mockImplementation(() => {});
findFormInput().vm.$emit('input', ''); findFormInput().vm.$emit('input', '');
findForm().vm.$emit('submit', { preventDefault: () => {} }); findForm().vm.$emit('submit', { preventDefault: () => {} });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('commits change to the server', () => { it('commits change to the server', () => {
...@@ -113,7 +114,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { ...@@ -113,7 +114,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
wrapper.vm.$refs.sidebarItem.expand(); wrapper.vm.$refs.sidebarItem.expand();
findFormInput().vm.$emit('input', TEST_TITLE); findFormInput().vm.$emit('input', TEST_TITLE);
findEditableItem().vm.$emit('off-click'); findEditableItem().vm.$emit('off-click');
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('does not collapses sidebar and shows alert', () => { it('does not collapses sidebar and shows alert', () => {
...@@ -148,7 +149,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { ...@@ -148,7 +149,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
}); });
findFormInput().vm.$emit('input', TEST_TITLE); findFormInput().vm.$emit('input', TEST_TITLE);
findCancelButton().vm.$emit('click'); findCancelButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('collapses sidebar and render former title', () => { it('collapses sidebar and render former title', () => {
...@@ -168,7 +169,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { ...@@ -168,7 +169,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {}); jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {});
findFormInput().vm.$emit('input', 'Invalid title'); findFormInput().vm.$emit('input', 'Invalid title');
findForm().vm.$emit('submit', { preventDefault: () => {} }); findForm().vm.$emit('submit', { preventDefault: () => {} });
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('collapses sidebar and renders former item title', () => { it('collapses sidebar and renders former item title', () => {
......
spec/frontend/boards/project_select_spec.js
View file @ f8c7f771
import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import ProjectSelect from '~/boards/components/project_select.vue'; import ProjectSelect from '~/boards/components/project_select.vue';
import defaultState from '~/boards/stores/state'; import defaultState from '~/boards/stores/state';
...@@ -88,7 +88,7 @@ describe('ProjectSelect component', () => { ...@@ -88,7 +88,7 @@ describe('ProjectSelect component', () => {
expect(findGlDropdownLoadingIcon().exists()).toBe(true); expect(findGlDropdownLoadingIcon().exists()).toBe(true);
await wrapper.vm.$nextTick(); await nextTick();
expect(findGlDropdownLoadingIcon().exists()).toBe(false); expect(findGlDropdownLoadingIcon().exists()).toBe(false);
}); });
......
spec/frontend/ci_lint/components/ci_lint_spec.js
View file @ f8c7f771
import { GlAlert } from '@gitlab/ui'; import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import CiLint from '~/ci_lint/components/ci_lint.vue'; import CiLint from '~/ci_lint/components/ci_lint.vue';
import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue'; import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
...@@ -81,7 +82,7 @@ describe('CI Lint', () => { ...@@ -81,7 +82,7 @@ describe('CI Lint', () => {
it('validation displays results', async () => { it('validation displays results', async () => {
findValidateBtn().vm.$emit('click'); findValidateBtn().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(findValidateBtn().props('loading')).toBe(true); expect(findValidateBtn().props('loading')).toBe(true);
...@@ -96,7 +97,7 @@ describe('CI Lint', () => { ...@@ -96,7 +97,7 @@ describe('CI Lint', () => {
findValidateBtn().vm.$emit('click'); findValidateBtn().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(findValidateBtn().props('loading')).toBe(true); expect(findValidateBtn().props('loading')).toBe(true);
......
spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
View file @ f8c7f771
import { GlTable, GlBadge } from '@gitlab/ui'; import { GlTable, GlBadge } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import TriggersList from '~/ci_settings_pipeline_triggers/components/triggers_list.vue'; import TriggersList from '~/ci_settings_pipeline_triggers/components/triggers_list.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
...@@ -25,10 +26,10 @@ describe('TriggersList', () => { ...@@ -25,10 +26,10 @@ describe('TriggersList', () => {
const findEditBtn = (i) => findRowAt(i).find('[data-testid="edit-btn"]'); const findEditBtn = (i) => findRowAt(i).find('[data-testid="edit-btn"]');
const findRevokeBtn = (i) => findRowAt(i).find('[data-testid="trigger_revoke_button"]'); const findRevokeBtn = (i) => findRowAt(i).find('[data-testid="trigger_revoke_button"]');
beforeEach(() => { beforeEach(async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays a table with expected headers', () => { it('displays a table with expected headers', () => {
......
spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js
View file @ f8c7f771
import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue'; import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
...@@ -73,7 +73,7 @@ describe('Ci environments dropdown', () => { ...@@ -73,7 +73,7 @@ describe('Ci environments dropdown', () => {
describe('Environments found', () => { describe('Environments found', () => {
beforeEach(async () => { beforeEach(async () => {
createComponent('prod'); createComponent('prod');
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders only the environment searched for', () => { it('renders only the environment searched for', () => {
...@@ -110,7 +110,7 @@ describe('Ci environments dropdown', () => { ...@@ -110,7 +110,7 @@ describe('Ci environments dropdown', () => {
it('should emit createClicked if an environment is clicked', async () => { it('should emit createClicked if an environment is clicked', async () => {
createComponent('newscope'); createComponent('newscope');
await wrapper.vm.$nextTick(); await nextTick();
findDropdownItemByIndex(1).vm.$emit('click'); findDropdownItemByIndex(1).vm.$emit('click');
expect(wrapper.emitted('createClicked')).toEqual([['newscope']]); expect(wrapper.emitted('createClicked')).toEqual([['newscope']]);
}); });
......
spec/frontend/ci_variable_list/components/ci_variable_table_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue'; import CiVariableTable from '~/ci_variable_list/components/ci_variable_table.vue';
import createStore from '~/ci_variable_list/store'; import createStore from '~/ci_variable_list/store';
...@@ -41,15 +41,14 @@ describe('Ci variable table', () => { ...@@ -41,15 +41,14 @@ describe('Ci variable table', () => {
expect(findEmptyVariablesPlaceholder().exists()).toBe(true); expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
}); });
it('displays correct amount of variables present and no empty message', () => { it('displays correct amount of variables present and no empty message', async () => {
store.state.variables = mockData.mockVariables; store.state.variables = mockData.mockVariables;
return wrapper.vm.$nextTick(() => { await nextTick();
expect(wrapper.findAll('.js-ci-variable-row').length).toBe(1); expect(wrapper.findAll('.js-ci-variable-row').length).toBe(1);
expect(findEmptyVariablesPlaceholder().exists()).toBe(false); expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
}); });
}); });
});
describe('Table click actions', () => { describe('Table click actions', () => {
beforeEach(() => { beforeEach(() => {
......
spec/frontend/clusters/components/new_cluster_spec.js
View file @ f8c7f771
import { GlLink, GlSprintf } from '@gitlab/ui'; import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import NewCluster from '~/clusters/components/new_cluster.vue'; import NewCluster from '~/clusters/components/new_cluster.vue';
import createClusterStore from '~/clusters/stores/new_cluster'; import createClusterStore from '~/clusters/stores/new_cluster';
...@@ -7,10 +8,10 @@ describe('NewCluster', () => { ...@@ -7,10 +8,10 @@ describe('NewCluster', () => {
let store; let store;
let wrapper; let wrapper;
const createWrapper = () => { const createWrapper = async () => {
store = createClusterStore({ clusterConnectHelpPath: '/some/help/path' }); store = createClusterStore({ clusterConnectHelpPath: '/some/help/path' });
wrapper = shallowMount(NewCluster, { store, stubs: { GlLink, GlSprintf } }); wrapper = shallowMount(NewCluster, { store, stubs: { GlLink, GlSprintf } });
return wrapper.vm.$nextTick(); await nextTick();
}; };
const findDescription = () => wrapper.find(GlSprintf); const findDescription = () => wrapper.find(GlSprintf);
......
spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
View file @ f8c7f771
import { GlModal, GlSprintf } from '@gitlab/ui'; import { GlModal, GlSprintf } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { stubComponent } from 'helpers/stub_component'; import { stubComponent } from 'helpers/stub_component';
import RemoveClusterConfirmation from '~/clusters/components/remove_cluster_confirmation.vue'; import RemoveClusterConfirmation from '~/clusters/components/remove_cluster_confirmation.vue';
import SplitButton from '~/vue_shared/components/split_button.vue'; import SplitButton from '~/vue_shared/components/split_button.vue';
...@@ -43,7 +44,7 @@ describe('Remove cluster confirmation modal', () => { ...@@ -43,7 +44,7 @@ describe('Remove cluster confirmation modal', () => {
it('opens modal with "cleanup" option', async () => { it('opens modal with "cleanup" option', async () => {
findSplitButton().vm.$emit('remove-cluster-and-cleanup'); findSplitButton().vm.$emit('remove-cluster-and-cleanup');
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal().vm.show).toHaveBeenCalled(); expect(findModal().vm.show).toHaveBeenCalled();
expect(wrapper.vm.confirmCleanup).toEqual(true); expect(wrapper.vm.confirmCleanup).toEqual(true);
...@@ -55,7 +56,7 @@ describe('Remove cluster confirmation modal', () => { ...@@ -55,7 +56,7 @@ describe('Remove cluster confirmation modal', () => {
it('opens modal without "cleanup" option', async () => { it('opens modal without "cleanup" option', async () => {
findSplitButton().vm.$emit('remove-cluster'); findSplitButton().vm.$emit('remove-cluster');
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal().vm.show).toHaveBeenCalled(); expect(findModal().vm.show).toHaveBeenCalled();
expect(wrapper.vm.confirmCleanup).toEqual(false); expect(wrapper.vm.confirmCleanup).toEqual(false);
......
spec/frontend/clusters_list/components/agent_options_spec.js
View file @ f8c7f771
import { GlDropdown, GlDropdownItem, GlModal, GlFormInput } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlModal, GlFormInput } from '@gitlab/ui';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { ENTER_KEY } from '~/lib/utils/keys'; import { ENTER_KEY } from '~/lib/utils/keys';
...@@ -54,7 +54,7 @@ describe('AgentOptions', () => { ...@@ -54,7 +54,7 @@ describe('AgentOptions', () => {
}); });
}; };
const createWrapper = ({ mutationResponse = mockDeleteResponse } = {}) => { const createWrapper = async ({ mutationResponse = mockDeleteResponse } = {}) => {
apolloProvider = createMockApolloProvider({ mutationResponse }); apolloProvider = createMockApolloProvider({ mutationResponse });
const provide = { const provide = {
projectPath, projectPath,
...@@ -77,7 +77,7 @@ describe('AgentOptions', () => { ...@@ -77,7 +77,7 @@ describe('AgentOptions', () => {
wrapper.vm.$refs.modal.hide = jest.fn(); wrapper.vm.$refs.modal.hide = jest.fn();
writeQuery(); writeQuery();
return wrapper.vm.$nextTick(); await nextTick();
}; };
const submitAgentToDelete = async () => { const submitAgentToDelete = async () => {
......
spec/frontend/clusters_list/components/agents_spec.js
View file @ f8c7f771
import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui'; import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue'; import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
import AgentTable from '~/clusters_list/components/agent_table.vue'; import AgentTable from '~/clusters_list/components/agent_table.vue';
import Agents from '~/clusters_list/components/agents.vue'; import Agents from '~/clusters_list/components/agents.vue';
...@@ -21,7 +22,13 @@ describe('Agents', () => { ...@@ -21,7 +22,13 @@ describe('Agents', () => {
projectPath: 'path/to/project', projectPath: 'path/to/project',
}; };
const createWrapper = ({ props = {}, agents = [], pageInfo = null, trees = [], count = 0 }) => { const createWrapper = async ({
props = {},
agents = [],
pageInfo = null,
trees = [],
count = 0,
}) => {
const provide = provideData; const provide = provideData;
const apolloQueryResponse = { const apolloQueryResponse = {
data: { data: {
...@@ -47,7 +54,7 @@ describe('Agents', () => { ...@@ -47,7 +54,7 @@ describe('Agents', () => {
provide: provideData, provide: provideData,
}); });
return wrapper.vm.$nextTick(); await nextTick();
}; };
const findAgentTable = () => wrapper.find(AgentTable); const findAgentTable = () => wrapper.find(AgentTable);
...@@ -239,14 +246,14 @@ describe('Agents', () => { ...@@ -239,14 +246,14 @@ describe('Agents', () => {
}, },
}; };
beforeEach(() => { beforeEach(async () => {
wrapper = shallowMount(Agents, { wrapper = shallowMount(Agents, {
mocks, mocks,
propsData: defaultProps, propsData: defaultProps,
provide: provideData, provide: provideData,
}); });
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays a loading icon', () => { it('displays a loading icon', () => {
......
spec/frontend/clusters_list/components/ancestor_notice_spec.js
View file @ f8c7f771
import { GlLink, GlSprintf, GlAlert } from '@gitlab/ui'; import { GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue'; import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue';
import ClusterStore from '~/clusters_list/store'; import ClusterStore from '~/clusters_list/store';
...@@ -7,10 +8,10 @@ describe('ClustersAncestorNotice', () => { ...@@ -7,10 +8,10 @@ describe('ClustersAncestorNotice', () => {
let store; let store;
let wrapper; let wrapper;
const createWrapper = () => { const createWrapper = async () => {
store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' }); store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' });
wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf, GlAlert } }); wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf, GlAlert } });
return wrapper.vm.$nextTick(); await nextTick();
}; };
beforeEach(() => { beforeEach(() => {
...@@ -22,9 +23,9 @@ describe('ClustersAncestorNotice', () => { ...@@ -22,9 +23,9 @@ describe('ClustersAncestorNotice', () => {
}); });
describe('when cluster does not have ancestors', () => { describe('when cluster does not have ancestors', () => {
beforeEach(() => { beforeEach(async () => {
store.state.hasAncestorClusters = false; store.state.hasAncestorClusters = false;
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays no notice', () => { it('displays no notice', () => {
...@@ -33,9 +34,9 @@ describe('ClustersAncestorNotice', () => { ...@@ -33,9 +34,9 @@ describe('ClustersAncestorNotice', () => {
}); });
describe('when cluster has ancestors', () => { describe('when cluster has ancestors', () => {
beforeEach(() => { beforeEach(async () => {
store.state.hasAncestorClusters = true; store.state.hasAncestorClusters = true;
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays notice text', () => { it('displays notice text', () => {
......
spec/frontend/clusters_list/components/clusters_spec.js
View file @ f8c7f771
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import Clusters from '~/clusters_list/components/clusters.vue'; import Clusters from '~/clusters_list/components/clusters.vue';
import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue'; import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue';
import ClusterStore from '~/clusters_list/store'; import ClusterStore from '~/clusters_list/store';
...@@ -176,9 +177,9 @@ describe('Clusters', () => { ...@@ -176,9 +177,9 @@ describe('Clusters', () => {
}); });
describe('nodes finish loading', () => { describe('nodes finish loading', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.vm.$store.state.loadingNodes = false; wrapper.vm.$store.state.loadingNodes = false;
return wrapper.vm.$nextTick(); await nextTick();
}); });
it.each` it.each`
......
spec/frontend/clusters_list/components/node_error_help_text_spec.js
View file @ f8c7f771
import { GlPopover } from '@gitlab/ui'; import { GlPopover } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import NodeErrorHelpText from '~/clusters_list/components/node_error_help_text.vue'; import NodeErrorHelpText from '~/clusters_list/components/node_error_help_text.vue';
describe('NodeErrorHelpText', () => { describe('NodeErrorHelpText', () => {
let wrapper; let wrapper;
const createWrapper = (propsData) => { const createWrapper = async (propsData) => {
wrapper = shallowMount(NodeErrorHelpText, { propsData, stubs: { GlPopover } }); wrapper = shallowMount(NodeErrorHelpText, { propsData, stubs: { GlPopover } });
return wrapper.vm.$nextTick(); await nextTick();
}; };
const findPopover = () => wrapper.find(GlPopover); const findPopover = () => wrapper.find(GlPopover);
......
spec/frontend/commit/commit_pipeline_status_component_spec.js
View file @ f8c7f771
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import { nextTick } from 'vue';
import fixture from 'test_fixtures/pipelines/pipelines.json'; import fixture from 'test_fixtures/pipelines/pipelines.json';
import createFlash from '~/flash'; import createFlash from '~/flash';
import Poll from '~/lib/utils/poll'; import Poll from '~/lib/utils/poll';
...@@ -112,7 +113,7 @@ describe('Commit pipeline status component', () => { ...@@ -112,7 +113,7 @@ describe('Commit pipeline status component', () => {
createComponent(); createComponent();
}); });
it('shows the loading icon at start', () => { it('shows the loading icon at start', async () => {
createComponent(); createComponent();
expect(findLoader().exists()).toBe(true); expect(findLoader().exists()).toBe(true);
...@@ -120,17 +121,16 @@ describe('Commit pipeline status component', () => { ...@@ -120,17 +121,16 @@ describe('Commit pipeline status component', () => {
data: { pipelines: [] }, data: { pipelines: [] },
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findLoader().exists()).toBe(false); expect(findLoader().exists()).toBe(false);
}); });
});
describe('is successful', () => { describe('is successful', () => {
beforeEach(() => { beforeEach(async () => {
pollConfig.successCallback({ pollConfig.successCallback({
data: { pipelines: [{ details: { status: mockCiStatus } }] }, data: { pipelines: [{ details: { status: mockCiStatus } }] },
}); });
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('does not render loader', () => { it('does not render loader', () => {
......
spec/frontend/commit/pipelines/pipelines_table_spec.js
View file @ f8c7f771
import { GlEmptyState, GlLoadingIcon, GlModal, GlTableLite } from '@gitlab/ui'; import { GlEmptyState, GlLoadingIcon, GlModal, GlTableLite } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import fixture from 'test_fixtures/pipelines/pipelines.json'; import fixture from 'test_fixtures/pipelines/pipelines.json';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
...@@ -238,7 +239,7 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -238,7 +239,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
it('on desktop, shows a security warning modal', async () => { it('on desktop, shows a security warning modal', async () => {
await findRunPipelineBtn().trigger('click'); await findRunPipelineBtn().trigger('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(findModal()).not.toBeNull(); expect(findModal()).not.toBeNull();
}); });
......
spec/frontend/contributors/component/contributors_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import ContributorsCharts from '~/contributors/components/contributors.vue'; import ContributorsCharts from '~/contributors/components/contributors.vue';
import { createStore } from '~/contributors/stores'; import { createStore } from '~/contributors/stores';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -49,20 +49,18 @@ describe('Contributors charts', () => { ...@@ -49,20 +49,18 @@ describe('Contributors charts', () => {
expect(axios.get).toHaveBeenCalledWith(endpoint); expect(axios.get).toHaveBeenCalledWith(endpoint);
}); });
it('should display loader whiled loading data', () => { it('should display loader whiled loading data', async () => {
wrapper.vm.$store.state.loading = true; wrapper.vm.$store.state.loading = true;
return wrapper.vm.$nextTick(() => { await nextTick();
expect(wrapper.find('.contributors-loader').exists()).toBe(true); expect(wrapper.find('.contributors-loader').exists()).toBe(true);
}); });
});
it('should render charts when loading completed and there is chart data', () => { it('should render charts when loading completed and there is chart data', async () => {
wrapper.vm.$store.state.loading = false; wrapper.vm.$store.state.loading = false;
wrapper.vm.$store.state.chartData = chartData; wrapper.vm.$store.state.chartData = chartData;
return wrapper.vm.$nextTick(() => { await nextTick();
expect(wrapper.find('.contributors-loader').exists()).toBe(false); expect(wrapper.find('.contributors-loader').exists()).toBe(false);
expect(wrapper.find('.contributors-charts').exists()).toBe(true); expect(wrapper.find('.contributors-charts').exists()).toBe(true);
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
}); });
spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js
View file @ f8c7f771
...@@ -2,6 +2,7 @@ import { GlIcon } from '@gitlab/ui'; ...@@ -2,6 +2,7 @@ import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import $ from 'jquery'; import $ from 'jquery';
import { nextTick } from 'vue';
import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue'; import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
...@@ -18,35 +19,31 @@ describe('ClusterFormDropdown', () => { ...@@ -18,35 +19,31 @@ describe('ClusterFormDropdown', () => {
afterEach(() => wrapper.destroy()); afterEach(() => wrapper.destroy());
describe('when initial value is provided', () => { describe('when initial value is provided', () => {
it('sets selectedItem to initial value', () => { it('sets selectedItem to initial value', async () => {
wrapper.setProps({ items, value: secondItem.value }); wrapper.setProps({ items, value: secondItem.value });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name); expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
}); });
}); });
});
describe('when no item is selected', () => { describe('when no item is selected', () => {
it('displays placeholder text', () => { it('displays placeholder text', async () => {
const placeholder = 'placeholder'; const placeholder = 'placeholder';
wrapper.setProps({ placeholder }); wrapper.setProps({ placeholder });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder); expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder);
}); });
}); });
});
describe('when an item is selected', () => { describe('when an item is selected', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.setProps({ items }); wrapper.setProps({ items });
await nextTick();
return wrapper.vm.$nextTick().then(() => {
wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); wrapper.findAll('.js-dropdown-item').at(1).trigger('click');
return wrapper.vm.$nextTick(); await nextTick();
});
}); });
it('emits input event with selected item', () => { it('emits input event with selected item', () => {
...@@ -57,18 +54,16 @@ describe('ClusterFormDropdown', () => { ...@@ -57,18 +54,16 @@ describe('ClusterFormDropdown', () => {
describe('when multiple items are selected', () => { describe('when multiple items are selected', () => {
const value = ['1']; const value = ['1'];
beforeEach(() => { beforeEach(async () => {
wrapper.setProps({ items, multiple: true, value }); wrapper.setProps({ items, multiple: true, value });
return wrapper.vm
.$nextTick() await nextTick();
.then(() => {
wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); wrapper.findAll('.js-dropdown-item').at(0).trigger('click');
return wrapper.vm.$nextTick();
}) await nextTick();
.then(() => {
wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); wrapper.findAll('.js-dropdown-item').at(1).trigger('click');
return wrapper.vm.$nextTick();
}); await nextTick();
}); });
it('emits input event with an array of selected items', () => { it('emits input event with an array of selected items', () => {
...@@ -77,9 +72,9 @@ describe('ClusterFormDropdown', () => { ...@@ -77,9 +72,9 @@ describe('ClusterFormDropdown', () => {
}); });
describe('when multiple items can be selected', () => { describe('when multiple items can be selected', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.setProps({ items, multiple: true, value: firstItem.value }); wrapper.setProps({ items, multiple: true, value: firstItem.value });
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays a checked GlIcon next to the item', () => { it('displays a checked GlIcon next to the item', () => {
...@@ -89,19 +84,18 @@ describe('ClusterFormDropdown', () => { ...@@ -89,19 +84,18 @@ describe('ClusterFormDropdown', () => {
}); });
describe('when multiple values can be selected and initial value is null', () => { describe('when multiple values can be selected and initial value is null', () => {
it('emits input event with an array of a single selected item', () => { it('emits input event with an array of a single selected item', async () => {
wrapper.setProps({ items, multiple: true, value: null }); wrapper.setProps({ items, multiple: true, value: null });
return wrapper.vm.$nextTick().then(() => { await nextTick();
wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); wrapper.findAll('.js-dropdown-item').at(0).trigger('click');
expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]); expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]);
}); });
}); });
});
describe('when an item is selected and has a custom label property', () => { describe('when an item is selected and has a custom label property', () => {
it('displays selected item custom label', () => { it('displays selected item custom label', async () => {
const labelProperty = 'customLabel'; const labelProperty = 'customLabel';
const label = 'Name'; const label = 'Name';
const currentValue = '1'; const currentValue = '1';
...@@ -109,11 +103,10 @@ describe('ClusterFormDropdown', () => { ...@@ -109,11 +103,10 @@ describe('ClusterFormDropdown', () => {
wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue }); wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label); expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label);
}); });
}); });
});
describe('when loading', () => { describe('when loading', () => {
it('dropdown button isLoading', async () => { it('dropdown button isLoading', async () => {
...@@ -123,86 +116,79 @@ describe('ClusterFormDropdown', () => { ...@@ -123,86 +116,79 @@ describe('ClusterFormDropdown', () => {
}); });
describe('when loading and loadingText is provided', () => { describe('when loading and loadingText is provided', () => {
it('uses loading text as toggle button text', () => { it('uses loading text as toggle button text', async () => {
const loadingText = 'loading text'; const loadingText = 'loading text';
wrapper.setProps({ loading: true, loadingText }); wrapper.setProps({ loading: true, loadingText });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText); expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText);
}); });
}); });
});
describe('when disabled', () => { describe('when disabled', () => {
it('dropdown button isDisabled', () => { it('dropdown button isDisabled', async () => {
wrapper.setProps({ disabled: true }); wrapper.setProps({ disabled: true });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true); expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true);
}); });
}); });
});
describe('when disabled and disabledText is provided', () => { describe('when disabled and disabledText is provided', () => {
it('uses disabled text as toggle button text', () => { it('uses disabled text as toggle button text', async () => {
const disabledText = 'disabled text'; const disabledText = 'disabled text';
wrapper.setProps({ disabled: true, disabledText }); wrapper.setProps({ disabled: true, disabledText });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText); expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText);
}); });
}); });
});
describe('when has errors', () => { describe('when has errors', () => {
it('sets border-danger class selector to dropdown toggle', () => { it('sets border-danger class selector to dropdown toggle', async () => {
wrapper.setProps({ hasErrors: true }); wrapper.setProps({ hasErrors: true });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true); expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true);
}); });
}); });
});
describe('when has errors and an error message', () => { describe('when has errors and an error message', () => {
it('displays error message', () => { it('displays error message', async () => {
const errorMessage = 'error message'; const errorMessage = 'error message';
wrapper.setProps({ hasErrors: true, errorMessage }); wrapper.setProps({ hasErrors: true, errorMessage });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage); expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
}); });
}); });
});
describe('when no results are available', () => { describe('when no results are available', () => {
it('displays empty text', () => { it('displays empty text', async () => {
const emptyText = 'error message'; const emptyText = 'error message';
wrapper.setProps({ items: [], emptyText }); wrapper.setProps({ items: [], emptyText });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText); expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText);
}); });
}); });
});
it('displays search field placeholder', () => { it('displays search field placeholder', async () => {
const searchFieldPlaceholder = 'Placeholder'; const searchFieldPlaceholder = 'Placeholder';
wrapper.setProps({ searchFieldPlaceholder }); wrapper.setProps({ searchFieldPlaceholder });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual( expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual(
searchFieldPlaceholder, searchFieldPlaceholder,
); );
}); });
});
it('it filters results by search query', () => { it('it filters results by search query', async () => {
const searchQuery = secondItem.name; const searchQuery = secondItem.name;
wrapper.setProps({ items }); wrapper.setProps({ items });
...@@ -210,21 +196,19 @@ describe('ClusterFormDropdown', () => { ...@@ -210,21 +196,19 @@ describe('ClusterFormDropdown', () => {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ searchQuery }); wrapper.setData({ searchQuery });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1); expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1);
expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name); expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name);
}); });
});
it('focuses dropdown search input when dropdown is displayed', () => { it('focuses dropdown search input when dropdown is displayed', async () => {
const dropdownEl = wrapper.find('.dropdown').element; const dropdownEl = wrapper.find('.dropdown').element;
expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false); expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false);
$(dropdownEl).trigger('shown.bs.dropdown'); $(dropdownEl).trigger('shown.bs.dropdown');
return wrapper.vm.$nextTick(() => { await nextTick();
expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true); expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true);
}); });
});
}); });
spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue'; import GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue';
import createState from '~/create_cluster/gke_cluster/store/state'; import createState from '~/create_cluster/gke_cluster/store/state';
...@@ -73,7 +73,7 @@ describe('GkeMachineTypeDropdown', () => { ...@@ -73,7 +73,7 @@ describe('GkeMachineTypeDropdown', () => {
expect(dropdownButtonLabel()).toBe(LABELS.DISABLED_NO_ZONE); expect(dropdownButtonLabel()).toBe(LABELS.DISABLED_NO_ZONE);
}); });
it('returns loading toggle text', () => { it('returns loading toggle text', async () => {
store = createStore(); store = createStore();
wrapper = createComponent(store); wrapper = createComponent(store);
...@@ -81,10 +81,9 @@ describe('GkeMachineTypeDropdown', () => { ...@@ -81,10 +81,9 @@ describe('GkeMachineTypeDropdown', () => {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: true }); wrapper.setData({ isLoading: true });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(dropdownButtonLabel()).toBe(LABELS.LOADING); expect(dropdownButtonLabel()).toBe(LABELS.LOADING);
}); });
});
it('returns default toggle text', () => { it('returns default toggle text', () => {
store = createStore( store = createStore(
...@@ -113,7 +112,7 @@ describe('GkeMachineTypeDropdown', () => { ...@@ -113,7 +112,7 @@ describe('GkeMachineTypeDropdown', () => {
}); });
describe('form input', () => { describe('form input', () => {
it('reflects new value when dropdown item is clicked', () => { it('reflects new value when dropdown item is clicked', async () => {
store = createStore({ store = createStore({
machineTypes: gapiMachineTypesResponseMock.items, machineTypes: gapiMachineTypesResponseMock.items,
}); });
...@@ -123,9 +122,8 @@ describe('GkeMachineTypeDropdown', () => { ...@@ -123,9 +122,8 @@ describe('GkeMachineTypeDropdown', () => {
wrapper.find('.dropdown-content button').trigger('click'); wrapper.find('.dropdown-content button').trigger('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(setMachineType).toHaveBeenCalledWith(expect.anything(), selectedMachineTypeMock); expect(setMachineType).toHaveBeenCalledWith(expect.anything(), selectedMachineTypeMock);
}); });
}); });
});
}); });
spec/frontend/create_cluster/gke_cluster/components/gke_project_id_dropdown_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue'; import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue';
import createState from '~/create_cluster/gke_cluster/store/state'; import createState from '~/create_cluster/gke_cluster/store/state';
...@@ -78,19 +78,18 @@ describe('GkeProjectIdDropdown', () => { ...@@ -78,19 +78,18 @@ describe('GkeProjectIdDropdown', () => {
expect(dropdownButtonLabel()).toBe(LABELS.VALIDATING_PROJECT_BILLING); expect(dropdownButtonLabel()).toBe(LABELS.VALIDATING_PROJECT_BILLING);
}); });
it('returns default toggle text', () => { it('returns default toggle text', async () => {
bootstrap(); bootstrap();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false }); wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT); expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT);
}); });
});
it('returns project name if project selected', () => { it('returns project name if project selected', async () => {
bootstrap( bootstrap(
{ {
selectedProject: selectedProjectMock, selectedProject: selectedProjectMock,
...@@ -103,12 +102,11 @@ describe('GkeProjectIdDropdown', () => { ...@@ -103,12 +102,11 @@ describe('GkeProjectIdDropdown', () => {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false }); wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(dropdownButtonLabel()).toBe(selectedProjectMock.name); expect(dropdownButtonLabel()).toBe(selectedProjectMock.name);
}); });
});
it('returns empty toggle text', () => { it('returns empty toggle text', async () => {
bootstrap({ bootstrap({
projects: null, projects: null,
}); });
...@@ -116,26 +114,24 @@ describe('GkeProjectIdDropdown', () => { ...@@ -116,26 +114,24 @@ describe('GkeProjectIdDropdown', () => {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: false }); wrapper.setData({ isLoading: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(dropdownButtonLabel()).toBe(LABELS.EMPTY); expect(dropdownButtonLabel()).toBe(LABELS.EMPTY);
}); });
}); });
});
describe('selectItem', () => { describe('selectItem', () => {
it('reflects new value when dropdown item is clicked', () => { it('reflects new value when dropdown item is clicked', async () => {
bootstrap({ projects: gapiProjectsResponseMock.projects }); bootstrap({ projects: gapiProjectsResponseMock.projects });
expect(dropdownHiddenInputValue()).toBe(''); expect(dropdownHiddenInputValue()).toBe('');
wrapper.find('.dropdown-content button').trigger('click'); wrapper.find('.dropdown-content button').trigger('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(setProject).toHaveBeenCalledWith( expect(setProject).toHaveBeenCalledWith(
expect.anything(), expect.anything(),
gapiProjectsResponseMock.projects[0], gapiProjectsResponseMock.projects[0],
); );
}); });
}); });
});
}); });
spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import GkeZoneDropdown from '~/create_cluster/gke_cluster/components/gke_zone_dropdown.vue'; import GkeZoneDropdown from '~/create_cluster/gke_cluster/components/gke_zone_dropdown.vue';
import { createStore } from '~/create_cluster/gke_cluster/store'; import { createStore } from '~/create_cluster/gke_cluster/store';
import { import {
...@@ -46,11 +47,11 @@ describe('GkeZoneDropdown', () => { ...@@ -46,11 +47,11 @@ describe('GkeZoneDropdown', () => {
}); });
describe('isLoading', () => { describe('isLoading', () => {
beforeEach(() => { beforeEach(async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: true }); wrapper.setData({ isLoading: true });
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('returns loading toggle text', () => { it('returns loading toggle text', () => {
...@@ -59,10 +60,10 @@ describe('GkeZoneDropdown', () => { ...@@ -59,10 +60,10 @@ describe('GkeZoneDropdown', () => {
}); });
describe('project is set', () => { describe('project is set', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.vm.$store.commit(SET_PROJECT, selectedProjectMock); wrapper.vm.$store.commit(SET_PROJECT, selectedProjectMock);
wrapper.vm.$store.commit(SET_PROJECT_BILLING_STATUS, true); wrapper.vm.$store.commit(SET_PROJECT_BILLING_STATUS, true);
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('returns default toggle text', () => { it('returns default toggle text', () => {
...@@ -71,9 +72,9 @@ describe('GkeZoneDropdown', () => { ...@@ -71,9 +72,9 @@ describe('GkeZoneDropdown', () => {
}); });
describe('project is selected', () => { describe('project is selected', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.vm.setItem(selectedZoneMock); wrapper.vm.setItem(selectedZoneMock);
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('returns project name if project selected', () => { it('returns project name if project selected', () => {
...@@ -83,21 +84,20 @@ describe('GkeZoneDropdown', () => { ...@@ -83,21 +84,20 @@ describe('GkeZoneDropdown', () => {
}); });
describe('selectItem', () => { describe('selectItem', () => {
beforeEach(() => { beforeEach(async () => {
wrapper.vm.$store.commit(SET_ZONES, gapiZonesResponseMock.items); wrapper.vm.$store.commit(SET_ZONES, gapiZonesResponseMock.items);
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('reflects new value when dropdown item is clicked', () => { it('reflects new value when dropdown item is clicked', async () => {
const dropdown = wrapper.find(DropdownHiddenInput); const dropdown = wrapper.find(DropdownHiddenInput);
expect(dropdown.attributes('value')).toBe(''); expect(dropdown.attributes('value')).toBe('');
wrapper.find('.dropdown-content button').trigger('click'); wrapper.find('.dropdown-content button').trigger('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(dropdown.attributes('value')).toBe(selectedZoneMock); expect(dropdown.attributes('value')).toBe(selectedZoneMock);
}); });
}); });
});
}); });
spec/frontend/cycle_analytics/filter_bar_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex'; import Vuex from 'vuex';
...@@ -42,7 +42,7 @@ const defaultParams = { ...@@ -42,7 +42,7 @@ const defaultParams = {
}; };
async function shouldMergeUrlParams(wrapper, result) { async function shouldMergeUrlParams(wrapper, result) {
await wrapper.vm.$nextTick(); await nextTick();
expect(urlUtils.mergeUrlParams).toHaveBeenCalledWith(result, window.location.href, { expect(urlUtils.mergeUrlParams).toHaveBeenCalledWith(result, window.location.href, {
spreadArrays: true, spreadArrays: true,
}); });
......
spec/frontend/cycle_analytics/stage_table_spec.js
View file @ f8c7f771
import { GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui'; import { GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import StageTable from '~/cycle_analytics/components/stage_table.vue'; import StageTable from '~/cycle_analytics/components/stage_table.vue';
...@@ -263,7 +264,7 @@ describe('StageTable', () => { ...@@ -263,7 +264,7 @@ describe('StageTable', () => {
expect(wrapper.emitted('handleUpdatePagination')).toBeUndefined(); expect(wrapper.emitted('handleUpdatePagination')).toBeUndefined();
findPagination().vm.$emit('input', 2); findPagination().vm.$emit('input', 2);
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.emitted('handleUpdatePagination')[0]).toEqual([{ page: 2 }]); expect(wrapper.emitted('handleUpdatePagination')[0]).toEqual([{ page: 2 }]);
}); });
......
spec/frontend/cycle_analytics/value_stream_metrics_spec.js
View file @ f8c7f771
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { GlSingleStat } from '@gitlab/ui/dist/charts';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import metricsData from 'test_fixtures/projects/analytics/value_stream_analytics/summary.json'; import metricsData from 'test_fixtures/projects/analytics/value_stream_analytics/summary.json';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { METRIC_TYPE_SUMMARY } from '~/api/analytics_api'; import { METRIC_TYPE_SUMMARY } from '~/api/analytics_api';
...@@ -55,7 +56,7 @@ describe('ValueStreamMetrics', () => { ...@@ -55,7 +56,7 @@ describe('ValueStreamMetrics', () => {
}); });
it('will display a loader with pending requests', async () => { it('will display a loader with pending requests', async () => {
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true); expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true);
}); });
...@@ -67,7 +68,7 @@ describe('ValueStreamMetrics', () => { ...@@ -67,7 +68,7 @@ describe('ValueStreamMetrics', () => {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isLoading: true }); wrapper.setData({ isLoading: true });
await wrapper.vm.$nextTick(); await nextTick();
const components = findMetrics(); const components = findMetrics();
......
spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
View file @ f8c7f771
import { GlModal } from '@gitlab/ui'; import { GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue'; import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue';
import createStore from '~/deploy_freeze/store'; import createStore from '~/deploy_freeze/store';
...@@ -56,7 +56,7 @@ describe('Deploy freeze table', () => { ...@@ -56,7 +56,7 @@ describe('Deploy freeze table', () => {
describe('with data', () => { describe('with data', () => {
beforeEach(async () => { beforeEach(async () => {
store.commit(RECEIVE_FREEZE_PERIODS_SUCCESS, freezePeriodsFixture); store.commit(RECEIVE_FREEZE_PERIODS_SUCCESS, freezePeriodsFixture);
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('displays data', () => { it('displays data', () => {
...@@ -68,7 +68,7 @@ describe('Deploy freeze table', () => { ...@@ -68,7 +68,7 @@ describe('Deploy freeze table', () => {
it('allows user to edit deploy freeze', async () => { it('allows user to edit deploy freeze', async () => {
findEditDeployFreezeButton().trigger('click'); findEditDeployFreezeButton().trigger('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(store.dispatch).toHaveBeenCalledWith( expect(store.dispatch).toHaveBeenCalledWith(
'setFreezePeriod', 'setFreezePeriod',
......
spec/frontend/deploy_keys/components/action_btn_spec.js
View file @ f8c7f771
import { GlButton } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import data from 'test_fixtures/deploy_keys/keys.json'; import data from 'test_fixtures/deploy_keys/keys.json';
import actionBtn from '~/deploy_keys/components/action_btn.vue'; import actionBtn from '~/deploy_keys/components/action_btn.vue';
import eventHub from '~/deploy_keys/eventhub'; import eventHub from '~/deploy_keys/eventhub';
...@@ -37,21 +38,19 @@ describe('Deploy keys action btn', () => { ...@@ -37,21 +38,19 @@ describe('Deploy keys action btn', () => {
}); });
}); });
it('sends eventHub event with btn type', () => { it('sends eventHub event with btn type', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
findButton().vm.$emit('click'); findButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', deployKey, expect.anything()); expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', deployKey, expect.anything());
}); });
});
it('shows loading spinner after click', () => { it('shows loading spinner after click', async () => {
findButton().vm.$emit('click'); findButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findButton().props('loading')).toBe(true); expect(findButton().props('loading')).toBe(true);
}); });
});
}); });
spec/frontend/deploy_keys/components/app_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import data from 'test_fixtures/deploy_keys/keys.json'; import data from 'test_fixtures/deploy_keys/keys.json';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import { TEST_HOST } from 'spec/test_constants'; import { TEST_HOST } from 'spec/test_constants';
...@@ -39,21 +40,19 @@ describe('Deploy keys app component', () => { ...@@ -39,21 +40,19 @@ describe('Deploy keys app component', () => {
const findKeyPanels = () => wrapper.findAll('.deploy-keys .gl-tabs-nav li'); const findKeyPanels = () => wrapper.findAll('.deploy-keys .gl-tabs-nav li');
const findModal = () => wrapper.findComponent(ConfirmModal); const findModal = () => wrapper.findComponent(ConfirmModal);
it('renders loading icon while waiting for request', () => { it('renders loading icon while waiting for request', async () => {
mock.onGet(TEST_ENDPOINT).reply(() => new Promise()); mock.onGet(TEST_ENDPOINT).reply(() => new Promise());
mountComponent(); mountComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findLoadingIcon().exists()).toBe(true); expect(findLoadingIcon().exists()).toBe(true);
}); });
});
it('renders keys panels', () => { it('renders keys panels', async () => {
return mountComponent().then(() => { await mountComponent();
expect(findKeyPanels().length).toBe(3); expect(findKeyPanels().length).toBe(3);
}); });
});
it.each` it.each`
selector selector
...@@ -75,72 +74,55 @@ describe('Deploy keys app component', () => { ...@@ -75,72 +74,55 @@ describe('Deploy keys app component', () => {
}); });
}); });
it('re-fetches deploy keys when enabling a key', () => { it('re-fetches deploy keys when enabling a key', async () => {
const key = data.public_keys[0]; const key = data.public_keys[0];
return mountComponent() await mountComponent();
.then(() => {
jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {}); jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
jest.spyOn(wrapper.vm.service, 'enableKey').mockImplementation(() => Promise.resolve()); jest.spyOn(wrapper.vm.service, 'enableKey').mockImplementation(() => Promise.resolve());
eventHub.$emit('enable.key', key); eventHub.$emit('enable.key', key);
return wrapper.vm.$nextTick(); await nextTick();
})
.then(() => {
expect(wrapper.vm.service.enableKey).toHaveBeenCalledWith(key.id); expect(wrapper.vm.service.enableKey).toHaveBeenCalledWith(key.id);
expect(wrapper.vm.service.getKeys).toHaveBeenCalled(); expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
}); });
});
it('re-fetches deploy keys when disabling a key', () => { it('re-fetches deploy keys when disabling a key', async () => {
const key = data.public_keys[0]; const key = data.public_keys[0];
return mountComponent() await mountComponent();
.then(() => {
jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {}); jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve()); jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
eventHub.$emit('disable.key', key, () => {}); eventHub.$emit('disable.key', key, () => {});
return wrapper.vm.$nextTick(); await nextTick();
})
.then(() => {
expect(findModal().props('visible')).toBe(true); expect(findModal().props('visible')).toBe(true);
findModal().vm.$emit('remove'); findModal().vm.$emit('remove');
return wrapper.vm.$nextTick(); await nextTick();
})
.then(() => {
expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id); expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id);
expect(wrapper.vm.service.getKeys).toHaveBeenCalled(); expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
}); });
});
it('calls disableKey when removing a key', () => { it('calls disableKey when removing a key', async () => {
const key = data.public_keys[0]; const key = data.public_keys[0];
return mountComponent() await mountComponent();
.then(() => {
jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {}); jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve()); jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
eventHub.$emit('remove.key', key, () => {}); eventHub.$emit('remove.key', key, () => {});
return wrapper.vm.$nextTick(); await nextTick();
})
.then(() => {
expect(findModal().props('visible')).toBe(true); expect(findModal().props('visible')).toBe(true);
findModal().vm.$emit('remove'); findModal().vm.$emit('remove');
return wrapper.vm.$nextTick(); await nextTick();
})
.then(() => {
expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id); expect(wrapper.vm.service.disableKey).toHaveBeenCalledWith(key.id);
expect(wrapper.vm.service.getKeys).toHaveBeenCalled(); expect(wrapper.vm.service.getKeys).toHaveBeenCalled();
}); });
});
it('hasKeys returns true when there are keys', () => { it('hasKeys returns true when there are keys', async () => {
return mountComponent().then(() => { await mountComponent();
expect(wrapper.vm.hasKeys).toEqual(3); expect(wrapper.vm.hasKeys).toEqual(3);
}); });
});
}); });
spec/frontend/deploy_keys/components/key_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import data from 'test_fixtures/deploy_keys/keys.json'; import data from 'test_fixtures/deploy_keys/keys.json';
import key from '~/deploy_keys/components/key.vue'; import key from '~/deploy_keys/components/key.vue';
import DeployKeysStore from '~/deploy_keys/store'; import DeployKeysStore from '~/deploy_keys/store';
...@@ -95,19 +96,18 @@ describe('Deploy keys key', () => { ...@@ -95,19 +96,18 @@ describe('Deploy keys key', () => {
expect(labels.at(1).attributes('title')).toContain('Expand'); expect(labels.at(1).attributes('title')).toContain('Expand');
}); });
it('expands all project labels after click', () => { it('expands all project labels after click', async () => {
createComponent({ deployKey }); createComponent({ deployKey });
const { length } = deployKey.deploy_keys_projects; const { length } = deployKey.deploy_keys_projects;
wrapper.findAll('.deploy-project-label').at(1).trigger('click'); wrapper.findAll('.deploy-project-label').at(1).trigger('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
const labels = wrapper.findAll('.deploy-project-label'); const labels = wrapper.findAll('.deploy-project-label');
expect(labels.length).toBe(length); expect(labels.length).toBe(length);
expect(labels.at(1).text()).not.toContain(`+${length} others`); expect(labels.at(1).text()).not.toContain(`+${length} others`);
expect(labels.at(1).attributes('title')).not.toContain('Expand'); expect(labels.at(1).attributes('title')).not.toContain('Expand');
}); });
});
it('shows two projects', () => { it('shows two projects', () => {
createComponent({ createComponent({
......
spec/frontend/design_management/components/delete_button_spec.js
View file @ f8c7f771
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BatchDeleteButton from '~/design_management/components/delete_button.vue'; import BatchDeleteButton from '~/design_management/components/delete_button.vue';
describe('Batch delete button component', () => { describe('Batch delete button component', () => {
...@@ -36,19 +37,16 @@ describe('Batch delete button component', () => { ...@@ -36,19 +37,16 @@ describe('Batch delete button component', () => {
expect(findButton().attributes('disabled')).toBeTruthy(); expect(findButton().attributes('disabled')).toBeTruthy();
}); });
it('emits `delete-selected-designs` event on modal ok click', () => { it('emits `delete-selected-designs` event on modal ok click', async () => {
createComponent(); createComponent();
findButton().vm.$emit('click'); findButton().vm.$emit('click');
return wrapper.vm
.$nextTick() await nextTick();
.then(() => {
findModal().vm.$emit('ok'); findModal().vm.$emit('ok');
return wrapper.vm.$nextTick();
}) await nextTick();
.then(() => {
expect(wrapper.emitted('delete-selected-designs')).toBeTruthy(); expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
}); });
});
it('renders slot content', () => { it('renders slot content', () => {
const testText = 'Archive selected'; const testText = 'Archive selected';
......
spec/frontend/design_management/components/design_notes/design_discussion_spec.js
View file @ f8c7f771
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { ApolloMutation } from 'vue-apollo'; import { ApolloMutation } from 'vue-apollo';
import { nextTick } from 'vue';
import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
import DesignNote from '~/design_management/components/design_notes/design_note.vue'; import DesignNote from '~/design_management/components/design_notes/design_note.vue';
import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue'; import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
...@@ -119,14 +120,13 @@ describe('Design discussions component', () => { ...@@ -119,14 +120,13 @@ describe('Design discussions component', () => {
expect(findResolveIcon().exists()).toBe(false); expect(findResolveIcon().exists()).toBe(false);
}); });
it('does not render a checkbox in reply form', () => { it('does not render a checkbox in reply form', async () => {
findReplyPlaceholder().vm.$emit('focus'); findReplyPlaceholder().vm.$emit('focus');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findResolveCheckbox().exists()).toBe(false); expect(findResolveCheckbox().exists()).toBe(false);
}); });
}); });
});
describe('when discussion is unresolved', () => { describe('when discussion is unresolved', () => {
beforeEach(() => { beforeEach(() => {
...@@ -150,14 +150,13 @@ describe('Design discussions component', () => { ...@@ -150,14 +150,13 @@ describe('Design discussions component', () => {
expect(findResolveIcon().props('name')).toBe('check-circle'); expect(findResolveIcon().props('name')).toBe('check-circle');
}); });
it('renders a checkbox with Resolve thread text in reply form', () => { it('renders a checkbox with Resolve thread text in reply form', async () => {
findReplyPlaceholder().vm.$emit('focus'); findReplyPlaceholder().vm.$emit('focus');
wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findResolveCheckbox().text()).toBe('Resolve thread'); expect(findResolveCheckbox().text()).toBe('Resolve thread');
}); });
});
it('does not render resolved message', () => { it('does not render resolved message', () => {
expect(findResolvedMessage().exists()).toBe(false); expect(findResolvedMessage().exists()).toBe(false);
...@@ -216,7 +215,7 @@ describe('Design discussions component', () => { ...@@ -216,7 +215,7 @@ describe('Design discussions component', () => {
findReplyForm().vm.$emit('submitForm'); findReplyForm().vm.$emit('submitForm');
await mutate(); await mutate();
await wrapper.vm.$nextTick(); await nextTick();
const dispatchedEvent = dispatchEventSpy.mock.calls[0][0]; const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
...@@ -226,9 +225,9 @@ describe('Design discussions component', () => { ...@@ -226,9 +225,9 @@ describe('Design discussions component', () => {
}); });
describe('when replies are expanded', () => { describe('when replies are expanded', () => {
beforeEach(() => { beforeEach(async () => {
findRepliesWidget().vm.$emit('toggle'); findRepliesWidget().vm.$emit('toggle');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders replies widget with collapsed prop equal to false', () => { it('renders replies widget with collapsed prop equal to false', () => {
...@@ -243,27 +242,25 @@ describe('Design discussions component', () => { ...@@ -243,27 +242,25 @@ describe('Design discussions component', () => {
expect(findReplyPlaceholder().isVisible()).toBe(true); expect(findReplyPlaceholder().isVisible()).toBe(true);
}); });
it('renders a checkbox with Unresolve thread text in reply form', () => { it('renders a checkbox with Unresolve thread text in reply form', async () => {
findReplyPlaceholder().vm.$emit('focus'); findReplyPlaceholder().vm.$emit('focus');
wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findResolveCheckbox().text()).toBe('Unresolve thread'); expect(findResolveCheckbox().text()).toBe('Unresolve thread');
}); });
}); });
}); });
});
it('hides reply placeholder and opens form on placeholder click', () => { it('hides reply placeholder and opens form on placeholder click', async () => {
createComponent(); createComponent();
findReplyPlaceholder().vm.$emit('focus'); findReplyPlaceholder().vm.$emit('focus');
wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findReplyPlaceholder().exists()).toBe(false); expect(findReplyPlaceholder().exists()).toBe(false);
expect(findReplyForm().exists()).toBe(true); expect(findReplyForm().exists()).toBe(true);
}); });
});
it('calls mutation on submitting form and closes the form', async () => { it('calls mutation on submitting form and closes the form', async () => {
createComponent( createComponent(
...@@ -275,29 +272,25 @@ describe('Design discussions component', () => { ...@@ -275,29 +272,25 @@ describe('Design discussions component', () => {
expect(mutate).toHaveBeenCalledWith(mutationVariables); expect(mutate).toHaveBeenCalledWith(mutationVariables);
await mutate(); await mutate();
await wrapper.vm.$nextTick(); await nextTick();
expect(findReplyForm().exists()).toBe(false); expect(findReplyForm().exists()).toBe(false);
}); });
it('clears the discussion comment on closing comment form', () => { it('clears the discussion comment on closing comment form', async () => {
createComponent( createComponent(
{ discussionWithOpenForm: defaultMockDiscussion.id }, { discussionWithOpenForm: defaultMockDiscussion.id },
{ discussionComment: 'test', isFormRendered: true }, { discussionComment: 'test', isFormRendered: true },
); );
return wrapper.vm await nextTick();
.$nextTick()
.then(() => {
findReplyForm().vm.$emit('cancel-form'); findReplyForm().vm.$emit('cancel-form');
expect(wrapper.vm.discussionComment).toBe(''); expect(wrapper.vm.discussionComment).toBe('');
return wrapper.vm.$nextTick();
}) await nextTick();
.then(() => {
expect(findReplyForm().exists()).toBe(false); expect(findReplyForm().exists()).toBe(false);
}); });
});
describe('when any note from a discussion is active', () => { describe('when any note from a discussion is active', () => {
it.each([notes[0], notes[0].discussion.notes.nodes[1]])( it.each([notes[0], notes[0].discussion.notes.nodes[1]])(
...@@ -322,7 +315,7 @@ describe('Design discussions component', () => { ...@@ -322,7 +315,7 @@ describe('Design discussions component', () => {
); );
}); });
it('calls toggleResolveDiscussion mutation on resolve thread button click', () => { it('calls toggleResolveDiscussion mutation on resolve thread button click', async () => {
createComponent(); createComponent();
findResolveButton().trigger('click'); findResolveButton().trigger('click');
expect(mutate).toHaveBeenCalledWith({ expect(mutate).toHaveBeenCalledWith({
...@@ -332,10 +325,9 @@ describe('Design discussions component', () => { ...@@ -332,10 +325,9 @@ describe('Design discussions component', () => {
resolve: true, resolve: true,
}, },
}); });
return wrapper.vm.$nextTick(() => { await nextTick();
expect(findResolveLoadingIcon().exists()).toBe(true); expect(findResolveLoadingIcon().exists()).toBe(true);
}); });
});
it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => { it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => {
createComponent( createComponent(
......
spec/frontend/design_management/components/design_notes/design_note_spec.js
View file @ f8c7f771
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { ApolloMutation } from 'vue-apollo'; import { ApolloMutation } from 'vue-apollo';
import { nextTick } from 'vue';
import DesignNote from '~/design_management/components/design_notes/design_note.vue'; import DesignNote from '~/design_management/components/design_notes/design_note.vue';
import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
...@@ -96,7 +97,7 @@ describe('Design note component', () => { ...@@ -96,7 +97,7 @@ describe('Design note component', () => {
}); });
describe('when user has a permission to edit note', () => { describe('when user has a permission to edit note', () => {
it('should open an edit form on edit button click', () => { it('should open an edit form on edit button click', async () => {
createComponent({ createComponent({
note: { note: {
...note, ...note,
...@@ -108,11 +109,10 @@ describe('Design note component', () => { ...@@ -108,11 +109,10 @@ describe('Design note component', () => {
findEditButton().trigger('click'); findEditButton().trigger('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findReplyForm().exists()).toBe(true); expect(findReplyForm().exists()).toBe(true);
expect(findNoteContent().exists()).toBe(false); expect(findNoteContent().exists()).toBe(false);
}); });
});
describe('when edit form is rendered', () => { describe('when edit form is rendered', () => {
beforeEach(() => { beforeEach(() => {
...@@ -134,28 +134,23 @@ describe('Design note component', () => { ...@@ -134,28 +134,23 @@ describe('Design note component', () => {
expect(findReplyForm().exists()).toBe(true); expect(findReplyForm().exists()).toBe(true);
}); });
it('hides the form on cancel-form event', () => { it('hides the form on cancel-form event', async () => {
findReplyForm().vm.$emit('cancel-form'); findReplyForm().vm.$emit('cancel-form');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findReplyForm().exists()).toBe(false); expect(findReplyForm().exists()).toBe(false);
expect(findNoteContent().exists()).toBe(true); expect(findNoteContent().exists()).toBe(true);
}); });
});
it('calls a mutation on submit-form event and hides a form', () => { it('calls a mutation on submit-form event and hides a form', async () => {
findReplyForm().vm.$emit('submit-form'); findReplyForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalled(); expect(mutate).toHaveBeenCalled();
return mutate() await mutate();
.then(() => { await nextTick();
return wrapper.vm.$nextTick();
})
.then(() => {
expect(findReplyForm().exists()).toBe(false); expect(findReplyForm().exists()).toBe(false);
expect(findNoteContent().exists()).toBe(true); expect(findNoteContent().exists()).toBe(true);
}); });
}); });
}); });
});
}); });
spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
const showModal = jest.fn(); const showModal = jest.fn();
...@@ -64,25 +65,23 @@ describe('Design reply form component', () => { ...@@ -64,25 +65,23 @@ describe('Design reply form component', () => {
expect(findSubmitButton().attributes().disabled).toBeTruthy(); expect(findSubmitButton().attributes().disabled).toBeTruthy();
}); });
it('does not emit submitForm event on textarea ctrl+enter keydown', () => { it('does not emit submitForm event on textarea ctrl+enter keydown', async () => {
findTextarea().trigger('keydown.enter', { findTextarea().trigger('keydown.enter', {
ctrlKey: true, ctrlKey: true,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('submit-form')).toBeFalsy(); expect(wrapper.emitted('submit-form')).toBeFalsy();
}); });
});
it('does not emit submitForm event on textarea meta+enter keydown', () => { it('does not emit submitForm event on textarea meta+enter keydown', async () => {
findTextarea().trigger('keydown.enter', { findTextarea().trigger('keydown.enter', {
metaKey: true, metaKey: true,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('submit-form')).toBeFalsy(); expect(wrapper.emitted('submit-form')).toBeFalsy();
}); });
});
it('emits cancelForm event on pressing escape button on textarea', () => { it('emits cancelForm event on pressing escape button on textarea', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
...@@ -108,41 +107,37 @@ describe('Design reply form component', () => { ...@@ -108,41 +107,37 @@ describe('Design reply form component', () => {
expect(findSubmitButton().attributes().disabled).toBeFalsy(); expect(findSubmitButton().attributes().disabled).toBeFalsy();
}); });
it('emits submitForm event on Comment button click', () => { it('emits submitForm event on Comment button click', async () => {
findSubmitButton().vm.$emit('click'); findSubmitButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('submit-form')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
});
it('emits submitForm event on textarea ctrl+enter keydown', () => { it('emits submitForm event on textarea ctrl+enter keydown', async () => {
findTextarea().trigger('keydown.enter', { findTextarea().trigger('keydown.enter', {
ctrlKey: true, ctrlKey: true,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('submit-form')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
});
it('emits submitForm event on textarea meta+enter keydown', () => { it('emits submitForm event on textarea meta+enter keydown', async () => {
findTextarea().trigger('keydown.enter', { findTextarea().trigger('keydown.enter', {
metaKey: true, metaKey: true,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('submit-form')).toBeTruthy(); expect(wrapper.emitted('submit-form')).toBeTruthy();
}); });
});
it('emits input event on changing textarea content', () => { it('emits input event on changing textarea content', async () => {
findTextarea().setValue('test2'); findTextarea().setValue('test2');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('input')).toBeTruthy(); expect(wrapper.emitted('input')).toBeTruthy();
}); });
});
it('emits cancelForm event on Escape key if text was not changed', () => { it('emits cancelForm event on Escape key if text was not changed', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
...@@ -150,14 +145,13 @@ describe('Design reply form component', () => { ...@@ -150,14 +145,13 @@ describe('Design reply form component', () => {
expect(wrapper.emitted('cancel-form')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
it('opens confirmation modal on Escape key when text has changed', () => { it('opens confirmation modal on Escape key when text has changed', async () => {
wrapper.setProps({ value: 'test2' }); wrapper.setProps({ value: 'test2' });
return wrapper.vm.$nextTick().then(() => { await nextTick();
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
expect(showModal).toHaveBeenCalled(); expect(showModal).toHaveBeenCalled();
}); });
});
it('emits cancelForm event on Cancel button click if text was not changed', () => { it('emits cancelForm event on Cancel button click if text was not changed', () => {
findCancelButton().trigger('click'); findCancelButton().trigger('click');
...@@ -165,14 +159,13 @@ describe('Design reply form component', () => { ...@@ -165,14 +159,13 @@ describe('Design reply form component', () => {
expect(wrapper.emitted('cancel-form')).toBeTruthy(); expect(wrapper.emitted('cancel-form')).toBeTruthy();
}); });
it('opens confirmation modal on Cancel button click when text has changed', () => { it('opens confirmation modal on Cancel button click when text has changed', async () => {
wrapper.setProps({ value: 'test2' }); wrapper.setProps({ value: 'test2' });
return wrapper.vm.$nextTick().then(() => { await nextTick();
findCancelButton().trigger('click'); findCancelButton().trigger('click');
expect(showModal).toHaveBeenCalled(); expect(showModal).toHaveBeenCalled();
}); });
});
it('emits cancelForm event on modal Ok button click', () => { it('emits cancelForm event on modal Ok button click', () => {
findTextarea().trigger('keyup.esc'); findTextarea().trigger('keyup.esc');
......
spec/frontend/design_management/components/design_overlay_spec.js
View file @ f8c7f771
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignOverlay from '~/design_management/components/design_overlay.vue'; import DesignOverlay from '~/design_management/components/design_overlay.vue';
import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants'; import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants';
import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
...@@ -17,12 +18,11 @@ describe('Design overlay component', () => { ...@@ -17,12 +18,11 @@ describe('Design overlay component', () => {
const findFirstBadge = () => findBadgeAtIndex(0); const findFirstBadge = () => findBadgeAtIndex(0);
const findSecondBadge = () => findBadgeAtIndex(1); const findSecondBadge = () => findBadgeAtIndex(1);
const clickAndDragBadge = (elem, fromPoint, toPoint) => { const clickAndDragBadge = async (elem, fromPoint, toPoint) => {
elem.trigger('mousedown', { clientX: fromPoint.x, clientY: fromPoint.y }); elem.trigger('mousedown', { clientX: fromPoint.x, clientY: fromPoint.y });
return wrapper.vm.$nextTick().then(() => { await nextTick();
elem.trigger('mousemove', { clientX: toPoint.x, clientY: toPoint.y }); elem.trigger('mousemove', { clientX: toPoint.x, clientY: toPoint.y });
return wrapper.vm.$nextTick(); await nextTick();
});
}; };
function createComponent(props = {}, data = {}) { function createComponent(props = {}, data = {}) {
...@@ -59,7 +59,7 @@ describe('Design overlay component', () => { ...@@ -59,7 +59,7 @@ describe('Design overlay component', () => {
expect(wrapper.attributes().style).toBe('width: 100px; height: 100px; top: 0px; left: 0px;'); expect(wrapper.attributes().style).toBe('width: 100px; height: 100px; top: 0px; left: 0px;');
}); });
it('should emit `openCommentForm` when clicking on overlay', () => { it('should emit `openCommentForm` when clicking on overlay', async () => {
createComponent(); createComponent();
const newCoordinates = { const newCoordinates = {
x: 10, x: 10,
...@@ -69,12 +69,11 @@ describe('Design overlay component', () => { ...@@ -69,12 +69,11 @@ describe('Design overlay component', () => {
wrapper wrapper
.find('[data-qa-selector="design_image_button"]') .find('[data-qa-selector="design_image_button"]')
.trigger('mouseup', { offsetX: newCoordinates.x, offsetY: newCoordinates.y }); .trigger('mouseup', { offsetX: newCoordinates.x, offsetY: newCoordinates.y });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('openCommentForm')).toEqual([ expect(wrapper.emitted('openCommentForm')).toEqual([
[{ x: newCoordinates.x, y: newCoordinates.y }], [{ x: newCoordinates.x, y: newCoordinates.y }],
]); ]);
}); });
});
describe('with notes', () => { describe('with notes', () => {
it('should render only the first note', () => { it('should render only the first note', () => {
...@@ -116,7 +115,7 @@ describe('Design overlay component', () => { ...@@ -116,7 +115,7 @@ describe('Design overlay component', () => {
describe('when a discussion is active', () => { describe('when a discussion is active', () => {
it.each([notes[0].discussion.notes.nodes[1], notes[0].discussion.notes.nodes[0]])( it.each([notes[0].discussion.notes.nodes[1], notes[0].discussion.notes.nodes[0]])(
'should not apply inactive class to the pin for the active discussion', 'should not apply inactive class to the pin for the active discussion',
(note) => { async (note) => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ wrapper.setData({
...@@ -126,13 +125,12 @@ describe('Design overlay component', () => { ...@@ -126,13 +125,12 @@ describe('Design overlay component', () => {
}, },
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findBadgeAtIndex(0).classes()).not.toContain('inactive'); expect(findBadgeAtIndex(0).classes()).not.toContain('inactive');
});
}, },
); );
it('should apply inactive class to all pins besides the active one', () => { it('should apply inactive class to all pins besides the active one', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ wrapper.setData({
...@@ -142,15 +140,14 @@ describe('Design overlay component', () => { ...@@ -142,15 +140,14 @@ describe('Design overlay component', () => {
}, },
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findSecondBadge().classes()).toContain('inactive'); expect(findSecondBadge().classes()).toContain('inactive');
expect(findFirstBadge().classes()).not.toContain('inactive'); expect(findFirstBadge().classes()).not.toContain('inactive');
}); });
}); });
}); });
});
it('should recalculate badges positions on window resize', () => { it('should recalculate badges positions on window resize', async () => {
createComponent({ createComponent({
notes, notes,
dimensions: { dimensions: {
...@@ -168,12 +165,11 @@ describe('Design overlay component', () => { ...@@ -168,12 +165,11 @@ describe('Design overlay component', () => {
}, },
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 30px;'); expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 30px;');
}); });
});
it('should call an update active discussion mutation when clicking a note without moving it', () => { it('should call an update active discussion mutation when clicking a note without moving it', async () => {
const note = notes[0]; const note = notes[0];
const { position } = note; const { position } = note;
const mutationVariables = { const mutationVariables = {
...@@ -186,31 +182,25 @@ describe('Design overlay component', () => { ...@@ -186,31 +182,25 @@ describe('Design overlay component', () => {
findFirstBadge().trigger('mousedown', { clientX: position.x, clientY: position.y }); findFirstBadge().trigger('mousedown', { clientX: position.x, clientY: position.y });
return wrapper.vm.$nextTick().then(() => { await nextTick();
findFirstBadge().trigger('mouseup', { clientX: position.x, clientY: position.y }); findFirstBadge().trigger('mouseup', { clientX: position.x, clientY: position.y });
expect(mutate).toHaveBeenCalledWith(mutationVariables); expect(mutate).toHaveBeenCalledWith(mutationVariables);
}); });
}); });
});
describe('when moving notes', () => { describe('when moving notes', () => {
it('should update badge style when note is being moved', () => { it('should update badge style when note is being moved', async () => {
createComponent({ createComponent({
notes, notes,
}); });
const { position } = notes[0]; const { position } = notes[0];
return clickAndDragBadge( await clickAndDragBadge(findFirstBadge(), { x: position.x, y: position.y }, { x: 20, y: 20 });
findFirstBadge(),
{ x: position.x, y: position.y },
{ x: 20, y: 20 },
).then(() => {
expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;'); expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;');
}); });
});
it('should emit `moveNote` event when note-moving action ends', () => { it('should emit `moveNote` event when note-moving action ends', async () => {
createComponent({ notes }); createComponent({ notes });
const note = notes[0]; const note = notes[0];
const { position } = note; const { position } = note;
...@@ -231,12 +221,10 @@ describe('Design overlay component', () => { ...@@ -231,12 +221,10 @@ describe('Design overlay component', () => {
}); });
const badge = findFirstBadge(); const badge = findFirstBadge();
return clickAndDragBadge(badge, { x: position.x, y: position.y }, newCoordinates) await clickAndDragBadge(badge, { x: position.x, y: position.y }, newCoordinates);
.then(() => {
badge.trigger('mouseup'); badge.trigger('mouseup');
return wrapper.vm.$nextTick();
}) await nextTick();
.then(() => {
expect(wrapper.emitted('moveNote')).toEqual([ expect(wrapper.emitted('moveNote')).toEqual([
[ [
{ {
...@@ -247,7 +235,6 @@ describe('Design overlay component', () => { ...@@ -247,7 +235,6 @@ describe('Design overlay component', () => {
], ],
]); ]);
}); });
});
describe('without [repositionNote] permission', () => { describe('without [repositionNote] permission', () => {
const mockNoteNotAuthorised = { const mockNoteNotAuthorised = {
...@@ -262,14 +249,14 @@ describe('Design overlay component', () => { ...@@ -262,14 +249,14 @@ describe('Design overlay component', () => {
y: mockNoteNotAuthorised.position.y, y: mockNoteNotAuthorised.position.y,
}; };
it('should be unable to move a note', () => { it('should be unable to move a note', async () => {
createComponent({ createComponent({
dimensions: mockDimensions, dimensions: mockDimensions,
notes: [mockNoteNotAuthorised], notes: [mockNoteNotAuthorised],
}); });
const badge = findAllNotes().at(0); const badge = findAllNotes().at(0);
return clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 }).then(() => { await clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 });
// note position should not change after a click-and-drag attempt // note position should not change after a click-and-drag attempt
expect(findFirstBadge().attributes().style).toContain( expect(findFirstBadge().attributes().style).toContain(
`left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`, `left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`,
...@@ -277,7 +264,6 @@ describe('Design overlay component', () => { ...@@ -277,7 +264,6 @@ describe('Design overlay component', () => {
}); });
}); });
}); });
});
describe('with a new form', () => { describe('with a new form', () => {
it('should render a new comment badge', () => { it('should render a new comment badge', () => {
...@@ -292,7 +278,7 @@ describe('Design overlay component', () => { ...@@ -292,7 +278,7 @@ describe('Design overlay component', () => {
}); });
describe('when moving the comment badge', () => { describe('when moving the comment badge', () => {
it('should update badge style to reflect new position', () => { it('should update badge style to reflect new position', async () => {
const { position } = notes[0]; const { position } = notes[0];
createComponent({ createComponent({
...@@ -301,16 +287,15 @@ describe('Design overlay component', () => { ...@@ -301,16 +287,15 @@ describe('Design overlay component', () => {
}, },
}); });
return clickAndDragBadge( await clickAndDragBadge(
findCommentBadge(), findCommentBadge(),
{ x: position.x, y: position.y }, { x: position.x, y: position.y },
{ x: 20, y: 20 }, { x: 20, y: 20 },
).then(() => { );
expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;'); expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;');
}); });
});
it('should update badge style when note-moving action ends', () => { it('should update badge style when note-moving action ends', async () => {
const { position } = notes[0]; const { position } = notes[0];
createComponent({ createComponent({
currentCommentForm: { currentCommentForm: {
...@@ -321,20 +306,17 @@ describe('Design overlay component', () => { ...@@ -321,20 +306,17 @@ describe('Design overlay component', () => {
const commentBadge = findCommentBadge(); const commentBadge = findCommentBadge();
const toPoint = { x: 20, y: 20 }; const toPoint = { x: 20, y: 20 };
return clickAndDragBadge(commentBadge, { x: position.x, y: position.y }, toPoint) await clickAndDragBadge(commentBadge, { x: position.x, y: position.y }, toPoint);
.then(() => {
commentBadge.trigger('mouseup'); commentBadge.trigger('mouseup');
// simulates the currentCommentForm being updated in index.vue component, and // simulates the currentCommentForm being updated in index.vue component, and
// propagated back down to this prop // propagated back down to this prop
wrapper.setProps({ wrapper.setProps({
currentCommentForm: { height: position.height, width: position.width, ...toPoint }, currentCommentForm: { height: position.height, width: position.width, ...toPoint },
}); });
return wrapper.vm.$nextTick();
}) await nextTick();
.then(() => {
expect(commentBadge.attributes().style).toBe('left: 20px; top: 20px;'); expect(commentBadge.attributes().style).toBe('left: 20px; top: 20px;');
}); });
});
it.each` it.each`
element | getElementFunc | event element | getElementFunc | event
...@@ -342,7 +324,7 @@ describe('Design overlay component', () => { ...@@ -342,7 +324,7 @@ describe('Design overlay component', () => {
${'comment badge'} | ${findCommentBadge} | ${'mouseup'} ${'comment badge'} | ${findCommentBadge} | ${'mouseup'}
`( `(
'should emit `openCommentForm` event when $event fired on $element element', 'should emit `openCommentForm` event when $event fired on $element element',
({ getElementFunc, event }) => { async ({ getElementFunc, event }) => {
createComponent({ createComponent({
notes, notes,
currentCommentForm: { currentCommentForm: {
...@@ -364,9 +346,8 @@ describe('Design overlay component', () => { ...@@ -364,9 +346,8 @@ describe('Design overlay component', () => {
}); });
getElementFunc().trigger(event); getElementFunc().trigger(event);
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('openCommentForm')).toEqual([[newCoordinates]]); expect(wrapper.emitted('openCommentForm')).toEqual([[newCoordinates]]);
});
}, },
); );
}); });
......
spec/frontend/design_management/components/design_scaler_spec.js
View file @ f8c7f771
import { GlButton } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignScaler from '~/design_management/components/design_scaler.vue'; import DesignScaler from '~/design_management/components/design_scaler.vue';
describe('Design management design scaler component', () => { describe('Design management design scaler component', () => {
...@@ -32,7 +33,7 @@ describe('Design management design scaler component', () => { ...@@ -32,7 +33,7 @@ describe('Design management design scaler component', () => {
describe('when `scale` value is greater than 1', () => { describe('when `scale` value is greater than 1', () => {
beforeEach(async () => { beforeEach(async () => {
setScale(1.6); setScale(1.6);
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('emits @scale event when "reset" button clicked', () => { it('emits @scale event when "reset" button clicked', () => {
...@@ -68,11 +69,11 @@ describe('Design management design scaler component', () => { ...@@ -68,11 +69,11 @@ describe('Design management design scaler component', () => {
it('computes & increments correct stepSize based on maxScale', async () => { it('computes & increments correct stepSize based on maxScale', async () => {
wrapper.setProps({ maxScale: 11 }); wrapper.setProps({ maxScale: 11 });
await wrapper.vm.$nextTick(); await nextTick();
getIncreaseScaleButton().vm.$emit('click'); getIncreaseScaleButton().vm.$emit('click');
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.emitted().scale[0][0]).toBe(3); expect(wrapper.emitted().scale[0][0]).toBe(3);
}); });
...@@ -96,7 +97,7 @@ describe('Design management design scaler component', () => { ...@@ -96,7 +97,7 @@ describe('Design management design scaler component', () => {
describe('when `scale` value is maximum', () => { describe('when `scale` value is maximum', () => {
beforeEach(async () => { beforeEach(async () => {
setScale(2); setScale(2);
await wrapper.vm.$nextTick(); await nextTick();
}); });
it('disables the "increment" button', () => { it('disables the "increment" button', () => {
......
spec/frontend/design_management/components/design_sidebar_spec.js
View file @ f8c7f771
import { GlCollapse, GlPopover } from '@gitlab/ui'; import { GlCollapse, GlPopover } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { nextTick } from 'vue';
import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue'; import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue';
...@@ -138,15 +139,14 @@ describe('Design management design sidebar component', () => { ...@@ -138,15 +139,14 @@ describe('Design management design sidebar component', () => {
expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1); expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1);
}); });
it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', () => { it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', async () => {
expect(findCollapsible().attributes('visible')).toBeUndefined(); expect(findCollapsible().attributes('visible')).toBeUndefined();
wrapper.setProps({ wrapper.setProps({
resolvedDiscussionsExpanded: true, resolvedDiscussionsExpanded: true,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findCollapsible().attributes('visible')).toBe('true'); expect(findCollapsible().attributes('visible')).toBe('true');
}); });
});
it('does not popover about resolved comments', () => { it('does not popover about resolved comments', () => {
expect(findPopover().exists()).toBe(false); expect(findPopover().exists()).toBe(false);
...@@ -182,14 +182,13 @@ describe('Design management design sidebar component', () => { ...@@ -182,14 +182,13 @@ describe('Design management design sidebar component', () => {
expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]); expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
}); });
it('changes prop correctly on opening discussion form', () => { it('changes prop correctly on opening discussion form', async () => {
findFirstDiscussion().vm.$emit('open-form', 'some-id'); findFirstDiscussion().vm.$emit('open-form', 'some-id');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id'); expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
}); });
}); });
});
describe('when all discussions are resolved', () => { describe('when all discussions are resolved', () => {
beforeEach(() => { beforeEach(() => {
...@@ -246,12 +245,11 @@ describe('Design management design sidebar component', () => { ...@@ -246,12 +245,11 @@ describe('Design management design sidebar component', () => {
expect(scrollIntoViewMock).toHaveBeenCalled(); expect(scrollIntoViewMock).toHaveBeenCalled();
}); });
it('dismisses a popover on the outside click', () => { it('dismisses a popover on the outside click', async () => {
wrapper.trigger('click'); wrapper.trigger('click');
return wrapper.vm.$nextTick(() => { await nextTick();
expect(findPopover().exists()).toBe(false); expect(findPopover().exists()).toBe(false);
}); });
});
it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => { it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => {
jest.spyOn(Cookies, 'set'); jest.spyOn(Cookies, 'set');
......
spec/frontend/design_management/components/design_todo_button_spec.js
View file @ f8c7f771
import { shallowMount, mount } from '@vue/test-utils'; import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignTodoButton from '~/design_management/components/design_todo_button.vue'; import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql'; import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql';
import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql'; import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
...@@ -71,7 +72,7 @@ describe('Design management design todo button', () => { ...@@ -71,7 +72,7 @@ describe('Design management design todo button', () => {
describe('when clicked', () => { describe('when clicked', () => {
let dispatchEventSpy; let dispatchEventSpy;
beforeEach(() => { beforeEach(async () => {
dispatchEventSpy = jest.spyOn(document, 'dispatchEvent'); dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
jest.spyOn(document, 'querySelector').mockReturnValue({ jest.spyOn(document, 'querySelector').mockReturnValue({
innerText: 2, innerText: 2,
...@@ -79,7 +80,7 @@ describe('Design management design todo button', () => { ...@@ -79,7 +80,7 @@ describe('Design management design todo button', () => {
createComponent({ design: mockDesignWithPendingTodos }, { mountFn: mount }); createComponent({ design: mockDesignWithPendingTodos }, { mountFn: mount });
wrapper.trigger('click'); wrapper.trigger('click');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('calls `$apollo.mutate` with the `todoMarkDone` mutation and variables containing `id`', async () => { it('calls `$apollo.mutate` with the `todoMarkDone` mutation and variables containing `id`', async () => {
...@@ -117,7 +118,7 @@ describe('Design management design todo button', () => { ...@@ -117,7 +118,7 @@ describe('Design management design todo button', () => {
describe('when clicked', () => { describe('when clicked', () => {
let dispatchEventSpy; let dispatchEventSpy;
beforeEach(() => { beforeEach(async () => {
dispatchEventSpy = jest.spyOn(document, 'dispatchEvent'); dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
jest.spyOn(document, 'querySelector').mockReturnValue({ jest.spyOn(document, 'querySelector').mockReturnValue({
innerText: 2, innerText: 2,
...@@ -125,7 +126,7 @@ describe('Design management design todo button', () => { ...@@ -125,7 +126,7 @@ describe('Design management design todo button', () => {
createComponent({}, { mountFn: mount }); createComponent({}, { mountFn: mount });
wrapper.trigger('click'); wrapper.trigger('click');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('calls `$apollo.mutate` with the `createDesignTodoMutation` mutation and variables containing `issuable_id`, `issue_id`, & `projectPath`', async () => { it('calls `$apollo.mutate` with the `createDesignTodoMutation` mutation and variables containing `issuable_id`, `issue_id`, & `projectPath`', async () => {
......
spec/frontend/design_management/components/image_spec.js
View file @ f8c7f771
import { GlIcon } from '@gitlab/ui'; import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignImage from '~/design_management/components/image.vue'; import DesignImage from '~/design_management/components/image.vue';
describe('Design management large image component', () => { describe('Design management large image component', () => {
...@@ -36,7 +37,7 @@ describe('Design management large image component', () => { ...@@ -36,7 +37,7 @@ describe('Design management large image component', () => {
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('sets correct classes and styles if imageStyle is set', () => { it('sets correct classes and styles if imageStyle is set', async () => {
createComponent( createComponent(
{ {
isLoading: false, isLoading: false,
...@@ -50,12 +51,11 @@ describe('Design management large image component', () => { ...@@ -50,12 +51,11 @@ describe('Design management large image component', () => {
}, },
}, },
); );
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
it('renders media broken icon on error', () => { it('renders media broken icon on error', async () => {
createComponent({ createComponent({
isLoading: false, isLoading: false,
image: 'test.jpg', image: 'test.jpg',
...@@ -64,11 +64,10 @@ describe('Design management large image component', () => { ...@@ -64,11 +64,10 @@ describe('Design management large image component', () => {
const image = wrapper.find('img'); const image = wrapper.find('img');
image.trigger('error'); image.trigger('error');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(image.isVisible()).toBe(false); expect(image.isVisible()).toBe(false);
expect(wrapper.find(GlIcon).element).toMatchSnapshot(); expect(wrapper.find(GlIcon).element).toMatchSnapshot();
}); });
});
describe('zoom', () => { describe('zoom', () => {
const baseImageWidth = 100; const baseImageWidth = 100;
...@@ -99,37 +98,34 @@ describe('Design management large image component', () => { ...@@ -99,37 +98,34 @@ describe('Design management large image component', () => {
.mockReturnValue(baseImageHeight); .mockReturnValue(baseImageHeight);
}); });
it('emits @resize event on zoom', () => { it('emits @resize event on zoom', async () => {
const zoomAmount = 2; const zoomAmount = 2;
wrapper.vm.zoom(zoomAmount); wrapper.vm.zoom(zoomAmount);
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('resize')).toEqual([ expect(wrapper.emitted('resize')).toEqual([
[{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }], [{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }],
]); ]);
}); });
});
it('emits @resize event with base image size when scale=1', () => { it('emits @resize event with base image size when scale=1', async () => {
wrapper.vm.zoom(1); wrapper.vm.zoom(1);
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.emitted('resize')).toEqual([ expect(wrapper.emitted('resize')).toEqual([
[{ width: baseImageWidth, height: baseImageHeight }], [{ width: baseImageWidth, height: baseImageHeight }],
]); ]);
}); });
});
it('sets image style when zoomed', () => { it('sets image style when zoomed', async () => {
const zoomAmount = 2; const zoomAmount = 2;
wrapper.vm.zoom(zoomAmount); wrapper.vm.zoom(zoomAmount);
expect(wrapper.vm.imageStyle).toEqual({ expect(wrapper.vm.imageStyle).toEqual({
width: `${baseImageWidth * zoomAmount}px`, width: `${baseImageWidth * zoomAmount}px`,
height: `${baseImageHeight * zoomAmount}px`, height: `${baseImageHeight * zoomAmount}px`,
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
}); });
});
}); });
spec/frontend/design_management/components/list/item_spec.js
View file @ f8c7f771
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui'; import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import Item from '~/design_management/components/list/item.vue'; import Item from '~/design_management/components/list/item.vue';
...@@ -71,13 +71,13 @@ describe('Design management list item component', () => { ...@@ -71,13 +71,13 @@ describe('Design management list item component', () => {
let image; let image;
let glIntersectionObserver; let glIntersectionObserver;
beforeEach(() => { beforeEach(async () => {
createComponent(); createComponent();
image = wrapper.find('img'); image = wrapper.find('img');
glIntersectionObserver = wrapper.find(GlIntersectionObserver); glIntersectionObserver = wrapper.find(GlIntersectionObserver);
glIntersectionObserver.vm.$emit('appear'); glIntersectionObserver.vm.$emit('appear');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders a tooltip', () => { it('renders a tooltip', () => {
...@@ -91,9 +91,9 @@ describe('Design management list item component', () => { ...@@ -91,9 +91,9 @@ describe('Design management list item component', () => {
}); });
describe('after image is loaded', () => { describe('after image is loaded', () => {
beforeEach(() => { beforeEach(async () => {
image.trigger('load'); image.trigger('load');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders an image', () => { it('renders an image', () => {
...@@ -101,29 +101,27 @@ describe('Design management list item component', () => { ...@@ -101,29 +101,27 @@ describe('Design management list item component', () => {
expect(image.isVisible()).toBe(true); expect(image.isVisible()).toBe(true);
}); });
it('renders media broken icon when image onerror triggered', () => { it('renders media broken icon when image onerror triggered', async () => {
image.trigger('error'); image.trigger('error');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(image.isVisible()).toBe(false); expect(image.isVisible()).toBe(false);
expect(wrapper.find(GlIcon).element).toMatchSnapshot(); expect(wrapper.find(GlIcon).element).toMatchSnapshot();
}); });
});
describe('when imageV432x230 and image provided', () => { describe('when imageV432x230 and image provided', () => {
it('renders imageV432x230 image', () => { it('renders imageV432x230 image', async () => {
const mockSrc = 'mock-imageV432x230-url'; const mockSrc = 'mock-imageV432x230-url';
wrapper.setProps({ imageV432x230: mockSrc }); wrapper.setProps({ imageV432x230: mockSrc });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(image.attributes('src')).toBe(mockSrc); expect(image.attributes('src')).toBe(mockSrc);
}); });
}); });
});
describe('when image disappears from view and then reappears', () => { describe('when image disappears from view and then reappears', () => {
beforeEach(() => { beforeEach(async () => {
glIntersectionObserver.vm.$emit('appear'); glIntersectionObserver.vm.$emit('appear');
return wrapper.vm.$nextTick(); await nextTick();
}); });
it('renders an image', () => { it('renders an image', () => {
......
spec/frontend/design_management/components/toolbar/design_navigation_spec.js
View file @ f8c7f771
/* global Mousetrap */ /* global Mousetrap */
import 'mousetrap'; import 'mousetrap';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue'; import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants'; import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
...@@ -41,17 +42,16 @@ describe('Design management pagination component', () => { ...@@ -41,17 +42,16 @@ describe('Design management pagination component', () => {
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('renders navigation buttons', () => { it('renders navigation buttons', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
wrapper.setData({ wrapper.setData({
designCollection: { designs: [{ id: '1' }, { id: '2' }] }, designCollection: { designs: [{ id: '1' }, { id: '2' }] },
}); });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
describe('keyboard buttons navigation', () => { describe('keyboard buttons navigation', () => {
beforeEach(() => { beforeEach(() => {
......
spec/frontend/design_management/components/toolbar/index_spec.js
View file @ f8c7f771
import { GlButton } from '@gitlab/ui'; import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import DeleteButton from '~/design_management/components/delete_button.vue'; import DeleteButton from '~/design_management/components/delete_button.vue';
import Toolbar from '~/design_management/components/toolbar/index.vue'; import Toolbar from '~/design_management/components/toolbar/index.vue';
...@@ -60,18 +60,17 @@ describe('Design management toolbar component', () => { ...@@ -60,18 +60,17 @@ describe('Design management toolbar component', () => {
wrapper.destroy(); wrapper.destroy();
}); });
it('renders design and updated data', () => { it('renders design and updated data', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
it('links back to designs list', () => { it('links back to designs list', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
const link = wrapper.find('a'); const link = wrapper.find('a');
expect(link.props('to')).toEqual({ expect(link.props('to')).toEqual({
...@@ -81,40 +80,35 @@ describe('Design management toolbar component', () => { ...@@ -81,40 +80,35 @@ describe('Design management toolbar component', () => {
}, },
}); });
}); });
});
it('renders delete button on latest designs version with logged in user', () => { it('renders delete button on latest designs version with logged in user', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DeleteButton).exists()).toBe(true); expect(wrapper.find(DeleteButton).exists()).toBe(true);
}); });
});
it('does not render delete button on non-latest version', () => { it('does not render delete button on non-latest version', async () => {
createComponent(false, true, { isLatestVersion: false }); createComponent(false, true, { isLatestVersion: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DeleteButton).exists()).toBe(false); expect(wrapper.find(DeleteButton).exists()).toBe(false);
}); });
});
it('does not render delete button when user is not logged in', () => { it('does not render delete button when user is not logged in', async () => {
createComponent(false, false); createComponent(false, false);
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(DeleteButton).exists()).toBe(false); expect(wrapper.find(DeleteButton).exists()).toBe(false);
}); });
});
it('emits `delete` event on deleteButton `delete-selected-designs` event', () => { it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
wrapper.find(DeleteButton).vm.$emit('delete-selected-designs'); wrapper.find(DeleteButton).vm.$emit('delete-selected-designs');
expect(wrapper.emitted().delete).toBeTruthy(); expect(wrapper.emitted().delete).toBeTruthy();
}); });
});
it('renders download button with correct link', () => { it('renders download button with correct link', () => {
createComponent(); createComponent();
......
spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
View file @ f8c7f771
import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import mockAllVersions from './mock_data/all_versions'; import mockAllVersions from './mock_data/all_versions';
...@@ -47,77 +48,69 @@ describe('Design management design version dropdown component', () => { ...@@ -47,77 +48,69 @@ describe('Design management design version dropdown component', () => {
const findVersionLink = (index) => wrapper.findAll(GlDropdownItem).at(index); const findVersionLink = (index) => wrapper.findAll(GlDropdownItem).at(index);
it('renders design version dropdown button', () => { it('renders design version dropdown button', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
it('renders design version list', () => { it('renders design version list', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
});
describe('selected version name', () => { describe('selected version name', () => {
it('has "latest" on most recent version item', () => { it('has "latest" on most recent version item', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findVersionLink(0).text()).toContain('latest'); expect(findVersionLink(0).text()).toContain('latest');
}); });
}); });
});
describe('versions list', () => { describe('versions list', () => {
it('displays latest version text by default', () => { it('displays latest version text by default', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
});
it('displays latest version text when only 1 version is present', () => { it('displays latest version text when only 1 version is present', async () => {
createComponent({ maxVersions: 1 }); createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
});
it('displays version text when the current version is not the latest', () => { it('displays version text when the current version is not the latest', async () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`); expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`);
}); });
});
it('displays latest version text when the current version is the latest', () => { it('displays latest version text when the current version is the latest', async () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
});
it('should have the same length as apollo query', () => { it('should have the same length as apollo query', async () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
}); });
});
it('should render TimeAgo', async () => { it('should render TimeAgo', async () => {
createComponent(); createComponent();
await wrapper.vm.$nextTick(); await nextTick();
expect(wrapper.findAllComponents(TimeAgo)).toHaveLength(wrapper.vm.allVersions.length); expect(wrapper.findAllComponents(TimeAgo)).toHaveLength(wrapper.vm.allVersions.length);
}); });
......
spec/frontend/design_management/pages/design/index_spec.js
View file @ f8c7f771
import { GlAlert } from '@gitlab/ui'; import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue, { nextTick } from 'vue';
import { ApolloMutation } from 'vue-apollo'; import { ApolloMutation } from 'vue-apollo';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
...@@ -153,11 +153,11 @@ describe('Design management design index page', () => { ...@@ -153,11 +153,11 @@ describe('Design management design index page', () => {
jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement); jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
createComponent({ loading: false }, { data: { design, scale: 2 } }); createComponent({ loading: false }, { data: { design, scale: 2 } });
await wrapper.vm.$nextTick(); await nextTick();
expect(findDesignPresentation().props('scale')).toBe(2); expect(findDesignPresentation().props('scale')).toBe(2);
DesignIndex.beforeRouteUpdate.call(wrapper.vm, {}, {}, jest.fn()); DesignIndex.beforeRouteUpdate.call(wrapper.vm, {}, {}, jest.fn());
await wrapper.vm.$nextTick(); await nextTick();
expect(findDesignPresentation().props('scale')).toBe(1); expect(findDesignPresentation().props('scale')).toBe(1);
}); });
...@@ -200,7 +200,7 @@ describe('Design management design index page', () => { ...@@ -200,7 +200,7 @@ describe('Design management design index page', () => {
}); });
}); });
it('opens a new discussion form', () => { it('opens a new discussion form', async () => {
createComponent( createComponent(
{ loading: false }, { loading: false },
{ {
...@@ -212,10 +212,9 @@ describe('Design management design index page', () => { ...@@ -212,10 +212,9 @@ describe('Design management design index page', () => {
findDesignPresentation().vm.$emit('openCommentForm', { x: 0, y: 0 }); findDesignPresentation().vm.$emit('openCommentForm', { x: 0, y: 0 });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findDiscussionForm().exists()).toBe(true); expect(findDiscussionForm().exists()).toBe(true);
}); });
});
it('keeps new discussion form focused', () => { it('keeps new discussion form focused', () => {
createComponent( createComponent(
...@@ -233,7 +232,7 @@ describe('Design management design index page', () => { ...@@ -233,7 +232,7 @@ describe('Design management design index page', () => {
expect(focusInput).toHaveBeenCalled(); expect(focusInput).toHaveBeenCalled();
}); });
it('sends a mutation on submitting form and closes form', () => { it('sends a mutation on submitting form and closes form', async () => {
createComponent( createComponent(
{ loading: false }, { loading: false },
{ {
...@@ -248,17 +247,12 @@ describe('Design management design index page', () => { ...@@ -248,17 +247,12 @@ describe('Design management design index page', () => {
findDiscussionForm().vm.$emit('submit-form'); findDiscussionForm().vm.$emit('submit-form');
expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables); expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
return wrapper.vm await nextTick();
.$nextTick() await mutate({ variables: createDiscussionMutationVariables });
.then(() => {
return mutate({ variables: createDiscussionMutationVariables });
})
.then(() => {
expect(findDiscussionForm().exists()).toBe(false); expect(findDiscussionForm().exists()).toBe(false);
}); });
});
it('closes the form and clears the comment on canceling form', () => { it('closes the form and clears the comment on canceling form', async () => {
createComponent( createComponent(
{ loading: false }, { loading: false },
{ {
...@@ -274,10 +268,9 @@ describe('Design management design index page', () => { ...@@ -274,10 +268,9 @@ describe('Design management design index page', () => {
expect(wrapper.vm.comment).toBe(''); expect(wrapper.vm.comment).toBe('');
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(findDiscussionForm().exists()).toBe(false); expect(findDiscussionForm().exists()).toBe(false);
}); });
});
describe('with error', () => { describe('with error', () => {
beforeEach(() => { beforeEach(() => {
...@@ -299,22 +292,21 @@ describe('Design management design index page', () => { ...@@ -299,22 +292,21 @@ describe('Design management design index page', () => {
describe('onDesignQueryResult', () => { describe('onDesignQueryResult', () => {
describe('with no designs', () => { describe('with no designs', () => {
it('redirects to /designs', () => { it('redirects to /designs', async () => {
createComponent({ loading: true }); createComponent({ loading: true });
router.push = jest.fn(); router.push = jest.fn();
wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR }); expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR });
expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledTimes(1);
expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
}); });
}); });
});
describe('when no design exists for given version', () => { describe('when no design exists for given version', () => {
it('redirects to /designs', () => { it('redirects to /designs', async () => {
createComponent({ loading: true }); createComponent({ loading: true });
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
...@@ -327,7 +319,7 @@ describe('Design management design index page', () => { ...@@ -327,7 +319,7 @@ describe('Design management design index page', () => {
router.push = jest.fn(); router.push = jest.fn();
wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false }); wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => { await nextTick();
expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR }); expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR });
expect(router.push).toHaveBeenCalledTimes(1); expect(router.push).toHaveBeenCalledTimes(1);
...@@ -335,7 +327,6 @@ describe('Design management design index page', () => { ...@@ -335,7 +327,6 @@ describe('Design management design index page', () => {
}); });
}); });
}); });
});
describe('when hash present in current route', () => { describe('when hash present in current route', () => {
it('calls updateActiveDiscussion mutation', () => { it('calls updateActiveDiscussion mutation', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7