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