diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/components/ui')
-rw-r--r-- | spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js | 57 |
1 files changed, 51 insertions, 6 deletions
diff --git a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js index 291468c5229..8def83d578b 100644 --- a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js +++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js @@ -1,12 +1,15 @@ -import { GlTabs } from '@gitlab/ui'; +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(); @@ -37,22 +40,34 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => { `, }; - const createWrapper = () => { + 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 () => { - createWrapper(); + createMockedWrapper(); expect(mockChildMounted).toHaveBeenCalledTimes(0); }); it('first tab is only mounted after nextTick', async () => { - createWrapper(); + createMockedWrapper(); await nextTick(); @@ -60,6 +75,36 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => { 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'); @@ -67,7 +112,7 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => { }; beforeEach(() => { - createWrapper(); + createMockedWrapper(); }); it('mounts a tab once after selecting it', async () => { |