Do not mount full component in epic tabs specs

This rewrites some test cases in epic tabs specs to only rely on a
shallow mounted component. This should speed up the test run and prevent
some intermittent CI failures we've been seeing over the last 2 weeks.
parent 0b2afcd3
import { GlTab } from '@gitlab/ui'; import { GlTab } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import EpicTabs from 'ee/epic/components/epic_tabs.vue'; import EpicTabs from 'ee/epic/components/epic_tabs.vue';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
...@@ -13,8 +12,8 @@ const containerClass = 'container-limited'; ...@@ -13,8 +12,8 @@ const containerClass = 'container-limited';
describe('EpicTabs', () => { describe('EpicTabs', () => {
let wrapper; let wrapper;
const createComponent = ({ provide = {}, mountType = shallowMountExtended } = {}) => { const createComponent = ({ provide = {} } = {}) => {
return mountType(EpicTabs, { return shallowMountExtended(EpicTabs, {
provide: { provide: {
treeElementSelector: `#${treeTabpaneID}`, treeElementSelector: `#${treeTabpaneID}`,
roadmapElementSelector: `#${roadmapTabpaneID}`, roadmapElementSelector: `#${roadmapTabpaneID}`,
...@@ -98,13 +97,13 @@ describe('EpicTabs', () => { ...@@ -98,13 +97,13 @@ describe('EpicTabs', () => {
]; ];
describe.each` describe.each`
targetTab | tabSelector | fixture | examples targetTab | tabTestId | fixture | examples
${treeTabpaneID} | ${'.js-epic-tree-tab'} | ${treeTabFixture} | ${treeExamples} ${treeTabpaneID} | ${'epic-tree-tab'} | ${treeTabFixture} | ${treeExamples}
${roadmapTabpaneID} | ${'.js-epic-roadmap-tab'} | ${roadmapFixture} | ${roadmapExamples} ${roadmapTabpaneID} | ${'epic-roadmap-tab'} | ${roadmapFixture} | ${roadmapExamples}
`('on $targetTab tab click', ({ tabSelector, fixture, examples }) => { `('on $targetTab tab click', ({ tabTestId, fixture, examples }) => {
beforeEach(() => { beforeEach(() => {
setFixtures(fixture); setFixtures(fixture);
wrapper = createComponent({ provide: { allowSubEpics: true }, mountType: mount }); wrapper = createComponent({ provide: { allowSubEpics: true } });
}); });
it.each(examples)('%s', async (description, tabPaneSelector, hasClassName, className) => { it.each(examples)('%s', async (description, tabPaneSelector, hasClassName, className) => {
...@@ -112,7 +111,7 @@ describe('EpicTabs', () => { ...@@ -112,7 +111,7 @@ describe('EpicTabs', () => {
expect(element.classList.contains(className)).toBe(hasClassName); expect(element.classList.contains(className)).toBe(hasClassName);
wrapper.find(tabSelector).trigger('click'); wrapper.findByTestId(tabTestId).vm.$emit('click');
await waitForPromises(); await waitForPromises();
......
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