diff options
Diffstat (limited to 'spec/frontend/pipeline_editor')
13 files changed, 123 insertions, 15 deletions
diff --git a/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js index bec6c2a8d0c..0ee6da9d329 100644 --- a/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js +++ b/spec/frontend/pipeline_editor/components/commit/commit_form_spec.js @@ -152,7 +152,7 @@ describe('Pipeline Editor | Commit Form', () => { }); it('emits "scrolled-to-commit-form"', () => { - expect(wrapper.emitted()['scrolled-to-commit-form']).toBeTruthy(); + expect(wrapper.emitted()['scrolled-to-commit-form']).toHaveLength(1); }); }); }); diff --git a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js index 33c76309951..744b0378a75 100644 --- a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js +++ b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js @@ -224,7 +224,7 @@ describe('Pipeline Editor | Commit section', () => { }); it('emits a commit event with the right type, sourceBranch and targetBranch', () => { - expect(wrapper.emitted('commit')).toBeTruthy(); + expect(wrapper.emitted('commit')).toHaveLength(1); expect(wrapper.emitted('commit')[0]).toMatchObject([ { type: COMMIT_SUCCESS_WITH_REDIRECT, diff --git a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js index 7dbacad34bf..8f6f4d8cff9 100644 --- a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js +++ b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js @@ -119,7 +119,7 @@ describe('Pipeline editor branch switcher', () => { }; const findDropdown = () => wrapper.findComponent(GlDropdown); - const findDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); const findInfiniteScroll = () => wrapper.findComponent(GlInfiniteScroll); diff --git a/spec/frontend/pipeline_editor/components/file-tree/container_spec.js b/spec/frontend/pipeline_editor/components/file-tree/container_spec.js index 04a93e8db25..f79074f1e0f 100644 --- a/spec/frontend/pipeline_editor/components/file-tree/container_spec.js +++ b/spec/frontend/pipeline_editor/components/file-tree/container_spec.js @@ -31,7 +31,7 @@ describe('Pipeline editor file nav', () => { const findTip = () => wrapper.findComponent(GlAlert); const findCurrentConfigFilename = () => wrapper.findByTestId('current-config-filename'); - const fileTreeItems = () => wrapper.findAll(PipelineEditorFileTreeItem); + const fileTreeItems = () => wrapper.findAllComponents(PipelineEditorFileTreeItem); afterEach(() => { localStorage.clear(); diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js new file mode 100644 index 00000000000..d40a9cc8100 --- /dev/null +++ b/spec/frontend/pipeline_editor/components/header/pipeline_editor_mini_graph_spec.js @@ -0,0 +1,109 @@ +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue'; +import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue'; +import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql'; +import { PIPELINE_FAILURE } from '~/pipeline_editor/constants'; +import { mockLinkedPipelines, mockProjectFullPath, mockProjectPipeline } from '../../mock_data'; + +Vue.use(VueApollo); + +describe('Pipeline Status', () => { + let wrapper; + let mockApollo; + let mockLinkedPipelinesQuery; + + const createComponent = ({ hasStages = true, options } = {}) => { + wrapper = shallowMount(PipelineEditorMiniGraph, { + provide: { + dataMethod: 'graphql', + projectFullPath: mockProjectFullPath, + }, + propsData: { + pipeline: mockProjectPipeline({ hasStages }).pipeline, + }, + ...options, + }); + }; + + const createComponentWithApollo = (hasStages = true) => { + const handlers = [[getLinkedPipelinesQuery, mockLinkedPipelinesQuery]]; + mockApollo = createMockApollo(handlers); + + createComponent({ + hasStages, + options: { + apolloProvider: mockApollo, + }, + }); + }; + + const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph); + + beforeEach(() => { + mockLinkedPipelinesQuery = jest.fn(); + }); + + afterEach(() => { + mockLinkedPipelinesQuery.mockReset(); + wrapper.destroy(); + }); + + describe('when there are stages', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders pipeline mini graph', () => { + expect(findPipelineMiniGraph().exists()).toBe(true); + }); + }); + + describe('when there are no stages', () => { + beforeEach(() => { + createComponent({ hasStages: false }); + }); + + it('does not render pipeline mini graph', () => { + expect(findPipelineMiniGraph().exists()).toBe(false); + }); + }); + + describe('when querying upstream and downstream pipelines', () => { + describe('when query succeeds', () => { + beforeEach(() => { + mockLinkedPipelinesQuery.mockResolvedValue(mockLinkedPipelines()); + createComponentWithApollo(); + }); + + it('should call the query with the correct variables', () => { + expect(mockLinkedPipelinesQuery).toHaveBeenCalledTimes(1); + expect(mockLinkedPipelinesQuery).toHaveBeenCalledWith({ + fullPath: mockProjectFullPath, + iid: mockProjectPipeline().pipeline.iid, + }); + }); + }); + + describe('when query fails', () => { + beforeEach(async () => { + mockLinkedPipelinesQuery.mockRejectedValue(new Error()); + createComponentWithApollo(); + await waitForPromises(); + }); + + it('should emit an error event when query fails', async () => { + expect(wrapper.emitted('showError')).toHaveLength(1); + expect(wrapper.emitted('showError')[0]).toEqual([ + { + type: PIPELINE_FAILURE, + reasons: [wrapper.vm.$options.i18n.linkedPipelinesFetchError], + }, + ]); + }); + }); + }); +}); diff --git a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js index 93eb18c90cf..d40a9cc8100 100644 --- a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js +++ b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js @@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue'; -import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; +import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue'; import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql'; import { PIPELINE_FAILURE } from '~/pipeline_editor/constants'; import { mockLinkedPipelines, mockProjectFullPath, mockProjectPipeline } from '../../mock_data'; diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js index 82ac390971d..7f89eda4dff 100644 --- a/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js +++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js @@ -24,11 +24,11 @@ describe('CI Lint Results', () => { }); }; - const findTable = () => wrapper.find(GlTableLite); + const findTable = () => wrapper.findComponent(GlTableLite); const findByTestId = (selector) => () => wrapper.find(`[data-testid="ci-lint-${selector}"]`); const findAllByTestId = (selector) => () => wrapper.findAll(`[data-testid="ci-lint-${selector}"]`); - const findLinkToDoc = () => wrapper.find(GlLink); + const findLinkToDoc = () => wrapper.findComponent(GlLink); const findErrors = findByTestId('errors'); const findWarnings = findByTestId('warnings'); const findStatus = findByTestId('status'); diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js index 4b576508ee9..36052a2e16a 100644 --- a/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js +++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_warnings_spec.js @@ -17,9 +17,9 @@ describe('CI lint warnings', () => { }); }; - const findWarningAlert = () => wrapper.find(GlAlert); + const findWarningAlert = () => wrapper.findComponent(GlAlert); const findWarnings = () => wrapper.findAll('[data-testid="ci-lint-warning"]'); - const findWarningMessage = () => trimText(wrapper.find(GlSprintf).text()); + const findWarningMessage = () => trimText(wrapper.findComponent(GlSprintf).text()); afterEach(() => { wrapper.destroy(); 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 2f3e1b49b37..3b79739630d 100644 --- a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js +++ b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js @@ -256,7 +256,7 @@ describe('Pipeline editor tabs component', () => { ${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 | validate:$validate | merged:$merged ', + 'when status is $appStatus, we show - editor:$editor | viz:$viz | validate:$validate | merged:$merged', ({ appStatus, editor, viz, validate, merged }) => { createComponent({ appStatus }); diff --git a/spec/frontend/pipeline_editor/components/popovers/walkthrough_popover_spec.js b/spec/frontend/pipeline_editor/components/popovers/walkthrough_popover_spec.js index 8d172a8462a..b86c82850c5 100644 --- a/spec/frontend/pipeline_editor/components/popovers/walkthrough_popover_spec.js +++ b/spec/frontend/pipeline_editor/components/popovers/walkthrough_popover_spec.js @@ -23,7 +23,7 @@ describe('WalkthroughPopover component', () => { }); it('emits "walkthrough-popover-cta-clicked" event', async () => { - expect(wrapper.emitted()['walkthrough-popover-cta-clicked']).toBeTruthy(); + expect(wrapper.emitted()['walkthrough-popover-cta-clicked']).toHaveLength(1); }); }); }); 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 3a40ce32a24..24f27e8c5fb 100644 --- a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js +++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js @@ -58,7 +58,7 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => { const findSlotComponent = () => wrapper.findComponent(MockSourceEditor); const findAlert = () => wrapper.findComponent(GlAlert); - const findBadges = () => wrapper.findAll(GlBadge); + const findBadges = () => wrapper.findAllComponents(GlBadge); beforeEach(() => { mockChildMounted = jest.fn(); diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js index 0ce6cc3f2d4..1989f23a415 100644 --- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js +++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js @@ -149,8 +149,7 @@ describe('Pipeline editor app component', () => { const findAlert = () => wrapper.findComponent(GlAlert); const findEditorHome = () => wrapper.findComponent(PipelineEditorHome); const findEmptyState = () => wrapper.findComponent(PipelineEditorEmptyState); - const findEmptyStateButton = () => - wrapper.findComponent(PipelineEditorEmptyState).findComponent(GlButton); + const findEmptyStateButton = () => findEmptyState().findComponent(GlButton); const findValidationSegment = () => wrapper.findComponent(ValidationSegment); beforeEach(() => { diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js index 0cb7155c8c0..e317d1ddcc2 100644 --- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js +++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js @@ -254,7 +254,7 @@ describe('Pipeline editor home wrapper', () => { expect(findPipelineEditorDrawer().props('isVisible')).toBe(true); - findPipelineEditorDrawer().find(GlDrawer).vm.$emit('close'); + findPipelineEditorDrawer().findComponent(GlDrawer).vm.$emit('close'); await nextTick(); expect(findPipelineEditorDrawer().props('isVisible')).toBe(false); |