diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js')
-rw-r--r-- | spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js | 91 |
1 files changed, 91 insertions, 0 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 new file mode 100644 index 00000000000..d3d9bf08209 --- /dev/null +++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js @@ -0,0 +1,91 @@ +import { nextTick } from 'vue'; +import { mount } from '@vue/test-utils'; +import { GlTabs } from '@gitlab/ui'; + +import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue'; + +const mockContent1 = 'MOCK CONTENT 1'; +const mockContent2 = 'MOCK CONTENT 2'; + +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 createWrapper = () => { + wrapper = mount(MockTabbedContent); + }; + + beforeEach(() => { + mockChildMounted = jest.fn(); + }); + + it('tabs are mounted lazily', async () => { + createWrapper(); + + expect(mockChildMounted).toHaveBeenCalledTimes(0); + }); + + it('first tab is only mounted after nextTick', async () => { + createWrapper(); + + await nextTick(); + + expect(mockChildMounted).toHaveBeenCalledTimes(1); + expect(mockChildMounted).toHaveBeenCalledWith(mockContent1); + }); + + describe('user interaction', () => { + const clickTab = async (testid) => { + wrapper.find(`[data-testid="${testid}"]`).trigger('click'); + await nextTick(); + }; + + beforeEach(() => { + createWrapper(); + }); + + 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); + }); + }); +}); |