Skip to content

G
gitlab-ce
Commit 24aea042 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch 'slashmanov/refactor-next-tick-2' into 'master' 

Refactor nextTick to use a direct import from a Vue package (2/9)

See merge request gitlab-org/gitlab!79048
parents 1fb1c4ae 613a1087
Show whitespace changes
Inline Side-by-side
Showing with 566 additions and 633 deletions
ee/spec/frontend/geo_nodes/components/geo_nodes_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import GeoNodeDetails from 'ee/geo_nodes/components/details/geo_node_details.vue';
import GeoNodes from 'ee/geo_nodes/components/geo_nodes.vue';
import GeoNodeHeader from 'ee/geo_nodes/components/header/geo_node_header.vue';
......@@ -46,13 +47,12 @@ describe('GeoNodes', () => {
expect(findGeoNodeDetails().exists()).toBe(true);
});
it('is hidden when toggled', () => {
it('is hidden when toggled', async () => {
findGeoNodeHeader().vm.$emit('collapse');
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findGeoNodeDetails().exists()).toBe(false);
});
});
});
});
});
ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js
View file @ 24aea042
import { GlButton, GlModal } from '@gitlab/ui';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import { sprintf } from '~/locale';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......@@ -140,7 +140,7 @@ describe('HandRaiseLeadButton', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ countries, states, ...formData });
await wrapper.vm.$nextTick();
await nextTick();
expect(findModal().props('actionPrimary')).toStrictEqual({
text: PQL_MODAL_PRIMARY,
......@@ -164,7 +164,7 @@ describe('HandRaiseLeadButton', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ countries, states, country: state });
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findByTestId('state').exists()).toBe(display);
});
......
ee/spec/frontend/incidents/components/published_cell_spec.js
View file @ 24aea042
import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import PublishedCell from 'ee/incidents/components/published_cell.vue';
describe('Incidents Published Cell', () => {
......@@ -37,12 +38,11 @@ describe('Incidents Published Cell', () => {
expect(findCell().text()).toBe('Unpublished');
});
it('render a status success icon if statusPagePublishedIncident returns true', () => {
it('render a status success icon if statusPagePublishedIncident returns true', async () => {
wrapper.setProps({ statusPagePublishedIncident: true });
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(findCell().findComponent(GlIcon).exists()).toBe(true);
});
});
});
});
ee/spec/frontend/insights/components/insights_page_spec.js
View file @ 24aea042
import { GlEmptyState } from '@gitlab/ui';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import InsightsChart from 'ee/insights/components/insights_chart.vue';
......@@ -94,7 +94,7 @@ describe('Insights page component', () => {
it('reflects new state', async () => {
wrapper.setProps({ pageConfig: pageInfoNoCharts });
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
});
......
ee/spec/frontend/insights/components/insights_spec.js
View file @ 24aea042
import { GlAlert, GlDropdown, GlDropdownItem, GlEmptyState } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
......@@ -84,13 +84,13 @@ describe('Insights component', () => {
});
it('has the correct nav tabs', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
});
it('should not disable the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
});
});
......@@ -110,13 +110,13 @@ describe('Insights component', () => {
});
it('has the correct nav tabs', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
});
it('disables the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
});
});
......@@ -140,7 +140,7 @@ describe('Insights component', () => {
});
it('enables the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
});
});
......@@ -163,7 +163,7 @@ describe('Insights component', () => {
});
it('disables the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
});
});
......@@ -187,7 +187,7 @@ describe('Insights component', () => {
});
it('enables the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
});
});
......@@ -211,7 +211,7 @@ describe('Insights component', () => {
});
it('enables the tab selector', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
});
});
......@@ -224,14 +224,14 @@ describe('Insights component', () => {
});
it('it displays a warning', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlEmptyState).attributes()).toMatchObject({
title: 'Invalid Insights config file detected',
});
});
it('does not display dropdown', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
});
});
......@@ -243,14 +243,14 @@ describe('Insights component', () => {
});
it('it displays a warning', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlAlert).text()).toContain(
'This project is filtered out in the insights.yml file',
);
});
it('does not display dropdown', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
});
});
......@@ -281,7 +281,7 @@ describe('Insights component', () => {
jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
await nextTick();
expect(vuexStore.dispatch).toHaveBeenCalledWith('insights/setActiveTab', defaultKey);
});
......@@ -297,7 +297,7 @@ describe('Insights component', () => {
jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
await nextTick();
expect(vuexStore.dispatch).toHaveBeenCalledWith('insights/setActiveTab', selectedKey);
});
});
......
ee/spec/frontend/integrations/gitlab_slack_application/components/gitlab_slack_application_spec.js
View file @ 24aea042
import { GlButton } from '@gitlab/ui';
import { nextTick } from 'vue';
import GitlabSlackApplication from 'ee/integrations/gitlab_slack_application/components/gitlab_slack_application.vue';
import { addProjectToSlack } from 'ee/integrations/gitlab_slack_application/api';
import { i18n } from 'ee/integrations/gitlab_slack_application/constants';
......@@ -83,7 +84,7 @@ describe('GitlabSlackApplication', () => {
addProjectToSlack.mockResolvedValue(addToSlackData);
findProjectsDropdown().vm.$emit('project-selected', mockProject);
await wrapper.vm.$nextTick();
await nextTick();
expect(findProjectsDropdown().props('selectedProject')).toBe(mockProject);
expect(findGlButton().props('disabled')).toBe(false);
......
ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import JiraIssuesShow from 'ee/integrations/jira/issues_show/components/jira_issues_show_root.vue';
import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
import { IssuableStatus } from '~/issues/constants';
......@@ -124,7 +125,7 @@ describe('JiraIssuesShow', () => {
expect(jiraIssueSidebar.props('sidebarExpanded')).toBe(true);
jiraIssueSidebar.vm.$emit('sidebar-toggle');
await wrapper.vm.$nextTick();
await nextTick();
expect(jiraIssueSidebar.props('sidebarExpanded')).toBe(false);
});
......
ee/spec/frontend/issues_analytics/components/issues_analytics_spec.js
View file @ 24aea042
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
......@@ -66,50 +66,45 @@ describe('Issue Analytics component', () => {
expect(store.dispatch).toHaveBeenCalledWith('issueAnalytics/fetchChartData', TEST_HOST);
});
it('renders loading state when loading', () => {
it('renders loading state when loading', async () => {
wrapper.vm.$store.state.issueAnalytics.loading = true;
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findLoadingIcon().exists()).toBe(true);
expect(findChartContainer().exists()).toBe(false);
});
});
it('renders chart when data is present', () => {
it('renders chart when data is present', async () => {
wrapper.vm.$store.state.issueAnalytics.chartData = mockChartData;
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findChartContainer().exists()).toBe(true);
});
});
it('fetches data when filters are applied', () => {
it('fetches data when filters are applied', async () => {
wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(store.dispatch).toHaveBeenCalledTimes(2);
expect(store.dispatch.mock.calls[1]).toEqual(['issueAnalytics/fetchChartData', TEST_HOST]);
});
});
it('renders empty state when chart data is empty', () => {
it('renders empty state when chart data is empty', async () => {
wrapper.vm.$store.state.issueAnalytics.chartData = {};
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findEmptyState().exists()).toBe(true);
expect(wrapper.vm.showNoDataEmptyState).toBe(true);
});
});
it('renders filters empty state when filters are applied and chart data is empty', () => {
it('renders filters empty state when filters are applied and chart data is empty', async () => {
wrapper.vm.$store.state.issueAnalytics.chartData = {};
wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findEmptyState().exists()).toBe(true);
expect(wrapper.vm.showFiltersEmptyState).toBe(true);
});
});
it('renders the issues table', () => {
expect(wrapper.findComponent(IssuesAnalyticsTable).exists()).toBe(true);
......
ee/spec/frontend/iterations/components/iteration_form_without_vue_router_spec.js
View file @ 24aea042
import { GlForm } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { ApolloMutation } from 'vue-apollo';
import { nextTick } from 'vue';
import IterationForm from 'ee/iterations/components/iteration_form_without_vue_router.vue';
import createIteration from 'ee/iterations/queries/create_iteration.mutation.graphql';
import updateIteration from 'ee/iterations/queries/update_iteration.mutation.graphql';
......@@ -61,7 +62,6 @@ describe('Iteration Form', () => {
const findCancelButton = () => wrapper.find('[data-testid="cancel-iteration"]');
const clickSave = () => findSaveButton().vm.$emit('click');
const clickCancel = () => findCancelButton().vm.$emit('click');
const nextTick = () => wrapper.vm.$nextTick();
it('renders a form', () => {
createComponent();
......@@ -107,16 +107,15 @@ describe('Iteration Form', () => {
});
});
it('redirects to Iteration page on success', () => {
it('redirects to Iteration page on success', async () => {
createComponent();
clickSave();
return nextTick().then(() => {
await nextTick();
expect(findSaveButton().props('loading')).toBe(true);
expect(visitUrl).toHaveBeenCalled();
});
});
it('loading=false on error', () => {
createComponent({ mutationResult: createMutationFailure });
......@@ -196,7 +195,7 @@ describe('Iteration Form', () => {
});
});
it('emits updated event after successful mutation', () => {
it('emits updated event after successful mutation', async () => {
createComponent({
props: propsWithIteration,
mutationResult: updateMutationSuccess,
......@@ -204,13 +203,12 @@ describe('Iteration Form', () => {
clickSave();
return nextTick().then(() => {
await nextTick();
expect(findSaveButton().props('loading')).toBe(true);
expect(wrapper.emitted('updated')).toHaveLength(1);
});
});
it('emits updated event after failed mutation', () => {
it('emits updated event after failed mutation', async () => {
createComponent({
props: propsWithIteration,
mutationResult: updateMutationFailure,
......@@ -218,12 +216,11 @@ describe('Iteration Form', () => {
clickSave();
return nextTick().then(() => {
await nextTick();
expect(wrapper.emitted('updated')).toBeUndefined();
});
});
it('emits cancel when cancel clicked', () => {
it('emits cancel when cancel clicked', async () => {
createComponent({
props: propsWithIteration,
mutationResult: updateMutationSuccess,
......@@ -231,9 +228,8 @@ describe('Iteration Form', () => {
clickCancel();
return nextTick().then(() => {
await nextTick();
expect(wrapper.emitted('cancel')).toHaveLength(1);
});
});
});
});
ee/spec/frontend/iterations/components/iteration_report_without_vue_router_spec.js
View file @ 24aea042
import { GlDropdown, GlDropdownItem, GlEmptyState, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import IterationForm from 'ee/iterations/components/iteration_form_without_vue_router.vue';
import IterationReportTabs from 'ee/iterations/components/iteration_report_tabs.vue';
import IterationReport from 'ee/iterations/components/iteration_report_without_vue_router.vue';
......@@ -232,7 +233,7 @@ describe('Iterations report', () => {
clickEditButton();
await wrapper.vm.$nextTick();
await nextTick();
expect(window.history.pushState).toHaveBeenCalledWith(
{ prev: 'viewIteration' },
......@@ -264,7 +265,7 @@ describe('Iterations report', () => {
jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
findIterationForm().vm.$emit('cancel');
await wrapper.vm.$nextTick();
await nextTick();
expect(window.history.pushState).toHaveBeenCalledWith(
{ prev: 'editIteration' },
......@@ -277,7 +278,7 @@ describe('Iterations report', () => {
jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
findIterationForm().vm.$emit('updated');
await wrapper.vm.$nextTick();
await nextTick();
expect(window.history.pushState).toHaveBeenCalledWith(
{ prev: 'editIteration' },
......
ee/spec/frontend/iterations/components/iterations_spec.js
View file @ 24aea042
import { GlAlert, GlLoadingIcon, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Iterations from 'ee/iterations/components/iterations.vue';
import IterationsList from 'ee/iterations/components/iterations_list.vue';
import { Namespace } from 'ee/iterations/constants';
......@@ -65,9 +66,9 @@ describe('Iterations', () => {
describe('pagination', () => {
const findPagination = () => wrapper.findComponent(GlPagination);
const setPage = (page) => {
const setPage = async (page) => {
findPagination().vm.$emit('input', page);
return findPagination().vm.$nextTick();
await nextTick();
};
beforeEach(() => {
......@@ -133,7 +134,7 @@ describe('Iterations', () => {
wrapper.findComponent(GlTabs).vm.$emit('activate-tab', 2);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.pagination).toEqual({
currentPage: 1,
......
ee/spec/frontend/license_compliance/components/app_spec.js
View file @ 24aea042
import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import LicenseComplianceApp from 'ee/license_compliance/components/app.vue';
......@@ -290,12 +290,11 @@ describe('Project Licenses', () => {
${'licenses'} | ${'#licenses'}
`(
'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
({ givenActiveTab, expectedLocationHash }) => {
async ({ givenActiveTab, expectedLocationHash }) => {
findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(window.location.hash).toBe(expectedLocationHash);
});
},
);
......
ee/spec/frontend/license_compliance/components/detected_licenses_table_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DetectedLicensesTable from 'ee/license_compliance/components/detected_licenses_table.vue';
import LicensesTable from 'ee/license_compliance/components/licenses_table.vue';
import createStore from 'ee/license_compliance/store';
......@@ -29,7 +30,7 @@ describe('DetectedLicenesTable component', () => {
expect(componentWrapper.props()).toEqual(expect.objectContaining(props));
};
beforeEach(() => {
beforeEach(async () => {
factory();
store.dispatch(`${namespace}/receiveLicensesSuccess`, {
......@@ -39,7 +40,7 @@ describe('DetectedLicenesTable component', () => {
jest.spyOn(store, 'dispatch').mockImplementation();
return wrapper.vm.$nextTick();
await nextTick();
});
afterEach(() => {
......@@ -76,7 +77,7 @@ describe('DetectedLicenesTable component', () => {
`('given $context', ({ isLoading, errorLoading, isListEmpty, initialized }) => {
let moduleState;
beforeEach(() => {
beforeEach(async () => {
moduleState = Object.assign(store.state[namespace], {
isLoading,
errorLoading,
......@@ -88,7 +89,7 @@ describe('DetectedLicenesTable component', () => {
moduleState.pageInfo.total = 0;
}
return wrapper.vm.$nextTick();
await nextTick();
});
// See https://github.com/jest-community/eslint-plugin-jest/issues/229 for
......
ee/spec/frontend/on_demand_scans/components/tabs/saved_spec.js
View file @ 24aea042
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import { merge } from 'lodash';
import dastProfilesMock from 'test_fixtures/graphql/on_demand_scans/graphql/dast_profiles.query.graphql.json';
......@@ -204,7 +204,7 @@ describe('Saved tab', () => {
it('put the button in the loading and disabled state', async () => {
const runScanButton = findRunScanButton();
runScanButton.vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(runScanButton.props('loading')).toBe(true);
expect(runScanButton.props('disabled')).toBe(true);
......@@ -242,7 +242,7 @@ describe('Saved tab', () => {
it('hides the error message when retrying the deletion', async () => {
findRunScanButton().vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.text()).not.toContain(errorMessage);
});
......@@ -328,7 +328,7 @@ describe('Saved tab', () => {
it('hides the error message when retrying the deletion', async () => {
findDeleteModal().vm.$emit('ok');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.text()).not.toContain(errorMessage);
});
......
ee/spec/frontend/on_demand_scans_form/components/on_demand_scans_form_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlForm, GlFormInput, GlSkeletonLoader } from '@gitlab/ui';
import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
import { merge } from 'lodash';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import OnDemandScansForm from 'ee/on_demand_scans_form/components/on_demand_scans_form.vue';
import ScannerProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/scanner_profile_selector.vue';
import SiteProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/site_profile_selector.vue';
......@@ -90,13 +91,13 @@ describe('OnDemandScansForm', () => {
expect(findSiteProfilesSelector().attributes('value')).toBe(dastScan.dastSiteProfile.id);
};
const setValidFormData = () => {
const setValidFormData = async () => {
findNameInput().vm.$emit('input', 'My daily scan');
findBranchInput().vm.$emit('input', selectedBranch);
findScannerProfilesSelector().vm.$emit('input', passiveScannerProfile.id);
findSiteProfilesSelector().vm.$emit('input', nonValidatedSiteProfile.id);
return wrapper.vm.$nextTick();
await nextTick();
};
const setupSuccess = ({ edit = false } = {}) => {
wrapper.vm.$apollo.mutate.mockResolvedValue({
......@@ -112,7 +113,7 @@ describe('OnDemandScansForm', () => {
};
const selectProfile = (component) => async (profile) => {
wrapper.findComponent(component).vm.$emit('input', profile.id);
await wrapper.vm.$nextTick();
await nextTick();
};
const selectScannerProfile = selectProfile(ScannerProfileSelector);
const selectSiteProfile = selectProfile(SiteProfileSelector);
......@@ -326,7 +327,7 @@ describe('OnDemandScansForm', () => {
);
createShallowComponent();
await wrapper.vm.$nextTick();
await nextTick();
expect(findNameInput().attributes('value')).toBe(dastScan.name);
expect(findDescriptionInput().attributes('value')).toBe(dastScan.description);
......@@ -537,10 +538,10 @@ describe('OnDemandScansForm', () => {
`(
'profiles conflict prevention',
({ description, selectedScannerProfile, selectedSiteProfile, hasConflict }) => {
const setFormData = () => {
const setFormData = async () => {
findScannerProfilesSelector().vm.$emit('input', selectedScannerProfile.id);
findSiteProfilesSelector().vm.$emit('input', selectedSiteProfile.id);
return wrapper.vm.$nextTick();
await nextTick();
};
it(
......@@ -661,7 +662,7 @@ describe('OnDemandScansForm', () => {
);
createShallowComponent();
await wrapper.vm.$nextTick();
await nextTick();
hasSiteProfileAttributes();
});
......
ee/spec/frontend/on_demand_scans_form/components/profile_selector/dast_profiles_selector_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
import { createLocalVue } from '@vue/test-utils';
import { merge } from 'lodash';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import DastProfilesSelector from 'ee/on_demand_scans_form/components/profile_selector/dast_profiles_selector.vue';
import ScannerProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/scanner_profile_selector.vue';
import SiteProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/site_profile_selector.vue';
......@@ -140,10 +141,10 @@ describe('EE - DAST Profiles Selector', () => {
`(
'profiles conflict prevention',
({ description, selectedScannerProfile, selectedSiteProfile, hasConflict }) => {
const setFormData = () => {
const setFormData = async () => {
findScannerProfilesSelector().vm.$emit('input', selectedScannerProfile.id);
findSiteProfilesSelector().vm.$emit('input', selectedSiteProfile.id);
return wrapper.vm.$nextTick();
await nextTick();
};
it(
......
ee/spec/frontend/on_demand_scans_form/components/scan_schedule_spec.js
View file @ 24aea042
import { GlDatepicker, GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
import { merge } from 'lodash';
import { nextTick } from 'vue';
import mockTimezones from 'test_fixtures/timezones/full.json';
import ScanSchedule from 'ee/on_demand_scans_form/components/scan_schedule.vue';
import { SCAN_CADENCE_OPTIONS } from 'ee/on_demand_scans_form/settings';
......@@ -22,11 +23,11 @@ describe('ScanSchedule', () => {
const findCadenceInput = () => wrapper.findComponent(DropdownInput);
// Helpers
const setTimeInputValue = (value) => {
const setTimeInputValue = async (value) => {
const input = findTimeInput();
input.element.value = value;
input.trigger('input');
return wrapper.vm.$nextTick();
await nextTick();
};
const createComponent = (options = {}) => {
......@@ -135,14 +136,14 @@ describe('ScanSchedule', () => {
it('emits computed cadence value', async () => {
findCadenceInput().vm.$emit('input', SCAN_CADENCE_OPTIONS[5].value);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted().input[1][0].cadence).toEqual({ unit: 'MONTH', duration: 6 });
});
it('deactives schedule when checkbox is unchecked', async () => {
findCheckbox().vm.$emit('input', false);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.emitted().input).toHaveLength(2);
expect(wrapper.emitted().input[1]).toEqual([
......
ee/spec/frontend/oncall_schedule/add_edit_schedule_form_spec.js
View file @ 24aea042
import { GlSearchBoxByType, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import mockTimezones from 'test_fixtures/timezones/full.json';
import AddEditScheduleForm, {
i18n,
......@@ -97,7 +98,7 @@ describe('AddEditScheduleForm', () => {
it('should filter options based on search term', async () => {
const searchTerm = 'Pacific';
findTimezoneSearchBox().vm.$emit('input', searchTerm);
await wrapper.vm.$nextTick();
await nextTick();
const options = findDropdownOptions();
expect(options).toHaveLength(1);
expect(options.at(0).text()).toContain(searchTerm);
......@@ -106,7 +107,7 @@ describe('AddEditScheduleForm', () => {
it('should display no results item when there are no filter matches', async () => {
const searchTerm = 'someUnexistentTZ';
findTimezoneSearchBox().vm.$emit('input', searchTerm);
await wrapper.vm.$nextTick();
await nextTick();
const options = findDropdownOptions();
expect(options).toHaveLength(1);
expect(options.at(0).text()).toContain(i18n.noResults);
......@@ -116,7 +117,7 @@ describe('AddEditScheduleForm', () => {
it('should add a checkmark to the selected option', async () => {
const selectedTZOption = findDropdownOptions().at(0);
selectedTZOption.vm.$emit('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(selectedTZOption.attributes('ischecked')).toBe('true');
});
});
......
ee/spec/frontend/oncall_schedule/delete_schedule_modal_spec.js
View file @ 24aea042
import { GlModal, GlAlert, GlSprintf } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import DeleteScheduleModal, {
i18n,
} from 'ee/oncall_schedules/components/delete_schedule_modal.vue';
......@@ -147,7 +148,7 @@ describe('DeleteScheduleModal', () => {
createComponentWithApollo();
await jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
await nextTick();
expect(findModal().attributes('data-testid')).toBe(`delete-schedule-modal-${schedule.iid}`);
});
......
ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_form_spec.js
View file @ 24aea042
import { GlDropdownItem, GlTokenSelector, GlFormGroup, GlToggle } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { cloneDeep, merge } from 'lodash';
import { nextTick } from 'vue';
import AddEditRotationForm from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue';
import { formEmptyState } from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_modal.vue';
import { LENGTH_ENUM } from 'ee/oncall_schedules/constants';
......@@ -121,7 +122,7 @@ describe('AddEditRotationForm', () => {
},
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findStartsOnTimeOptions().at(time).props('isChecked')).toBe(true);
});
});
......@@ -183,7 +184,7 @@ describe('AddEditRotationForm', () => {
},
});
findEndDateToggle().vm.$emit('change', true);
await wrapper.vm.$nextTick();
await nextTick();
expect(findEndsOnTimeOptions().at(time).props('isChecked')).toBe(true);
});
});
......
ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_modal_spec.js
View file @ 24aea042
import { GlAlert, GlModal } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import AddEditRotationForm from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue';
import AddEditRotationModal, {
i18n,
......@@ -147,7 +148,7 @@ describe('AddEditRotationModal', () => {
mutation: expect.any(Object),
variables: { input: expect.objectContaining({ projectPath }) },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findForm().props('form').name).toBe(undefined);
});
......@@ -279,7 +280,7 @@ describe('AddEditRotationModal', () => {
it('should disable primary button when any of the fields is invalid', async () => {
const form = findForm();
form.vm.$emit('update-rotation-form', { type: 'name', value: 'lalal' });
await wrapper.vm.$nextTick();
await nextTick();
expect(findModal().props('actionPrimary').attributes).toEqual(
expect.arrayContaining([{ disabled: true }]),
);
......@@ -297,7 +298,7 @@ describe('AddEditRotationModal', () => {
type: 'endsAt.date',
value: new Date('12/10/2021'),
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findModal().props('actionPrimary').attributes).toEqual(
expect.arrayContaining([{ disabled: false }]),
);
......
ee/spec/frontend/oncall_schedule/rotations/components/delete_rotation_modal_spec.js
View file @ 24aea042
import { GlModal, GlAlert, GlSprintf } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import DeleteRotationModal, {
i18n,
} from 'ee/oncall_schedules/components/rotations/components/delete_rotation_modal.vue';
......@@ -153,7 +154,7 @@ describe('DeleteRotationModal', () => {
createComponentWithApollo();
await jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
await nextTick();
expect(findModal().attributes('data-testid')).toBe(`delete-rotation-modal-${rotation.id}`);
});
......
ee/spec/frontend/operations/components/dashboard/project_header_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
import { trimText } from 'helpers/text_helper';
import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
......@@ -48,14 +49,13 @@ describe('project header component', () => {
expect(button.attributes('title')).toBe('Remove card');
});
it('emits project removal link on click', () => {
it('emits project removal link on click', async () => {
wrapper.find('.js-remove-button').vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(wrapper.emitted().remove).toStrictEqual([[mockOneProject.remove_path]]);
});
});
});
describe('wrapped components', () => {
describe('project avatar', () => {
......
ee/spec/frontend/pages/groups/saml_providers/saml_members/index_spec.js
View file @ 24aea042
import { GlTable, GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import MembersApp from 'ee/pages/groups/saml_providers/saml_members/index.vue';
import createInitialState from 'ee/pages/groups/saml_providers/saml_members/store/state';
......@@ -66,12 +66,11 @@ describe('SAML providers members app', () => {
expect(wrapper.findComponent(GlTable).exists()).toBe(true);
});
it('requests next page when pagination component performs change', () => {
it('requests next page when pagination component performs change', async () => {
const changeFn = wrapper.findComponent(TablePagination).props('change');
changeFn(2);
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(fetchPageMock).toHaveBeenCalledWith(expect.anything(), 2);
});
});
});
});
ee/spec/frontend/projects/merge_requests/blocking_mr_input_root_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import BlockingMrInputRoot from 'ee/projects/merge_requests/blocking_mr_input_root.vue';
import RelatedIssuableInput from '~/related_issues/components/related_issuable_input.vue';
......@@ -86,24 +87,22 @@ describe('blocking mr input root', () => {
expectShouldUpdateRefsToBe(false);
});
it('is true after a ref is removed', () => {
it('is true after a ref is removed', async () => {
createComponent({ existingRefs: ['!1'] });
removeRef(0);
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expectShouldUpdateRefsToBe(true);
});
});
it('is true after a ref is added', () => {
it('is true after a ref is added', async () => {
createComponent();
addTokenizedInput('foo');
return wrapper.vm.$nextTick(() => {
await nextTick();
expectShouldUpdateRefsToBe(true);
});
});
});
describe('remove_hidden_blocking_merge_requests', () => {
const expectRemoveHiddenBlockingMergeRequestsToBe = createHiddenInputExpectation(
......@@ -129,14 +128,13 @@ describe('blocking mr input root', () => {
expectRemoveHiddenBlockingMergeRequestsToBe(false);
});
it('is false when ref has been removed', () => {
it('is false when ref has been removed', async () => {
makeComponentWithHiddenMrs();
removeRef(2);
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expectRemoveHiddenBlockingMergeRequestsToBe(true);
});
});
});
});
});
ee/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
View file @ 24aea042
import { GlToggle } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAxiosAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import CcValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
import { TEST_HOST } from 'helpers/test_constants';
import waitForPromises from 'helpers/wait_for_promises';
......@@ -67,7 +68,7 @@ describe('projects/settings/components/shared_runners', () => {
it('credit card alert should be hidden after dismiss', async () => {
findCcValidationRequiredAlert().vm.$emit('dismiss');
await wrapper.vm.$nextTick();
await nextTick();
expect(findCcValidationRequiredAlert().exists()).toBe(false);
});
......
ee/spec/frontend/related_items_tree/components/create_epic_form_spec.js
View file @ 24aea042
import { GlFormInput, GlButton, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
......@@ -47,7 +47,7 @@ describe('RelatedItemsTree', () => {
expect(wrapper.vm.isSubmitButtonDisabled).toBe(true);
});
it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', () => {
it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', async () => {
const wrapperWithInput = createComponent(false);
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
......@@ -56,24 +56,22 @@ describe('RelatedItemsTree', () => {
inputValue: 'foo',
});
return wrapperWithInput.vm.$nextTick(() => {
await nextTick();
expect(wrapperWithInput.vm.isSubmitButtonDisabled).toBe(false);
wrapperWithInput.destroy();
});
});
});
describe('buttonLabel', () => {
it('returns string "Creating epic" when `isSubmitting` prop is true', () => {
it('returns string "Creating epic" when `isSubmitting` prop is true', async () => {
const wrapperSubmitting = createComponent(true);
return wrapperSubmitting.vm.$nextTick(() => {
await nextTick();
expect(wrapperSubmitting.vm.buttonLabel).toBe('Creating epic');
wrapperSubmitting.destroy();
});
});
it('returns string "Create epic" when `isSubmitting` prop is false', () => {
expect(wrapper.vm.buttonLabel).toBe('Create epic');
......
ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js
View file @ 24aea042
......@@ -9,7 +9,7 @@ import {
GlDropdownSectionHeader,
} from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import mockProjects from 'test_fixtures_static/projects.json';
......@@ -72,17 +72,16 @@ describe('CreateIssueForm', () => {
describe('computed', () => {
describe('dropdownToggleText', () => {
it('returns project name with name_with_namespace when `selectedProject` is not empty', () => {
it('returns project name with name_with_namespace when `selectedProject` is not empty', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
selectedProject: mockProjects[0],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.dropdownToggleText).toBe(mockProjects[0].name_with_namespace);
});
});
it('returns project name with namespace when `selectedProject` is not empty and dont have name_with_namespace', async () => {
const project = { ...mockProjects[0], name_with_namespace: undefined, namespace: 'foo' };
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
......@@ -91,7 +90,7 @@ describe('CreateIssueForm', () => {
selectedProject: project,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.dropdownToggleText).toBe(project.namespace);
});
......@@ -100,17 +99,16 @@ describe('CreateIssueForm', () => {
describe('methods', () => {
describe('cancel', () => {
it('emits event `cancel` on component', () => {
it('emits event `cancel` on component', async () => {
wrapper.vm.cancel();
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.emitted('cancel')).toBeTruthy();
});
});
});
describe('createIssue', () => {
it('emits event `submit` on component when `selectedProject` is not empty', () => {
it('emits event `submit` on component when `selectedProject` is not empty', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -125,13 +123,12 @@ describe('CreateIssueForm', () => {
wrapper.vm.createIssue();
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.emitted('submit')[0]).toEqual(
expect.arrayContaining([{ issuesEndpoint: 'foo', title: 'Some issue' }]),
);
});
});
});
describe('handleDropdownShow', () => {
it('sets `searchKey` prop to empty string and calls action `fetchProjects`', () => {
......@@ -164,10 +161,10 @@ describe('CreateIssueForm', () => {
expect(projectsDropdownButton.props('text')).toBe('Select a project');
});
it('renders Projects dropdown contents', () => {
it('renders Projects dropdown contents', async () => {
wrapper.vm.$store.dispatch('receiveProjectsSuccess', mockProjects);
return wrapper.vm.$nextTick(() => {
await nextTick();
const projectsDropdownButton = wrapper.findComponent(GlDropdown);
const dropdownItems = projectsDropdownButton.findAllComponents(GlDropdownItem);
const dropdownItem = dropdownItems.at(0);
......@@ -179,7 +176,6 @@ describe('CreateIssueForm', () => {
expect(dropdownItem.text()).toContain(mockProjects[0].namespace.name);
expect(dropdownItem.findComponent(ProjectAvatar).exists()).toBe(true);
});
});
it('renders dropdown contents without recent items when `recentItems` are empty', () => {
const projectsDropdownButton = wrapper.findComponent(GlDropdown);
......@@ -195,7 +191,7 @@ describe('CreateIssueForm', () => {
wrapper.vm.setRecentItems();
await wrapper.vm.$nextTick();
await nextTick();
const projectsDropdownButton = wrapper.findComponent(GlDropdown);
......@@ -216,7 +212,7 @@ describe('CreateIssueForm', () => {
wrapper.vm.setRecentItems();
await wrapper.vm.$nextTick();
await nextTick();
const projectsDropdownButton = wrapper.findComponent(GlDropdown);
......@@ -229,7 +225,7 @@ describe('CreateIssueForm', () => {
removeLocalstorageFrequentItems();
});
it('renders Projects dropdown contents containing only matching project when searchKey is provided', () => {
it('renders Projects dropdown contents containing only matching project when searchKey is provided', async () => {
const searchKey = 'Underscore';
const filteredMockProjects = mockProjects.filter((project) => project.name === searchKey);
jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
......@@ -242,17 +238,12 @@ describe('CreateIssueForm', () => {
searchKey,
});
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
})
.then(() => {
await nextTick();
await wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(1);
});
});
it('renders Projects dropdown contents containing string string "No matches found" when searchKey provided does not match any project', () => {
it('renders Projects dropdown contents containing string string "No matches found" when searchKey provided does not match any project', async () => {
const searchKey = "this-project-shouldn't exist";
const filteredMockProjects = mockProjects.filter((project) => project.name === searchKey);
jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
......@@ -265,15 +256,10 @@ describe('CreateIssueForm', () => {
searchKey,
});
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
})
.then(() => {
await nextTick();
await wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
expect(wrapper.find('.dropdown-contents').text()).toContain('No matches found');
});
});
it('renders `Create issue` button', () => {
const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
......@@ -282,22 +268,21 @@ describe('CreateIssueForm', () => {
expect(createIssueButton.text()).toBe('Create issue');
});
it('renders loading icon within `Create issue` button when `itemCreateInProgress` is true', () => {
it('renders loading icon within `Create issue` button when `itemCreateInProgress` is true', async () => {
wrapper.vm.$store.dispatch('requestCreateItem');
return wrapper.vm.$nextTick(() => {
await nextTick();
const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
expect(createIssueButton.exists()).toBe(true);
expect(createIssueButton.props('disabled')).toBe(true);
expect(createIssueButton.props('loading')).toBe(true);
});
});
it('renders loading icon within `Create issue` button when `recentItemFetchInProgress` is true', () => {
it('renders loading icon within `Create issue` button when `recentItemFetchInProgress` is true', async () => {
wrapper.vm.recentItemFetchInProgress = true;
return wrapper.vm.$nextTick(() => {
await nextTick();
const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
expect(createIssueButton.exists()).toBe(true);
......@@ -306,7 +291,6 @@ describe('CreateIssueForm', () => {
loading: true,
});
});
});
it('renders `Cancel` button', () => {
const cancelButton = wrapper.findAllComponents(GlButton).at(1);
......
ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js
View file @ 24aea042
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import AxiosMockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
......@@ -201,45 +201,42 @@ describe('RelatedItemsTreeApp', () => {
});
});
it('renders loading icon when `state.itemsFetchInProgress` prop is true', () => {
it('renders loading icon when `state.itemsFetchInProgress` prop is true', async () => {
wrapper.vm.$store.dispatch('requestItems', {
parentItem: mockParentItem,
isSubItem: false,
});
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true);
});
});
it('renders tree container element when `state.itemsFetchInProgress` prop is false', () =>
wrapper.vm.$nextTick().then(() => {
it('renders tree container element when `state.itemsFetchInProgress` prop is false', async () => {
await nextTick();
expect(wrapper.find('.related-items-tree').isVisible()).toBe(true);
}));
});
it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', () => {
it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', async () => {
wrapper.vm.$store.dispatch('requestAddItem');
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(wrapper.find('.related-items-tree.disabled-content').isVisible()).toBe(true);
});
});
it('renders tree header component', () =>
wrapper.vm.$nextTick().then(() => {
it('renders tree header component', async () => {
await nextTick();
expect(wrapper.findComponent(RelatedItemsTreeHeader).isVisible()).toBe(true);
}));
});
it('renders item add/create form container element', () => {
it('renders item add/create form container element', async () => {
wrapper.vm.$store.dispatch('toggleAddItemForm', {
toggleState: true,
issuableType: issuableTypesMap.EPIC,
});
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(wrapper.find('.add-item-form-container').isVisible()).toBe(true);
});
});
it('does not render create issue form', () => {
expect(findCreateIssueForm().exists()).toBe(false);
......@@ -265,7 +262,7 @@ describe('RelatedItemsTreeApp', () => {
wrapper.vm.$store.state.autoCompleteIssues = autoCompleteIssues;
wrapper.vm.$store.state.autoCompleteEpics = autoCompleteEpics;
await wrapper.vm.$nextTick();
await nextTick();
expect(findAddItemForm().props()).toMatchObject({
autoCompleteIssues: expectedAutoCompleteIssues,
......
ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js
View file @ 24aea042
import { GlTooltip, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import EpicHealthStatus from 'ee/related_items_tree/components/epic_health_status.vue';
......@@ -222,13 +222,13 @@ describe('RelatedItemsTree', () => {
});
describe('when issuable-health-status feature is not available', () => {
beforeEach(() => {
beforeEach(async () => {
wrapper.vm.$store.commit('SET_INITIAL_CONFIG', {
...mockInitialConfig,
allowIssuableHealthStatus: false,
});
return wrapper.vm.$nextTick();
await nextTick();
});
it('does not render health status', () => {
......@@ -237,13 +237,13 @@ describe('RelatedItemsTree', () => {
});
describe('when issuable-health-status feature is available', () => {
beforeEach(() => {
beforeEach(async () => {
wrapper.vm.$store.commit('SET_INITIAL_CONFIG', {
...mockInitialConfig,
allowIssuableHealthStatus: true,
});
return wrapper.vm.$nextTick();
await nextTick();
});
it('does not render health status', () => {
......
ee/spec/frontend/related_items_tree/components/state_tooltip_spec.js
View file @ 24aea042
import { GlTooltip } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import StateTooltip from 'ee/related_items_tree/components/state_tooltip.vue';
// Ensure that mock dates dynamically computed from today
......@@ -48,26 +49,24 @@ describe('RelatedItemsTree', () => {
describe('computed', () => {
describe('stateText', () => {
it('returns string `Created` when `isOpen` prop is true', () => {
it('returns string `Created` when `isOpen` prop is true', async () => {
wrapper.setProps({
isOpen: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateText).toBe('Created');
});
});
it('returns string `Closed` when `isOpen` prop is false', () => {
it('returns string `Closed` when `isOpen` prop is false', async () => {
wrapper.setProps({
isOpen: false,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateText).toBe('Closed');
});
});
});
describe('createdAtInWords', () => {
it('returns string containing date in words for `createdAt` prop', () => {
......@@ -94,49 +93,45 @@ describe('RelatedItemsTree', () => {
});
describe('stateTimeInWords', () => {
it('returns string using `createdAtInWords` prop when `isOpen` is true', () => {
it('returns string using `createdAtInWords` prop when `isOpen` is true', async () => {
wrapper.setProps({
isOpen: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateTimeInWords).toBe('2 years ago');
});
});
it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
it('returns string using `closedAtInWords` prop when `isOpen` is false', async () => {
wrapper.setProps({
isOpen: false,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateTimeInWords).toBe('1 year ago');
});
});
});
describe('stateTimestamp', () => {
it('returns string using `createdAtTimestamp` prop when `isOpen` is true', () => {
it('returns string using `createdAtTimestamp` prop when `isOpen` is true', async () => {
wrapper.setProps({
isOpen: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateTimestamp).toContain(mockCreatedAtYear);
});
});
it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
it('returns string using `closedAtInWords` prop when `isOpen` is false', async () => {
wrapper.setProps({
isOpen: false,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.stateTimestamp).toContain(mockClosedAtYear);
});
});
});
});
describe('methods', () => {
describe('getTimestamp', () => {
......
ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js
View file @ 24aea042
......@@ -94,10 +94,10 @@ describe('RelatedItemsTree', () => {
allowIssuableHealthStatus: true,
});
};
const setShowLabels = (isShowingLabels) => {
const setShowLabels = async (isShowingLabels) => {
wrapper.vm.$store.dispatch('setShowLabels', isShowingLabels);
return nextTick();
await nextTick();
};
beforeEach(() => {
......@@ -119,62 +119,57 @@ describe('RelatedItemsTree', () => {
describe('itemWebPath', () => {
const mockPath = '/foo/bar';
it('returns value of `item.path`', () => {
it('returns value of `item.path`', async () => {
wrapper.setProps({
item: { ...mockItem, path: mockPath, webPath: undefined },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.itemWebPath).toBe(mockPath);
});
});
it('returns value of `item.webPath` when `item.path` is undefined', () => {
it('returns value of `item.webPath` when `item.path` is undefined', async () => {
wrapper.setProps({
item: { ...mockItem, path: undefined, webPath: mockPath },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.itemWebPath).toBe(mockPath);
});
});
});
describe('isOpen', () => {
it('returns true when `item.state` value is `opened`', () => {
it('returns true when `item.state` value is `opened`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Open },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('name')).toBe('issues');
});
});
});
describe('isBlocked', () => {
it('returns true when `item.blocked` value is `true`', () => {
it('returns true when `item.blocked` value is `true`', async () => {
wrapper.setProps({
item: { ...mockItem, blocked: true },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('name')).toBe('issue-block');
});
});
});
describe('isClosed', () => {
it('returns true when `item.state` value is `closed`', () => {
it('returns true when `item.state` value is `closed`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Closed },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('name')).toBe('issue-closed');
});
});
});
describe('hasMilestone', () => {
it('returns true when `item.milestone` is defined and has values', () => {
......@@ -219,62 +214,57 @@ describe('RelatedItemsTree', () => {
});
describe('stateText', () => {
it('returns string `Opened` when `item.state` value is `opened`', () => {
it('returns string `Opened` when `item.state` value is `opened`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Open },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().props('ariaLabel')).toBe('Opened');
});
});
it('returns string `Closed` when `item.state` value is `closed`', () => {
it('returns string `Closed` when `item.state` value is `closed`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Closed },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().props('ariaLabel')).toBe('Closed');
});
});
});
describe('stateIconClass', () => {
it('returns string `issue-token-state-icon-open gl-text-green-500` when `item.state` value is `opened`', () => {
it('returns string `issue-token-state-icon-open gl-text-green-500` when `item.state` value is `opened`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Open },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('class')).toContain(
'issue-token-state-icon-open gl-text-green-500',
);
});
});
it('return string `gl-text-red-500` when `item.blocked` value is `true`', () => {
it('return string `gl-text-red-500` when `item.blocked` value is `true`', async () => {
wrapper.setProps({
item: { ...mockItem, blocked: true },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('class')).toContain('gl-text-red-500');
});
});
it('returns string `issue-token-state-icon-closed gl-text-blue-500` when `item.state` value is `closed`', () => {
it('returns string `issue-token-state-icon-closed gl-text-blue-500` when `item.state` value is `closed`', async () => {
wrapper.setProps({
item: { ...mockItem, state: ChildState.Closed },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findIssueIcon().attributes('class')).toContain(
'issue-token-state-icon-closed gl-text-blue-500',
);
});
});
});
describe('itemHierarchy', () => {
it('returns string containing item id and item path', () => {
......@@ -288,16 +278,15 @@ describe('RelatedItemsTree', () => {
expect(findLink().attributes('href')).toBe(mockItem.webPath);
});
it('returns `null` when `itemWebPath` is empty', () => {
it('returns `null` when `itemWebPath` is empty', async () => {
wrapper.setProps({
item: { ...mockItem, webPath: '' },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(findLink().attributes('href')).toBeUndefined();
});
});
});
describe.each`
createItem | itemType | isEpic
......@@ -333,7 +322,7 @@ describe('RelatedItemsTree', () => {
item: mockItem,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(findIssueIcon().props('name')).toBe(stateIconName);
});
......@@ -440,7 +429,7 @@ describe('RelatedItemsTree', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(ItemDueDate).props('closed')).toBe(true);
});
......@@ -459,7 +448,7 @@ describe('RelatedItemsTree', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
const weight = wrapper.findComponent(ItemWeight);
......@@ -503,7 +492,7 @@ describe('RelatedItemsTree', () => {
enableHealthStatus();
await wrapper.vm.$nextTick();
await nextTick();
expect(findIssueHealthStatus().exists()).toBe(true);
});
......
ee/spec/frontend/related_items_tree/components/tree_item_remove_modal_spec.js
View file @ 24aea042
import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import TreeItemRemoveModal from 'ee/related_items_tree/components/tree_item_remove_modal.vue';
......@@ -65,57 +65,53 @@ describe('RelatedItemsTree', () => {
});
describe('modalTitle', () => {
it('returns title for modal when item.type is `Epic`', () => {
it('returns title for modal when item.type is `Epic`', async () => {
wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
parentItem: mockParentItem,
item: { ...mockItem, type: ChildType.Epic },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.modalTitle).toBe('Remove epic');
});
});
it('returns title for modal when item.type is `Issue`', () => {
it('returns title for modal when item.type is `Issue`', async () => {
wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
parentItem: mockParentItem,
item: mockItem,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.modalTitle).toBe('Remove issue');
});
});
});
describe('modalBody', () => {
it('returns body text for modal when item.type is `Epic`', () => {
it('returns body text for modal when item.type is `Epic`', async () => {
wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
parentItem: mockParentItem,
item: { ...mockItem, type: ChildType.Epic },
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.modalBody).toBe(
'This will also remove any descendents of <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>. Are you sure?',
);
});
});
it('returns body text for modal when item.type is `Issue`', () => {
it('returns body text for modal when item.type is `Issue`', async () => {
wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
parentItem: mockParentItem,
item: mockItem,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.modalBody).toBe(
'Are you sure you want to remove <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>?',
);
});
});
});
});
describe('template', () => {
it('renders modal component', () => {
......
ee/spec/frontend/related_items_tree/components/tree_item_spec.js
View file @ 24aea042
import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
......@@ -153,18 +153,17 @@ describe('RelatedItemsTree', () => {
expect(collapsedIcon.props('name')).toBe('chevron-right');
});
it('renders loading icon when item expand is in progress', () => {
it('renders loading icon when item expand is in progress', async () => {
wrapper.vm.$store.dispatch('requestItems', {
parentItem: mockItem,
isSubItem: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const loadingIcon = wrapper.findComponent(GlLoadingIcon);
expect(loadingIcon.isVisible()).toBe(true);
});
});
it('renders tree item body component', () => {
const itemBody = wrapper.findComponent(TreeItemBody);
......
ee/spec/frontend/requirements/components/import_requirements_modal_spec.js
View file @ 24aea042
import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ImportRequirementsModal from 'ee/requirements/components/import_requirements_modal.vue';
const createComponent = ({ projectPath = 'gitLabTest' } = {}) =>
......@@ -39,7 +40,7 @@ describe('ImportRequirementsModal', () => {
describe('methods', () => {
describe('handleCSVFile', () => {
it('sets the first file selected', () => {
it('sets the first file selected', async () => {
const file = 'some file';
const event = {
......@@ -49,12 +50,11 @@ describe('ImportRequirementsModal', () => {
};
wrapper.vm.handleCSVFile(event);
wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.file).toBe(file);
});
});
});
});
describe('template', () => {
it('GlModal open click emits file and projectPath', () => {
......
ee/spec/frontend/requirements/components/requirement_item_spec.js
View file @ 24aea042
import { GlLink, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementItem from 'ee/requirements/components/requirement_item.vue';
import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
......@@ -34,10 +35,10 @@ describe('RequirementItem', () => {
describe('methods', () => {
describe('handleArchiveClick', () => {
it('emits `archiveClick` event on component with object containing `requirement.iid` & `state` as "ARCHIVED" as param', () => {
it('emits `archiveClick` event on component with object containing `requirement.iid` & `state` as "ARCHIVED" as param', async () => {
wrapper.vm.handleArchiveClick();
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.emitted('archiveClick')).toBeTruthy();
expect(wrapper.emitted('archiveClick')[0]).toEqual([
{
......@@ -47,13 +48,12 @@ describe('RequirementItem', () => {
]);
});
});
});
describe('handleReopenClick', () => {
it('emits `reopenClick` event on component with object containing `requirement.iid` & `state` as "OPENED" as param', () => {
it('emits `reopenClick` event on component with object containing `requirement.iid` & `state` as "OPENED" as param', async () => {
wrapperArchived.vm.handleReopenClick();
return wrapperArchived.vm.$nextTick(() => {
await nextTick();
expect(wrapperArchived.emitted('reopenClick')).toBeTruthy();
expect(wrapperArchived.emitted('reopenClick')[0]).toEqual([
{
......@@ -64,22 +64,20 @@ describe('RequirementItem', () => {
});
});
});
});
describe('template', () => {
it('renders component container element containing class `requirement`', () => {
expect(wrapper.classes()).toContain('requirement');
});
it('renders component container element with class `disabled-content` when `stateChangeRequestActive` prop is true', () => {
it('renders component container element with class `disabled-content` when `stateChangeRequestActive` prop is true', async () => {
wrapper.setProps({
stateChangeRequestActive: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.classes()).toContain('disabled-content');
});
});
it('emits `show-click` event with requirement as param', () => {
wrapper.trigger('click');
......@@ -189,7 +187,7 @@ describe('RequirementItem', () => {
expect(reopenButton.text()).toBe('Reopen');
});
it('does not render `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is false', () => {
it('does not render `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is false', async () => {
wrapperArchived.setProps({
requirement: {
...requirementArchived,
......@@ -200,9 +198,8 @@ describe('RequirementItem', () => {
},
});
return wrapperArchived.vm.$nextTick(() => {
await nextTick();
expect(wrapperArchived.find('.controls .requirement-reopen').exists()).toBe(false);
});
});
});
});
ee/spec/frontend/requirements/components/requirement_status_badge_spec.js
View file @ 24aea042
import { GlBadge, GlIcon, GlTooltip } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
import { mockTestReport, mockTestReportFailed, mockTestReportMissing } from '../mock_data';
......@@ -49,22 +50,21 @@ describe('RequirementStatusBadge', () => {
expect(wrapper.vm.testReportBadge).toEqual(successBadgeProps);
});
it('returns object containing variant, icon, text and tooltipTitle when status is "FAILED"', () => {
it('returns object containing variant, icon, text and tooltipTitle when status is "FAILED"', async () => {
wrapper.setProps({
testReport: mockTestReportFailed,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.testReportBadge).toEqual(failedBadgeProps);
});
});
it('returns object containing variant, icon, text and tooltipTitle when status missing', () => {
it('returns object containing variant, icon, text and tooltipTitle when status missing', async () => {
wrapper.setProps({
testReport: mockTestReportMissing,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.testReportBadge).toEqual({
variant: 'warning',
icon: 'status_warning',
......@@ -74,7 +74,6 @@ describe('RequirementStatusBadge', () => {
});
});
});
});
describe('template', () => {
describe.each`
......
ee/spec/frontend/requirements/components/requirements_empty_state_spec.js
View file @ 24aea042
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementsEmptyState from 'ee/requirements/components/requirements_empty_state.vue';
import { FilterState } from 'ee/requirements/constants';
......@@ -33,7 +34,7 @@ describe('RequirementsEmptyState', () => {
describe('computed', () => {
describe('emptyStateTitle', () => {
it('returns string "There are no open requirements" when value of `filterBy` prop is "OPENED" and project has some requirements', () => {
it('returns string "There are no open requirements" when value of `filterBy` prop is "OPENED" and project has some requirements', async () => {
wrapper.setProps({
requirementsCount: {
OPENED: 0,
......@@ -42,12 +43,11 @@ describe('RequirementsEmptyState', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.emptyStateTitle).toBe('There are no open requirements');
});
});
it('returns string "There are no archived requirements" when value of `filterBy` prop is "ARCHIVED" and project has some requirements', () => {
it('returns string "There are no archived requirements" when value of `filterBy` prop is "ARCHIVED" and project has some requirements', async () => {
wrapper.setProps({
filterBy: FilterState.archived,
requirementsCount: {
......@@ -57,10 +57,9 @@ describe('RequirementsEmptyState', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.emptyStateTitle).toBe('There are no archived requirements');
});
});
it('returns a generic string when project has no requirements', () => {
expect(wrapper.vm.emptyStateTitle).toBe(
......@@ -76,7 +75,7 @@ describe('RequirementsEmptyState', () => {
);
});
it('returns a null when project has some requirements', () => {
it('returns a null when project has some requirements', async () => {
wrapper.setProps({
requirementsCount: {
OPENED: 2,
......@@ -85,12 +84,11 @@ describe('RequirementsEmptyState', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.emptyStateDescription).toBeNull();
});
});
});
});
describe('template', () => {
it('renders empty state element', () => {
......@@ -109,7 +107,7 @@ describe('RequirementsEmptyState', () => {
expect(newReqButton.text()).toBe('New requirement');
});
it('does not render new requirement button when project some requirements', () => {
it('does not render new requirement button when project some requirements', async () => {
wrapper.setProps({
requirementsCount: {
OPENED: 2,
......@@ -118,23 +116,21 @@ describe('RequirementsEmptyState', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const newReqButton = wrapper.findComponent(GlButton);
expect(newReqButton.exists()).toBe(false);
});
});
it('does not render new requirement button when user is not authenticated', () => {
it('does not render new requirement button when user is not authenticated', async () => {
wrapper = createComponent({
canCreateRequirement: false,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const newReqButton = wrapper.findComponent(GlButton);
expect(newReqButton.exists()).toBe(false);
});
});
});
});
ee/spec/frontend/requirements/components/requirements_loading_spec.js
View file @ 24aea042
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementsLoading from 'ee/requirements/components/requirements_loading.vue';
import { FilterState, mockRequirementsCount } from '../mock_data';
......@@ -50,17 +51,16 @@ describe('RequirementsLoading', () => {
expect(wrapper.vm.loaderCount).toBe(2);
});
it('returns value of remainder requirements for last page when current page is the last page total requirements are more than DEFAULT_PAGE_SIZE', () => {
it('returns value of remainder requirements for last page when current page is the last page total requirements are more than DEFAULT_PAGE_SIZE', async () => {
wrapper.setProps({
currentPage: 2,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.loaderCount).toBe(1);
});
});
it('returns value DEFAULT_PAGE_SIZE when current page is the last page total requirements are less than DEFAULT_PAGE_SIZE', () => {
it('returns value DEFAULT_PAGE_SIZE when current page is the last page total requirements are less than DEFAULT_PAGE_SIZE', async () => {
wrapper.setProps({
currentPage: 1,
requirementsCount: {
......@@ -70,12 +70,11 @@ describe('RequirementsLoading', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.loaderCount).toBe(1);
});
});
});
});
describe('template', () => {
it('renders gl-skeleton-loading component project has some requirements and current tab has requirements to show', () => {
......@@ -87,7 +86,7 @@ describe('RequirementsLoading', () => {
expect(loaders.at(0).props('lines')).toBe(2);
});
it('renders gl-loading-icon component project has no requirements and current tab has nothing to show', () => {
it('renders gl-loading-icon component project has no requirements and current tab has nothing to show', async () => {
wrapper.setProps({
requirementsCount: {
OPENED: 0,
......@@ -96,10 +95,9 @@ describe('RequirementsLoading', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.find('.requirements-list-loading').exists()).toBe(false);
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
});
});
});
});
ee/spec/frontend/requirements/components/requirements_root_spec.js
View file @ 24aea042
......@@ -3,6 +3,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
import VueApollo from 'vue-apollo';
import { nextTick } from 'vue';
import RequirementItem from 'ee/requirements/components/requirement_item.vue';
import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
import RequirementsEmptyState from 'ee/requirements/components/requirements_empty_state.vue';
......@@ -164,7 +165,7 @@ describe('RequirementsRoot', () => {
wrapperLoading.destroy();
});
it('returns `true` when `requirements.list` is empty', () => {
it('returns `true` when `requirements.list` is empty', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -173,12 +174,11 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.requirementsListEmpty).toBe(true);
});
});
it('returns `true` when `requirementsCount` for current filterBy value is 0', () => {
it('returns `true` when `requirementsCount` for current filterBy value is 0', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -188,14 +188,13 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.requirementsListEmpty).toBe(true);
});
});
});
describe('totalRequirementsForCurrentTab', () => {
it('returns number representing total requirements for current tab', () => {
it('returns number representing total requirements for current tab', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -205,28 +204,26 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.totalRequirementsForCurrentTab).toBe(mockRequirementsCount.OPENED);
});
});
});
describe('showEmptyState', () => {
it('returns `false` when `showRequirementCreateDrawer` is true', () => {
it('returns `false` when `showRequirementCreateDrawer` is true', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
showRequirementCreateDrawer: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.showEmptyState).toBe(false);
});
});
});
describe('showPaginationControls', () => {
it('returns `true` when totalRequirements is more than default page size', () => {
it('returns `true` when totalRequirements is more than default page size', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -237,12 +234,11 @@ describe('RequirementsRoot', () => {
requirementsCount: mockRequirementsCount,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.showPaginationControls).toBe(true);
});
});
it('returns `false` when totalRequirements is less than default page size', () => {
it('returns `false` when totalRequirements is less than default page size', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -256,10 +252,9 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.showPaginationControls).toBe(false);
});
});
it.each`
hasPreviousPage | hasNextPage | isVisible
......@@ -271,7 +266,7 @@ describe('RequirementsRoot', () => {
${true} | ${true} | ${true}
`(
'returns $isVisible when hasPreviousPage is $hasPreviousPage and hasNextPage is $hasNextPage within `requirements.pageInfo`',
({ hasPreviousPage, hasNextPage, isVisible }) => {
async ({ hasPreviousPage, hasNextPage, isVisible }) => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -283,45 +278,42 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.showPaginationControls).toBe(isVisible);
});
},
);
});
describe('prevPage', () => {
it('returns number representing previous page based on currentPage value', () => {
it('returns number representing previous page based on currentPage value', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
currentPage: 3,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.prevPage).toBe(2);
});
});
});
describe('nextPage', () => {
it('returns number representing next page based on currentPage value', () => {
expect(wrapper.vm.nextPage).toBe(2);
});
it('returns `null` when currentPage is already last page', () => {
it('returns `null` when currentPage is already last page', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
currentPage: 2,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.nextPage).toBeNull();
});
});
});
});
describe('methods', () => {
const mockUpdateMutationResult = {
......@@ -345,7 +337,7 @@ describe('RequirementsRoot', () => {
};
describe('getFilteredSearchValue', () => {
it('returns array containing applied filter search values', () => {
it('returns array containing applied filter search values', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -354,14 +346,13 @@ describe('RequirementsRoot', () => {
textSearch: 'foo',
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.getFilteredSearchValue()).toEqual(mockFilters);
});
});
});
describe('updateUrl', () => {
it('updates window URL based on presence of props for filtered search and sort criteria', () => {
it('updates window URL based on presence of props for filtered search and sort criteria', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -373,7 +364,7 @@ describe('RequirementsRoot', () => {
sortBy: 'updated_asc',
});
return wrapper.vm.$nextTick(() => {
await nextTick();
wrapper.vm.updateUrl();
expect(global.window.location.href).toBe(
......@@ -381,7 +372,6 @@ describe('RequirementsRoot', () => {
);
});
});
});
describe('exportCsv', () => {
it('calls `$apollo.mutate` with `exportRequirement` mutation and variables', () => {
......@@ -996,7 +986,7 @@ describe('RequirementsRoot', () => {
);
});
it('renders empty state when query results are empty', () => {
it('renders empty state when query results are empty', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -1008,10 +998,9 @@ describe('RequirementsRoot', () => {
},
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.findComponent(RequirementsEmptyState).exists()).toBe(true);
});
});
it('renders requirements-loading component when query results are still being loaded', () => {
const wrapperLoading = createComponent({ loading: true });
......@@ -1029,19 +1018,18 @@ describe('RequirementsRoot', () => {
expect(wrapper.find('requirement-edit-form-stub').exists()).toBe(true);
});
it('does not render requirement-empty-state component when `showRequirementCreateDrawer` prop is `true`', () => {
it('does not render requirement-empty-state component when `showRequirementCreateDrawer` prop is `true`', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
showRequirementCreateDrawer: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.findComponent(RequirementsEmptyState).exists()).toBe(false);
});
});
it('renders requirement items for all the requirements', () => {
it('renders requirement items for all the requirements', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -1052,7 +1040,7 @@ describe('RequirementsRoot', () => {
requirementsCount: mockRequirementsCount,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const itemsContainer = wrapper.find('ul.requirements-list');
expect(itemsContainer.exists()).toBe(true);
......@@ -1060,9 +1048,8 @@ describe('RequirementsRoot', () => {
mockRequirementsOpen.length,
);
});
});
it('renders pagination controls', () => {
it('renders pagination controls', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -1073,7 +1060,7 @@ describe('RequirementsRoot', () => {
requirementsCount: mockRequirementsCount,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const pagination = wrapper.findComponent(GlPagination);
expect(pagination.exists()).toBe(true);
......@@ -1082,7 +1069,6 @@ describe('RequirementsRoot', () => {
expect(pagination.props('align')).toBe('center');
});
});
});
describe('with apollo mock', () => {
describe('when requirement is edited', () => {
......
ee/spec/frontend/requirements/components/requirements_tabs_spec.js
View file @ 24aea042
import { GlTab, GlBadge, GlButton, GlTabs } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
import { FilterState } from 'ee/requirements/constants';
......@@ -64,50 +65,47 @@ describe('RequirementsTabs', () => {
expect(tabEl.attributes('active')).toBeDefined();
});
it('renders "New requirement" button when current tab is "Open" tab', () => {
it('renders "New requirement" button when current tab is "Open" tab', async () => {
wrapper.setProps({
filterBy: FilterState.opened,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const buttonEl = wrapper.findAllComponents(GlButton).at(2);
expect(buttonEl.exists()).toBe(true);
expect(buttonEl.text()).toBe('New requirement');
});
});
it('does not render "New requirement" button when current tab is not "Open" tab', () => {
it('does not render "New requirement" button when current tab is not "Open" tab', async () => {
wrapper.setProps({
filterBy: FilterState.archived,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const buttonEl = wrapper.findComponent(GlButton);
expect(buttonEl.exists()).toBe(false);
});
});
it('does not render "New requirement" button when `canCreateRequirement` prop is false', () => {
it('does not render "New requirement" button when `canCreateRequirement` prop is false', async () => {
wrapper.setProps({
filterBy: FilterState.opened,
canCreateRequirement: false,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const buttonEl = wrapper.findComponent(GlButton);
expect(buttonEl.exists()).toBe(false);
});
});
it('disables "New requirement" button when `showCreateForm` is true', () => {
it('disables "New requirement" button when `showCreateForm` is true', async () => {
wrapper.setProps({
showCreateForm: true,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
const buttonEl = wrapper.findAllComponents(GlButton);
expect(buttonEl.at(0).props('disabled')).toBe(true);
......@@ -115,5 +113,4 @@ describe('RequirementsTabs', () => {
expect(buttonEl.at(2).props('disabled')).toBe(true);
});
});
});
});
ee/spec/frontend/requirements/mixins/requirement_meta_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import RequirementItem from 'ee/requirements/components/requirement_item.vue';
import { FilterState } from 'ee/requirements/constants';
......@@ -51,7 +52,7 @@ describe('RequirementMeta Mixin', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.isArchived).toBe(true);
});
......
ee/spec/frontend/roadmap/components/current_day_indicator_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
......@@ -54,7 +55,7 @@ describe('CurrentDayIndicator', () => {
describe('computed', () => {
describe('hasToday', () => {
it('returns true when presetType is QUARTERS and currentDate is within current quarter', () => {
it('returns true when presetType is QUARTERS and currentDate is within current quarter', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -66,12 +67,11 @@ describe('CurrentDayIndicator', () => {
timeframeItem: mockTimeframeQuarters[0],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.hasToday).toBe(true);
});
});
it('returns true when presetType is MONTHS and currentDate is within current month', () => {
it('returns true when presetType is MONTHS and currentDate is within current month', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -83,12 +83,11 @@ describe('CurrentDayIndicator', () => {
timeframeItem: new Date(2020, 0, 1),
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.hasToday).toBe(true);
});
});
it('returns true when presetType is WEEKS and currentDate is within current week', () => {
it('returns true when presetType is WEEKS and currentDate is within current week', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -100,16 +99,15 @@ describe('CurrentDayIndicator', () => {
timeframeItem: mockTimeframeWeeks[0],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.hasToday).toBe(true);
});
});
});
});
describe('methods', () => {
describe('getIndicatorStyles', () => {
it('returns object containing `left` with value `34%` when presetType is QUARTERS', () => {
it('returns object containing `left` with value `34%` when presetType is QUARTERS', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -121,16 +119,15 @@ describe('CurrentDayIndicator', () => {
timeframeItem: mockTimeframeQuarters[0],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.getIndicatorStyles()).toEqual(
expect.objectContaining({
left: '34%',
}),
);
});
});
it('returns object containing `left` with value `48%` when presetType is MONTHS', () => {
it('returns object containing `left` with value `48%` when presetType is MONTHS', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -142,16 +139,15 @@ describe('CurrentDayIndicator', () => {
timeframeItem: new Date(2020, 0, 1),
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.getIndicatorStyles()).toEqual(
expect.objectContaining({
left: '48%',
}),
);
});
});
it('returns object containing `left` with value `7%` when presetType is WEEKS', () => {
it('returns object containing `left` with value `7%` when presetType is WEEKS', async () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({
......@@ -163,7 +159,7 @@ describe('CurrentDayIndicator', () => {
timeframeItem: mockTimeframeWeeks[0],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.getIndicatorStyles()).toEqual(
expect.objectContaining({
left: '7%',
......@@ -172,10 +168,9 @@ describe('CurrentDayIndicator', () => {
});
});
});
});
describe('template', () => {
beforeEach(() => {
beforeEach(async () => {
wrapper = createComponent();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -183,7 +178,7 @@ describe('CurrentDayIndicator', () => {
currentDate: mockTimeframeMonths[0],
});
return wrapper.vm.$nextTick();
await nextTick();
});
it('renders span element containing class `current-day-indicator`', () => {
......
ee/spec/frontend/roadmap/components/epic_item_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
import { delay } from 'lodash';
import { nextTick } from 'vue';
import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue';
import EpicItemComponent from 'ee/roadmap/components/epic_item.vue';
import EpicItemContainer from 'ee/roadmap/components/epic_item_container.vue';
......@@ -144,7 +145,7 @@ describe('EpicItemComponent', () => {
describe('methods', () => {
describe('removeHighlight', () => {
it('should wait 3 seconds before toggling `epic.newEpic` from true to false', () => {
it('should wait 3 seconds before toggling `epic.newEpic` from true to false', async () => {
wrapper.setProps({
epic: {
...wrapper.vm.epic,
......@@ -154,12 +155,11 @@ describe('EpicItemComponent', () => {
wrapper.vm.removeHighlight();
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(delay).toHaveBeenCalledWith(expect.any(Function), 3000);
});
});
});
});
describe('template', () => {
it('renders Epic item container', () => {
......
ee/spec/frontend/roadmap/components/epics_list_section_spec.js
View file @ 24aea042
import { GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import EpicItem from 'ee/roadmap/components/epic_item.vue';
import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
import {
......@@ -130,16 +131,15 @@ describe('EpicsListSectionComponent', () => {
});
describe('epicsWithAssociatedParents', () => {
it('should return epics which contain parent associations', () => {
it('should return epics which contain parent associations', async () => {
wrapper.setProps({
epics: mockEpicsWithParents,
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.epicsWithAssociatedParents).toEqual(mockEpicsWithParents);
});
});
});
describe('displayedEpics', () => {
beforeAll(() => {
......@@ -172,24 +172,23 @@ describe('EpicsListSectionComponent', () => {
expect(wrapper.vm.bufferSize).toBe(16);
});
it('sets value of `offsetLeft` with parentElement.offsetLeft', () => {
return wrapper.vm.$nextTick(() => {
it('sets value of `offsetLeft` with parentElement.offsetLeft', async () => {
await nextTick();
// During tests, there's no `$el.parentElement` present
// hence offsetLeft is 0.
expect(wrapper.vm.offsetLeft).toBe(0);
});
});
it('calls `scrollToCurrentDay` following the component render', async () => {
// Original method implementation waits for render cycle
// to complete at 2 levels before scrolling.
await wrapper.vm.$nextTick(); // set offsetLeft value
await wrapper.vm.$nextTick(); // Wait for nextTick before scroll
await nextTick(); // set offsetLeft value
await nextTick(); // Wait for nextTick before scroll
expect(scrollToCurrentDay).toHaveBeenCalledWith(wrapper.vm.$el);
});
it('sets style object to `emptyRowContainerStyles`', () => {
return wrapper.vm.$nextTick(() => {
it('sets style object to `emptyRowContainerStyles`', async () => {
await nextTick();
expect(wrapper.vm.emptyRowContainerStyles).toEqual(
expect.objectContaining({
height: '0px',
......@@ -197,18 +196,16 @@ describe('EpicsListSectionComponent', () => {
);
});
});
});
describe('getEmptyRowContainerStyles', () => {
it('returns empty object when there are no epics available to render', () => {
it('returns empty object when there are no epics available to render', async () => {
wrapper.setProps({
epics: [],
});
return wrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual({});
});
});
it('returns object containing `height` when there epics available to render', () => {
expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual(
......@@ -276,7 +273,7 @@ describe('EpicsListSectionComponent', () => {
it('renders gl-loading icon when epicsFetchForNextPageInProgress is true', async () => {
wrapper.vm.$store.commit(REQUEST_EPICS_FOR_NEXT_PAGE);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findByTestId('next-page-loading').text()).toContain('Loading epics');
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
......@@ -293,15 +290,14 @@ describe('EpicsListSectionComponent', () => {
});
});
it('expands to show child epics when epic is toggled', () => {
it('expands to show child epics when epic is toggled', async () => {
const epic = mockEpics[0];
expect(store.state.childrenFlags[epic.id].itemExpanded).toBe(false);
wrapper.vm.toggleIsEpicExpanded(epic);
return wrapper.vm.$nextTick().then(() => {
await nextTick();
expect(store.state.childrenFlags[epic.id].itemExpanded).toBe(true);
});
});
});
ee/spec/frontend/roadmap/components/milestones_list_section_spec.js
View file @ 24aea042
import { GlIcon, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import MilestoneTimeline from 'ee/roadmap/components/milestone_timeline.vue';
import milestonesListSectionComponent from 'ee/roadmap/components/milestones_list_section.vue';
import {
......@@ -117,8 +118,8 @@ describe('MilestonesListSectionComponent', () => {
it('calls `scrollToCurrentDay` following the component render', async () => {
// Original method implementation waits for render cycle
// to complete at 2 levels before scrolling.
await wrapper.vm.$nextTick(); // set offsetLeft value
await wrapper.vm.$nextTick(); // Wait for nextTick before scroll
await nextTick(); // set offsetLeft value
await nextTick(); // Wait for nextTick before scroll
expect(scrollToCurrentDay).toHaveBeenCalledWith(wrapper.vm.$el);
});
});
......@@ -194,10 +195,10 @@ describe('MilestonesListSectionComponent', () => {
});
describe('when the milestone list is expanded', () => {
beforeEach(() => {
beforeEach(async () => {
findExpandButtonContainer().find(GlButton).vm.$emit('click');
return wrapper.vm.$nextTick();
await nextTick();
});
it('shows "chevron-right" icon when the milestone toggle button is clicked', () => {
......
ee/spec/frontend/roadmap/components/roadmap_app_spec.js
View file @ 24aea042
import { GlLoadingIcon } from '@gitlab/ui';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
......@@ -131,7 +131,7 @@ describe('RoadmapApp', () => {
epicIid: mockFormattedEpic.iid,
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findComponent(RoadmapFilters).exists()).toBe(false);
});
......
ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
View file @ 24aea042
import { GlSegmentedControl, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
......@@ -113,7 +113,7 @@ describe('RoadmapFilters', () => {
});
wrapper.vm.$store.dispatch('setSortedBy', 'end_date_asc');
await wrapper.vm.$nextTick();
await nextTick();
expect(global.window.location.href).toBe(
`${TEST_HOST}/?state=${EPICS_STATES.CLOSED}&sort=end_date_asc&layout=MONTHS&author_username=root&label_name%5B%5D=Bug&milestone_title=4.0&confidential=true`,
......@@ -136,7 +136,7 @@ describe('RoadmapFilters', () => {
// eslint-disable-next-line no-restricted-syntax
wrapper.setData({ selectedDaterange: DATE_RANGES.THREE_YEARS });
await wrapper.vm.$nextTick();
await nextTick();
wrapper.findComponent(GlSegmentedControl).vm.$emit('input', PRESET_TYPES.OPENED);
......@@ -243,7 +243,7 @@ describe('RoadmapFilters', () => {
'not[myReactionEmoji]': 'thumbs_up',
});
await wrapper.vm.$nextTick();
await nextTick();
expect(filteredSearchBar.props('initialFilterValue')).toEqual(mockInitialFilterValue);
});
......@@ -252,11 +252,11 @@ describe('RoadmapFilters', () => {
jest.spyOn(wrapper.vm, 'setFilterParams');
jest.spyOn(wrapper.vm, 'fetchEpics');
await wrapper.vm.$nextTick();
await nextTick();
filteredSearchBar.vm.$emit('onFilter', mockInitialFilterValue);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.setFilterParams).toHaveBeenCalledWith({
authorUsername: 'root',
......@@ -274,11 +274,11 @@ describe('RoadmapFilters', () => {
jest.spyOn(wrapper.vm, 'setSortedBy');
jest.spyOn(wrapper.vm, 'fetchEpics');
await wrapper.vm.$nextTick();
await nextTick();
filteredSearchBar.vm.$emit('onSort', 'end_date_asc');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.setSortedBy).toHaveBeenCalledWith('end_date_asc');
expect(wrapper.vm.fetchEpics).toHaveBeenCalled();
......@@ -290,7 +290,7 @@ describe('RoadmapFilters', () => {
filteredSearchBar.vm.$emit('onFilter', [], false);
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.setFilterParams).not.toHaveBeenCalled();
expect(wrapper.vm.fetchEpics).not.toHaveBeenCalled();
......@@ -340,7 +340,7 @@ describe('RoadmapFilters', () => {
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
});
await wrapperWithDaterangeFilter.vm.$nextTick();
await nextTick();
});
afterEach(() => {
......@@ -351,7 +351,7 @@ describe('RoadmapFilters', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapperWithDaterangeFilter.setData({ selectedDaterange: DATE_RANGES.CURRENT_QUARTER });
await wrapperWithDaterangeFilter.vm.$nextTick();
await nextTick();
const daterangeDropdown = wrapperWithDaterangeFilter.findByTestId('daterange-dropdown');
......@@ -374,7 +374,7 @@ describe('RoadmapFilters', () => {
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapperWithDaterangeFilter.setData({ selectedDaterange });
await wrapperWithDaterangeFilter.vm.$nextTick();
await nextTick();
const layoutSwitches = wrapperWithDaterangeFilter.findComponent(GlSegmentedControl);
......
ee/spec/frontend/roadmap/components/roadmap_shell_spec.js
View file @ 24aea042
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
......@@ -97,7 +97,7 @@ describe('RoadmapShell', () => {
it('emits `epicsListScrolled` event via eventHub', async () => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
await wrapper.vm.$nextTick();
await nextTick();
wrapper.vm.handleScroll();
expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', expect.any(Object));
......
ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_form_spec.js
View file @ 24aea042
import { mount } from '@vue/test-utils';
import { merge } from 'lodash';
import { nextTick } from 'vue';
import ConfigurationForm from 'ee/security_configuration/api_fuzzing/components/configuration_form.vue';
import { SCAN_MODES } from 'ee/security_configuration/api_fuzzing/constants';
import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
......@@ -111,7 +112,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
it('the specificationfile input becomes visible and has the correct labels', async () => {
const selectedScanMode = SCAN_MODES[scanMode];
findScanModeInput().vm.$emit('input', scanMode);
await wrapper.vm.$nextTick();
await nextTick();
const specificationFileInput = findSpecificationFileInput();
expect(specificationFileInput.exists()).toBe(true);
......@@ -181,7 +182,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
it('when a scan profile is selected, its YAML is visible', async () => {
const [selectedScanProfile] = apiFuzzingCiConfiguration.scanProfiles;
findScanProfileDropdownInput().vm.$emit('input', selectedScanProfile.name);
await wrapper.vm.$nextTick();
await nextTick();
expect(findScanProfileYamlViewer().exists()).toBe(true);
expect(findScanProfileYamlViewer().text()).toBe(selectedScanProfile.yaml.trim());
......@@ -227,7 +228,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
jest.spyOn(wrapper.vm.$refs[CONFIGURATION_SNIPPET_MODAL_ID], 'show');
await setFormData();
wrapper.find('form').trigger('submit');
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.vm.$refs[CONFIGURATION_SNIPPET_MODAL_ID].show).toHaveBeenCalled();
expect(findConfigurationSnippetModal().props()).toEqual({
......
ee/spec/frontend/security_configuration/components/expandable_section_spec.js
View file @ 24aea042
import { mount, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import ExpandableSection from 'ee/security_configuration/components/expandable_section.vue';
import { stubTransition } from 'helpers/stub_transition';
import waitForPromises from 'helpers/wait_for_promises';
......@@ -82,7 +83,7 @@ describe('ExpandableSection component', () => {
});
it('hides the content by default', async () => {
await wrapper.vm.$nextTick();
await nextTick();
expect(findContent().isVisible()).toBe(false);
});
......@@ -95,7 +96,7 @@ describe('ExpandableSection component', () => {
await waitForPromises();
const button = findButton();
button.trigger('click');
return wrapper.vm.$nextTick();
await nextTick();
});
it('shows the content', () => {
......
ee/spec/frontend/security_configuration/components/form_input_spec.js
View file @ 24aea042
import { GlFormInput, GlLink } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { SCHEMA_TO_PROP_SIZE_MAP } from 'ee/security_configuration/components/constants';
import FormInput from 'ee/security_configuration/components/form_input.vue';
......@@ -114,9 +115,9 @@ describe('FormInput component', () => {
});
describe('disabling the input', () => {
beforeEach(() => {
beforeEach(async () => {
wrapper.setProps({ disabled: true });
return wrapper.vm.$nextTick();
await nextTick();
});
it('does not display the custom value message', () => {
......
ee/spec/frontend/security_configuration/corpus_management/corpus_table_spec.js
View file @ 24aea042
import { mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import Actions from 'ee/security_configuration/corpus_management/components/columns/actions.vue';
import CorpusTable from 'ee/security_configuration/corpus_management/components/corpus_table.vue';
import { corpuses } from './mock_data';
......@@ -58,7 +59,7 @@ describe('Corpus table', () => {
describe('with no corpuses', () => {
it('renders the empty state', async () => {
wrapper.setProps({ corpuses: [] });
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.text()).toContain('Currently, there are no uploaded or generated corpuses');
});
});
......
ee/spec/frontend/security_configuration/dast_profiles/components/base_dast_profile_form_spec.js
View file @ 24aea042
import { GlAlert, GlForm, GlModal } from '@gitlab/ui';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import merge from 'lodash/merge';
import VueApollo from 'vue-apollo';
import BaseDastProfileForm from 'ee/security_configuration/dast_profiles/components/base_dast_profile_form.vue';
......@@ -169,7 +169,7 @@ describe('BaseDastProfileForm', () => {
expectSubmitNotLoading();
submitForm();
await wrapper.vm.$nextTick();
await nextTick();
expect(findSubmitButton().props('loading')).toBe(true);
});
......
ee/spec/frontend/security_configuration/dast_profiles/components/dast_failed_site_validations_spec.js
View file @ 24aea042
import { GlAlert } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vue, { nextTick } from 'vue';
import { merge } from 'lodash';
import VueApollo from 'vue-apollo';
import DastFailedSiteValidations from 'ee/security_configuration/dast_profiles/components/dast_failed_site_validations.vue';
......@@ -108,7 +108,7 @@ describe('EE - DastFailedSiteValidations', () => {
expect(findValidationModal().exists()).toBe(false);
findFirstRetryButton().click();
await wrapper.vm.$nextTick();
await nextTick();
const modal = findValidationModal();
expect(modal.exists()).toBe(true);
......@@ -117,20 +117,20 @@ describe('EE - DastFailedSiteValidations', () => {
it('destroys the modal after it has been hidden', async () => {
findFirstRetryButton().click();
await wrapper.vm.$nextTick();
await nextTick();
const modal = findValidationModal();
expect(modal.exists()).toBe(true);
modal.vm.$emit('hidden');
await wrapper.vm.$nextTick();
await nextTick();
expect(modal.exists()).toBe(false);
});
it('triggers the dastSiteValidationRevoke GraphQL mutation', async () => {
findFirstDismissButton().click();
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.findAllComponents(GlAlert)).toHaveLength(1);
expect(requestHandlers.dastSiteValidationRevoke).toHaveBeenCalledWith({
......
ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_list_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlModal } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, shallowMount, createWrapper } from '@vue/test-utils';
import { merge } from 'lodash';
import { nextTick } from 'vue';
import DastProfilesList from 'ee/security_configuration/dast_profiles/components/dast_profiles_list.vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { siteProfiles as profiles, policySiteProfiles } from '../mocks/mock_data';
......@@ -204,7 +205,7 @@ describe('EE - DastProfilesList', () => {
getCurrentProfileDeleteButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
expect(
within(getModal().element).getByText(/are you sure you want to delete this profile/i),
......@@ -216,7 +217,7 @@ describe('EE - DastProfilesList', () => {
getCurrentProfileDeleteButton().trigger('click');
await wrapper.vm.$nextTick();
await nextTick();
getModal().vm.$emit('ok');
......
ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlDropdown, GlTabs } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, shallowMount } from '@vue/test-utils';
import { merge } from 'lodash';
import { nextTick } from 'vue';
import DastFailedSiteValidations from 'ee/security_configuration/dast_profiles/components/dast_failed_site_validations.vue';
import DastProfiles from 'ee/security_configuration/dast_profiles/components/dast_profiles.vue';
import setWindowLocation from 'helpers/set_window_location_helper';
......@@ -188,7 +189,7 @@ describe('EE - DastProfiles', () => {
wrapper.setData({
profileTypes: { [profileType]: givenData },
});
await wrapper.vm.$nextTick();
await nextTick();
expect(getProfilesComponent(profileType)[propGetter](key)).toEqual(expectedValue);
},
......
ee/spec/frontend/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_auth_section_spec.js
View file @ 24aea042
import { GlFormCheckbox } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DastSiteAuthSection from 'ee/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_auth_section.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -30,9 +31,9 @@ describe('DastSiteAuthSection', () => {
const findAuthForm = () => wrapper.findByTestId('auth-form');
const findAuthCheckbox = () => wrapper.findComponent(GlFormCheckbox);
const setAuthentication = ({ enabled }) => {
const setAuthentication = async ({ enabled }) => {
findAuthCheckbox().vm.$emit('input', enabled);
return wrapper.vm.$nextTick();
await nextTick();
};
const getLatestInputEventPayload = () => {
const latestInputEvent = [...wrapper.emitted('input')].pop();
......@@ -118,7 +119,7 @@ describe('DastSiteAuthSection', () => {
input.setValue(inputFieldValue);
input.trigger('blur');
});
await wrapper.vm.$nextTick();
await nextTick();
expect(getLatestInputEventPayload().state).toBe(true);
});
});
......
ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js
View file @ 24aea042
......@@ -2,6 +2,7 @@ import { GlLink } from '@gitlab/ui';
import * as Sentry from '@sentry/browser';
import { shallowMount } from '@vue/test-utils';
import { merge } from 'lodash';
import { nextTick } from 'vue';
import DynamicFields from 'ee/security_configuration/components/dynamic_fields.vue';
import ExpandableSection from 'ee/security_configuration/components/expandable_section.vue';
import AnalyzerConfiguration from 'ee/security_configuration/sast/components/analyzer_configuration.vue';
......@@ -233,9 +234,9 @@ describe('ConfigurationForm component', () => {
});
describe('when alert-tip is dismissed', () => {
beforeEach(() => {
beforeEach(async () => {
findAnalyzersSectionTip().vm.$emit('dismiss');
return wrapper.vm.$nextTick();
await nextTick();
});
it('should not be displayed', () => {
......
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