diff options
Diffstat (limited to 'spec/frontend/pipelines/graph/graph_component_legacy_spec.js')
-rw-r--r-- | spec/frontend/pipelines/graph/graph_component_legacy_spec.js | 300 |
1 files changed, 0 insertions, 300 deletions
diff --git a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js b/spec/frontend/pipelines/graph/graph_component_legacy_spec.js deleted file mode 100644 index a955572a481..00000000000 --- a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js +++ /dev/null @@ -1,300 +0,0 @@ -import { GlLoadingIcon } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import { setHTMLFixture } from 'helpers/fixtures'; -import GraphComponentLegacy from '~/pipelines/components/graph/graph_component_legacy.vue'; -import LinkedPipelinesColumnLegacy from '~/pipelines/components/graph/linked_pipelines_column_legacy.vue'; -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; - let mediator; - let wrapper; - - const findExpandPipelineBtn = () => wrapper.find('[data-testid="expand-pipeline-button"]'); - const findAllExpandPipelineBtns = () => wrapper.findAll('[data-testid="expand-pipeline-button"]'); - const findStageColumns = () => wrapper.findAll(StageColumnComponentLegacy); - const findStageColumnAt = (i) => findStageColumns().at(i); - - beforeEach(() => { - mediator = new PipelinesMediator({ endpoint: '' }); - store = new PipelineStore(); - store.storePipeline(linkedPipelineJSON); - - setHTMLFixture('<div class="layout-page"></div>'); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('while is loading', () => { - it('should render a loading icon', () => { - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: true, - pipeline: {}, - mediator, - }, - }); - - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); - }); - }); - - describe('with data', () => { - beforeEach(() => { - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: graphJSON, - mediator, - }, - }); - }); - - it('renders the graph', () => { - expect(wrapper.find('.js-pipeline-graph').exists()).toBe(true); - expect(wrapper.find('.loading-icon').exists()).toBe(false); - expect(wrapper.find('.stage-column-list').exists()).toBe(true); - }); - - it('renders columns in the graph', () => { - expect(findStageColumns()).toHaveLength(graphJSON.details.stages.length); - }); - }); - - describe('when linked pipelines are present', () => { - beforeEach(() => { - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: store.state.pipeline, - mediator, - }, - }); - }); - - describe('rendered output', () => { - it('should include the pipelines graph', () => { - expect(wrapper.find('.js-pipeline-graph').exists()).toBe(true); - }); - - it('should not include the loading icon', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - }); - - it('should include the stage column', () => { - expect(findStageColumnAt(0).exists()).toBe(true); - }); - - it('stage column should have no-margin, gl-mr-26, has-only-one-job classes if there is only one job', () => { - expect(findStageColumnAt(0).classes()).toEqual( - expect.arrayContaining(['no-margin', 'gl-mr-26', 'has-only-one-job']), - ); - }); - - it('should include the left-margin class on the second child', () => { - expect(findStageColumnAt(1).classes('left-margin')).toBe(true); - }); - - it('should include the left-connector class in the build of the second child', () => { - expect(findStageColumnAt(1).find('.build:nth-child(1)').classes('left-connector')).toBe( - true, - ); - }); - - it('should include the js-has-linked-pipelines flag', () => { - expect(wrapper.find('.js-has-linked-pipelines').exists()).toBe(true); - }); - }); - - describe('computeds and methods', () => { - describe('capitalizeStageName', () => { - it('it capitalizes the stage name', () => { - expect(wrapper.findAll('.stage-column .stage-name').at(1).text()).toBe('Prebuild'); - }); - }); - - describe('stageConnectorClass', () => { - it('it returns left-margin when there is a triggerer', () => { - expect(findStageColumnAt(1).classes('left-margin')).toBe(true); - }); - }); - }); - - describe('linked pipelines components', () => { - beforeEach(() => { - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: store.state.pipeline, - mediator, - }, - }); - }); - - it('should render an upstream pipelines column at first position', () => { - expect(wrapper.find(LinkedPipelinesColumnLegacy).exists()).toBe(true); - expect(wrapper.find('.stage-column .stage-name').text()).toBe('Upstream'); - }); - - it('should render a downstream pipelines column at last position', () => { - const stageColumnNames = wrapper.findAll('.stage-column .stage-name'); - - expect(wrapper.find(LinkedPipelinesColumnLegacy).exists()).toBe(true); - expect(stageColumnNames.at(stageColumnNames.length - 1).text()).toBe('Downstream'); - }); - - describe('triggered by', () => { - describe('on click', () => { - it('should emit `onClickUpstreamPipeline` when triggered by linked pipeline is clicked', async () => { - const btnWrapper = findExpandPipelineBtn(); - - btnWrapper.trigger('click'); - - await nextTick(); - expect(wrapper.emitted().onClickUpstreamPipeline).toEqual([ - store.state.pipeline.triggered_by, - ]); - }); - }); - - describe('with expanded pipeline', () => { - it('should render expanded pipeline', async () => { - // expand the pipeline - store.state.pipeline.triggered_by[0].isExpanded = true; - - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: store.state.pipeline, - mediator, - }, - }); - - await nextTick(); - expect(wrapper.find('.js-upstream-pipeline-12').exists()).toBe(true); - }); - }); - }); - - describe('triggered', () => { - describe('on click', () => { - // We have to mock this property of HTMLElement since component relies on it - let offsetParentDescriptor; - beforeAll(() => { - offsetParentDescriptor = Object.getOwnPropertyDescriptor( - HTMLElement.prototype, - 'offsetParent', - ); - Object.defineProperty(HTMLElement.prototype, 'offsetParent', { - get() { - return this.parentNode; - }, - }); - }); - afterAll(() => { - Object.defineProperty(HTMLElement.prototype, offsetParentDescriptor); - }); - - it('should emit `onClickDownstreamPipeline`', async () => { - const btnWrappers = findAllExpandPipelineBtns(); - const downstreamBtnWrapper = btnWrappers.at(btnWrappers.length - 1); - - downstreamBtnWrapper.trigger('click'); - - await nextTick(); - expect(wrapper.emitted().onClickDownstreamPipeline).toEqual([ - [store.state.pipeline.triggered[1]], - ]); - }); - }); - - describe('with expanded pipeline', () => { - it('should render expanded pipeline', async () => { - // expand the pipeline - store.state.pipeline.triggered[0].isExpanded = true; - - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: store.state.pipeline, - mediator, - }, - }); - - await nextTick(); - expect(wrapper.find('.js-downstream-pipeline-34993051')).not.toBeNull(); - }); - }); - - describe('when column requests a refresh', () => { - beforeEach(() => { - findStageColumnAt(0).vm.$emit('refreshPipelineGraph'); - }); - - it('refreshPipelineGraph is emitted', () => { - expect(wrapper.emitted().refreshPipelineGraph).toHaveLength(1); - }); - }); - }); - }); - }); - - describe('when linked pipelines are not present', () => { - beforeEach(() => { - const pipeline = Object.assign(linkedPipelineJSON, { triggered: null, triggered_by: null }); - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline, - mediator, - }, - }); - }); - - describe('rendered output', () => { - it('should include the first column with a no margin', () => { - const firstColumn = wrapper.find('.stage-column'); - - expect(firstColumn.classes('no-margin')).toBe(true); - }); - - it('should not render a linked pipelines column', () => { - expect(wrapper.find('.linked-pipelines-column').exists()).toBe(false); - }); - }); - - describe('stageConnectorClass', () => { - it('it returns no-margin when no triggerer and there is one job', () => { - expect(findStageColumnAt(0).classes('no-margin')).toBe(true); - }); - - it('it returns left-margin when no triggerer and not the first stage', () => { - expect(findStageColumnAt(1).classes('left-margin')).toBe(true); - }); - }); - }); - - describe('capitalizeStageName', () => { - it('capitalizes and escapes stage name', () => { - wrapper = mount(GraphComponentLegacy, { - propsData: { - isLoading: false, - pipeline: graphJSON, - mediator, - }, - }); - - expect(findStageColumnAt(1).props('title')).toEqual( - 'Deploy <img src=x onerror=alert(document.domain)>', - ); - }); - }); -}); |