2022-08-13 15:12:31 +05:30
|
|
|
import { GlAlert, GlBadge, GlTabs } from '@gitlab/ui';
|
2021-03-11 19:13:27 +05:30
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import { nextTick } from 'vue';
|
2021-03-08 18:12:59 +05:30
|
|
|
import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
|
|
|
|
|
|
|
|
const mockContent1 = 'MOCK CONTENT 1';
|
|
|
|
const mockContent2 = 'MOCK CONTENT 2';
|
|
|
|
|
2021-09-30 23:02:18 +05:30
|
|
|
const MockSourceEditor = {
|
2021-04-29 21:17:54 +05:30
|
|
|
template: '<div>EDITOR</div>',
|
|
|
|
};
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
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>
|
2022-08-13 15:12:31 +05:30
|
|
|
<editor-tab title="Tab 1" :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
|
2021-03-08 18:12:59 +05:30
|
|
|
<mock-child content="${mockContent1}"/>
|
|
|
|
</editor-tab>
|
2022-08-13 15:12:31 +05:30
|
|
|
<editor-tab title="Tab 2" :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true" badge-title="NEW">
|
2021-03-08 18:12:59 +05:30
|
|
|
<mock-child content="${mockContent2}"/>
|
|
|
|
</editor-tab>
|
|
|
|
</gl-tabs>
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
const createMockedWrapper = () => {
|
2021-03-08 18:12:59 +05:30
|
|
|
wrapper = mount(MockTabbedContent);
|
|
|
|
};
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
const createWrapper = ({ props } = {}) => {
|
|
|
|
wrapper = mount(EditorTab, {
|
2022-08-13 15:12:31 +05:30
|
|
|
propsData: {
|
|
|
|
title: 'Tab 1',
|
|
|
|
...props,
|
|
|
|
},
|
2021-04-29 21:17:54 +05:30
|
|
|
slots: {
|
2021-09-30 23:02:18 +05:30
|
|
|
default: MockSourceEditor,
|
2021-04-29 21:17:54 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-09-30 23:02:18 +05:30
|
|
|
const findSlotComponent = () => wrapper.findComponent(MockSourceEditor);
|
2021-04-29 21:17:54 +05:30
|
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
2022-10-11 01:57:18 +05:30
|
|
|
const findBadges = () => wrapper.findAllComponents(GlBadge);
|
2021-04-29 21:17:54 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
mockChildMounted = jest.fn();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('tabs are mounted lazily', async () => {
|
2021-04-29 21:17:54 +05:30
|
|
|
createMockedWrapper();
|
2021-03-08 18:12:59 +05:30
|
|
|
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('first tab is only mounted after nextTick', async () => {
|
2021-04-29 21:17:54 +05:30
|
|
|
createMockedWrapper();
|
2021-03-08 18:12:59 +05:30
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledTimes(1);
|
|
|
|
expect(mockChildMounted).toHaveBeenCalledWith(mockContent1);
|
|
|
|
});
|
|
|
|
|
2022-03-02 08:16:31 +05:30
|
|
|
describe('alerts', () => {
|
|
|
|
describe('unavailable state', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createWrapper({ props: { isUnavailable: true } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the invalid alert when the status is invalid', () => {
|
|
|
|
const alert = findAlert();
|
|
|
|
|
|
|
|
expect(alert.exists()).toBe(true);
|
|
|
|
expect(alert.text()).toContain(wrapper.vm.$options.i18n.unavailable);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('invalid state', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createWrapper({ props: { isInvalid: true } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the invalid alert when the status is invalid', () => {
|
|
|
|
const alert = findAlert();
|
|
|
|
|
|
|
|
expect(alert.exists()).toBe(true);
|
|
|
|
expect(alert.text()).toBe(wrapper.vm.$options.i18n.invalid);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('empty state', () => {
|
|
|
|
const text = 'my custom alert message';
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
createWrapper({
|
|
|
|
props: { isEmpty: true, emptyMessage: text },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays an empty message', () => {
|
|
|
|
createWrapper({
|
|
|
|
props: { isEmpty: true },
|
|
|
|
});
|
|
|
|
|
|
|
|
const alert = findAlert();
|
|
|
|
|
|
|
|
expect(alert.exists()).toBe(true);
|
|
|
|
expect(alert.text()).toBe(
|
|
|
|
'This tab will be usable when the CI/CD configuration file is populated with valid syntax.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('can have a custom empty message', () => {
|
|
|
|
const alert = findAlert();
|
|
|
|
|
|
|
|
expect(alert.exists()).toBe(true);
|
|
|
|
expect(alert.text()).toBe(text);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('showing the tab content depending on `isEmpty`, `isUnavailable` and `isInvalid`', () => {
|
2021-04-29 21:17:54 +05:30
|
|
|
it.each`
|
2022-03-02 08:16:31 +05:30
|
|
|
isEmpty | isUnavailable | isInvalid | showSlotComponent | text
|
|
|
|
${undefined} | ${undefined} | ${undefined} | ${true} | ${'renders'}
|
|
|
|
${false} | ${false} | ${false} | ${true} | ${'renders'}
|
|
|
|
${undefined} | ${true} | ${true} | ${false} | ${'hides'}
|
|
|
|
${true} | ${false} | ${false} | ${false} | ${'hides'}
|
|
|
|
${false} | ${true} | ${false} | ${false} | ${'hides'}
|
|
|
|
${false} | ${false} | ${true} | ${false} | ${'hides'}
|
2021-04-29 21:17:54 +05:30
|
|
|
`(
|
2022-03-02 08:16:31 +05:30
|
|
|
'$text the slot component when isEmpty:$isEmpty, isUnavailable:$isUnavailable and isInvalid:$isInvalid',
|
|
|
|
({ isEmpty, isUnavailable, isInvalid, showSlotComponent }) => {
|
2021-04-29 21:17:54 +05:30
|
|
|
createWrapper({
|
2022-03-02 08:16:31 +05:30
|
|
|
props: { isEmpty, isUnavailable, isInvalid },
|
2021-04-29 21:17:54 +05:30
|
|
|
});
|
|
|
|
expect(findSlotComponent().exists()).toBe(showSlotComponent);
|
|
|
|
expect(findAlert().exists()).toBe(!showSlotComponent);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
describe('user interaction', () => {
|
|
|
|
const clickTab = async (testid) => {
|
|
|
|
wrapper.find(`[data-testid="${testid}"]`).trigger('click');
|
|
|
|
await nextTick();
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2021-04-29 21:17:54 +05:30
|
|
|
createMockedWrapper();
|
2021-03-08 18:12:59 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
});
|
2022-08-13 15:12:31 +05:30
|
|
|
|
|
|
|
describe('valid state', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createMockedWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders correct number of badges', async () => {
|
|
|
|
expect(findBadges()).toHaveLength(1);
|
|
|
|
expect(findBadges().at(0).text()).toBe('NEW');
|
|
|
|
});
|
|
|
|
});
|
2021-03-08 18:12:59 +05:30
|
|
|
});
|