Skip to content

G
gitlab-ce
Commit b712bfa7 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 eeceb35f
Hide whitespace changes
Inline Side-by-side
Showing with 539 additions and 590 deletions
spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js
View file @ b712bfa7
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_collapsible_extension.vue';
describe('Merge Request Collapsible Extension', () => {
......@@ -46,9 +47,9 @@ describe('Merge Request Collapsible Extension', () => {
});
describe('onClick', () => {
beforeEach(() => {
beforeEach(async () => {
wrapper.find('button').trigger('click');
return wrapper.vm.$nextTick();
await nextTick();
});
it('rendes the provided slot', () => {
......
spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
window.gl = window.gl || {};
......@@ -50,7 +51,7 @@ describe('MrWidgetAuthor', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find('img').attributes('src')).toBe('no_avatar.png');
});
......
spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js
View file @ b712bfa7
import { GlButton, GlCollapse, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
describe('MrWidgetExpanableSection', () => {
......@@ -43,9 +44,9 @@ describe('MrWidgetExpanableSection', () => {
});
describe('when collapse section is open', () => {
beforeEach(() => {
beforeEach(async () => {
findButton().vm.$emit('click');
return wrapper.vm.$nextTick();
await nextTick();
});
it('renders button with collapse text', () => {
......
spec/frontend/vue_mr_widget/components/states/commit_edit_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
const testCommitMessage = 'Test commit message';
......@@ -46,16 +47,15 @@ describe('Commits edit component', () => {
expect(findTextarea().element.value).toBe(testCommitMessage);
});
it('emits an input event and receives changed value', () => {
it('emits an input event and receives changed value', async () => {
const changedCommitMessage = 'Changed commit message';
findTextarea().element.value = changedCommitMessage;
findTextarea().trigger('input');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
expect(findTextarea().element.value).toBe(changedCommitMessage);
});
await nextTick();
expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
expect(findTextarea().element.value).toBe(changedCommitMessage);
});
});
......
spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
View file @ b712bfa7
import { GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
const commits = [
......@@ -51,11 +52,10 @@ describe('Commits message dropdown component', () => {
expect(findFirstDropdownElement().text()).toContain('Commit 1');
});
it('should emit a commit title on selecting commit', () => {
it('should emit a commit title on selecting commit', async () => {
findFirstDropdownElement().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().input[0]).toEqual(['Update test.txt']);
});
await nextTick();
expect(wrapper.emitted().input[0]).toEqual(['Update test.txt']);
});
});
spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
View file @ b712bfa7
import { mount } from '@vue/test-utils';
import { GlSprintf } from '@gitlab/ui';
import { nextTick } from 'vue';
import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
describe('Commits header component', () => {
......@@ -58,15 +59,14 @@ describe('Commits header component', () => {
expect(findCommitToggle().attributes('aria-label')).toBe('Expand');
});
it('has a chevron-right icon', () => {
it('has a chevron-right icon', async () => {
createComponent();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ expanded: false });
return wrapper.vm.$nextTick().then(() => {
expect(findCommitToggle().props('icon')).toBe('chevron-right');
});
await nextTick();
expect(findCommitToggle().props('icon')).toBe('chevron-right');
});
describe('when squash is disabled', () => {
......@@ -118,25 +118,19 @@ describe('Commits header component', () => {
wrapper.setData({ expanded: true });
});
it('toggle has aria-label equal to collapse', (done) => {
wrapper.vm.$nextTick(() => {
expect(findCommitToggle().attributes('aria-label')).toBe('Collapse');
done();
});
it('toggle has aria-label equal to collapse', async () => {
await nextTick();
expect(findCommitToggle().attributes('aria-label')).toBe('Collapse');
});
it('has a chevron-down icon', (done) => {
wrapper.vm.$nextTick(() => {
expect(findCommitToggle().props('icon')).toBe('chevron-down');
done();
});
it('has a chevron-down icon', async () => {
await nextTick();
expect(findCommitToggle().props('icon')).toBe('chevron-down');
});
it('has a collapse text', (done) => {
wrapper.vm.$nextTick(() => {
expect(findHeaderWrapper().text()).toBe('Collapse');
done();
});
it('has a collapse text', async () => {
await nextTick();
expect(findHeaderWrapper().text()).toBe('Collapse');
});
});
});
spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { TEST_HOST } from 'helpers/test_constants';
import { removeBreakLine } from 'helpers/text_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -20,7 +21,7 @@ describe('MRWidgetConflicts', () => {
const resolveConflictsBtnText = 'Resolve conflicts';
const mergeLocallyBtnText = 'Merge locally';
function createComponent(propsData = {}) {
async function createComponent(propsData = {}) {
wrapper = extendedWrapper(
shallowMount(ConflictsComponent, {
propsData,
......@@ -55,7 +56,7 @@ describe('MRWidgetConflicts', () => {
});
}
return wrapper.vm.$nextTick();
await nextTick();
}
afterEach(() => {
......
spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import MissingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
let wrapper;
function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
async function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
wrapper = shallowMount(MissingBranchComponent, {
propsData: {
mr: { sourceBranchRemoved },
......@@ -19,7 +20,7 @@ function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
wrapper.setData({ state: { sourceBranchExists: !sourceBranchRemoved } });
}
return wrapper.vm.$nextTick();
await nextTick();
}
describe('MRWidgetMissingBranch', () => {
......
spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
View file @ b712bfa7
......@@ -710,7 +710,7 @@ describe('ReadyToMerge', () => {
commitsWithoutMergeCommits: {},
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findCommitEditElements().length).toBe(2);
});
......
spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
View file @ b712bfa7
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import axios from '~/lib/utils/axios_utils';
import Poll from '~/lib/utils/poll';
import MrWidgetExpanableSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
......@@ -39,15 +40,14 @@ describe('MrWidgetTerraformConainer', () => {
});
describe('when data is loading', () => {
beforeEach(() => {
beforeEach(async () => {
mockPollingApi(200, plans, {});
return mountWrapper().then(() => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ loading: true });
return wrapper.vm.$nextTick();
});
await mountWrapper();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ loading: true });
await nextTick();
});
it('diplays loading skeleton', () => {
......
spec/frontend/vue_shared/alert_details/alert_details_spec.js
View file @ b712bfa7
......@@ -2,6 +2,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { joinPaths } from '~/lib/utils/url_utility';
......@@ -216,17 +217,16 @@ describe('AlertDetails', () => {
expect(findCreateIncidentBtn().exists()).toBe(false);
});
it('should display "Create incident" button when incident doesn\'t exist yet', () => {
it('should display "Create incident" button when incident doesn\'t exist yet', async () => {
const issue = null;
mountComponent({
mountMethod: mount,
data: { alert: { ...mockAlert, issue } },
});
return wrapper.vm.$nextTick().then(() => {
expect(findViewIncidentBtn().exists()).toBe(false);
expect(findCreateIncidentBtn().exists()).toBe(true);
});
await nextTick();
expect(findViewIncidentBtn().exists()).toBe(false);
expect(findCreateIncidentBtn().exists()).toBe(true);
});
it('calls `$apollo.mutate` with `createIssueQuery`', () => {
......
spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js
View file @ b712bfa7
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
import SidebarTodo from '~/vue_shared/alert_details/components/sidebar/sidebar_todo.vue';
import createAlertTodoMutation from '~/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql';
......@@ -57,7 +58,7 @@ describe('Alert Details Sidebar To Do', () => {
});
it('renders a button for adding a To-Do', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(findToDoButton().text()).toBe('Add a to do');
});
......@@ -66,7 +67,7 @@ describe('Alert Details Sidebar To Do', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
findToDoButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
mutation: createAlertTodoMutation,
......@@ -88,7 +89,7 @@ describe('Alert Details Sidebar To Do', () => {
});
it('renders a Mark As Done button when todo is present', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(findToDoButton().text()).toBe('Mark as done');
});
......@@ -97,7 +98,7 @@ describe('Alert Details Sidebar To Do', () => {
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
findToDoButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
mutation: todoMarkDoneMutation,
......
spec/frontend/vue_shared/alert_details/alert_metrics_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
import AlertMetrics from '~/vue_shared/alert_details/components/alert_metrics.vue';
......@@ -53,7 +54,7 @@ describe('Alert Metrics', () => {
mountComponent({ props: { dashboardUrl: 'metrics.url' } });
await waitForPromises();
await wrapper.vm.$nextTick();
await nextTick();
expect(findEmptyState().exists()).toBe(false);
expect(findChart().exists()).toBe(true);
......
spec/frontend/vue_shared/alert_details/alert_status_spec.js
View file @ b712bfa7
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import updateAlertStatusMutation from '~/graphql_shared//mutations/alert_status_update.mutation.graphql';
......@@ -121,7 +122,7 @@ describe('AlertManagementStatus', () => {
it('emits an error when triggered a second time', async () => {
await selectFirstStatusOption();
await wrapper.vm.$nextTick();
await nextTick();
await selectFirstStatusOption();
// Should emit two errors [0,1]
expect(wrapper.emitted('alert-error').length > 1).toBe(true);
......
spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js
View file @ b712bfa7
import { GlDropdownItem } from '@gitlab/ui';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
......@@ -112,7 +113,7 @@ describe('Alert Details Sidebar Assignees', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isDropdownSearching: false });
await wrapper.vm.$nextTick();
await nextTick();
expect(findDropdown().text()).toBe('Unassigned');
});
......@@ -126,7 +127,7 @@ describe('Alert Details Sidebar Assignees', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isDropdownSearching: false });
await wrapper.vm.$nextTick();
await nextTick();
wrapper.find(SidebarAssignee).vm.$emit('update-alert-assignees', 'root');
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
......@@ -139,7 +140,7 @@ describe('Alert Details Sidebar Assignees', () => {
});
});
it('emits an error when request contains error messages', () => {
it('emits an error when request contains error messages', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isDropdownSearching: false });
......@@ -153,15 +154,11 @@ describe('Alert Details Sidebar Assignees', () => {
};
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(errorMutationResult);
return wrapper.vm
.$nextTick()
.then(() => {
const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0);
SideBarAssigneeItem.vm.$emit('update-alert-assignees');
})
.then(() => {
expect(wrapper.emitted('alert-error')).toBeDefined();
});
await nextTick();
const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0);
await SideBarAssigneeItem.vm.$emit('update-alert-assignees');
expect(wrapper.emitted('alert-error')).toBeDefined();
});
it('stops updating and cancels loading when the request fails', () => {
......
spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
View file @ b712bfa7
import { GlDropdown, GlLoadingIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
......@@ -75,7 +76,7 @@ describe('Alert Details Sidebar Status', () => {
loading: false,
});
findAlertStatus().vm.$emit('handle-updating', true);
await wrapper.vm.$nextTick();
await nextTick();
expect(findStatusLoadingIcon().exists()).toBe(true);
});
......
spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
......@@ -69,7 +70,7 @@ describe('Blob Simple Viewer component', () => {
expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
});
it('switches highlighting when another line is selected', () => {
it('switches highlighting when another line is selected', async () => {
const currentlyHighlighted = wrapper.find('#LC2');
const hash = '#LC3';
const linetoBeHighlighted = wrapper.find(hash);
......@@ -78,11 +79,10 @@ describe('Blob Simple Viewer component', () => {
wrapper.vm.scrollToLine(hash);
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element);
expect(currentlyHighlighted.classes()).not.toContain(HIGHLIGHT_CLASS_NAME);
expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
});
await nextTick();
expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element);
expect(currentlyHighlighted.classes()).not.toContain(HIGHLIGHT_CLASS_NAME);
expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
});
});
});
spec/frontend/vue_shared/components/chronic_duration_input_spec.js
View file @ b712bfa7
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ChronicDurationInput from '~/vue_shared/components/chronic_duration_input.vue';
const MOCK_VALUE = 2 * 3600 + 20 * 60;
......@@ -48,7 +49,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
describe('change', () => {
const createAndDispatch = async (initialValue, humanReadableInput) => {
createComponent({ value: initialValue });
await wrapper.vm.$nextTick();
await nextTick();
textElement.value = humanReadableInput;
textElement.dispatchEvent(new Event('input'));
};
......@@ -118,7 +119,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits valid with user input', async () => {
textElement.value = '1m10s';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('valid')).toEqual([
[{ valid: true, feedback: '' }],
......@@ -133,7 +134,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
textElement.value = '';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('valid')).toEqual([
[{ valid: true, feedback: '' }],
......@@ -151,7 +152,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits invalid with user input', async () => {
textElement.value = 'gobbledygook';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('valid')).toEqual([
[{ valid: true, feedback: '' }],
......@@ -186,7 +187,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits valid with updated value', async () => {
wrapper.setProps({ value: MOCK_VALUE });
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('valid')).toEqual([
[{ valid: null, feedback: '' }],
......@@ -210,7 +211,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits valid when input is integer', async () => {
textElement.value = '2hr20min';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('change')).toEqual([[MOCK_VALUE]]);
expect(wrapper.emitted('valid')).toEqual([
......@@ -228,7 +229,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits valid when input is decimal', async () => {
textElement.value = '1.5s';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('change')).toEqual([[1.5]]);
expect(wrapper.emitted('valid')).toEqual([
......@@ -252,7 +253,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits valid when input is integer', async () => {
textElement.value = '2hr20min';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('change')).toEqual([[MOCK_VALUE]]);
expect(wrapper.emitted('valid')).toEqual([
......@@ -270,7 +271,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('emits invalid when input is decimal', async () => {
textElement.value = '1.5s';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('change')).toBeUndefined();
expect(wrapper.emitted('valid')).toEqual([
......@@ -318,7 +319,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ value: MOCK_VALUE });
await wrapper.vm.$nextTick();
await nextTick();
expect(textElement.value).toBe('2 hrs 20 mins');
expect(hiddenElement.value).toBe(MOCK_VALUE.toString());
......@@ -329,7 +330,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('passes user input to parent via v-model', async () => {
textElement.value = '2hr20min';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(ChronicDurationInput).props('value')).toBe(MOCK_VALUE);
expect(textElement.value).toBe('2hr20min');
......@@ -377,7 +378,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
it('creates form data with user-specified value', async () => {
textElement.value = '1m10s';
textElement.dispatchEvent(new Event('input'));
await wrapper.vm.$nextTick();
await nextTick();
const formData = new FormData(wrapper.find('[data-testid=myForm]').element);
const iter = formData.entries();
......
spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
View file @ b712bfa7
import { mount } from '@vue/test-utils';
import timezoneMock from 'timezone-mock';
import { nextTick } from 'vue';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import {
defaultTimeRanges,
......@@ -29,26 +30,23 @@ describe('DateTimePicker', () => {
wrapper.destroy();
});
it('renders dropdown toggle button with selected text', () => {
it('renders dropdown toggle button with selected text', async () => {
createComponent();
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe(defaultTimeRange.label);
});
await nextTick();
expect(dropdownToggle().text()).toBe(defaultTimeRange.label);
});
it('renders dropdown toggle button with selected text and utc label', () => {
it('renders dropdown toggle button with selected text and utc label', async () => {
createComponent({ utc: true });
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toContain(defaultTimeRange.label);
expect(dropdownToggle().text()).toContain('UTC');
});
await nextTick();
expect(dropdownToggle().text()).toContain(defaultTimeRange.label);
expect(dropdownToggle().text()).toContain('UTC');
});
it('renders dropdown with 2 custom time range inputs', () => {
it('renders dropdown with 2 custom time range inputs', async () => {
createComponent();
return wrapper.vm.$nextTick(() => {
expect(wrapper.findAll('input').length).toBe(2);
});
await nextTick();
expect(wrapper.findAll('input').length).toBe(2);
});
describe('renders label with h/m/s truncated if possible', () => {
......@@ -80,33 +78,30 @@ describe('DateTimePicker', () => {
label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01 UTC',
},
].forEach(({ start, end, utc, label }) => {
it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, () => {
it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, async () => {
createComponent({
value: { start, end },
utc,
});
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe(label);
});
await nextTick();
expect(dropdownToggle().text()).toBe(label);
});
});
});
it(`renders dropdown with ${optionsCount} (default) items in quick range`, () => {
it(`renders dropdown with ${optionsCount} (default) items in quick range`, async () => {
createComponent();
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(findQuickRangeItems().length).toBe(optionsCount);
});
await nextTick();
expect(findQuickRangeItems().length).toBe(optionsCount);
});
it('renders dropdown with a default quick range item selected', () => {
it('renders dropdown with a default quick range item selected', async () => {
createComponent();
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('.dropdown-item.active').exists()).toBe(true);
expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label);
});
await nextTick();
expect(wrapper.find('.dropdown-item.active').exists()).toBe(true);
expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label);
});
it('renders a disabled apply button on wrong input', () => {
......@@ -118,74 +113,63 @@ describe('DateTimePicker', () => {
});
describe('user input', () => {
const fillInputAndBlur = (input, val) => {
const fillInputAndBlur = async (input, val) => {
wrapper.find(input).setValue(val);
return wrapper.vm.$nextTick().then(() => {
wrapper.find(input).trigger('blur');
return wrapper.vm.$nextTick();
});
await nextTick();
wrapper.find(input).trigger('blur');
await nextTick();
};
beforeEach(() => {
beforeEach(async () => {
createComponent();
return wrapper.vm.$nextTick();
await nextTick();
});
it('displays inline error message if custom time range inputs are invalid', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-10abc'))
.then(() => {
expect(wrapper.findAll('.invalid-feedback').length).toBe(2);
});
it('displays inline error message if custom time range inputs are invalid', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01abc');
await fillInputAndBlur('#custom-time-to', '2019-10-10abc');
expect(wrapper.findAll('.invalid-feedback').length).toBe(2);
});
it('keeps apply button disabled with invalid custom time range inputs', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
.then(() => fillInputAndBlur('#custom-time-to', '2019-09-19'))
.then(() => {
expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
});
it('keeps apply button disabled with invalid custom time range inputs', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01abc');
await fillInputAndBlur('#custom-time-to', '2019-09-19');
expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
});
it('enables apply button with valid custom time range inputs', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
.then(() => {
expect(applyButtonElement().getAttribute('disabled')).toBeNull();
});
it('enables apply button with valid custom time range inputs', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01');
await fillInputAndBlur('#custom-time-to', '2019-10-19');
expect(applyButtonElement().getAttribute('disabled')).toBeNull();
});
describe('when "apply" is clicked', () => {
it('emits iso dates', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
it('emits iso dates', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
await fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00');
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
it('emits iso dates, for dates without time of day', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
it('emits iso dates, for dates without time of day', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01');
await fillInputAndBlur('#custom-time-to', '2019-10-19');
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
end: '2019-10-19T00:00:00Z',
start: '2019-10-01T00:00:00Z',
},
]);
});
describe('when timezone is different', () => {
......@@ -196,52 +180,46 @@ describe('DateTimePicker', () => {
timezoneMock.unregister();
});
it('emits iso dates', () => {
return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T07:00:00Z',
end: '2019-10-19T19:00:00Z',
},
]);
});
it('emits iso dates', async () => {
await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00');
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T07:00:00Z',
end: '2019-10-19T19:00:00Z',
},
]);
});
it('emits iso dates with utc format', () => {
it('emits iso dates with utc format', async () => {
wrapper.setProps({ utc: true });
return wrapper.vm
.$nextTick()
.then(() => fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'))
.then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
.then(() => {
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T00:00:00Z',
end: '2019-10-19T12:00:00Z',
},
]);
});
await nextTick();
await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00');
applyButtonElement().click();
expect(wrapper.emitted().input).toHaveLength(1);
expect(wrapper.emitted().input[0]).toEqual([
{
start: '2019-10-01T00:00:00Z',
end: '2019-10-19T12:00:00Z',
},
]);
});
});
});
it('unchecks quick range when text is input is clicked', () => {
it('unchecks quick range when text is input is clicked', async () => {
const findActiveItems = () =>
findQuickRangeItems().filter((w) => w.classes().includes('active'));
expect(findActiveItems().length).toBe(1);
return fillInputAndBlur('#custom-time-from', '2019-10-01').then(() => {
expect(findActiveItems().length).toBe(0);
});
await fillInputAndBlur('#custom-time-from', '2019-10-01');
expect(findActiveItems().length).toBe(0);
});
it('emits dates in an object when a is clicked', () => {
......@@ -257,16 +235,14 @@ describe('DateTimePicker', () => {
});
});
it('hides the popover with cancel button', () => {
it('hides the popover with cancel button', async () => {
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
cancelButton().trigger('click');
await nextTick();
cancelButton().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(dropdownMenu().classes('show')).toBe(false);
});
});
await nextTick();
expect(dropdownMenu().classes('show')).toBe(false);
});
});
......@@ -293,7 +269,7 @@ describe('DateTimePicker', () => {
jest.spyOn(Date, 'now').mockImplementation(() => MOCK_NOW);
});
it('renders dropdown with a label in the quick range', () => {
it('renders dropdown with a label in the quick range', async () => {
createComponent({
value: {
duration: { seconds: 60 * 5 },
......@@ -301,12 +277,11 @@ describe('DateTimePicker', () => {
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('5 minutes');
});
await nextTick();
expect(dropdownToggle().text()).toBe('5 minutes');
});
it('renders dropdown with a label in the quick range and utc label', () => {
it('renders dropdown with a label in the quick range and utc label', async () => {
createComponent({
value: {
duration: { seconds: 60 * 5 },
......@@ -315,12 +290,11 @@ describe('DateTimePicker', () => {
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('5 minutes UTC');
});
await nextTick();
expect(dropdownToggle().text()).toBe('5 minutes UTC');
});
it('renders dropdown with quick range items', () => {
it('renders dropdown with quick range items', async () => {
createComponent({
value: {
duration: { seconds: 60 * 2 },
......@@ -328,31 +302,29 @@ describe('DateTimePicker', () => {
options: otherTimeRanges,
});
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
const items = findQuickRangeItems();
await nextTick();
const items = findQuickRangeItems();
expect(items.length).toBe(Object.keys(otherTimeRanges).length);
expect(items.at(0).text()).toBe('1 minute');
expect(items.at(0).classes()).not.toContain('active');
expect(items.length).toBe(Object.keys(otherTimeRanges).length);
expect(items.at(0).text()).toBe('1 minute');
expect(items.at(0).classes()).not.toContain('active');
expect(items.at(1).text()).toBe('2 minutes');
expect(items.at(1).classes()).toContain('active');
expect(items.at(1).text()).toBe('2 minutes');
expect(items.at(1).classes()).toContain('active');
expect(items.at(2).text()).toBe('5 minutes');
expect(items.at(2).classes()).not.toContain('active');
});
expect(items.at(2).text()).toBe('5 minutes');
expect(items.at(2).classes()).not.toContain('active');
});
it('renders dropdown with a label not in the quick range', () => {
it('renders dropdown with a label not in the quick range', async () => {
createComponent({
value: {
duration: { seconds: 60 * 4 },
},
});
dropdownToggle().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00');
});
await nextTick();
expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00');
});
});
});
spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DeployBoardInstance from '~/vue_shared/components/deployment_instance.vue';
import { folder } from './mock_data';
......@@ -28,17 +29,15 @@ describe('Deploy Board Instance', () => {
expect(wrapper.attributes('title')).toEqual('This is a pod');
});
it('should render a div without tooltip data', (done) => {
it('should render a div without tooltip data', async () => {
wrapper = createComponent({
status: 'deploying',
tooltipText: '',
});
wrapper.vm.$nextTick(() => {
expect(wrapper.classes('deployment-instance-deploying')).toBe(true);
expect(wrapper.attributes('title')).toEqual('');
done();
});
await nextTick();
expect(wrapper.classes('deployment-instance-deploying')).toBe(true);
expect(wrapper.attributes('title')).toEqual('');
});
it('should have a log path computed with a pod name as a parameter', () => {
......@@ -58,15 +57,13 @@ describe('Deploy Board Instance', () => {
wrapper.destroy();
});
it('should render a div with canary class when stable prop is provided as false', (done) => {
it('should render a div with canary class when stable prop is provided as false', async () => {
wrapper = createComponent({
stable: false,
});
wrapper.vm.$nextTick(() => {
expect(wrapper.classes('deployment-instance-canary')).toBe(true);
done();
});
await nextTick();
expect(wrapper.classes('deployment-instance-canary')).toBe(true);
});
});
......@@ -75,17 +72,15 @@ describe('Deploy Board Instance', () => {
wrapper.destroy();
});
it('should not be a link without a logsPath prop', (done) => {
it('should not be a link without a logsPath prop', async () => {
wrapper = createComponent({
stable: false,
logsPath: '',
});
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.computedLogPath).toBeNull();
expect(wrapper.vm.isLink).toBeFalsy();
done();
});
await nextTick();
expect(wrapper.vm.computedLogPath).toBeNull();
expect(wrapper.vm.isLink).toBeFalsy();
});
it('should render a link without href if path is not passed', () => {
......
spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js
View file @ b712bfa7
import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import {
TRANSITION_LOAD_START,
......@@ -126,15 +126,14 @@ describe('Renamed Diff Viewer', () => {
store = null;
});
it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', () => {
it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', async () => {
store.dispatch.mockResolvedValue();
wrapper.vm.switchToFull();
return wrapper.vm.$nextTick().then(() => {
expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', {
diffFile,
});
await nextTick();
expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', {
diffFile,
});
});
......@@ -144,7 +143,7 @@ describe('Renamed Diff Viewer', () => {
${STATE_ERRORED} | ${'mockRejectedValue'} | ${'rejected'}
`(
'moves through the correct states during a $resolution request',
({ after, resolvePromise }) => {
async ({ after, resolvePromise }) => {
store.dispatch[resolvePromise]();
expect(wrapper.vm.state).toEqual(STATE_IDLING);
......@@ -153,16 +152,9 @@ describe('Renamed Diff Viewer', () => {
expect(wrapper.vm.state).toEqual(STATE_LOADING);
return (
wrapper.vm
// This tick is needed for when the action (promise) finishes
.$nextTick()
// This tick waits for the state change in the promise .then/.catch to bubble into the component
.then(() => wrapper.vm.$nextTick())
.then(() => {
expect(wrapper.vm.state).toEqual(after);
})
);
await nextTick(); // This tick is needed for when the action (promise) finishes
await nextTick(); // This tick waits for the state change in the promise .then/.catch to bubble into the component
expect(wrapper.vm.state).toEqual(after);
},
);
});
......
spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js
View file @ b712bfa7
import { GlAlert, GlSprintf } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
import Component from '~/vue_shared/components/dismissible_feedback_alert.vue';
......@@ -64,7 +65,7 @@ describe('Dismissible Feedback Alert', () => {
it('should not show the alert once dismissed', async () => {
localStorage.setItem(STORAGE_DISMISSAL_KEY, 'true');
createFullComponent();
await wrapper.vm.$nextTick();
await nextTick();
expect(findAlert().exists()).toBe(false);
});
......
spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js
View file @ b712bfa7
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DropdownSearchInputComponent from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
describe('DropdownSearchInputComponent', () => {
......@@ -36,16 +37,15 @@ describe('DropdownSearchInputComponent', () => {
expect(findInputEl().attributes('placeholder')).toBe(defaultProps.placeholderText);
});
it('focuses input element when focused property equals true', () => {
it('focuses input element when focused property equals true', async () => {
const inputEl = findInputEl().element;
jest.spyOn(inputEl, 'focus');
wrapper.setProps({ focused: true });
return wrapper.vm.$nextTick().then(() => {
expect(inputEl.focus).toHaveBeenCalled();
});
await nextTick();
expect(inputEl.focus).toHaveBeenCalled();
});
});
});
spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
View file @ b712bfa7
import { GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DropdownWidget from '~/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue';
describe('DropdownWidget component', () => {
......@@ -53,7 +54,7 @@ describe('DropdownWidget component', () => {
describe('when dropdown is open', () => {
beforeEach(async () => {
findDropdown().vm.$emit('show');
await wrapper.vm.$nextTick();
await nextTick();
});
it('emits search event when typing in search box', () => {
......@@ -69,7 +70,7 @@ describe('DropdownWidget component', () => {
it('emits set-option event when clicking on an option', async () => {
wrapper.findAll('[data-testid="unselected-option"]').at(1).trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('set-option')).toEqual([[wrapper.props().options[1]]]);
});
......
spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
import { UP_KEY_CODE, DOWN_KEY_CODE, TAB_KEY_CODE } from '~/lib/utils/keycodes';
......@@ -53,7 +54,7 @@ describe('DropdownKeyboardNavigation', () => {
it('should $emit @change with the default index when max changes', async () => {
wrapper.setProps({ max: 20 });
await wrapper.vm.$nextTick();
await nextTick();
// The first @change`call happens on created() so we test for the second [1]
expect(wrapper.emitted('change')[1]).toStrictEqual([MOCK_DEFAULT_INDEX]);
});
......
spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
View file @ b712bfa7
......@@ -8,6 +8,7 @@ import {
} from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
import { SortDirection } from '~/vue_shared/components/filtered_search_bar/constants';
......@@ -172,7 +173,7 @@ describe('FilteredSearchBarRoot', () => {
recentSearches: [{ foo: 'bar' }, 'foo'],
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.filteredRecentSearches).toHaveLength(1);
expect(wrapper.vm.filteredRecentSearches[0]).toEqual({ foo: 'bar' });
......@@ -188,7 +189,7 @@ describe('FilteredSearchBarRoot', () => {
],
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.filteredRecentSearches).toHaveLength(2);
expect(uniqueTokens).toHaveBeenCalled();
......@@ -199,7 +200,7 @@ describe('FilteredSearchBarRoot', () => {
recentSearchesStorageKey: '',
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.filteredRecentSearches).not.toBeDefined();
});
......@@ -208,7 +209,7 @@ describe('FilteredSearchBarRoot', () => {
describe('watchers', () => {
describe('filterValue', () => {
it('emits component event `onFilter` with empty array and false when filter was never selected', () => {
it('emits component event `onFilter` with empty array and false when filter was never selected', async () => {
wrapper = createComponent({ initialFilterValue: [tokenValueEmpty] });
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -217,12 +218,11 @@ describe('FilteredSearchBarRoot', () => {
filterValue: [tokenValueEmpty],
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
});
await nextTick();
expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
});
it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', () => {
it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -231,9 +231,8 @@ describe('FilteredSearchBarRoot', () => {
filterValue: [tokenValueEmpty],
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
});
await nextTick();
expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
});
});
});
......@@ -336,7 +335,7 @@ describe('FilteredSearchBarRoot', () => {
filterValue: mockFilters,
});
await wrapper.vm.$nextTick();
await nextTick();
});
it('calls `uniqueTokens` on `filterValue` prop to remove duplicates', () => {
......@@ -395,7 +394,7 @@ describe('FilteredSearchBarRoot', () => {
});
describe('template', () => {
beforeEach(() => {
beforeEach(async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -404,7 +403,7 @@ describe('FilteredSearchBarRoot', () => {
recentSearches: mockHistoryItems,
});
return wrapper.vm.$nextTick();
await nextTick();
});
it('renders gl-filtered-search component', () => {
......@@ -439,7 +438,7 @@ describe('FilteredSearchBarRoot', () => {
const wrapperFullMount = createComponent({ sortOptions: mockSortOptions, shallow: false });
wrapperFullMount.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
await wrapperFullMount.vm.$nextTick();
await nextTick();
const searchHistoryItemsEl = wrapperFullMount.findAll(
'.gl-search-box-by-click-menu .gl-search-box-by-click-history-item',
......@@ -462,7 +461,7 @@ describe('FilteredSearchBarRoot', () => {
wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
await wrapperFullMount.vm.$nextTick();
await nextTick();
expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := Direct');
......@@ -480,7 +479,7 @@ describe('FilteredSearchBarRoot', () => {
wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
await wrapperFullMount.vm.$nextTick();
await nextTick();
expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := exclude');
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
View file @ b712bfa7
......@@ -6,6 +6,7 @@ import {
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
......@@ -167,7 +168,7 @@ describe('AuthorToken', () => {
const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
};
it('renders base-token component', () => {
......@@ -185,23 +186,22 @@ describe('AuthorToken', () => {
});
});
it('renders token item when value is selected', () => {
it('renders token item when value is selected', async () => {
wrapper = createComponent({
value: { data: mockAuthors[0].username },
data: { authors: mockAuthors },
stubs: { Portal: true },
});
return wrapper.vm.$nextTick(() => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
await nextTick();
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator"
expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator"
const tokenValue = tokenSegments.at(2);
const tokenValue = tokenSegments.at(2);
expect(tokenValue.findComponent(GlAvatar).props('src')).toBe(mockAuthors[0].avatar_url);
expect(tokenValue.text()).toBe(mockAuthors[0].name); // "Administrator"
});
expect(tokenValue.findComponent(GlAvatar).props('src')).toBe(mockAuthors[0].avatar_url);
expect(tokenValue.text()).toBe(mockAuthors[0].name); // "Administrator"
});
it('renders token value with correct avatarUrl from author object', async () => {
......@@ -220,7 +220,7 @@ describe('AuthorToken', () => {
stubs: { Portal: true },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
......@@ -236,7 +236,7 @@ describe('AuthorToken', () => {
],
});
await wrapper.vm.$nextTick();
await nextTick();
expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
});
......@@ -268,7 +268,7 @@ describe('AuthorToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
});
......@@ -323,7 +323,7 @@ describe('AuthorToken', () => {
it('does not show current user while searching', async () => {
wrapper.findComponent(BaseToken).vm.handleInput({ data: 'foo' });
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlFilteredSearchSuggestion).exists()).toBe(false);
});
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
View file @ b712bfa7
import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import {
mockRegularLabel,
mockLabels,
......@@ -202,7 +203,7 @@ describe('BaseToken', () => {
jest.useFakeTimers();
findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
await wrapper.vm.$nextTick();
await nextTick();
jest.runAllTimers();
......@@ -221,7 +222,7 @@ describe('BaseToken', () => {
jest.useFakeTimers();
findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
await wrapper.vm.$nextTick();
await nextTick();
jest.runAllTimers();
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
View file @ b712bfa7
......@@ -6,6 +6,7 @@ import {
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
......@@ -115,7 +116,7 @@ describe('BranchToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
}
beforeEach(async () => {
......@@ -127,7 +128,7 @@ describe('BranchToken', () => {
branches: mockBranches,
});
await wrapper.vm.$nextTick();
await nextTick();
});
it('renders gl-filtered-search-token component', () => {
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
View file @ b712bfa7
......@@ -6,6 +6,7 @@ import {
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
......@@ -129,7 +130,7 @@ describe('EmojiToken', () => {
emojis: mockEmojis,
});
await wrapper.vm.$nextTick();
await nextTick();
});
it('renders gl-filtered-search-token component', () => {
......@@ -152,7 +153,7 @@ describe('EmojiToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
......@@ -171,7 +172,7 @@ describe('EmojiToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
......@@ -186,7 +187,7 @@ describe('EmojiToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
View file @ b712bfa7
......@@ -5,6 +5,7 @@ import {
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import {
mockRegularLabel,
......@@ -150,7 +151,7 @@ describe('LabelToken', () => {
labels: mockLabels,
});
await wrapper.vm.$nextTick();
await nextTick();
});
it('renders base-token component', () => {
......@@ -182,7 +183,7 @@ describe('LabelToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
......@@ -201,7 +202,7 @@ describe('LabelToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
View file @ b712bfa7
......@@ -6,6 +6,7 @@ import {
} from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
......@@ -127,7 +128,7 @@ describe('MilestoneToken', () => {
milestones: mockMilestones,
});
await wrapper.vm.$nextTick();
await nextTick();
});
it('renders gl-filtered-search-token component', () => {
......@@ -150,7 +151,7 @@ describe('MilestoneToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
......@@ -169,7 +170,7 @@ describe('MilestoneToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
......@@ -184,7 +185,7 @@ describe('MilestoneToken', () => {
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
const suggestionsSegment = tokenSegments.at(2);
suggestionsSegment.vm.$emit('activate');
await wrapper.vm.$nextTick();
await nextTick();
const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
......
spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
View file @ b712bfa7
import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
......@@ -31,7 +32,7 @@ describe('ReleaseToken', () => {
it('renders release value', async () => {
wrapper = createComponent({ value: { data: id } });
await wrapper.vm.$nextTick();
await nextTick();
const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
......
spec/frontend/vue_shared/components/local_storage_sync_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
describe('Local Storage Sync', () => {
......@@ -49,7 +50,7 @@ describe('Local Storage Sync', () => {
it.each('foo', 3, true, ['foo', 'bar'], { foo: 'bar' })(
'saves updated value to localStorage',
(newValue) => {
async (newValue) => {
createComponent({
props: {
storageKey,
......@@ -59,9 +60,8 @@ describe('Local Storage Sync', () => {
wrapper.setProps({ value: newValue });
return wrapper.vm.$nextTick().then(() => {
expect(localStorage.getItem(storageKey)).toBe(String(newValue));
});
await nextTick();
expect(localStorage.getItem(storageKey)).toBe(String(newValue));
},
);
......@@ -109,7 +109,7 @@ describe('Local Storage Sync', () => {
expect(localStorage.getItem(storageKey)).toBe(savedValue);
});
it('updating the value updates localStorage', () => {
it('updating the value updates localStorage', async () => {
createComponent({
props: {
storageKey,
......@@ -122,9 +122,8 @@ describe('Local Storage Sync', () => {
value: newValue,
});
return wrapper.vm.$nextTick().then(() => {
expect(localStorage.getItem(storageKey)).toBe(newValue);
});
await nextTick();
expect(localStorage.getItem(storageKey)).toBe(newValue);
});
it('persists the value by default', async () => {
......@@ -137,7 +136,7 @@ describe('Local Storage Sync', () => {
});
wrapper.setProps({ value: persistedValue });
await wrapper.vm.$nextTick();
await nextTick();
expect(localStorage.getItem(storageKey)).toBe(persistedValue);
});
......@@ -151,7 +150,7 @@ describe('Local Storage Sync', () => {
});
wrapper.setProps({ persist: false, value: notPersistedValue });
await wrapper.vm.$nextTick();
await nextTick();
expect(localStorage.getItem(storageKey)).not.toBe(notPersistedValue);
});
});
......@@ -172,7 +171,7 @@ describe('Local Storage Sync', () => {
${{ foo: 'bar' }} | ${'{"foo":"bar"}'}
`('given $value', ({ value, serializedValue }) => {
describe('is a new value', () => {
beforeEach(() => {
beforeEach(async () => {
createComponent({
props: {
storageKey,
......@@ -183,7 +182,7 @@ describe('Local Storage Sync', () => {
wrapper.setProps({ value });
return wrapper.vm.$nextTick();
await nextTick();
});
it('serializes the value correctly to localStorage', () => {
......@@ -253,7 +252,7 @@ describe('Local Storage Sync', () => {
value,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(localStorage.getItem(storageKey)).toBe(value);
......@@ -261,7 +260,7 @@ describe('Local Storage Sync', () => {
clear: true,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(localStorage.getItem(storageKey)).toBe(null);
});
......
spec/frontend/vue_shared/components/markdown/header_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import $ from 'jquery';
import { nextTick } from 'vue';
import HeaderComponent from '~/vue_shared/components/markdown/header.vue';
import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
......@@ -84,20 +85,16 @@ describe('Markdown field header component', () => {
expect(wrapper.find('li:nth-child(2)').classes()).toContain('active');
});
it('emits toggle markdown event when clicking preview', () => {
it('emits toggle markdown event when clicking preview', async () => {
wrapper.find('.js-preview-link').trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.emitted('preview-markdown').length).toEqual(1);
await nextTick();
expect(wrapper.emitted('preview-markdown').length).toEqual(1);
wrapper.find('.js-write-link').trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.emitted('write-markdown').length).toEqual(1);
});
wrapper.find('.js-write-link').trigger('click');
await nextTick();
expect(wrapper.emitted('write-markdown').length).toEqual(1);
});
it('does not emit toggle markdown event when triggered from another form', () => {
......
spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
View file @ b712bfa7
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import ApplySuggestion from '~/vue_shared/components/markdown/apply_suggestion.vue';
import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
......@@ -103,15 +104,14 @@ describe('Suggestion Diff component', () => {
expect(wrapper.text()).toContain('Applying suggestion...');
});
it('when callback of apply is called, hides loading', () => {
it('when callback of apply is called, hides loading', async () => {
const [callback] = wrapper.emitted().apply[0];
callback();
return wrapper.vm.$nextTick().then(() => {
expect(findApplyButton().exists()).toBe(true);
expect(findLoading().exists()).toBe(false);
});
await nextTick();
expect(findApplyButton().exists()).toBe(true);
expect(findLoading().exists()).toBe(false);
});
});
......
spec/frontend/vue_shared/components/modal_copy_button_spec.js
View file @ b712bfa7
import { shallowMount, createWrapper } from '@vue/test-utils';
import { nextTick } from 'vue';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
......@@ -20,7 +21,7 @@ describe('modal copy button', () => {
});
describe('clipboard', () => {
it('should fire a `success` event on click', () => {
it('should fire a `success` event on click', async () => {
const root = createWrapper(wrapper.vm.$root);
document.execCommand = jest.fn(() => true);
window.getSelection = jest.fn(() => ({
......@@ -29,20 +30,18 @@ describe('modal copy button', () => {
}));
wrapper.trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().success).not.toBeEmpty();
expect(document.execCommand).toHaveBeenCalledWith('copy');
expect(root.emitted(BV_HIDE_TOOLTIP)).toEqual([['test-id']]);
});
await nextTick();
expect(wrapper.emitted().success).not.toBeEmpty();
expect(document.execCommand).toHaveBeenCalledWith('copy');
expect(root.emitted(BV_HIDE_TOOLTIP)).toEqual([['test-id']]);
});
it("should propagate the clipboard error event if execCommand doesn't work", () => {
it("should propagate the clipboard error event if execCommand doesn't work", async () => {
document.execCommand = jest.fn(() => false);
wrapper.trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().error).not.toBeEmpty();
expect(document.execCommand).toHaveBeenCalledWith('copy');
});
await nextTick();
expect(wrapper.emitted().error).not.toBeEmpty();
expect(document.execCommand).toHaveBeenCalledWith('copy');
});
});
});
spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
View file @ b712bfa7
import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue';
describe('Issue Warning Component', () => {
......@@ -64,7 +65,7 @@ describe('Issue Warning Component', () => {
expect(findConfidentialBlock().exists()).toBe(true);
expect(findConfidentialBlock().element).toMatchSnapshot();
await wrapper.vm.$nextTick();
await nextTick();
expect(findConfidentialBlock(wrapper).text()).toContain('This is a confidential issue.');
});
......@@ -154,15 +155,15 @@ describe('Issue Warning Component', () => {
noteableType: 'Epic',
});
await wrapperLocked.vm.$nextTick();
await nextTick();
expect(findLockedBlock(wrapperLocked).text()).toContain('This epic is locked.');
await wrapperConfidential.vm.$nextTick();
await nextTick();
expect(findConfidentialBlock(wrapperConfidential).text()).toContain(
'This is a confidential epic.',
);
await wrapperLockedAndConfidential.vm.$nextTick();
await nextTick();
expect(findLockedAndConfidentialBlock(wrapperLockedAndConfidential).text()).toContain(
'This epic is confidential and locked.',
);
......@@ -179,15 +180,15 @@ describe('Issue Warning Component', () => {
noteableType: 'MergeRequest',
});
await wrapperLocked.vm.$nextTick();
await nextTick();
expect(findLockedBlock(wrapperLocked).text()).toContain('This merge request is locked.');
await wrapperConfidential.vm.$nextTick();
await nextTick();
expect(findConfidentialBlock(wrapperConfidential).text()).toContain(
'This is a confidential merge request.',
);
await wrapperLockedAndConfidential.vm.$nextTick();
await nextTick();
expect(findLockedAndConfidentialBlock(wrapperLockedAndConfidential).text()).toContain(
'This merge request is confidential and locked.',
);
......
spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
View file @ b712bfa7
import { GlAlert, GlBadge, GlPagination, GlTabs, GlTab } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Tracking from '~/tracking';
import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
......@@ -219,21 +220,21 @@ describe('AlertManagementEmptyState', () => {
it('returns prevPage button', async () => {
findPagination().vm.$emit('input', 3);
await wrapper.vm.$nextTick();
await nextTick();
expect(findPagination().findAll('.page-item').at(0).text()).toBe('Prev');
});
it('returns prevPage number', async () => {
findPagination().vm.$emit('input', 3);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.previousPage).toBe(2);
});
it('returns 0 when it is the first page', async () => {
findPagination().vm.$emit('input', 1);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.previousPage).toBe(0);
});
});
......@@ -242,7 +243,7 @@ describe('AlertManagementEmptyState', () => {
it('returns nextPage button', async () => {
findPagination().vm.$emit('input', 3);
await wrapper.vm.$nextTick();
await nextTick();
expect(findPagination().findAll('.page-item').at(1).text()).toBe('Next');
});
......@@ -257,14 +258,14 @@ describe('AlertManagementEmptyState', () => {
});
findPagination().vm.$emit('input', 1);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.nextPage).toBe(2);
});
it('returns `null` when currentPage is already last page', async () => {
findStatusTabs().vm.$emit('input', 1);
findPagination().vm.$emit('input', 1);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.nextPage).toBeNull();
});
});
......@@ -319,7 +320,7 @@ describe('AlertManagementEmptyState', () => {
searchTerm,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.filteredSearchValue).toEqual([searchTerm]);
});
......
spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
View file @ b712bfa7
import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { head } from 'lodash';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import mockProjects from 'test_fixtures_static/projects.json';
import { trimText } from 'helpers/text_helper';
import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
......@@ -77,39 +77,36 @@ describe('ProjectSelector component', () => {
expect(vm.$emit).toHaveBeenCalledWith('projectClicked', head(searchResults));
});
it(`shows a "no results" message if showNoResultsMessage === true`, () => {
it(`shows a "no results" message if showNoResultsMessage === true`, async () => {
wrapper.setProps({ showNoResultsMessage: true });
return vm.$nextTick().then(() => {
const noResultsEl = wrapper.find('.js-no-results-message');
await nextTick();
const noResultsEl = wrapper.find('.js-no-results-message');
expect(noResultsEl.exists()).toBe(true);
expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search');
});
expect(noResultsEl.exists()).toBe(true);
expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search');
});
it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, () => {
it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, async () => {
wrapper.setProps({ showMinimumSearchQueryMessage: true });
return vm.$nextTick().then(() => {
const minimumSearchEl = wrapper.find('.js-minimum-search-query-message');
await nextTick();
const minimumSearchEl = wrapper.find('.js-minimum-search-query-message');
expect(minimumSearchEl.exists()).toBe(true);
expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search');
});
expect(minimumSearchEl.exists()).toBe(true);
expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search');
});
it(`shows a error message if showSearchErrorMessage === true`, () => {
it(`shows a error message if showSearchErrorMessage === true`, async () => {
wrapper.setProps({ showSearchErrorMessage: true });
return vm.$nextTick().then(() => {
const errorMessageEl = wrapper.find('.js-search-error-message');
await nextTick();
const errorMessageEl = wrapper.find('.js-search-error-message');
expect(errorMessageEl.exists()).toBe(true);
expect(trimText(errorMessageEl.text())).toEqual(
'Something went wrong, unable to search projects',
);
});
expect(errorMessageEl.exists()).toBe(true);
expect(trimText(errorMessageEl.text())).toEqual(
'Something went wrong, unable to search projects',
);
});
describe('the search results legend', () => {
......@@ -121,7 +118,7 @@ describe('ProjectSelector component', () => {
${2} | ${3} | ${'Showing 2 of 3 projects'}
`(
'is "$expected" given $count results are showing out of $total',
({ count, total, expected }) => {
async ({ count, total, expected }) => {
search('gitlab ui');
wrapper.setProps({
......@@ -129,9 +126,8 @@ describe('ProjectSelector component', () => {
totalResults: total,
});
return wrapper.vm.$nextTick().then(() => {
expect(findLegendText()).toBe(expected);
});
await nextTick();
expect(findLegendText()).toBe(expected);
},
);
......
spec/frontend/vue_shared/components/registry/list_item_spec.js
View file @ b712bfa7
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import component from '~/vue_shared/components/registry/list_item.vue';
describe('list item', () => {
......@@ -70,10 +71,10 @@ describe('list item', () => {
it('are visible when details is shown', async () => {
mountComponent({}, slotMocks);
await wrapper.vm.$nextTick();
await nextTick();
findToggleDetailsButton().vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
slotNames.forEach((name) => {
expect(findDetailsSlot(name).exists()).toBe(true);
});
......@@ -90,7 +91,7 @@ describe('list item', () => {
describe('details toggle button', () => {
it('is visible when at least one details slot exists', async () => {
mountComponent({}, { 'details-foo': '<span></span>' });
await wrapper.vm.$nextTick();
await nextTick();
expect(findToggleDetailsButton().exists()).toBe(true);
});
......
spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
......@@ -61,7 +62,7 @@ describe('CollapsedCalendarIcon', () => {
it('emits click event when container is clicked', async () => {
wrapper.trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('click')[0]).toBeDefined();
});
......
spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
View file @ b712bfa7
import { GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DatePicker from '~/vue_shared/components/pikaday.vue';
import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
......@@ -79,7 +80,7 @@ describe('SidebarDatePicker', () => {
it('should enable editing when edit button is clicked', async () => {
findEditButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.editing).toBe(true);
});
......
spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
View file @ b712bfa7
......@@ -10,6 +10,7 @@ import {
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import axios from '~/lib/utils/axios_utils';
import IssuableMoveDropdown from '~/vue_shared/components/sidebar/issuable_move_dropdown.vue';
......@@ -74,7 +75,7 @@ describe('IssuableMoveDropdown', () => {
searchKey: 'foo',
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.fetchProjects).toHaveBeenCalledWith('foo');
});
......@@ -151,7 +152,7 @@ describe('IssuableMoveDropdown', () => {
selectedProject,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isSelectedProject(project)).toBe(returnValue);
},
......@@ -164,7 +165,7 @@ describe('IssuableMoveDropdown', () => {
selectedProject: null,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isSelectedProject(mockProjects[0])).toBe(false);
});
......@@ -218,7 +219,7 @@ describe('IssuableMoveDropdown', () => {
projectsListLoading: true,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findDropdownEl().find(GlLoadingIcon).exists()).toBe(true);
});
......@@ -231,7 +232,7 @@ describe('IssuableMoveDropdown', () => {
selectedProject: mockProjects[0],
});
await wrapper.vm.$nextTick();
await nextTick();
const dropdownItems = wrapper.findAll(GlDropdownItem);
......@@ -251,7 +252,7 @@ describe('IssuableMoveDropdown', () => {
});
// Wait for `searchKey` watcher to run.
await wrapper.vm.$nextTick();
await nextTick();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -260,7 +261,7 @@ describe('IssuableMoveDropdown', () => {
projectsListLoading: false,
});
await wrapper.vm.$nextTick();
await nextTick();
const dropdownContentEl = wrapper.find('[data-testid="content"]');
......@@ -276,7 +277,7 @@ describe('IssuableMoveDropdown', () => {
projectsListLoadFailed: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const dropdownContentEl = wrapper.find('[data-testid="content"]');
......@@ -295,7 +296,7 @@ describe('IssuableMoveDropdown', () => {
selectedProject: mockProjects[0],
});
await wrapper.vm.$nextTick();
await nextTick();
expect(
wrapper.find('[data-testid="footer"]').find(GlButton).attributes('disabled'),
......@@ -352,7 +353,7 @@ describe('IssuableMoveDropdown', () => {
projects: mockProjects,
});
await wrapper.vm.$nextTick();
await nextTick();
wrapper.findAll(GlDropdownItem).at(0).vm.$emit('click', mockEvent);
......@@ -366,7 +367,7 @@ describe('IssuableMoveDropdown', () => {
selectedProject: mockProjects[0],
});
await wrapper.vm.$nextTick();
await nextTick();
wrapper.find('[data-testid="footer"]').find(GlButton).vm.$emit('click');
......
spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
View file @ b712bfa7
import { GlIcon, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
......@@ -71,13 +71,12 @@ describe('DropdownButton', () => {
expect(dropdownTextEl.text()).toBe('Label');
});
it('renders provided button text element', () => {
it('renders provided button text element', async () => {
store.state.dropdownButtonText = 'Custom label';
const dropdownTextEl = findDropdownText();
return wrapper.vm.$nextTick().then(() => {
expect(dropdownTextEl.text()).toBe('Custom label');
});
await nextTick();
expect(dropdownTextEl.text()).toBe('Custom label');
});
it('renders chevron icon element', () => {
......
spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
View file @ b712bfa7
import { GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue';
......@@ -42,7 +42,7 @@ describe('DropdownContentsCreateView', () => {
expect(wrapper.vm.disableCreate).toBe(true);
});
it('returns `true` when `labelCreateInProgress` is true', () => {
it('returns `true` when `labelCreateInProgress` is true', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -51,12 +51,11 @@ describe('DropdownContentsCreateView', () => {
});
wrapper.vm.$store.dispatch('requestCreateLabel');
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.disableCreate).toBe(true);
});
await nextTick();
expect(wrapper.vm.disableCreate).toBe(true);
});
it('returns `false` when label title and color is defined and create request is not already in progress', () => {
it('returns `false` when label title and color is defined and create request is not already in progress', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -64,9 +63,8 @@ describe('DropdownContentsCreateView', () => {
selectedColor: '#ff0000',
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.disableCreate).toBe(false);
});
await nextTick();
expect(wrapper.vm.disableCreate).toBe(false);
});
});
......@@ -101,7 +99,7 @@ describe('DropdownContentsCreateView', () => {
});
describe('handleCreateClick', () => {
it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', () => {
it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', async () => {
jest.spyOn(wrapper.vm, 'createLabel').mockImplementation();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -112,14 +110,13 @@ describe('DropdownContentsCreateView', () => {
wrapper.vm.handleCreateClick();
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
expect.objectContaining({
title: 'Foo',
color: '#ff0000',
}),
);
});
await nextTick();
expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
expect.objectContaining({
title: 'Foo',
color: '#ff0000',
}),
);
});
});
});
......@@ -169,25 +166,22 @@ describe('DropdownContentsCreateView', () => {
});
});
it('renders color input element', () => {
it('renders color input element', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
selectedColor: '#ff0000',
});
return wrapper.vm.$nextTick(() => {
const colorPreviewEl = wrapper.find(
'.color-input-container > .dropdown-label-color-preview',
);
const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
await nextTick();
const colorPreviewEl = wrapper.find('.color-input-container > .dropdown-label-color-preview');
const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
expect(colorPreviewEl.exists()).toBe(true);
expect(colorPreviewEl.attributes('style')).toContain('background-color');
expect(colorInputEl.exists()).toBe(true);
expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
expect(colorInputEl.attributes('value')).toBe('#ff0000');
});
expect(colorPreviewEl.exists()).toBe(true);
expect(colorPreviewEl.attributes('style')).toContain('background-color');
expect(colorInputEl.exists()).toBe(true);
expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
expect(colorInputEl.attributes('value')).toBe('#ff0000');
});
it('renders create button element', () => {
......@@ -197,15 +191,14 @@ describe('DropdownContentsCreateView', () => {
expect(createBtnEl.text()).toContain('Create');
});
it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', () => {
it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', async () => {
wrapper.vm.$store.dispatch('requestCreateLabel');
return wrapper.vm.$nextTick(() => {
const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
await nextTick();
const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
expect(loadingIconEl.exists()).toBe(true);
expect(loadingIconEl.isVisible()).toBe(true);
});
expect(loadingIconEl.exists()).toBe(true);
expect(loadingIconEl.isVisible()).toBe(true);
});
it('renders cancel button element', () => {
......
spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
View file @ b712bfa7
......@@ -6,7 +6,7 @@ import {
GlLink,
} from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
......@@ -114,7 +114,7 @@ describe('DropdownContentsLabelsView', () => {
wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue);
},
......@@ -249,7 +249,7 @@ describe('DropdownContentsLabelsView', () => {
expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
});
it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', () => {
it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', async () => {
jest.spyOn(wrapper.vm, 'scrollIntoViewIfNeeded').mockImplementation();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -261,9 +261,8 @@ describe('DropdownContentsLabelsView', () => {
keyCode: DOWN_KEY_CODE,
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
});
await nextTick();
expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
});
});
......@@ -294,15 +293,14 @@ describe('DropdownContentsLabelsView', () => {
expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true);
});
it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', async () => {
wrapper.vm.$store.dispatch('requestLabels');
return wrapper.vm.$nextTick(() => {
const loadingIconEl = findLoadingIcon();
await nextTick();
const loadingIconEl = findLoadingIcon();
expect(loadingIconEl.exists()).toBe(true);
expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
});
expect(loadingIconEl.exists()).toBe(true);
expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
});
it('renders dropdown title element', () => {
......@@ -339,47 +337,44 @@ describe('DropdownContentsLabelsView', () => {
expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length);
});
it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => {
it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
currentHighlightItem: 0,
});
return wrapper.vm.$nextTick(() => {
const labelItemEl = findDropdownContent().find(LabelItem);
await nextTick();
const labelItemEl = findDropdownContent().find(LabelItem);
expect(labelItemEl.attributes('highlight')).toBe('true');
});
expect(labelItemEl.attributes('highlight')).toBe('true');
});
it('renders element containing "No matching results" when `searchKey` does not match with any label', () => {
it('renders element containing "No matching results" when `searchKey` does not match with any label', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
searchKey: 'abc',
});
return wrapper.vm.$nextTick(() => {
const noMatchEl = findDropdownContent().find('li');
await nextTick();
const noMatchEl = findDropdownContent().find('li');
expect(noMatchEl.isVisible()).toBe(true);
expect(noMatchEl.text()).toContain('No matching results');
});
expect(noMatchEl.isVisible()).toBe(true);
expect(noMatchEl.text()).toContain('No matching results');
});
it('renders empty content while loading', () => {
it('renders empty content while loading', async () => {
wrapper.vm.$store.state.labelsFetchInProgress = true;
return wrapper.vm.$nextTick(() => {
const dropdownContent = findDropdownContent();
const loadingIcon = findLoadingIcon();
await nextTick();
const dropdownContent = findDropdownContent();
const loadingIcon = findLoadingIcon();
expect(dropdownContent.exists()).toBe(true);
expect(dropdownContent.isVisible()).toBe(true);
expect(loadingIcon.exists()).toBe(true);
expect(loadingIcon.isVisible()).toBe(true);
});
expect(dropdownContent.exists()).toBe(true);
expect(dropdownContent.isVisible()).toBe(true);
expect(loadingIcon.exists()).toBe(true);
expect(loadingIcon.isVisible()).toBe(true);
});
it('renders footer list items', () => {
......@@ -393,14 +388,13 @@ describe('DropdownContentsLabelsView', () => {
expect(manageLabelsLink.text()).toBe('Manage labels');
});
it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', () => {
it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', async () => {
wrapper.vm.$store.state.allowLabelCreate = false;
return wrapper.vm.$nextTick(() => {
const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
await nextTick();
const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
expect(createLabelLink.text()).not.toBe('Create label');
});
expect(createLabelLink.text()).not.toBe('Create label');
});
it('does not render footer list items when `state.variant` is "standalone"', () => {
......
spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
View file @ b712bfa7
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
......@@ -47,14 +47,13 @@ describe('DropdownTitle', () => {
expect(editBtnEl.text()).toBe('Edit');
});
it('renders loading icon element when `labelsSelectInProgress` prop is true', () => {
it('renders loading icon element when `labelsSelectInProgress` prop is true', async () => {
wrapper.setProps({
labelsSelectInProgress: true,
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
});
await nextTick();
expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
});
});
});
spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import DropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue';
......@@ -42,7 +43,7 @@ describe('DropdownValueCollapsedComponent', () => {
wrapper.trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('onValueClick')[0]).toBeDefined();
});
......
spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { isInViewport } from '~/lib/utils/common_utils';
......@@ -139,27 +139,26 @@ describe('LabelsSelectRoot', () => {
${'embedded'} | ${'is-embedded'}
`(
'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
({ variant, cssClass }) => {
async ({ variant, cssClass }) => {
createComponent({
...mockConfig,
variant,
});
return wrapper.vm.$nextTick(() => {
expect(wrapper.classes()).toContain(cssClass);
});
await nextTick();
expect(wrapper.classes()).toContain(cssClass);
},
);
it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
createComponent();
await wrapper.vm.$nextTick;
await nextTick;
expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
});
it('renders `dropdown-title` component', async () => {
createComponent();
await wrapper.vm.$nextTick;
await nextTick;
expect(wrapper.find(DropdownTitle).exists()).toBe(true);
});
......@@ -167,7 +166,7 @@ describe('LabelsSelectRoot', () => {
createComponent(mockConfig, {
default: 'None',
});
await wrapper.vm.$nextTick;
await nextTick;
const valueComp = wrapper.find(DropdownValue);
......@@ -178,14 +177,14 @@ describe('LabelsSelectRoot', () => {
it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
createComponent();
wrapper.vm.$store.dispatch('toggleDropdownButton');
await wrapper.vm.$nextTick;
await nextTick;
expect(wrapper.find(DropdownButton).exists()).toBe(true);
});
it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
createComponent();
wrapper.vm.$store.dispatch('toggleDropdownContents');
await wrapper.vm.$nextTick;
await nextTick;
expect(wrapper.find(DropdownContents).exists()).toBe(true);
});
......@@ -198,22 +197,20 @@ describe('LabelsSelectRoot', () => {
wrapper.vm.$store.dispatch('toggleDropdownContents');
});
it('set direction when out of viewport', () => {
it('set direction when out of viewport', async () => {
isInViewport.mockImplementation(() => false);
wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
});
await nextTick();
expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
});
it('does not set direction when inside of viewport', () => {
it('does not set direction when inside of viewport', async () => {
isInViewport.mockImplementation(() => true);
wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
});
await nextTick();
expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
});
},
);
......
spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js
View file @ b712bfa7
import { GlButton } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
describe('ToggleSidebar', () => {
......@@ -38,7 +39,7 @@ describe('ToggleSidebar', () => {
createComponent({ mountFn: mount });
findGlButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted('toggle')[0]).toBeDefined();
});
......
spec/frontend/vue_shared/components/split_button_spec.js
View file @ b712bfa7
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import SplitButton from '~/vue_shared/components/split_button.vue';
const mockActionItems = [
......@@ -27,15 +28,15 @@ describe('SplitButton', () => {
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItem = (index = 0) => findDropdown().findAll(GlDropdownItem).at(index);
const selectItem = (index) => {
const selectItem = async (index) => {
findDropdownItem(index).vm.$emit('click');
return wrapper.vm.$nextTick();
await nextTick();
};
const clickToggleButton = () => {
const clickToggleButton = async () => {
findDropdown().vm.$emit('click');
return wrapper.vm.$nextTick();
await nextTick();
};
it('fails for empty actionItems', () => {
......
spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
View file @ b712bfa7
import { GlIcon, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
jest.mock('~/flash');
......@@ -84,47 +85,40 @@ describe('Upload dropzone component', () => {
${'contains text'} | ${mockDragEvent({ types: ['text'] })}
${'contains files and text'} | ${mockDragEvent({ types: ['Files', 'text'] })}
${'contains files'} | ${mockDragEvent({ types: ['Files'] })}
`('renders correct template when drag event $description', ({ eventPayload }) => {
`('renders correct template when drag event $description', async ({ eventPayload }) => {
createComponent();
wrapper.trigger('dragenter', eventPayload);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
await nextTick();
expect(wrapper.element).toMatchSnapshot();
});
it('renders correct template when dragging stops', () => {
it('renders correct template when dragging stops', async () => {
createComponent();
wrapper.trigger('dragenter');
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.trigger('dragleave');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.element).toMatchSnapshot();
});
await nextTick();
wrapper.trigger('dragleave');
await nextTick();
expect(wrapper.element).toMatchSnapshot();
});
});
describe('when dropping', () => {
it('emits upload event', () => {
it('emits upload event', async () => {
createComponent();
const mockFile = { name: 'test', type: 'image/jpg' };
const mockEvent = mockDragEvent({ files: [mockFile] });
wrapper.trigger('dragenter', mockEvent);
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.trigger('drop', mockEvent);
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
});
await nextTick();
wrapper.trigger('drop', mockEvent);
await nextTick();
expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
});
});
......
spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
View file @ b712bfa7
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { TEST_HOST } from 'spec/test_constants';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
......@@ -142,14 +143,13 @@ describe('UserAvatarList', () => {
expect(links.length).toEqual(props.items.length);
});
it('with collapse clicked, it renders avatars up to breakpoint', () => {
it('with collapse clicked, it renders avatars up to breakpoint', async () => {
clickButton();
return wrapper.vm.$nextTick(() => {
const links = wrapper.findAll(UserAvatarLink);
await nextTick();
const links = wrapper.findAll(UserAvatarLink);
expect(links.length).toEqual(TEST_BREAKPOINT);
});
expect(links.length).toEqual(TEST_BREAKPOINT);
});
});
});
......
spec/frontend/vue_shared/components/web_ide_link_spec.js
View file @ b712bfa7
......@@ -213,7 +213,7 @@ describe('Web IDE link component', () => {
findLocalStorageSync().vm.$emit('input', ACTION_GITPOD.key);
await wrapper.vm.$nextTick();
await nextTick();
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
});
......@@ -223,7 +223,7 @@ describe('Web IDE link component', () => {
findActionsButton().vm.$emit('select', ACTION_GITPOD.key);
await wrapper.vm.$nextTick();
await nextTick();
expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
expect(findLocalStorageSync().props('value')).toBe(ACTION_GITPOD.key);
......
spec/frontend/vue_shared/directives/track_event_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Tracking from '~/tracking';
import TrackEvent from '~/vue_shared/directives/track_event';
......@@ -31,7 +31,7 @@ describe('Error Tracking directive', () => {
expect(Tracking.event).not.toHaveBeenCalled();
});
it('should track event on click if tracking info provided', () => {
it('should track event on click if tracking info provided', async () => {
const trackingOptions = {
category: 'Tracking',
action: 'click_trackable_btn',
......@@ -43,9 +43,8 @@ describe('Error Tracking directive', () => {
wrapper.setData({ trackingOptions });
const { category, action, label, property, value } = trackingOptions;
return wrapper.vm.$nextTick(() => {
button.trigger('click');
expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
});
await nextTick();
button.trigger('click');
expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
});
});
spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
View file @ b712bfa7
import { GlLink, GlLabel, GlIcon, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
import { nextTick } from 'vue';
import { useFakeDate } from 'helpers/fake_date';
import { shallowMountExtended as shallowMount } from 'helpers/vue_test_utils_helper';
import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue';
......@@ -76,7 +77,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.authorId).toBe(returnValue);
},
......@@ -100,7 +101,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isIssuableUrlExternal).toBe(returnValue);
},
......@@ -122,7 +123,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.labels).toEqual(mockLabels);
});
......@@ -135,7 +136,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.labels).toEqual([]);
});
......@@ -224,7 +225,7 @@ describe('IssuableItem', () => {
enableLabelPermalinks: false,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.labelTarget(mockRegularLabel)).toBe('#');
});
......@@ -248,7 +249,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
const titleEl = wrapper.find('[data-testid="issuable-title"]');
......@@ -264,7 +265,7 @@ describe('IssuableItem', () => {
showCheckbox: true,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlFormCheckbox).exists()).toBe(true);
expect(wrapper.find(GlFormCheckbox).attributes('checked')).not.toBeDefined();
......@@ -273,7 +274,7 @@ describe('IssuableItem', () => {
checked: true,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find(GlFormCheckbox).attributes('checked')).toBe('true');
});
......@@ -286,7 +287,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find('[data-testid="issuable-title"]').find(GlLink).attributes('target')).toBe(
'_blank',
......@@ -301,7 +302,7 @@ describe('IssuableItem', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
const confidentialEl = wrapper.find('[data-testid="issuable-title"]').find(GlIcon);
......
spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
View file @ b712bfa7
......@@ -2,6 +2,7 @@ import { GlAlert, GlKeysetPagination, GlSkeletonLoading, GlPagination } from '@g
import { shallowMount } from '@vue/test-utils';
import VueDraggable from 'vuedraggable';
import { nextTick } from 'vue';
import { TEST_HOST } from 'helpers/test_constants';
import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue';
......@@ -77,7 +78,7 @@ describe('IssuableListRoot', () => {
currentPage,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.skeletonItemCount).toBe(returnValue);
},
......@@ -96,7 +97,7 @@ describe('IssuableListRoot', () => {
issuables,
});
await wrapper.vm.$nextTick();
await nextTick();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -104,7 +105,7 @@ describe('IssuableListRoot', () => {
checkedIssuables,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.allIssuablesChecked).toBe(returnValue);
},
......@@ -119,7 +120,7 @@ describe('IssuableListRoot', () => {
checkedIssuables: mockCheckedIssuables,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.bulkEditIssuables).toHaveLength(mIssuables.length);
});
......@@ -137,7 +138,7 @@ describe('IssuableListRoot', () => {
issuables: [mockIssuables[0]],
});
await wrapper.vm.$nextTick();
await nextTick();
expect(Object.keys(wrapper.vm.checkedIssuables)).toHaveLength(1);
expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({
......@@ -160,7 +161,7 @@ describe('IssuableListRoot', () => {
urlParams,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(global.window.location.href).toBe(
`${TEST_HOST}/?state=${urlParams.state}&sort=${urlParams.sort}&page=${urlParams.page}&search=${urlParams.search}`,
......@@ -192,7 +193,7 @@ describe('IssuableListRoot', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.issuableChecked(mockIssuables[0])).toBe(true);
});
......
spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
View file @ b712bfa7
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { useFakeDate } from 'helpers/fake_date';
import IssuableBody from '~/vue_shared/issuable/show/components/issuable_body.vue';
......@@ -68,7 +69,7 @@ describe('IssuableBody', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isUpdated).toBe(returnValue);
},
......@@ -90,13 +91,13 @@ describe('IssuableBody', () => {
editFormVisible: true,
});
await wrapper.vm.$nextTick();
await nextTick();
wrapper.setProps({
editFormVisible: false,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.initTaskList).toHaveBeenCalled();
});
......@@ -182,7 +183,7 @@ describe('IssuableBody', () => {
editFormVisible: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const editFormEl = wrapper.find(IssuableEditForm);
expect(editFormEl.exists()).toBe(true);
......@@ -221,7 +222,7 @@ describe('IssuableBody', () => {
editFormVisible: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const issuableEditForm = wrapper.find(IssuableEditForm);
......
spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
View file @ b712bfa7
import { GlFormInput } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import IssuableEditForm from '~/vue_shared/issuable/show/components/issuable_edit_form.vue';
import IssuableEventHub from '~/vue_shared/issuable/show/event_hub';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
......@@ -52,7 +53,7 @@ describe('IssuableEditForm', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.title).toBe('Foo');
expect(wrapper.vm.description).toBe('Foobar');
......@@ -67,7 +68,7 @@ describe('IssuableEditForm', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.title).toBe('');
expect(wrapper.vm.description).toBe('');
......
spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
View file @ b712bfa7
import { GlIcon, GlAvatarLabeled } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue';
......@@ -78,7 +79,7 @@ describe('IssuableHeader', () => {
blocked: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const blockedEl = wrapper.findByTestId('blocked');
......@@ -91,7 +92,7 @@ describe('IssuableHeader', () => {
confidential: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const confidentialEl = wrapper.findByTestId('confidential');
......
spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
View file @ b712bfa7
import { GlIcon, GlButton, GlIntersectionObserver } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import IssuableTitle from '~/vue_shared/issuable/show/components/issuable_title.vue';
......@@ -64,7 +65,7 @@ describe('IssuableTitle', () => {
},
});
await wrapperWithTitle.vm.$nextTick();
await nextTick();
const titleEl = wrapperWithTitle.find('h2');
expect(titleEl.exists()).toBe(true);
......@@ -90,7 +91,7 @@ describe('IssuableTitle', () => {
stickyTitleVisible: true,
});
await wrapper.vm.$nextTick();
await nextTick();
const stickyHeaderEl = wrapper.find('[data-testid="header"]');
expect(stickyHeaderEl.exists()).toBe(true);
......
spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
View file @ b712bfa7
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import Cookies from 'js-cookie';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import IssuableSidebarRoot from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue';
......@@ -88,7 +89,7 @@ describe('IssuableSidebarRoot', () => {
jest.spyOn(bp, 'isDesktop').mockReturnValue(breakpoint === 'lg' || breakpoint === 'xl');
window.dispatchEvent(new Event('resize'));
await wrapper.vm.$nextTick();
await nextTick();
assertPageLayoutClasses({ isExpanded: isExpandedValue });
},
......
spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
View file @ b712bfa7
......@@ -37,9 +37,8 @@ describe('Welcome page', () => {
const link = wrapper.find('a');
link.trigger('click');
await nextTick();
return wrapper.vm.$nextTick().then(() => {
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' });
});
await nextTick();
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' });
});
it('renders footer slot if provided', () => {
......
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