Skip to content

G
gitlab-ce
Commit fc0c6b91 authored by Stanislav Lashmanov's avatar Stanislav Lashmanov Committed by Natalia Tepluhina
Browse files
Options

Replace Vue.nextTick with a direct import from Vue package 

RFC: https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/47
parent 64bb3a07
Hide whitespace changes
Inline Side-by-side
Showing with 441 additions and 624 deletions
ee/spec/frontend/approvals/components/approval_check_popover_spec.js
View file @ fc0c6b91
import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import component from 'ee/approvals/components/approval_check_popover.vue';
import { TEST_HOST } from 'helpers/test_constants';
......@@ -17,11 +17,11 @@ describe('Approval Check Popover', () => {
describe('with a documentation link', () => {
const documentationLink = `${TEST_HOST}/documentation`;
beforeEach((done) => {
beforeEach(async () => {
wrapper.setProps({
documentationLink,
});
Vue.nextTick(done);
await nextTick();
});
it('should render the documentation link', () => {
......
ee/spec/frontend/approvals/components/approval_check_rule_popover_spec.js
View file @ fc0c6b91
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import component from 'ee/approvals/components/approval_check_rule_popover.vue';
import {
VULNERABILITY_CHECK_NAME,
......@@ -20,107 +20,87 @@ describe('Approval Check Popover', () => {
describe('computed props', () => {
const securityApprovalsHelpPagePath = `${TEST_HOST}/documentation`;
beforeEach((done) => {
beforeEach(async () => {
wrapper.setProps({ securityApprovalsHelpPagePath });
Vue.nextTick(done);
await nextTick();
});
describe('showVulnerabilityCheckPopover', () => {
it('return true if the rule type is "Vulnerability-Check"', (done) => {
it('return true if the rule type is "Vulnerability-Check"', async () => {
wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
Vue.nextTick(() => {
expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(true);
done();
});
await nextTick();
expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(true);
});
it('return false if the rule type is "Vulnerability-Check"', (done) => {
it('return false if the rule type is "Vulnerability-Check"', async () => {
wrapper.setProps({ rule: { name: 'FooRule' } });
Vue.nextTick(() => {
expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(false);
done();
});
await nextTick();
expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(false);
});
});
describe('showLicenseCheckPopover', () => {
it('return true if the rule type is "License-Check"', (done) => {
it('return true if the rule type is "License-Check"', async () => {
wrapper.setProps({ rule: { name: LICENSE_CHECK_NAME } });
Vue.nextTick(() => {
expect(wrapper.vm.showLicenseCheckPopover).toBe(true);
done();
});
await nextTick();
expect(wrapper.vm.showLicenseCheckPopover).toBe(true);
});
it('return false if the rule type is "License-Check"', (done) => {
it('return false if the rule type is "License-Check"', async () => {
wrapper.setProps({ rule: { name: 'FooRule' } });
Vue.nextTick(() => {
expect(wrapper.vm.showLicenseCheckPopover).toBe(false);
done();
});
await nextTick();
expect(wrapper.vm.showLicenseCheckPopover).toBe(false);
});
});
describe('approvalConfig', () => {
it('returns "Vulnerability-Check" config', (done) => {
it('returns "Vulnerability-Check" config', async () => {
wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
Vue.nextTick(() => {
expect(wrapper.vm.approvalRuleConfig.title).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].title,
);
expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].popoverText,
);
expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].documentationText,
);
done();
});
await nextTick();
expect(wrapper.vm.approvalRuleConfig.title).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].title,
);
expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].popoverText,
);
expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].documentationText,
);
});
it('returns "License-Check" config', (done) => {
it('returns "License-Check" config', async () => {
wrapper.setProps({ rule: { name: LICENSE_CHECK_NAME } });
Vue.nextTick(() => {
expect(wrapper.vm.approvalRuleConfig.title).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].title,
);
expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].popoverText,
);
expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].documentationText,
);
done();
});
await nextTick();
expect(wrapper.vm.approvalRuleConfig.title).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].title,
);
expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].popoverText,
);
expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].documentationText,
);
});
it('returns an undefined config', (done) => {
it('returns an undefined config', async () => {
wrapper.setProps({ rule: { name: 'FooRule' } });
Vue.nextTick(() => {
expect(wrapper.vm.approvalConfig).toBe(undefined);
done();
});
await nextTick();
expect(wrapper.vm.approvalConfig).toBe(undefined);
});
});
describe('documentationLink', () => {
it('returns documentation link for "License-Check"', (done) => {
it('returns documentation link for "License-Check"', async () => {
wrapper.setProps({ rule: { name: 'License-Check' } });
Vue.nextTick(() => {
expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
done();
});
await nextTick();
expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
});
it('returns documentation link for "Vulnerability-Check"', (done) => {
it('returns documentation link for "Vulnerability-Check"', async () => {
wrapper.setProps({ rule: { name: 'Vulnerability-Check' } });
Vue.nextTick(() => {
expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
done();
});
await nextTick();
expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
});
it('returns empty text', (done) => {
it('returns empty text', async () => {
const text = '';
wrapper.setProps({ rule: { name: 'FooRule' } });
Vue.nextTick(() => {
expect(wrapper.vm.documentationLink).toBe(text);
done();
});
await nextTick();
expect(wrapper.vm.documentationLink).toBe(text);
});
});
});
......
ee/spec/frontend/roadmap/components/preset_quarters/quarters_header_item_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import QuartersHeaderItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_item.vue';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
......@@ -81,18 +81,14 @@ describe('QuartersHeaderItemComponent', () => {
expect(vm.timelineHeaderClass).toBe('');
});
it('returns string containing `label-dark label-bold` when current quarter is same as timeframeItem quarter', (done) => {
it('returns string containing `label-dark label-bold` when current quarter is same as timeframeItem quarter', async () => {
vm = createComponent({
timeframeItem: mockTimeframeQuarters[1],
});
[, vm.currentDate] = mockTimeframeQuarters[1].range;
Vue.nextTick()
.then(() => {
expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
});
it('returns string containing `label-dark` when current quarter is less than timeframeItem quarter', () => {
......
ee/spec/frontend/subscriptions/new/components/checkout/payment_method_spec.js
View file @ fc0c6b91
import { mount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import Vuex from 'vuex';
import { STEPS } from 'ee/subscriptions/constants';
......@@ -50,12 +51,11 @@ describe('Payment Method', () => {
expect(isStepValid()).toBe(true);
});
it('should be invalid when paymentMethodId is undefined', () => {
it('should be invalid when paymentMethodId is undefined', async () => {
store.commit(types.UPDATE_PAYMENT_METHOD_ID, null);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
});
......
ee/spec/frontend/subscriptions/new/components/checkout/subscription_details_spec.js
View file @ fc0c6b91
import { mount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import Vuex from 'vuex';
import { STEPS } from 'ee/subscriptions/constants';
......@@ -365,37 +366,33 @@ describe('Subscription Details', () => {
expect(isStepValid()).toBe(true);
});
it('should be invalid when no plan is selected', () => {
it('should be invalid when no plan is selected', async () => {
store.commit(types.UPDATE_SELECTED_PLAN, null);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when no organization name is given, and no group is selected', () => {
it('should be invalid when no organization name is given, and no group is selected', async () => {
store.commit(types.UPDATE_ORGANIZATION_NAME, null);
store.commit(types.UPDATE_SELECTED_GROUP, null);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when number of users is 0', () => {
it('should be invalid when number of users is 0', async () => {
store.commit(types.UPDATE_NUMBER_OF_USERS, 0);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when number of users is smaller than the selected group users', () => {
it('should be invalid when number of users is smaller than the selected group users', async () => {
store.commit(types.UPDATE_NUMBER_OF_USERS, 10);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
});
......@@ -440,36 +437,32 @@ describe('Subscription Details', () => {
expect(isStepValid()).toBe(true);
});
it('should be invalid when no plan is selected', () => {
it('should be invalid when no plan is selected', async () => {
store.commit(types.UPDATE_SELECTED_PLAN, null);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when number users is 0', () => {
it('should be invalid when number users is 0', async () => {
store.commit(types.UPDATE_NUMBER_OF_USERS, 0);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be valid when number of users is greater than group users', () => {
it('should be valid when number of users is greater than group users', async () => {
store.commit(types.UPDATE_NUMBER_OF_USERS, 4);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(true);
});
await nextTick();
expect(isStepValid()).toBe(true);
});
it('should not be valid when number of users is less than group users', () => {
it('should not be valid when number of users is less than group users', async () => {
store.commit(types.UPDATE_NUMBER_OF_USERS, 2);
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
await nextTick();
expect(isStepValid()).toBe(false);
});
});
});
......
ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_spec.js
View file @ fc0c6b91
import { GlFormRadio, GlFormRadioGroup } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/add_license_form.vue';
import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_compliance/constants';
......@@ -38,7 +38,7 @@ describe('AddLicenseForm', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED, licenseName: name });
await Vue.nextTick();
await nextTick();
const linkEl = findSubmitButton();
linkEl.trigger('click');
......@@ -141,7 +141,7 @@ describe('AddLicenseForm', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ licenseName: 'FOO' });
await Vue.nextTick();
await nextTick();
const feedbackElement = wrapper.find('.invalid-feedback');
......@@ -158,7 +158,7 @@ describe('AddLicenseForm', () => {
},
});
await Vue.nextTick();
await nextTick();
const descriptionElement = wrapper.findAll('.text-secondary');
......@@ -173,7 +173,7 @@ describe('AddLicenseForm', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ licenseName: '' });
await Vue.nextTick();
await nextTick();
expect(vm.submitDisabled).toBe(true);
......@@ -185,7 +185,7 @@ describe('AddLicenseForm', () => {
it('disables submit and cancel while a new license is being added', async () => {
wrapper.setProps({ loading: true });
await Vue.nextTick();
await nextTick();
const submitButton = findSubmitButton();
const cancelButton = findCancelButton();
......
ee/spec/frontend/vue_shared/license_compliance/components/admin_license_management_row_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import AdminLicenseManagementRow from 'ee/vue_shared/license_compliance/components/admin_license_management_row.vue';
......@@ -54,9 +54,9 @@ describe('AdminLicenseManagementRow', () => {
});
describe('approved license', () => {
beforeEach((done) => {
beforeEach(async () => {
vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED };
Vue.nextTick(done);
await nextTick();
});
describe('computed', () => {
......@@ -89,9 +89,9 @@ describe('AdminLicenseManagementRow', () => {
});
describe('blacklisted license', () => {
beforeEach((done) => {
beforeEach(async () => {
vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.DENIED };
Vue.nextTick(done);
await nextTick();
});
describe('computed', () => {
......
ee/spec/frontend/vue_shared/license_compliance/components/license_packages_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import LicensePackages from 'ee/vue_shared/license_compliance/components/license_packages.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
......@@ -29,14 +29,10 @@ describe('LicensePackages', () => {
expect(vm.remainingPackages).toBe('2 more');
});
it('returns empty string when count of packages does not exceed `displayPackageCount` prop', (done) => {
it('returns empty string when count of packages does not exceed `displayPackageCount` prop', async () => {
vm.displayPackageCount = examplePackages.length + 1;
Vue.nextTick()
.then(() => {
expect(vm.remainingPackages).toBe('');
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.remainingPackages).toBe('');
});
});
});
......
ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js
View file @ fc0c6b91
import { GlModal, GlAlert } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_request_note.vue';
import component from 'ee/vue_shared/security_reports/components/modal.vue';
......@@ -132,7 +132,7 @@ describe('Security Reports modal', () => {
describe('with merge request created', () => {
const findActionButton = () => wrapper.find('[data-testid=create-issue-button]');
it('renders the issue button as a single button', (done) => {
it('renders the issue button as a single button', async () => {
const propsData = {
modal: createState().modal,
canCreateIssue: true,
......@@ -143,15 +143,11 @@ describe('Security Reports modal', () => {
wrapper.setProps(propsData);
Vue.nextTick()
.then(() => {
expect(wrapper.find('.js-split-button').exists()).toBe(false);
expect(findActionButton().exists()).toBe(true);
expect(findActionButton().text()).not.toContain('Resolve with merge request');
expect(findActionButton().text()).toContain('Create issue');
done();
})
.catch(done.fail);
await nextTick();
expect(wrapper.find('.js-split-button').exists()).toBe(false);
expect(findActionButton().exists()).toBe(true);
expect(findActionButton().text()).not.toContain('Resolve with merge request');
expect(findActionButton().text()).toContain('Create issue');
});
});
});
......@@ -340,7 +336,7 @@ describe('Security Reports modal', () => {
const solution = 'Upgrade to XYZ';
propsData.modal.vulnerability.solution = solution;
mountComponent(propsData, mount);
await wrapper.vm.$nextTick();
await nextTick();
const solutionCard = modal.find(SolutionCard);
......@@ -357,7 +353,7 @@ describe('Security Reports modal', () => {
const diff = 'foo';
propsData.modal.vulnerability.remediations = [{ summary, diff }];
mountComponent(propsData, mount);
await wrapper.vm.$nextTick();
await nextTick();
const solutionCard = wrapper.find(SolutionCard);
......@@ -372,7 +368,7 @@ describe('Security Reports modal', () => {
modal: createState().modal,
};
mountComponent(propsData, mount);
await wrapper.vm.$nextTick();
await nextTick();
const solutionCard = wrapper.find(SolutionCard);
......
spec/frontend/badges/components/badge_form_spec.js
View file @ fc0c6b91
import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
import BadgeForm from '~/badges/components/badge_form.vue';
......@@ -74,7 +74,7 @@ describe('BadgeForm component', () => {
expect(feedbackElement).toBeVisible();
};
beforeEach((done) => {
beforeEach(async () => {
jest.spyOn(vm, submitAction).mockReturnValue(Promise.resolve());
store.replaceState({
...store.state,
......@@ -83,14 +83,10 @@ describe('BadgeForm component', () => {
isSaving: false,
});
Vue.nextTick()
.then(() => {
setValue(nameSelector, 'TestBadge');
setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
})
.then(done)
.catch(done.fail);
await nextTick();
setValue(nameSelector, 'TestBadge');
setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
});
it('returns immediately if imageUrl is empty', () => {
......
spec/frontend/badges/components/badge_list_row_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
import BadgeListRow from '~/badges/components/badge_list_row.vue';
import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
......@@ -73,25 +73,21 @@ describe('BadgeListRow component', () => {
expect(vm.editBadge).toHaveBeenCalled();
});
it('calls updateBadgeInModal and shows modal when clicking then delete button', (done) => {
it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
deleteButton.click();
Vue.nextTick()
.then(() => {
expect(vm.updateBadgeInModal).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.updateBadgeInModal).toHaveBeenCalled();
});
describe('for a group badge', () => {
beforeEach((done) => {
beforeEach(async () => {
badge.kind = GROUP_BADGE;
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('renders the badge kind', () => {
......
spec/frontend/badges/components/badge_list_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
import BadgeList from '~/badges/components/badge_list.vue';
import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
......@@ -48,46 +48,34 @@ describe('BadgeList component', () => {
expect(rows).toHaveLength(numberOfDummyBadges);
});
it('renders a message if no badges exist', (done) => {
it('renders a message if no badges exist', async () => {
store.state.badges = [];
Vue.nextTick()
.then(() => {
expect(vm.$el.innerText).toMatch('This project has no badges');
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.$el.innerText).toMatch('This project has no badges');
});
it('shows a loading icon when loading', (done) => {
it('shows a loading icon when loading', async () => {
store.state.isLoading = true;
Vue.nextTick()
.then(() => {
const loadingIcon = vm.$el.querySelector('.gl-spinner');
await nextTick();
const loadingIcon = vm.$el.querySelector('.gl-spinner');
expect(loadingIcon).toBeVisible();
})
.then(done)
.catch(done.fail);
expect(loadingIcon).toBeVisible();
});
describe('for group badges', () => {
beforeEach((done) => {
beforeEach(async () => {
store.state.kind = GROUP_BADGE;
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('renders a message if no badges exist', (done) => {
it('renders a message if no badges exist', async () => {
store.state.badges = [];
Vue.nextTick()
.then(() => {
expect(vm.$el.innerText).toMatch('This group has no badges');
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.$el.innerText).toMatch('This group has no badges');
});
});
});
spec/frontend/badges/components/badge_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
import Badge from '~/badges/components/badge.vue';
......@@ -27,7 +27,7 @@ describe('Badge component', () => {
badgeImage.addEventListener('load', resolve);
// Manually dispatch load event as it is not triggered
badgeImage.dispatchEvent(new Event('load'));
}).then(() => Vue.nextTick());
}).then(() => nextTick());
};
afterEach(() => {
......@@ -36,34 +36,25 @@ describe('Badge component', () => {
describe('watchers', () => {
describe('imageUrl', () => {
it('sets isLoading and resets numRetries and hasError', (done) => {
it('sets isLoading and resets numRetries and hasError', async () => {
const props = { ...dummyProps };
createComponent(props)
.then(() => {
expect(vm.isLoading).toBe(false);
vm.hasError = true;
vm.numRetries = 42;
vm.imageUrl = `${props.imageUrl}#something/else`;
return Vue.nextTick();
})
.then(() => {
expect(vm.isLoading).toBe(true);
expect(vm.numRetries).toBe(0);
expect(vm.hasError).toBe(false);
})
.then(done)
.catch(done.fail);
await createComponent(props);
expect(vm.isLoading).toBe(false);
vm.hasError = true;
vm.numRetries = 42;
vm.imageUrl = `${props.imageUrl}#something/else`;
await nextTick();
expect(vm.isLoading).toBe(true);
expect(vm.numRetries).toBe(0);
expect(vm.hasError).toBe(false);
});
});
});
describe('methods', () => {
beforeEach((done) => {
createComponent({ ...dummyProps })
.then(done)
.catch(done.fail);
beforeEach(async () => {
await createComponent({ ...dummyProps });
});
it('onError resets isLoading and sets hasError', () => {
......@@ -116,37 +107,29 @@ describe('Badge component', () => {
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
});
it('shows a loading icon when loading', (done) => {
it('shows a loading icon when loading', async () => {
vm.isLoading = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
await nextTick();
const { badgeImage, loadingIcon, reloadButton } = findElements();
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeVisible();
expect(reloadButton).toBeHidden();
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
})
.then(done)
.catch(done.fail);
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeVisible();
expect(reloadButton).toBeHidden();
expect(vm.$el.querySelector('.btn-group')).toBeHidden();
});
it('shows an error and reload button if loading failed', (done) => {
it('shows an error and reload button if loading failed', async () => {
vm.hasError = true;
Vue.nextTick()
.then(() => {
const { badgeImage, loadingIcon, reloadButton } = findElements();
await nextTick();
const { badgeImage, loadingIcon, reloadButton } = findElements();
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeHidden();
expect(reloadButton).toBeVisible();
expect(reloadButton).toHaveSpriteIcon('retry');
expect(vm.$el.innerText.trim()).toBe('No badge image');
})
.then(done)
.catch(done.fail);
expect(badgeImage).toBeHidden();
expect(loadingIcon).toBeHidden();
expect(reloadButton).toBeVisible();
expect(reloadButton).toHaveSpriteIcon('retry');
expect(vm.$el.innerText.trim()).toBe('No badge image');
});
});
});
spec/frontend/batch_comments/components/preview_dropdown_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
......@@ -49,7 +49,7 @@ describe('Batch comments preview dropdown', () => {
wrapper.findByTestId('preview-item').vm.$emit('click');
await Vue.nextTick();
await nextTick();
expect(setCurrentFileHash).toHaveBeenCalledWith(expect.anything(), 'hash');
expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' });
......@@ -63,7 +63,7 @@ describe('Batch comments preview dropdown', () => {
wrapper.findByTestId('preview-item').vm.$emit('click');
await Vue.nextTick();
await nextTick();
expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
});
......
spec/frontend/confirm_modal_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import { nextTick } from 'vue';
import { TEST_HOST } from 'helpers/test_constants';
import initConfirmModal from '~/confirm_modal';
......@@ -92,10 +92,9 @@ describe('ConfirmModal', () => {
});
describe('Cancel Button', () => {
beforeEach(() => {
beforeEach(async () => {
findModalCancelButton(findModal()).click();
return Vue.nextTick();
await nextTick();
});
it('closes the modal', () => {
......
spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js
View file @ fc0c6b91
import { GlFormCheckbox } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
......@@ -223,108 +223,98 @@ describe('EksClusterConfigurationForm', () => {
});
});
it('sets isLoadingRoles to RoleDropdown loading property', () => {
it('sets isLoadingRoles to RoleDropdown loading property', async () => {
rolesState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
});
await nextTick();
expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
});
it('sets roles to RoleDropdown items property', () => {
expect(findRoleDropdown().props('items')).toBe(rolesState.items);
});
it('sets RoleDropdown hasErrors to true when loading roles failed', () => {
it('sets RoleDropdown hasErrors to true when loading roles failed', async () => {
rolesState.loadingItemsError = new Error();
return Vue.nextTick().then(() => {
expect(findRoleDropdown().props('hasErrors')).toEqual(true);
});
await nextTick();
expect(findRoleDropdown().props('hasErrors')).toEqual(true);
});
it('disables KeyPairDropdown when no region is selected', () => {
expect(findKeyPairDropdown().props('disabled')).toBe(true);
});
it('enables KeyPairDropdown when no region is selected', () => {
it('enables KeyPairDropdown when no region is selected', async () => {
state.selectedRegion = { name: 'west-1 ' };
return Vue.nextTick().then(() => {
expect(findKeyPairDropdown().props('disabled')).toBe(false);
});
await nextTick();
expect(findKeyPairDropdown().props('disabled')).toBe(false);
});
it('sets isLoadingKeyPairs to KeyPairDropdown loading property', () => {
it('sets isLoadingKeyPairs to KeyPairDropdown loading property', async () => {
keyPairsState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
});
await nextTick();
expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
});
it('sets keyPairs to KeyPairDropdown items property', () => {
expect(findKeyPairDropdown().props('items')).toBe(keyPairsState.items);
});
it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', () => {
it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', async () => {
keyPairsState.loadingItemsError = new Error();
return Vue.nextTick().then(() => {
expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
});
await nextTick();
expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
});
it('disables VpcDropdown when no region is selected', () => {
expect(findVpcDropdown().props('disabled')).toBe(true);
});
it('enables VpcDropdown when no region is selected', () => {
it('enables VpcDropdown when no region is selected', async () => {
state.selectedRegion = { name: 'west-1 ' };
return Vue.nextTick().then(() => {
expect(findVpcDropdown().props('disabled')).toBe(false);
});
await nextTick();
expect(findVpcDropdown().props('disabled')).toBe(false);
});
it('sets isLoadingVpcs to VpcDropdown loading property', () => {
it('sets isLoadingVpcs to VpcDropdown loading property', async () => {
vpcsState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
});
await nextTick();
expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
});
it('sets vpcs to VpcDropdown items property', () => {
expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
});
it('sets VpcDropdown hasErrors to true when loading vpcs fails', () => {
it('sets VpcDropdown hasErrors to true when loading vpcs fails', async () => {
vpcsState.loadingItemsError = new Error();
return Vue.nextTick().then(() => {
expect(findVpcDropdown().props('hasErrors')).toEqual(true);
});
await nextTick();
expect(findVpcDropdown().props('hasErrors')).toEqual(true);
});
it('disables SubnetDropdown when no vpc is selected', () => {
expect(findSubnetDropdown().props('disabled')).toBe(true);
});
it('enables SubnetDropdown when a vpc is selected', () => {
it('enables SubnetDropdown when a vpc is selected', async () => {
state.selectedVpc = { name: 'vpc-1 ' };
return Vue.nextTick().then(() => {
expect(findSubnetDropdown().props('disabled')).toBe(false);
});
await nextTick();
expect(findSubnetDropdown().props('disabled')).toBe(false);
});
it('sets isLoadingSubnets to SubnetDropdown loading property', () => {
it('sets isLoadingSubnets to SubnetDropdown loading property', async () => {
subnetsState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
});
await nextTick();
expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
});
it('sets subnets to SubnetDropdown items property', () => {
......@@ -360,32 +350,29 @@ describe('EksClusterConfigurationForm', () => {
expect(findSecurityGroupDropdown().props('disabled')).toBe(true);
});
it('enables SecurityGroupDropdown when a vpc is selected', () => {
it('enables SecurityGroupDropdown when a vpc is selected', async () => {
state.selectedVpc = { name: 'vpc-1 ' };
return Vue.nextTick().then(() => {
expect(findSecurityGroupDropdown().props('disabled')).toBe(false);
});
await nextTick();
expect(findSecurityGroupDropdown().props('disabled')).toBe(false);
});
it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', () => {
it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', async () => {
securityGroupsState.isLoadingItems = true;
return Vue.nextTick().then(() => {
expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems);
});
await nextTick();
expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems);
});
it('sets securityGroups to SecurityGroupDropdown items property', () => {
expect(findSecurityGroupDropdown().props('items')).toBe(securityGroupsState.items);
});
it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', () => {
it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', async () => {
securityGroupsState.loadingItemsError = new Error();
return Vue.nextTick().then(() => {
expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true);
});
await nextTick();
expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true);
});
it('dispatches setClusterName when cluster name input changes', () => {
......
spec/frontend/groups/components/group_folder_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import groupFolderComponent from '~/groups/components/group_folder.vue';
import groupItemComponent from '~/groups/components/group_item.vue';
......@@ -18,13 +18,13 @@ const createComponent = (groups = mockGroups, parentGroup = mockParentGroupItem)
describe('GroupFolderComponent', () => {
let vm;
beforeEach(() => {
beforeEach(async () => {
Vue.component('GroupItem', groupItemComponent);
vm = createComponent();
vm.$mount();
return Vue.nextTick();
await nextTick();
});
afterEach(() => {
......
spec/frontend/ide/components/commit_sidebar/list_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
import { createStore } from '~/ide/stores';
......@@ -31,12 +31,11 @@ describe('Multi-file editor commit sidebar list', () => {
});
describe('with a list of files', () => {
beforeEach((done) => {
beforeEach(async () => {
const f = file('file name');
f.changed = true;
vm.fileList.push(f);
Vue.nextTick(done);
await nextTick();
});
it('renders list', () => {
......
spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
import { createStore } from '~/ide/stores';
......@@ -7,7 +7,7 @@ describe('IDE commit sidebar radio group', () => {
let vm;
let store;
beforeEach((done) => {
beforeEach(async () => {
store = createStore();
const Component = Vue.extend(radioGroup);
......@@ -22,7 +22,7 @@ describe('IDE commit sidebar radio group', () => {
vm.$mount();
Vue.nextTick(done);
await nextTick();
});
afterEach(() => {
......@@ -33,7 +33,7 @@ describe('IDE commit sidebar radio group', () => {
expect(vm.$el.textContent).toContain('test');
});
it('uses slot if label is not present', (done) => {
it('uses slot if label is not present', async () => {
vm.$destroy();
vm = new Vue({
......@@ -47,25 +47,19 @@ describe('IDE commit sidebar radio group', () => {
vm.$mount();
Vue.nextTick(() => {
expect(vm.$el.textContent).toContain('Testing slot');
done();
});
await nextTick();
expect(vm.$el.textContent).toContain('Testing slot');
});
it('updates store when changing radio button', (done) => {
it('updates store when changing radio button', async () => {
vm.$el.querySelector('input').dispatchEvent(new Event('change'));
Vue.nextTick(() => {
expect(store.state.commit.commitAction).toBe('1');
done();
});
await nextTick();
expect(store.state.commit.commitAction).toBe('1');
});
describe('with input', () => {
beforeEach((done) => {
beforeEach(async () => {
vm.$destroy();
const Component = Vue.extend(radioGroup);
......@@ -82,32 +76,27 @@ describe('IDE commit sidebar radio group', () => {
vm.$mount();
Vue.nextTick(done);
await nextTick();
});
it('renders input box when commitAction matches value', () => {
expect(vm.$el.querySelector('.form-control')).not.toBeNull();
});
it('hides input when commitAction doesnt match value', (done) => {
it('hides input when commitAction doesnt match value', async () => {
store.state.commit.commitAction = '2';
Vue.nextTick(() => {
expect(vm.$el.querySelector('.form-control')).toBeNull();
done();
});
await nextTick();
expect(vm.$el.querySelector('.form-control')).toBeNull();
});
it('updates branch name in store on input', (done) => {
it('updates branch name in store on input', async () => {
const input = vm.$el.querySelector('.form-control');
input.value = 'testing-123';
input.dispatchEvent(new Event('input'));
Vue.nextTick(() => {
expect(store.state.commit.newBranchName).toBe('testing-123');
done();
});
await nextTick();
expect(store.state.commit.newBranchName).toBe('testing-123');
});
it('renders newBranchName if present', () => {
......
spec/frontend/ide/components/commit_sidebar/success_message_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
import successMessage from '~/ide/components/commit_sidebar/success_message.vue';
import { createStore } from '~/ide/stores';
......@@ -23,13 +23,10 @@ describe('IDE commit panel successful commit state', () => {
vm.$destroy();
});
it('renders last commit message when it exists', (done) => {
it('renders last commit message when it exists', async () => {
vm.$store.state.lastCommitMsg = 'testing commit message';
Vue.nextTick(() => {
expect(vm.$el.textContent).toContain('testing commit message');
done();
});
await nextTick();
expect(vm.$el.textContent).toContain('testing commit message');
});
});
spec/frontend/ide/stores/actions/file_spec.js
View file @ fc0c6b91
import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import { nextTick } from 'vue';
import eventHub from '~/ide/eventhub';
import { createRouter } from '~/ide/ide_router';
import service from '~/ide/services';
......@@ -68,7 +68,7 @@ describe('IDE store file actions', () => {
return store
.dispatch('closeFile', localFile)
.then(Vue.nextTick)
.then(nextTick)
.then(() => {
expect(store.state.openFiles.length).toBe(0);
expect(store.state.changedFiles.length).toBe(1);
......@@ -83,7 +83,7 @@ describe('IDE store file actions', () => {
return store
.dispatch('closeFile', localFile)
.then(Vue.nextTick)
.then(nextTick)
.then(() => {
expect(router.push).toHaveBeenCalledWith('/project/test/test/tree/main/-/newOpenFile/');
});
......
spec/frontend/issuable/components/issue_milestone_spec.js
View file @ fc0c6b91
import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { mockMilestone } from 'jest/boards/mock_data';
import IssueMilestone from '~/issuable/components/issue_milestone.vue';
......@@ -19,12 +19,12 @@ describe('IssueMilestoneComponent', () => {
let wrapper;
let vm;
beforeEach((done) => {
beforeEach(async () => {
wrapper = createComponent();
({ vm } = wrapper);
Vue.nextTick(done);
await nextTick();
});
afterEach(() => {
......@@ -37,7 +37,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, start_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isMilestoneStarted).toBe(false);
});
......@@ -46,7 +46,7 @@ describe('IssueMilestoneComponent', () => {
await wrapper.setProps({
milestone: { ...mockMilestone, start_date: '1990-07-22' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isMilestoneStarted).toBe(true);
});
......@@ -57,7 +57,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, due_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isMilestonePastDue).toBe(false);
});
......@@ -80,7 +80,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, due_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
});
......@@ -89,7 +89,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, start_date: '', due_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
});
......@@ -100,7 +100,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
});
......@@ -109,7 +109,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
});
......@@ -122,7 +122,7 @@ describe('IssueMilestoneComponent', () => {
due_date: '',
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
});
......@@ -131,7 +131,7 @@ describe('IssueMilestoneComponent', () => {
wrapper.setProps({
milestone: { ...mockMilestone, start_date: '', due_date: '' },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.milestoneDatesHuman).toBe('');
});
......
spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js
View file @ fc0c6b91
import { GlAlert, GlLabel } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import JiraIssuesImportStatus from '~/issues/list/components/jira_issues_import_status_app.vue';
describe('JiraIssuesImportStatus', () => {
......@@ -100,7 +100,7 @@ describe('JiraIssuesImportStatus', () => {
});
describe('alert message', () => {
it('is hidden when dismissed', () => {
it('is hidden when dismissed', async () => {
wrapper = mountComponent({
shouldShowInProgressAlert: true,
});
......@@ -109,9 +109,8 @@ describe('JiraIssuesImportStatus', () => {
findAlert().vm.$emit('dismiss');
return Vue.nextTick(() => {
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
await nextTick();
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
});
});
spec/frontend/issues/show/components/title_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import titleComponent from '~/issues/show/components/title.vue';
import eventHub from '~/issues/show/event_hub';
import Store from '~/issues/show/stores';
......@@ -29,36 +29,33 @@ describe('Title component', () => {
expect(vm.$el.querySelector('.title').innerHTML.trim()).toBe('Testing <img>');
});
it('updates page title when changing titleHtml', () => {
it('updates page title when changing titleHtml', async () => {
const spy = jest.spyOn(vm, 'setPageTitle');
vm.titleHtml = 'test';
return vm.$nextTick().then(() => {
expect(spy).toHaveBeenCalled();
});
await nextTick();
expect(spy).toHaveBeenCalled();
});
it('animates title changes', () => {
it('animates title changes', async () => {
vm.titleHtml = 'test';
return vm
.$nextTick()
.then(() => {
expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse');
jest.runAllTimers();
return vm.$nextTick();
})
.then(() => {
expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse');
});
await nextTick();
expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse');
jest.runAllTimers();
await nextTick();
expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse');
});
it('updates page title after changing title', () => {
it('updates page title after changing title', async () => {
vm.titleHtml = 'changed';
vm.titleText = 'changed';
return vm.$nextTick().then(() => {
expect(document.querySelector('title').textContent.trim()).toContain('changed');
});
await nextTick();
expect(document.querySelector('title').textContent.trim()).toContain('changed');
});
describe('inline edit button', () => {
......@@ -80,16 +77,15 @@ describe('Title component', () => {
expect(vm.$el.querySelector('.btn-edit')).toBeDefined();
});
it('should trigger open.form event when clicked', () => {
it('should trigger open.form event when clicked', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
vm.showInlineEditButton = true;
vm.canUpdate = true;
Vue.nextTick(() => {
vm.$el.querySelector('.btn-edit').click();
await nextTick();
vm.$el.querySelector('.btn-edit').click();
expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
});
expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
});
});
});
spec/frontend/jira_import/components/jira_import_app_spec.js
View file @ fc0c6b91
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import JiraImportApp from '~/jira_import/components/jira_import_app.vue';
import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue';
......@@ -230,7 +230,7 @@ describe('JiraImportApp', () => {
getFormComponent().vm.$emit('error', 'There was an error');
await Vue.nextTick();
await nextTick();
expect(getAlert().exists()).toBe(true);
});
......@@ -248,7 +248,7 @@ describe('JiraImportApp', () => {
getAlert().vm.$emit('dismiss');
await Vue.nextTick();
await nextTick();
expect(getAlert().exists()).toBe(false);
});
......
spec/frontend/notes/components/note_actions_spec.js
View file @ fc0c6b91
import { mount, createWrapper } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import { nextTick } from 'vue';
import { TEST_HOST } from 'spec/test_constants';
import axios from '~/lib/utils/axios_utils';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
......@@ -76,15 +76,14 @@ describe('noteActions', () => {
expect(findUserAccessRoleBadgeText(1)).toBe(props.accessLevel);
});
it('should render contributor badge', () => {
it('should render contributor badge', async () => {
wrapper.setProps({
accessLevel: null,
isContributor: true,
});
return wrapper.vm.$nextTick().then(() => {
expect(findUserAccessRoleBadgeText(1)).toBe('Contributor');
});
await nextTick();
expect(findUserAccessRoleBadgeText(1)).toBe('Contributor');
});
it('should render emoji link', () => {
......@@ -105,7 +104,7 @@ describe('noteActions', () => {
expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(true);
});
it('should not show copy link action when `noteUrl` prop is empty', (done) => {
it('should not show copy link action when `noteUrl` prop is empty', async () => {
wrapper.setProps({
...props,
author: {
......@@ -119,30 +118,23 @@ describe('noteActions', () => {
noteUrl: '',
});
Vue.nextTick()
.then(() => {
expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
})
.then(done)
.catch(done.fail);
await nextTick();
expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
});
it('should be possible to delete comment', () => {
expect(wrapper.find('.js-note-delete').exists()).toBe(true);
});
it('closes tooltip when dropdown opens', (done) => {
it('closes tooltip when dropdown opens', async () => {
wrapper.find('.more-actions-toggle').trigger('click');
const rootWrapper = createWrapper(wrapper.vm.$root);
Vue.nextTick()
.then(() => {
const emitted = Object.keys(rootWrapper.emitted());
expect(emitted).toEqual([BV_HIDE_TOOLTIP]);
done();
})
.catch(done.fail);
await nextTick();
const emitted = Object.keys(rootWrapper.emitted());
expect(emitted).toEqual([BV_HIDE_TOOLTIP]);
});
it('should not be possible to assign or unassign the comment author in a merge request', () => {
......
spec/frontend/notes/components/note_body_spec.js
View file @ fc0c6b91
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { suggestionCommitMessage } from '~/diffs/store/getters';
......@@ -46,9 +46,9 @@ describe('issue_note_body component', () => {
});
describe('isEditing', () => {
beforeEach((done) => {
beforeEach(async () => {
vm.isEditing = true;
Vue.nextTick(done);
await nextTick();
});
it('renders edit form', () => {
......
spec/frontend/notes/components/notes_app_spec.js
View file @ fc0c6b91
import { mount, shallowMount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import $ from 'jquery';
import Vue from 'vue';
import { nextTick } from 'vue';
import setWindowLocation from 'helpers/set_window_location_helper';
import { setTestTimeout } from 'helpers/timeout';
import waitForPromises from 'helpers/wait_for_promises';
......@@ -294,24 +294,22 @@ describe('note_app', () => {
return waitForDiscussionsRequest();
});
it('should render markdown docs url', () => {
it('should render markdown docs url', async () => {
wrapper.find('.js-note-edit').trigger('click');
const { markdownDocsPath } = mockData.notesDataMock;
return Vue.nextTick().then(() => {
expect(wrapper.find(`.edit-note a[href="${markdownDocsPath}"]`).text().trim()).toEqual(
'Markdown is supported',
);
});
await nextTick();
expect(wrapper.find(`.edit-note a[href="${markdownDocsPath}"]`).text().trim()).toEqual(
'Markdown is supported',
);
});
it('should not render quick actions docs url', () => {
it('should not render quick actions docs url', async () => {
wrapper.find('.js-note-edit').trigger('click');
const { quickActionsDocsPath } = mockData.notesDataMock;
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
});
await nextTick();
expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
});
});
......
spec/frontend/profile/account/components/delete_account_modal_spec.js
View file @ fc0c6b91
import { mount } from '@vue/test-utils';
import { merge } from 'lodash';
import Vue from 'vue';
import { nextTick } from 'vue';
import { TEST_HOST } from 'helpers/test_constants';
import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
......@@ -56,7 +56,7 @@ describe('DeleteAccountModal component', () => {
const findModal = () => wrapper.find(GlModalStub);
describe('with password confirmation', () => {
beforeEach((done) => {
beforeEach(async () => {
createWrapper({
propsData: {
confirmWithPassword: true,
......@@ -65,48 +65,40 @@ describe('DeleteAccountModal component', () => {
vm.isOpen = true;
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('does not accept empty password', (done) => {
it('does not accept empty password', async () => {
const { form, input } = findElements();
jest.spyOn(form, 'submit').mockImplementation(() => {});
input.value = '';
input.dispatchEvent(new Event('input'));
Vue.nextTick()
.then(() => {
expect(vm.enteredPassword).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBe('true');
findModal().vm.$emit('primary');
await nextTick();
expect(vm.enteredPassword).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBe('true');
findModal().vm.$emit('primary');
expect(form.submit).not.toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
expect(form.submit).not.toHaveBeenCalled();
});
it('submits form with password', (done) => {
it('submits form with password', async () => {
const { form, input } = findElements();
jest.spyOn(form, 'submit').mockImplementation(() => {});
input.value = 'anything';
input.dispatchEvent(new Event('input'));
Vue.nextTick()
.then(() => {
expect(vm.enteredPassword).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBeUndefined();
findModal().vm.$emit('primary');
await nextTick();
expect(vm.enteredPassword).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBeUndefined();
findModal().vm.$emit('primary');
expect(form.submit).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
expect(form.submit).toHaveBeenCalled();
});
});
describe('with username confirmation', () => {
beforeEach((done) => {
beforeEach(async () => {
createWrapper({
propsData: {
confirmWithPassword: false,
......@@ -115,43 +107,35 @@ describe('DeleteAccountModal component', () => {
vm.isOpen = true;
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('does not accept wrong username', (done) => {
it('does not accept wrong username', async () => {
const { form, input } = findElements();
jest.spyOn(form, 'submit').mockImplementation(() => {});
input.value = 'this is wrong';
input.dispatchEvent(new Event('input'));
Vue.nextTick()
.then(() => {
expect(vm.enteredUsername).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBe('true');
findModal().vm.$emit('primary');
await nextTick();
expect(vm.enteredUsername).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBe('true');
findModal().vm.$emit('primary');
expect(form.submit).not.toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
expect(form.submit).not.toHaveBeenCalled();
});
it('submits form with correct username', (done) => {
it('submits form with correct username', async () => {
const { form, input } = findElements();
jest.spyOn(form, 'submit').mockImplementation(() => {});
input.value = username;
input.dispatchEvent(new Event('input'));
Vue.nextTick()
.then(() => {
expect(vm.enteredUsername).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBeUndefined();
findModal().vm.$emit('primary');
await nextTick();
expect(vm.enteredUsername).toBe(input.value);
expect(findModal().attributes('ok-disabled')).toBeUndefined();
findModal().vm.$emit('primary');
expect(form.submit).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
expect(form.submit).toHaveBeenCalled();
});
});
});
spec/frontend/reports/components/report_section_spec.js
View file @ fc0c6b91
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import reportSection from '~/reports/components/report_section.vue';
......@@ -71,16 +71,12 @@ describe('Report section', () => {
const issues = hasIssues ? 'has issues' : 'has no issues';
const open = alwaysOpen ? 'is always open' : 'is not always open';
it(`is ${isCollapsible}, if the report ${issues} and ${open}`, (done) => {
it(`is ${isCollapsible}, if the report ${issues} and ${open}`, async () => {
vm.hasIssues = hasIssues;
vm.alwaysOpen = alwaysOpen;
Vue.nextTick()
.then(() => {
expect(vm.isCollapsible).toBe(isCollapsible);
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.isCollapsible).toBe(isCollapsible);
});
});
});
......@@ -97,16 +93,12 @@ describe('Report section', () => {
const issues = isCollapsed ? 'is collapsed' : 'is not collapsed';
const open = alwaysOpen ? 'is always open' : 'is not always open';
it(`is ${isExpanded}, if the report ${issues} and ${open}`, (done) => {
it(`is ${isExpanded}, if the report ${issues} and ${open}`, async () => {
vm.isCollapsed = isCollapsed;
vm.alwaysOpen = alwaysOpen;
Vue.nextTick()
.then(() => {
expect(vm.isExpanded).toBe(isExpanded);
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.isExpanded).toBe(isExpanded);
});
});
});
......@@ -148,79 +140,55 @@ describe('Report section', () => {
describe('toggleCollapsed', () => {
const hiddenCss = { display: 'none' };
it('toggles issues', (done) => {
it('toggles issues', async () => {
vm.$el.querySelector('button').click();
Vue.nextTick()
.then(() => {
expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Collapse');
vm.$el.querySelector('button').click();
})
.then(Vue.nextTick)
.then(() => {
expect(vm.$el.querySelector('.js-report-section-container')).toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Expand');
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Collapse');
vm.$el.querySelector('button').click();
await nextTick();
expect(vm.$el.querySelector('.js-report-section-container')).toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Expand');
});
it('is always expanded, if always-open is set to true', (done) => {
it('is always expanded, if always-open is set to true', async () => {
vm.alwaysOpen = true;
Vue.nextTick()
.then(() => {
expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button')).toBeNull();
})
.then(done)
.catch(done.fail);
await nextTick();
expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
expect(vm.$el.querySelector('button')).toBeNull();
});
});
});
describe('snowplow events', () => {
it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', (done) => {
it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', async () => {
createComponent({ hasIssues: true, shouldEmitToggleEvent: true });
expect(wrapper.emitted().toggleEvent).toBeUndefined();
findCollapseButton().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.emitted().toggleEvent).toHaveLength(1);
})
.then(done)
.catch(done.fail);
await nextTick();
expect(wrapper.emitted().toggleEvent).toHaveLength(1);
});
it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', (done) => {
it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', async () => {
createComponent({ hasIssues: true });
expect(wrapper.emitted().toggleEvent).toBeUndefined();
findCollapseButton().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.emitted().toggleEvent).toBeUndefined();
})
.then(done)
.catch(done.fail);
await nextTick();
expect(wrapper.emitted().toggleEvent).toBeUndefined();
});
it('does not emit an event if always-open is set to true', (done) => {
it('does not emit an event if always-open is set to true', async () => {
createComponent({ alwaysOpen: true, hasIssues: true, shouldEmitToggleEvent: true });
wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.emitted().toggleEvent).toBeUndefined();
})
.then(done)
.catch(done.fail);
await nextTick();
expect(wrapper.emitted().toggleEvent).toBeUndefined();
});
});
......
spec/frontend/sidebar/participants_spec.js
View file @ fc0c6b91
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import Participants from '~/sidebar/components/participants/participants.vue';
const PARTICIPANT = {
......@@ -77,7 +77,7 @@ describe('Participants', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
const numberOfLessParticipants = 2;
wrapper = mountComponent({
loading: false,
......@@ -91,12 +91,11 @@ describe('Participants', () => {
isShowingMoreParticipants: false,
});
return Vue.nextTick().then(() => {
expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
});
await nextTick();
expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
});
it('when only showing all participants, each has an avatar', () => {
it('when only showing all participants, each has an avatar', async () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
......@@ -109,9 +108,8 @@ describe('Participants', () => {
isShowingMoreParticipants: true,
});
return Vue.nextTick().then(() => {
expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
});
await nextTick();
expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
});
it('does not have more participants link when they can all be shown', () => {
......@@ -126,7 +124,7 @@ describe('Participants', () => {
expect(getMoreParticipantsButton().exists()).toBe(false);
});
it('when too many participants, has more participants link to show more', () => {
it('when too many participants, has more participants link to show more', async () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
......@@ -139,12 +137,11 @@ describe('Participants', () => {
isShowingMoreParticipants: false,
});
return Vue.nextTick().then(() => {
expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
});
await nextTick();
expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
});
it('when too many participants and already showing them, has more participants link to show less', () => {
it('when too many participants and already showing them, has more participants link to show less', async () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
......@@ -157,9 +154,8 @@ describe('Participants', () => {
isShowingMoreParticipants: true,
});
return Vue.nextTick().then(() => {
expect(getMoreParticipantsButton().text()).toBe('- show less');
});
await nextTick();
expect(getMoreParticipantsButton().text()).toBe('- show less');
});
it('clicking more participants link emits event', () => {
......@@ -176,7 +172,7 @@ describe('Participants', () => {
expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
});
it('clicking on participants icon emits `toggleSidebar` event', () => {
it('clicking on participants icon emits `toggleSidebar` event', async () => {
wrapper = mountComponent({
loading: false,
participants: PARTICIPANT_LIST,
......@@ -187,11 +183,9 @@ describe('Participants', () => {
wrapper.find('.sidebar-collapsed-icon').trigger('click');
return Vue.nextTick(() => {
expect(spy).toHaveBeenCalledWith('toggleSidebar');
spy.mockRestore();
});
await nextTick();
expect(spy).toHaveBeenCalledWith('toggleSidebar');
spy.mockRestore();
});
});
......
spec/frontend/user_lists/components/user_lists_spec.js
View file @ fc0c6b91
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, createWrapper } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises';
import Api from '~/api';
......@@ -82,7 +82,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
factory();
await waitForPromises();
await Vue.nextTick();
await nextTick();
emptyState = wrapper.findComponent(GlEmptyState);
});
......@@ -130,7 +130,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
factory();
jest.spyOn(store, 'dispatch');
await Vue.nextTick();
await nextTick();
table = wrapper.findComponent(UserListsTable);
});
......@@ -171,7 +171,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
Api.fetchFeatureFlagUserLists.mockRejectedValue();
factory();
await Vue.nextTick();
await nextTick();
});
it('should render error state', () => {
......
spec/frontend/vue_alerts_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import { nextTick } from 'vue';
import { setHTMLFixture } from 'helpers/fixtures';
import { TEST_HOST } from 'helpers/test_constants';
import initVueAlerts from '~/vue_alerts';
......@@ -75,10 +75,9 @@ describe('VueAlerts', () => {
});
describe('when dismissed', () => {
beforeEach(() => {
beforeEach(async () => {
findAlertDismiss(findAlerts()[0]).click();
return Vue.nextTick();
await nextTick();
});
it('hides the alert', () => {
......
spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js
View file @ fc0c6b91
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import MemoryUsage from '~/vue_merge_request_widget/components/deployment/memory_usage.vue';
import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
......@@ -184,7 +184,7 @@ describe('MemoryUsage', () => {
vm.hasMetrics = false;
vm.loadFailed = false;
Vue.nextTick(() => {
nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-loading')).toBeDefined();
expect(el.querySelector('.js-usage-info .usage-info-load-spinner')).toBeDefined();
......@@ -203,7 +203,7 @@ describe('MemoryUsage', () => {
vm.loadFailed = false;
vm.memoryMetrics = metricsMockData.metrics.memory_values[0].values;
Vue.nextTick(() => {
nextTick(() => {
expect(el.querySelector('.memory-graph-container')).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.hasMetrics);
done();
......@@ -215,7 +215,7 @@ describe('MemoryUsage', () => {
vm.hasMetrics = false;
vm.loadFailed = true;
Vue.nextTick(() => {
nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-failed')).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadFailed);
......@@ -228,7 +228,7 @@ describe('MemoryUsage', () => {
vm.hasMetrics = false;
vm.loadFailed = false;
Vue.nextTick(() => {
nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-unavailable')).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.metricsUnavailable);
......
spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js
View file @ fc0c6b91
import { getByRole } from '@testing-library/dom';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
import modalEventHub from '~/projects/commit/event_hub';
......@@ -200,7 +200,7 @@ describe('MRWidgetMerged', () => {
it('hides button to copy commit SHA if SHA does not exist', (done) => {
vm.mr.mergeCommitSha = null;
Vue.nextTick(() => {
nextTick(() => {
expect(selectors.copyMergeShaButton).toBe(null);
expect(vm.$el.querySelector('.mr-info-list').innerText).not.toContain('with');
done();
......@@ -216,7 +216,7 @@ describe('MRWidgetMerged', () => {
it('should not show source branch deleted text', (done) => {
vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => {
nextTick(() => {
expect(vm.$el.innerText).not.toContain('The source branch has been deleted');
done();
});
......@@ -226,7 +226,7 @@ describe('MRWidgetMerged', () => {
vm.mr.isRemovingSourceBranch = true;
vm.mr.sourceBranchRemoved = false;
Vue.nextTick(() => {
nextTick(() => {
expect(vm.$el.innerText).toContain('The source branch is being deleted');
expect(vm.$el.innerText).not.toContain('The source branch has been deleted');
done();
......
spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import NothingToMerge from '~/vue_merge_request_widget/components/states/nothing_to_merge.vue';
describe('NothingToMerge', () => {
......@@ -20,7 +20,7 @@ describe('NothingToMerge', () => {
it('should not show new blob link if there is no link available', () => {
vm.mr.newBlobPath = null;
Vue.nextTick(() => {
nextTick(() => {
expect(vm.$el.querySelector('[data-testid="createFileButton"]')).toEqual(null);
});
});
......
spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
View file @ fc0c6b91
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import { GlSprintf } from '@gitlab/ui';
import simplePoll from '~/lib/utils/simple_poll';
import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
......@@ -196,7 +196,7 @@ describe('ReadyToMerge', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isMergingImmediately: true });
await Vue.nextTick();
await nextTick();
expect(wrapper.vm.mergeButtonText).toEqual('Merge in progress');
});
......@@ -266,7 +266,7 @@ describe('ReadyToMerge', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ isMakingRequest: true });
await Vue.nextTick();
await nextTick();
expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
});
......
spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
import toast from '~/vue_shared/plugins/global_toast';
import eventHub from '~/vue_merge_request_widget/event_hub';
......@@ -94,7 +94,7 @@ describe('Wip', () => {
it('should not show removeWIP button is user cannot update MR', (done) => {
vm.mr.removeWIPPath = '';
Vue.nextTick(() => {
nextTick(() => {
expect(el.querySelector('.js-remove-draft')).toEqual(null);
done();
});
......
spec/frontend/vue_shared/components/expand_button_spec.js
View file @ fc0c6b91
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import { nextTick } from 'vue';
import ExpandButton from '~/vue_shared/components/expand_button.vue';
const text = {
......@@ -66,9 +66,9 @@ describe('Expand button', () => {
});
describe('on click', () => {
beforeEach((done) => {
beforeEach(async () => {
expanderPrependEl().trigger('click');
Vue.nextTick(done);
await nextTick();
});
afterEach(() => {
......@@ -85,7 +85,7 @@ describe('Expand button', () => {
});
describe('when short text is provided', () => {
beforeEach((done) => {
beforeEach(async () => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
......@@ -94,7 +94,7 @@ describe('Expand button', () => {
});
expanderPrependEl().trigger('click');
Vue.nextTick(done);
await nextTick();
});
it('only renders expanded text', () => {
......@@ -110,31 +110,29 @@ describe('Expand button', () => {
});
describe('append button', () => {
beforeEach((done) => {
beforeEach(async () => {
expanderPrependEl().trigger('click');
Vue.nextTick(done);
await nextTick();
});
it('clicking hides itself and shows prepend', () => {
it('clicking hides itself and shows prepend', async () => {
expect(expanderAppendEl().isVisible()).toBe(true);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(expanderPrependEl().isVisible()).toBe(true);
});
await nextTick();
expect(expanderPrependEl().isVisible()).toBe(true);
});
it('clicking hides expanded text', () => {
it('clicking hides expanded text', async () => {
expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.expanded);
});
await nextTick();
expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.expanded);
});
describe('when short text is provided', () => {
beforeEach((done) => {
beforeEach(async () => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
......@@ -143,16 +141,15 @@ describe('Expand button', () => {
});
expanderPrependEl().trigger('click');
Vue.nextTick(done);
await nextTick();
});
it('clicking reveals short text', () => {
it('clicking reveals short text', async () => {
expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
});
await nextTick();
expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
});
});
});
......
spec/frontend/vue_shared/components/gl_countdown_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
......@@ -17,38 +17,34 @@ describe('GlCountdown', () => {
});
describe('when there is time remaining', () => {
beforeEach((done) => {
beforeEach(async () => {
vm = mountComponent(Component, {
endDateString: '2000-01-01T01:02:03Z',
});
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('displays remaining time', () => {
expect(vm.$el.textContent).toContain('01:02:03');
});
it('updates remaining time', (done) => {
it('updates remaining time', async () => {
now = '2000-01-01T00:00:01Z';
jest.advanceTimersByTime(1000);
Vue.nextTick()
.then(() => {
expect(vm.$el.textContent).toContain('01:02:02');
done();
})
.catch(done.fail);
await nextTick();
expect(vm.$el.textContent).toContain('01:02:02');
});
});
describe('when there is no time remaining', () => {
beforeEach((done) => {
beforeEach(async () => {
vm = mountComponent(Component, {
endDateString: '1900-01-01T00:00:00Z',
});
Vue.nextTick().then(done).catch(done.fail);
await nextTick();
});
it('displays 00:00:00', () => {
......
spec/frontend/vue_shared/components/markdown/suggestions_spec.js
View file @ fc0c6b91
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import SuggestionsComponent from '~/vue_shared/components/markdown/suggestions.vue';
const MOCK_DATA = {
......@@ -51,7 +51,7 @@ describe('Suggestion component', () => {
let vm;
let diffTable;
beforeEach((done) => {
beforeEach(async () => {
const Component = Vue.extend(SuggestionsComponent);
vm = new Component({
......@@ -62,7 +62,7 @@ describe('Suggestion component', () => {
jest.spyOn(vm, 'renderSuggestions').mockImplementation(() => {});
vm.renderSuggestions();
Vue.nextTick(done);
await nextTick();
});
describe('mounted', () => {
......
spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js
View file @ fc0c6b91
import { mount } from '@vue/test-utils';
import $ from 'jquery';
import Vue from 'vue';
import { nextTick } from 'vue';
import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
jest.mock('~/lib/utils/common_utils', () => ({
......@@ -35,7 +35,7 @@ describe('Resizable Chart Container', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('updates the slot width and height props', () => {
it('updates the slot width and height props', async () => {
const width = 1920;
const height = 1080;
......@@ -44,13 +44,12 @@ describe('Resizable Chart Container', () => {
$(document).trigger('content.resize');
return Vue.nextTick().then(() => {
const widthNode = wrapper.find('.slot > .width');
const heightNode = wrapper.find('.slot > .height');
await nextTick();
const widthNode = wrapper.find('.slot > .width');
const heightNode = wrapper.find('.slot > .height');
expect(parseInt(widthNode.text(), 10)).toEqual(width);
expect(parseInt(heightNode.text(), 10)).toEqual(height);
});
expect(parseInt(widthNode.text(), 10)).toEqual(width);
expect(parseInt(heightNode.text(), 10)).toEqual(height);
});
it('calls onResize on manual resize', () => {
......
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