diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js')
| -rw-r--r-- | spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js | 187 |
1 files changed, 52 insertions, 135 deletions
diff --git a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js index 87a7f07f7d4..2f3e1b49b37 100644 --- a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js +++ b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js @@ -1,11 +1,12 @@ +// TODO + import { GlAlert, GlBadge, GlLoadingIcon, GlTabs } from '@gitlab/ui'; -import { createLocalVue, mount, shallowMount } from '@vue/test-utils'; +import { mount, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import Vue, { nextTick } from 'vue'; import createMockApollo from 'helpers/mock_apollo_helper'; import setWindowLocation from 'helpers/set_window_location_helper'; import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue'; -import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue'; import CiValidate from '~/pipeline_editor/components/validate/ci_validate.vue'; import WalkthroughPopover from '~/pipeline_editor/components/popovers/walkthrough_popover.vue'; import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue'; @@ -30,8 +31,7 @@ import { mockLintResponseWithoutMerged, } from '../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); Vue.config.ignoredElements = ['gl-emoji']; @@ -64,7 +64,12 @@ describe('Pipeline editor tabs component', () => { }; }, provide: { + ciConfigPath: '/path/to/ci-config', ciLintPath: mockCiLintPath, + currentBranch: 'main', + projectFullPath: '/path/to/project', + simulatePipelineHelpPagePath: 'path/to/help/page', + validateTabIllustrationPath: 'path/to/svg', ...provide, }, stubs: { @@ -88,21 +93,18 @@ describe('Pipeline editor tabs component', () => { provide, mountFn, options: { - localVue, apolloProvider: mockApollo, }, }); }; const findEditorTab = () => wrapper.find('[data-testid="editor-tab"]'); - const findLintTab = () => wrapper.find('[data-testid="lint-tab"]'); const findMergedTab = () => wrapper.find('[data-testid="merged-tab"]'); const findValidateTab = () => wrapper.find('[data-testid="validate-tab"]'); const findVisualizationTab = () => wrapper.find('[data-testid="visualization-tab"]'); const findAlert = () => wrapper.findComponent(GlAlert); const findBadge = () => wrapper.findComponent(GlBadge); - const findCiLint = () => wrapper.findComponent(CiLint); const findCiValidate = () => wrapper.findComponent(CiValidate); const findGlTabs = () => wrapper.findComponent(GlTabs); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); @@ -121,7 +123,8 @@ describe('Pipeline editor tabs component', () => { describe('editor tab', () => { it('displays editor only after the tab is mounted', async () => { - createComponent({ mountFn: mount }); + mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse); + createComponentWithApollo({ mountFn: mount }); expect(findTextEditor().exists()).toBe(false); @@ -156,138 +159,57 @@ describe('Pipeline editor tabs component', () => { }); describe('validate tab', () => { - describe('with simulatePipeline feature flag ON', () => { - describe('after loading', () => { - beforeEach(() => { - createComponent({ - provide: { glFeatures: { simulatePipeline: true } }, - }); - }); - - it('displays the tab and the validate component', () => { - expect(findValidateTab().exists()).toBe(true); - expect(findCiValidate().exists()).toBe(true); - }); + describe('after loading', () => { + beforeEach(() => { + createComponent(); }); - describe('NEW badge', () => { - describe('default', () => { - beforeEach(() => { - mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse); - createComponentWithApollo({ - mountFn: mount, - props: { - currentTab: VALIDATE_TAB, - }, - provide: { - glFeatures: { simulatePipeline: true }, - ciConfigPath: '/path/to/ci-config', - currentBranch: 'main', - projectFullPath: '/path/to/project', - simulatePipelineHelpPagePath: 'path/to/help/page', - validateTabIllustrationPath: 'path/to/svg', - }, - }); - }); - - it('renders badge by default', () => { - expect(findBadge().exists()).toBe(true); - expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.new); - }); - - it('hides badge when moving away from the validate tab', async () => { - expect(findBadge().exists()).toBe(true); - - await findEditorTab().vm.$emit('click'); - - expect(findBadge().exists()).toBe(false); - }); - }); - - describe('if badge has been dismissed before', () => { - beforeEach(() => { - localStorage.setItem(VALIDATE_TAB_BADGE_DISMISSED_KEY, 'true'); - mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse); - createComponentWithApollo({ - mountFn: mount, - provide: { - glFeatures: { simulatePipeline: true }, - ciConfigPath: '/path/to/ci-config', - currentBranch: 'main', - projectFullPath: '/path/to/project', - simulatePipelineHelpPagePath: 'path/to/help/page', - validateTabIllustrationPath: 'path/to/svg', - }, - }); - }); - - it('does not render badge if it has been dismissed before', () => { - expect(findBadge().exists()).toBe(false); - }); - }); + it('displays the tab and the validate component', () => { + expect(findValidateTab().exists()).toBe(true); + expect(findCiValidate().exists()).toBe(true); }); }); - describe('with simulatePipeline feature flag OFF', () => { - beforeEach(() => { - createComponent({ - provide: { - glFeatures: { - simulatePipeline: false, + describe('NEW badge', () => { + describe('default', () => { + beforeEach(() => { + mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse); + createComponentWithApollo({ + mountFn: mount, + props: { + currentTab: VALIDATE_TAB, }, - }, + }); }); - }); - it('does not render the tab and the validate component', () => { - expect(findValidateTab().exists()).toBe(false); - expect(findCiValidate().exists()).toBe(false); - }); - }); - }); + it('renders badge by default', () => { + expect(findBadge().exists()).toBe(true); + expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.new); + }); - describe('lint tab', () => { - describe('while loading', () => { - beforeEach(() => { - createComponent({ appStatus: EDITOR_APP_STATUS_LOADING }); - }); + it('hides badge when moving away from the validate tab', async () => { + expect(findBadge().exists()).toBe(true); - it('displays a loading icon if the lint query is loading', () => { - expect(findLoadingIcon().exists()).toBe(true); - }); + await findEditorTab().vm.$emit('click'); - it('does not display the lint component', () => { - expect(findCiLint().exists()).toBe(false); - }); - }); - describe('after loading', () => { - beforeEach(() => { - createComponent(); - }); - - it('display the tab and the lint component', () => { - expect(findLintTab().exists()).toBe(true); - expect(findCiLint().exists()).toBe(true); + expect(findBadge().exists()).toBe(false); + }); }); - }); - describe('with simulatePipeline feature flag ON', () => { - beforeEach(() => { - createComponent({ - provide: { - glFeatures: { - simulatePipeline: true, - }, - }, + describe('if badge has been dismissed before', () => { + beforeEach(() => { + localStorage.setItem(VALIDATE_TAB_BADGE_DISMISSED_KEY, 'true'); + mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse); + createComponentWithApollo({ mountFn: mount }); }); - }); - it('does not render the tab and the lint component', () => { - expect(findLintTab().exists()).toBe(false); - expect(findCiLint().exists()).toBe(false); + it('does not render badge if it has been dismissed before', () => { + expect(findBadge().exists()).toBe(false); + }); }); }); }); + describe('merged tab', () => { describe('while loading', () => { beforeEach(() => { @@ -328,19 +250,19 @@ describe('Pipeline editor tabs component', () => { describe('show tab content based on status', () => { it.each` - appStatus | editor | viz | lint | merged + appStatus | editor | viz | validate | merged ${undefined} | ${true} | ${true} | ${true} | ${true} - ${EDITOR_APP_STATUS_EMPTY} | ${true} | ${false} | ${false} | ${false} + ${EDITOR_APP_STATUS_EMPTY} | ${true} | ${false} | ${true} | ${false} ${EDITOR_APP_STATUS_INVALID} | ${true} | ${false} | ${true} | ${false} ${EDITOR_APP_STATUS_VALID} | ${true} | ${true} | ${true} | ${true} `( - 'when status is $appStatus, we show - editor:$editor | viz:$viz | lint:$lint | merged:$merged ', - ({ appStatus, editor, viz, lint, merged }) => { + 'when status is $appStatus, we show - editor:$editor | viz:$viz | validate:$validate | merged:$merged ', + ({ appStatus, editor, viz, validate, merged }) => { createComponent({ appStatus }); expect(findTextEditor().exists()).toBe(editor); expect(findPipelineGraph().exists()).toBe(viz); - expect(findCiLint().exists()).toBe(lint); + expect(findValidateTab().exists()).toBe(validate); expect(findMergedPreview().exists()).toBe(merged); }, ); @@ -386,11 +308,8 @@ describe('Pipeline editor tabs component', () => { describe('pipeline editor walkthrough', () => { describe('when isNewCiConfigFile prop is true (default)', () => { - beforeEach(async () => { - createComponent({ - mountFn: mount, - }); - await nextTick(); + beforeEach(() => { + createComponent(); }); it('shows walkthrough popover', async () => { @@ -400,8 +319,7 @@ describe('Pipeline editor tabs component', () => { describe('when isNewCiConfigFile prop is false', () => { it('does not show walkthrough popover', async () => { - createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount }); - await nextTick(); + createComponent({ props: { isNewCiConfigFile: false } }); expect(findWalkthroughPopover().exists()).toBe(false); }); }); @@ -411,7 +329,6 @@ describe('Pipeline editor tabs component', () => { const handler = jest.fn(); createComponent({ - mountFn: mount, listeners: { event: handler, }, |