diff options
Diffstat (limited to 'spec/frontend/pipelines/graph')
9 files changed, 120 insertions, 49 deletions
diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js index 95d96e127c6..6a7018fa1e5 100644 --- a/spec/frontend/pipelines/graph/action_component_spec.js +++ b/spec/frontend/pipelines/graph/action_component_spec.js @@ -1,5 +1,5 @@ -import { mount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; diff --git a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js b/spec/frontend/pipelines/graph/graph_component_legacy_spec.js index 840b1f8baf5..a955572a481 100644 --- a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js +++ b/spec/frontend/pipelines/graph/graph_component_legacy_spec.js @@ -1,14 +1,14 @@ -import { nextTick } from 'vue'; -import { mount } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { setHTMLFixture } from 'helpers/fixtures'; -import PipelineStore from '~/pipelines/stores/pipeline_store'; import GraphComponentLegacy from '~/pipelines/components/graph/graph_component_legacy.vue'; -import StageColumnComponentLegacy from '~/pipelines/components/graph/stage_column_component_legacy.vue'; import LinkedPipelinesColumnLegacy from '~/pipelines/components/graph/linked_pipelines_column_legacy.vue'; -import graphJSON from './mock_data_legacy'; -import linkedPipelineJSON from './linked_pipelines_mock_data'; +import StageColumnComponentLegacy from '~/pipelines/components/graph/stage_column_component_legacy.vue'; import PipelinesMediator from '~/pipelines/pipeline_details_mediator'; +import PipelineStore from '~/pipelines/stores/pipeline_store'; +import linkedPipelineJSON from './linked_pipelines_mock_data'; +import graphJSON from './mock_data_legacy'; describe('graph component', () => { let store; diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js index cfc3b7af282..3e8d4ba314c 100644 --- a/spec/frontend/pipelines/graph/graph_component_spec.js +++ b/spec/frontend/pipelines/graph/graph_component_spec.js @@ -1,10 +1,10 @@ import { mount, shallowMount } from '@vue/test-utils'; +import { GRAPHQL } from '~/pipelines/components/graph/constants'; import PipelineGraph from '~/pipelines/components/graph/graph_component.vue'; -import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue'; import JobItem from '~/pipelines/components/graph/job_item.vue'; import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue'; +import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue'; import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue'; -import { GRAPHQL } from '~/pipelines/components/graph/constants'; import { generateResponse, mockPipelineResponse, @@ -22,6 +22,13 @@ describe('graph component', () => { pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'), }; + const defaultData = { + measurements: { + width: 800, + height: 800, + }, + }; + const createComponent = ({ data = {}, mountFn = shallowMount, @@ -34,7 +41,10 @@ describe('graph component', () => { ...props, }, data() { - return { ...data }; + return { + ...defaultData, + ...data, + }; }, provide: { dataMethod: GRAPHQL, diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js index 54593c527cb..202365ecd35 100644 --- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js +++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js @@ -1,11 +1,11 @@ +import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import { shallowMount } from '@vue/test-utils'; -import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import createMockApollo from 'helpers/mock_apollo_helper'; import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; -import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue'; import PipelineGraph from '~/pipelines/components/graph/graph_component.vue'; +import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue'; import { mockPipelineResponse } from './mock_data'; const defaultProvide = { diff --git a/spec/frontend/pipelines/graph/job_name_component_spec.js b/spec/frontend/pipelines/graph/job_name_component_spec.js index f0aa646b8d7..658b5be87d4 100644 --- a/spec/frontend/pipelines/graph/job_name_component_spec.js +++ b/spec/frontend/pipelines/graph/job_name_component_spec.js @@ -1,7 +1,6 @@ import { mount } from '@vue/test-utils'; -import ciIcon from '~/vue_shared/components/ci_icon.vue'; - import jobNameComponent from '~/pipelines/components/graph/job_name_component.vue'; +import ciIcon from '~/vue_shared/components/ci_icon.vue'; describe('job name component', () => { let wrapper; diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js index fb005d628a9..96f2cd1e371 100644 --- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js +++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js @@ -1,9 +1,10 @@ -import { mount } from '@vue/test-utils'; import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; +import { UPSTREAM, DOWNSTREAM } from '~/pipelines/components/graph/constants'; import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; import mockData from './linked_pipelines_mock_data'; -import { UPSTREAM, DOWNSTREAM } from '~/pipelines/components/graph/constants'; const mockPipeline = mockData.triggered[0]; const validTriggeredPipelineId = mockPipeline.project.id; @@ -212,11 +213,11 @@ describe('Linked pipeline', () => { expect(wrapper.emitted().pipelineClicked).toBeTruthy(); }); - it('should emit `bv::hide::tooltip` to close the tooltip', () => { + it(`should emit ${BV_HIDE_TOOLTIP} to close the tooltip`, () => { jest.spyOn(wrapper.vm.$root, '$emit'); findButton().trigger('click'); - expect(wrapper.vm.$root.$emit.mock.calls[0]).toEqual(['bv::hide::tooltip']); + expect(wrapper.vm.$root.$emit.mock.calls[0]).toEqual([BV_HIDE_TOOLTIP]); }); it('should emit downstreamHovered with job name on mouseover', () => { diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_legacy_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_legacy_spec.js index b6c700c65d2..200e3f48401 100644 --- a/spec/frontend/pipelines/graph/linked_pipelines_column_legacy_spec.js +++ b/spec/frontend/pipelines/graph/linked_pipelines_column_legacy_spec.js @@ -1,7 +1,7 @@ import { shallowMount } from '@vue/test-utils'; -import LinkedPipelinesColumnLegacy from '~/pipelines/components/graph/linked_pipelines_column_legacy.vue'; -import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue'; import { UPSTREAM } from '~/pipelines/components/graph/constants'; +import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue'; +import LinkedPipelinesColumnLegacy from '~/pipelines/components/graph/linked_pipelines_column_legacy.vue'; import mockData from './linked_pipelines_mock_data'; describe('Linked Pipelines Column', () => { diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js index 6db152f2607..8f01accccc1 100644 --- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js +++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js @@ -1,11 +1,11 @@ -import VueApollo from 'vue-apollo'; import { mount, shallowMount, createLocalVue } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; +import { DOWNSTREAM, GRAPHQL, UPSTREAM } from '~/pipelines/components/graph/constants'; import PipelineGraph from '~/pipelines/components/graph/graph_component.vue'; -import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue'; import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue'; -import { DOWNSTREAM, GRAPHQL } from '~/pipelines/components/graph/constants'; +import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue'; import { LOAD_FAILURE } from '~/pipelines/constants'; import { mockPipelineResponse, @@ -17,7 +17,7 @@ const processedPipeline = pipelineWithUpstreamDownstream(mockPipelineResponse); describe('Linked Pipelines Column', () => { const defaultProps = { - columnTitle: 'Upstream', + columnTitle: 'Downstream', linkedPipelines: processedPipeline.downstream, type: DOWNSTREAM, }; @@ -45,14 +45,15 @@ describe('Linked Pipelines Column', () => { }); }; - const createComponentWithApollo = ( + const createComponentWithApollo = ({ mountFn = shallowMount, getPipelineDetailsHandler = jest.fn().mockResolvedValue(wrappedPipelineReturn), - ) => { + props = {}, + } = {}) => { const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]]; const apolloProvider = createMockApollo(requestHandlers); - createComponent({ apolloProvider, mountFn }); + createComponent({ apolloProvider, mountFn, props }); }; afterEach(() => { @@ -86,34 +87,90 @@ describe('Linked Pipelines Column', () => { await wrapper.vm.$nextTick(); }; - describe('when successful', () => { - beforeEach(() => { - createComponentWithApollo(mount); + describe('downstream', () => { + describe('when successful', () => { + beforeEach(() => { + createComponentWithApollo({ mountFn: mount }); + }); + + it('toggles the pipeline visibility', async () => { + expect(findPipelineGraph().exists()).toBe(false); + await clickExpandButtonAndAwaitTimers(); + expect(findPipelineGraph().exists()).toBe(true); + await clickExpandButton(); + expect(findPipelineGraph().exists()).toBe(false); + }); }); - it('toggles the pipeline visibility', async () => { - expect(findPipelineGraph().exists()).toBe(false); - await clickExpandButtonAndAwaitTimers(); - expect(findPipelineGraph().exists()).toBe(true); - await clickExpandButton(); - expect(findPipelineGraph().exists()).toBe(false); + describe('on error', () => { + beforeEach(() => { + createComponentWithApollo({ + mountFn: mount, + getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')), + }); + }); + + it('emits the error', async () => { + await clickExpandButton(); + expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]); + }); + + it('does not show the pipeline', async () => { + expect(findPipelineGraph().exists()).toBe(false); + await clickExpandButtonAndAwaitTimers(); + expect(findPipelineGraph().exists()).toBe(false); + }); }); }); - describe('on error', () => { - beforeEach(() => { - createComponentWithApollo(mount, jest.fn().mockRejectedValue(new Error('GraphQL error'))); - }); - - it('emits the error', async () => { - await clickExpandButton(); - expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]); + describe('upstream', () => { + const upstreamProps = { + columnTitle: 'Upstream', + /* + Because the IDs need to match to work, rather + than make new mock data, we are representing + the upstream pipeline with the downstream data. + */ + linkedPipelines: processedPipeline.downstream, + type: UPSTREAM, + }; + + describe('when successful', () => { + beforeEach(() => { + createComponentWithApollo({ + mountFn: mount, + props: upstreamProps, + }); + }); + + it('toggles the pipeline visibility', async () => { + expect(findPipelineGraph().exists()).toBe(false); + await clickExpandButtonAndAwaitTimers(); + expect(findPipelineGraph().exists()).toBe(true); + await clickExpandButton(); + expect(findPipelineGraph().exists()).toBe(false); + }); }); - it('does not show the pipeline', async () => { - expect(findPipelineGraph().exists()).toBe(false); - await clickExpandButtonAndAwaitTimers(); - expect(findPipelineGraph().exists()).toBe(false); + describe('on error', () => { + beforeEach(() => { + createComponentWithApollo({ + mountFn: mount, + getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')), + props: upstreamProps, + }); + }); + + it('emits the error', async () => { + await clickExpandButton(); + expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]); + }); + + it('does not show the pipeline', async () => { + expect(findPipelineGraph().exists()).toBe(false); + await clickExpandButtonAndAwaitTimers(); + expect(findPipelineGraph().exists()).toBe(false); + }); }); }); }); diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js index 202e25ccda3..16dc70a63a5 100644 --- a/spec/frontend/pipelines/graph/stage_column_component_spec.js +++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js @@ -68,6 +68,10 @@ describe('stage column component', () => { it('should render the provided groups', () => { expect(findAllStageColumnGroups().length).toBe(mockGroups.length); }); + + it('should emit updateMeasurements event on mount', () => { + expect(wrapper.emitted().updateMeasurements).toHaveLength(1); + }); }); describe('when job notifies action is complete', () => { |