diff --git a/ee/spec/frontend/packages/list/components/__snapshots__/packages_list_spec.js.snap b/ee/spec/frontend/packages/list/components/__snapshots__/packages_list_spec.js.snap
deleted file mode 100644
index b7d5fb6883d82c80803ec310d7636cdc76a27d05..0000000000000000000000000000000000000000
--- a/ee/spec/frontend/packages/list/components/__snapshots__/packages_list_spec.js.snap
+++ /dev/null
@@ -1,304 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`packages_list renders 1`] = `
-<div
- class="d-flex flex-column align-items-end"
->
- <glsorting-stub
- class="my-3"
- isascending="true"
- sortdirectiontooltip="Sort direction"
- text="Name"
- >
- <div>
-
- Name
-
- </div>
- <div>
-
- Version
-
- </div>
- <div>
-
- Type
-
- </div>
- <div>
-
- Created
-
- </div>
- </glsorting-stub>
-
- <table
- aria-busy="false"
- aria-colcount="5"
- aria-describedby="__BVID__9__caption_"
- class="table b-table gl-table b-table-stacked-md"
- id="__BVID__9"
- role="table"
- >
- <!---->
- <!---->
- <thead
- class=""
- role="rowgroup"
- >
- <!---->
- <tr
- role="row"
- >
- <th
- aria-colindex="1"
- class="text-left"
- role="columnheader"
- scope="col"
- >
- Name
- </th>
- <th
- aria-colindex="2"
- class="text-center"
- role="columnheader"
- scope="col"
- >
- Version
- </th>
- <th
- aria-colindex="3"
- class="text-center"
- role="columnheader"
- scope="col"
- >
- Type
- </th>
- <th
- aria-colindex="4"
- class="text-center"
- role="columnheader"
- scope="col"
- >
- Created
- </th>
- <th
- aria-colindex="5"
- aria-label="Actions"
- class=""
- role="columnheader"
- scope="col"
- >
-
- </th>
- </tr>
- </thead>
- <!---->
- <tbody
- class=""
- role="rowgroup"
- >
- <!---->
- <tr
- class=""
- role="row"
- >
- <td
- aria-colindex="1"
- class="text-left"
- data-label="Name"
- role="cell"
- >
- <div>
- <div
- class="flex-truncate-parent"
- >
- <a
- class="flex-truncate-child"
- data-qa-selector="package_link"
- href="#"
- >
-
- Test package
-
- </a>
- </div>
- </div>
- </td>
- <td
- aria-colindex="2"
- class="text-center"
- data-label="Version"
- role="cell"
- >
- <div>
-
- 1.0.0
-
- </div>
- </td>
- <td
- aria-colindex="3"
- class="text-center"
- data-label="Type"
- role="cell"
- >
- <div>
-
- maven
-
- </div>
- </td>
- <td
- aria-colindex="4"
- class="text-center"
- data-label="Created"
- role="cell"
- >
- <div>
- <timeagotooltip-stub
- cssclass=""
- time=""
- tooltipplacement="top"
- />
- </div>
- </td>
- <td
- aria-colindex="5"
- class="text-right"
- data-label=""
- role="cell"
- >
- <div>
- <glbutton-stub
- aria-label="Remove package"
- title="Remove package"
- variant="danger"
- >
- <icon-stub
- name="remove"
- size="16"
- />
- </glbutton-stub>
- </div>
- </td>
- </tr>
- <tr
- class=""
- role="row"
- >
- <td
- aria-colindex="1"
- class="text-left"
- data-label="Name"
- role="cell"
- >
- <div>
- <div
- class="flex-truncate-parent"
- >
- <a
- class="flex-truncate-child"
- data-qa-selector="package_link"
- href="#"
- >
-
- @Test/package
-
- </a>
- </div>
- </div>
- </td>
- <td
- aria-colindex="2"
- class="text-center"
- data-label="Version"
- role="cell"
- >
- <div>
-
-
-
- </div>
- </td>
- <td
- aria-colindex="3"
- class="text-center"
- data-label="Type"
- role="cell"
- >
- <div>
-
- npm
-
- </div>
- </td>
- <td
- aria-colindex="4"
- class="text-center"
- data-label="Created"
- role="cell"
- >
- <div>
- <timeagotooltip-stub
- cssclass=""
- time=""
- tooltipplacement="top"
- />
- </div>
- </td>
- <td
- aria-colindex="5"
- class="text-right"
- data-label=""
- role="cell"
- >
- <div>
- <glbutton-stub
- aria-label="Remove package"
- title="Remove package"
- variant="danger"
- >
- <icon-stub
- name="remove"
- size="16"
- />
- </glbutton-stub>
- </div>
- </td>
- </tr>
- <!---->
- <!---->
- </tbody>
- </table>
-
- <glpagination-stub
- align="center"
- class="w-100"
- ellipsistext="…"
- labelfirstpage="Go to first page"
- labellastpage="Go to last page"
- labelnextpage="Go to next page"
- labelpage="function _default(page) {
- return \\"Go to page \\".concat(page);
- }"
- labelprevpage="Go to previous page"
- limits="[object Object]"
- nexttext="Next ›"
- perpage="1"
- prevtext="‹ Prev"
- totalitems="1"
- value="1"
- />
-
- <glmodal-stub
- modalclass=""
- modalid="confirm-delete-pacakge"
- ok-variant="danger"
- titletag="h4"
- >
-
- <p />
- </glmodal-stub>
-</div>
-`;
diff --git a/ee/spec/frontend/packages/list/components/packages_list_spec.js b/ee/spec/frontend/packages/list/components/packages_list_spec.js
index 4d06f8f34aba8b1ae82c626ba67d4dfd130dc745..6e4b3de6e65f61cbc791592c726a94803716b7f5 100644
--- a/ee/spec/frontend/packages/list/components/packages_list_spec.js
+++ b/ee/spec/frontend/packages/list/components/packages_list_spec.js
@@ -1,8 +1,8 @@
import Vue from 'vue';
import _ from 'underscore';
-import { shallowMount } from '@vue/test-utils';
-import { GlTable } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
import PackagesList from 'ee/packages/list/components/packages_list.vue';
+import stubChildren from 'helpers/stub_children';
import { packageList } from '../../mock_data';
describe('packages_list', () => {
@@ -16,9 +16,10 @@ describe('packages_list', () => {
const findSortingItems = () => wrapper.findAll({ name: 'sorting-item-stub' });
const findFirstProjectColumn = () => wrapper.find({ ref: 'col-project' });
- const defaultShallowMountOptions = {
+ const mountOptions = {
stubs: {
- GlTable,
+ ...stubChildren(PackagesList),
+ GlTable: false,
GlSortingItem: { name: 'sorting-item-stub', template: '<div><slot></slot></div>' },
},
computed: {
@@ -35,7 +36,7 @@ describe('packages_list', () => {
// This is needed due to console.error called by vue to emit a warning that stop the tests
// see https://github.com/vuejs/vue-test-utils/issues/532
Vue.config.silent = true;
- wrapper = shallowMount(PackagesList, defaultShallowMountOptions);
+ wrapper = mount(PackagesList, mountOptions);
});
afterEach(() => {
@@ -43,16 +44,12 @@ describe('packages_list', () => {
wrapper.destroy();
});
- it('renders', () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
describe('when is isGroupPage', () => {
beforeEach(() => {
- wrapper = shallowMount(PackagesList, {
- ...defaultShallowMountOptions,
+ wrapper = mount(PackagesList, {
+ ...mountOptions,
computed: {
- ...defaultShallowMountOptions.computed,
+ ...mountOptions.computed,
canDestroyPackage: () => false,
isGroupPage: () => true,
},
@@ -86,9 +83,9 @@ describe('packages_list', () => {
describe('when user can not destroy the package', () => {
beforeEach(() => {
- wrapper = shallowMount(PackagesList, {
- ...defaultShallowMountOptions,
- computed: { ...defaultShallowMountOptions.computed, canDestroyPackage: () => false },
+ wrapper = mount(PackagesList, {
+ ...mountOptions,
+ computed: { ...mountOptions.computed, canDestroyPackage: () => false },
});
});
@@ -148,8 +145,8 @@ describe('packages_list', () => {
const findEmptySlot = () => wrapper.find({ name: 'empty-slot-stub' });
beforeEach(() => {
- wrapper = shallowMount(PackagesList, {
- ...defaultShallowMountOptions,
+ wrapper = mount(PackagesList, {
+ ...mountOptions,
computed: { list: () => [] },
slots: {
'empty-state': { name: 'empty-slot-stub', template: '<div>bar</div>' },
diff --git a/ee/spec/frontend/security_dashboard/components/vulnerability_chart_spec.js b/ee/spec/frontend/security_dashboard/components/vulnerability_chart_spec.js
index fb59aca9b4f7b5629a868275ece731b8d4de3484..4f2a41f5734db7f68853cf17ce5c826625524c89 100644
--- a/ee/spec/frontend/security_dashboard/components/vulnerability_chart_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/vulnerability_chart_spec.js
@@ -1,9 +1,9 @@
import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, createLocalVue } from '@vue/test-utils';
-import { GlTable } from '@gitlab/ui';
import { GlSparklineChart } from '@gitlab/ui/dist/charts';
+import stubChildren from 'helpers/stub_children';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import Chart from 'ee/security_dashboard/components/vulnerability_chart.vue';
import ChartButtons from 'ee/security_dashboard/components/vulnerability_chart_buttons.vue';
@@ -27,7 +27,7 @@ describe('Vulnerability Chart component', () => {
const findCurrentVulnerabilitiesCount = () =>
wrapper.find({ ref: 'currentVulnerabilitiesCount' });
- const factory = ({ vulnerabilitiesCount = [] } = {}) => {
+ const factory = ({ vulnerabilitiesCount = [], stubs = {} } = {}) => {
actions = {
setVulnerabilitiesHistoryDayRange: jest.fn(),
};
@@ -55,10 +55,13 @@ describe('Vulnerability Chart component', () => {
},
});
- wrapper = shallowMount(Chart, {
+ wrapper = mount(Chart, {
localVue,
store,
- stubs: { GlTable },
+ stubs: {
+ ...stubChildren(Chart),
+ ...stubs,
+ },
sync: false,
});
};
@@ -112,7 +115,9 @@ describe('Vulnerability Chart component', () => {
describe.each(['Critical', 'Medium', 'High', 'Low'])(
'for the given severity level "%s"',
severityLevel => {
- beforeEach(factory);
+ beforeEach(() => {
+ factory({ stubs: { GlTable: false } });
+ });
it('shows a severity badge', () => {
expect(findSeverityBadgeForLevel(severityLevel).exists()).toBe(true);
@@ -135,6 +140,9 @@ describe('Vulnerability Chart component', () => {
({ countPast, countCurrent, expectedOutput }) => {
factory({
vulnerabilitiesCount: [countPast, countCurrent],
+ stubs: {
+ GlTable: false,
+ },
});
expect(findChangeInPercent().text()).toBe(expectedOutput);
@@ -145,7 +153,7 @@ describe('Vulnerability Chart component', () => {
vulnerabilitiesCount | expectedOutput
${[1, 2, 3]} | ${'3'}
`('shows the current vulnerabilities count', ({ vulnerabilitiesCount, expectedOutput }) => {
- factory({ vulnerabilitiesCount });
+ factory({ vulnerabilitiesCount, stubs: { GlTable: false } });
expect(findCurrentVulnerabilitiesCount().text()).toBe(expectedOutput);
});
});
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index f00ba884a6cf1015f4bb0e74536cdea00741f268..66104724163492f612faf5d4edb7b7c6ef67b1ae 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -1,15 +1,7 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
-import {
- GlEmptyState,
- GlLoadingIcon,
- GlTable,
- GlLink,
- GlFormInput,
- GlDropdown,
- GlDropdownItem,
- GlPagination,
-} from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination } from '@gitlab/ui';
+import stubChildren from 'helpers/stub_children';
import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
import errorsList from './list_mock.json';
@@ -32,19 +24,12 @@ describe('ErrorTrackingList', () => {
function mountComponent({
errorTrackingEnabled = true,
userCanEnableErrorTracking = true,
- sync = true,
- stubs = {
- 'gl-link': GlLink,
- 'gl-table': GlTable,
- 'gl-pagination': GlPagination,
- 'gl-dropdown': GlDropdown,
- 'gl-dropdown-item': GlDropdownItem,
- },
+ stubs = {},
} = {}) {
- wrapper = shallowMount(ErrorTrackingList, {
+ wrapper = mount(ErrorTrackingList, {
localVue,
store,
- sync,
+ sync: false,
propsData: {
indexPath: '/path',
enableErrorTrackingLink: '/link',
@@ -52,7 +37,10 @@ describe('ErrorTrackingList', () => {
errorTrackingEnabled,
illustrationPath: 'illustration/path',
},
- stubs,
+ stubs: {
+ ...stubChildren(ErrorTrackingList),
+ ...stubs,
+ },
data() {
return { errorSearchQuery: 'search' };
},
@@ -122,7 +110,14 @@ describe('ErrorTrackingList', () => {
beforeEach(() => {
store.state.list.loading = false;
store.state.list.errors = errorsList;
- mountComponent();
+ mountComponent({
+ stubs: {
+ GlTable: false,
+ GlDropdown: false,
+ GlDropdownItem: false,
+ GlLink: false,
+ },
+ });
});
it('shows table', () => {
@@ -173,7 +168,13 @@ describe('ErrorTrackingList', () => {
store.state.list.loading = false;
store.state.list.errors = [];
- mountComponent();
+ mountComponent({
+ stubs: {
+ GlTable: false,
+ GlDropdown: false,
+ GlDropdownItem: false,
+ },
+ });
});
it('shows empty table', () => {
@@ -187,7 +188,7 @@ describe('ErrorTrackingList', () => {
});
it('restarts polling', () => {
- findRefreshLink().trigger('click');
+ findRefreshLink().vm.$emit('click');
expect(actions.restartPolling).toHaveBeenCalled();
});
});
@@ -211,8 +212,8 @@ describe('ErrorTrackingList', () => {
errorTrackingEnabled: false,
userCanEnableErrorTracking: false,
stubs: {
- 'gl-link': GlLink,
- 'gl-empty-state': GlEmptyState,
+ GlLink: false,
+ GlEmptyState: false,
},
});
});
@@ -226,7 +227,12 @@ describe('ErrorTrackingList', () => {
describe('recent searches', () => {
beforeEach(() => {
- mountComponent();
+ mountComponent({
+ stubs: {
+ GlDropdown: false,
+ GlDropdownItem: false,
+ },
+ });
});
it('shows empty message', () => {
@@ -238,11 +244,12 @@ describe('ErrorTrackingList', () => {
it('shows items', () => {
store.state.list.recentSearches = ['great', 'search'];
- const dropdownItems = wrapper.findAll('.filtered-search-box li');
-
- expect(dropdownItems.length).toBe(3);
- expect(dropdownItems.at(0).text()).toBe('great');
- expect(dropdownItems.at(1).text()).toBe('search');
+ return wrapper.vm.$nextTick().then(() => {
+ const dropdownItems = wrapper.findAll('.filtered-search-box li');
+ expect(dropdownItems.length).toBe(3);
+ expect(dropdownItems.at(0).text()).toBe('great');
+ expect(dropdownItems.at(1).text()).toBe('search');
+ });
});
describe('clear', () => {
@@ -257,16 +264,20 @@ describe('ErrorTrackingList', () => {
it('is visible when list has items', () => {
store.state.list.recentSearches = ['some', 'searches'];
- expect(clearRecentButton().exists()).toBe(true);
- expect(clearRecentButton().text()).toBe('Clear recent searches');
+ return wrapper.vm.$nextTick().then(() => {
+ expect(clearRecentButton().exists()).toBe(true);
+ expect(clearRecentButton().text()).toBe('Clear recent searches');
+ });
});
it('clears items on click', () => {
store.state.list.recentSearches = ['some', 'searches'];
- clearRecentButton().vm.$emit('click');
+ return wrapper.vm.$nextTick().then(() => {
+ clearRecentButton().vm.$emit('click');
- expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
+ expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
+ });
});
});
});
@@ -287,7 +298,11 @@ describe('ErrorTrackingList', () => {
describe('and the user is on the first page', () => {
beforeEach(() => {
store.state.list.loading = false;
- mountComponent({ sync: false });
+ mountComponent({
+ stubs: {
+ GlPagination: false,
+ },
+ });
});
it('shows a disabled Prev button', () => {
@@ -299,8 +314,14 @@ describe('ErrorTrackingList', () => {
describe('and the previous button is clicked', () => {
beforeEach(() => {
store.state.list.loading = false;
- mountComponent({ sync: false });
+ mountComponent({
+ stubs: {
+ GlTable: false,
+ GlPagination: false,
+ },
+ });
wrapper.setData({ pageValue: 2 });
+ return wrapper.vm.$nextTick();
});
it('fetches the previous page of results', () => {
@@ -318,7 +339,7 @@ describe('ErrorTrackingList', () => {
describe('and the next page button is clicked', () => {
beforeEach(() => {
store.state.list.loading = false;
- mountComponent({ sync: false });
+ mountComponent();
});
it('fetches the next page of results', () => {
diff --git a/spec/frontend/helpers/stub_children.js b/spec/frontend/helpers/stub_children.js
new file mode 100644
index 0000000000000000000000000000000000000000..91171eb3d8c63817cc3490d8b6adbb53413151be
--- /dev/null
+++ b/spec/frontend/helpers/stub_children.js
@@ -0,0 +1,3 @@
+export default function stubChildren(Component) {
+ return Object.fromEntries(Object.keys(Component.components).map(c => [c, true]));
+}
diff --git a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
index c88a182660d784ce23ec39ac630bb1735587cee1..f1b4c3705329de17832244b876bdfe1ae4a65b51 100644
--- a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
+++ b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
import UserModalManager from '~/pages/admin/users/components/user_modal_manager.vue';
import ModalStub from './stubs/modal_stub';
@@ -22,17 +22,13 @@ describe('Users admin page Modal Manager', () => {
let wrapper;
const createComponent = (props = {}) => {
- wrapper = shallowMount(UserModalManager, {
+ wrapper = mount(UserModalManager, {
propsData: {
actionModals,
modalConfiguration,
csrfToken: 'dummyCSRF',
...props,
},
- stubs: {
- dummyComponent1: true,
- dummyComponent2: true,
- },
sync: false,
});
};