136 lines
3.9 KiB
JavaScript
136 lines
3.9 KiB
JavaScript
import { GlAlert, GlTabs } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import { nextTick } from 'vue';
|
|
import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
|
|
|
|
const mockContent1 = 'MOCK CONTENT 1';
|
|
const mockContent2 = 'MOCK CONTENT 2';
|
|
|
|
const MockEditorLite = {
|
|
template: '<div>EDITOR</div>',
|
|
};
|
|
|
|
describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
|
|
let wrapper;
|
|
let mockChildMounted = jest.fn();
|
|
|
|
const MockChild = {
|
|
props: ['content'],
|
|
template: '<div>{{content}}</div>',
|
|
mounted() {
|
|
mockChildMounted(this.content);
|
|
},
|
|
};
|
|
|
|
const MockTabbedContent = {
|
|
components: {
|
|
EditorTab,
|
|
GlTabs,
|
|
MockChild,
|
|
},
|
|
template: `
|
|
<gl-tabs>
|
|
<editor-tab :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
|
|
<mock-child content="${mockContent1}"/>
|
|
</editor-tab>
|
|
<editor-tab :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true">
|
|
<mock-child content="${mockContent2}"/>
|
|
</editor-tab>
|
|
</gl-tabs>
|
|
`,
|
|
};
|
|
|
|
const createMockedWrapper = () => {
|
|
wrapper = mount(MockTabbedContent);
|
|
};
|
|
|
|
const createWrapper = ({ props } = {}) => {
|
|
wrapper = mount(EditorTab, {
|
|
propsData: props,
|
|
slots: {
|
|
default: MockEditorLite,
|
|
},
|
|
});
|
|
};
|
|
|
|
const findSlotComponent = () => wrapper.findComponent(MockEditorLite);
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
|
|
|
beforeEach(() => {
|
|
mockChildMounted = jest.fn();
|
|
});
|
|
|
|
it('tabs are mounted lazily', async () => {
|
|
createMockedWrapper();
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(0);
|
|
});
|
|
|
|
it('first tab is only mounted after nextTick', async () => {
|
|
createMockedWrapper();
|
|
|
|
await nextTick();
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(1);
|
|
expect(mockChildMounted).toHaveBeenCalledWith(mockContent1);
|
|
});
|
|
|
|
describe('showing the tab content depending on `isEmpty` and `isInvalid`', () => {
|
|
it.each`
|
|
isEmpty | isInvalid | showSlotComponent | text
|
|
${undefined} | ${undefined} | ${true} | ${'renders'}
|
|
${false} | ${false} | ${true} | ${'renders'}
|
|
${undefined} | ${true} | ${false} | ${'hides'}
|
|
${true} | ${false} | ${false} | ${'hides'}
|
|
${false} | ${true} | ${false} | ${'hides'}
|
|
`(
|
|
'$text the slot component when isEmpty:$isEmpty and isInvalid:$isInvalid',
|
|
({ isEmpty, isInvalid, showSlotComponent }) => {
|
|
createWrapper({
|
|
props: { isEmpty, isInvalid },
|
|
});
|
|
expect(findSlotComponent().exists()).toBe(showSlotComponent);
|
|
expect(findAlert().exists()).toBe(!showSlotComponent);
|
|
},
|
|
);
|
|
|
|
it('can have a custom empty message', () => {
|
|
const text = 'my custom alert message';
|
|
createWrapper({ props: { isEmpty: true, emptyMessage: text } });
|
|
|
|
const alert = findAlert();
|
|
|
|
expect(alert.exists()).toBe(true);
|
|
expect(alert.text()).toBe(text);
|
|
});
|
|
});
|
|
|
|
describe('user interaction', () => {
|
|
const clickTab = async (testid) => {
|
|
wrapper.find(`[data-testid="${testid}"]`).trigger('click');
|
|
await nextTick();
|
|
};
|
|
|
|
beforeEach(() => {
|
|
createMockedWrapper();
|
|
});
|
|
|
|
it('mounts a tab once after selecting it', async () => {
|
|
await clickTab('tab2-btn');
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(2);
|
|
expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
|
|
expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
|
|
});
|
|
|
|
it('mounts each tab once after selecting each', async () => {
|
|
await clickTab('tab2-btn');
|
|
await clickTab('tab1-btn');
|
|
await clickTab('tab2-btn');
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(2);
|
|
expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
|
|
expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
|
|
});
|
|
});
|
|
});
|