diff options
Diffstat (limited to 'spec/frontend/pipelines/graph_shared')
3 files changed, 0 insertions, 338 deletions
diff --git a/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap b/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap deleted file mode 100644 index 82206e907ff..00000000000 --- a/spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Links Inner component with a large number of needs matches snapshot and has expected path 1`] = ` -"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> - <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - <path d=\\"M202,118C62,118,62,148,112,148\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - <path d=\\"M222,138C72,138,72,158,122,158\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - <path d=\\"M212,128C82,128,82,168,132,168\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - <path d=\\"M232,148C92,148,92,178,142,178\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - </svg> </div>" -`; - -exports[`Links Inner component with a parallel need matches snapshot and has expected path 1`] = ` -"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> - <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - </svg> </div>" -`; - -exports[`Links Inner component with one need matches snapshot and has expected path 1`] = ` -"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> - <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - </svg> </div>" -`; - -exports[`Links Inner component with same stage needs matches snapshot and has expected path 1`] = ` -"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> - <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - <path d=\\"M202,118C42,118,42,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> - </svg> </div>" -`; diff --git a/spec/frontend/pipelines/graph_shared/links_inner_spec.js b/spec/frontend/pipelines/graph_shared/links_inner_spec.js deleted file mode 100644 index b4ffd2658fe..00000000000 --- a/spec/frontend/pipelines/graph_shared/links_inner_spec.js +++ /dev/null @@ -1,223 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue'; -import { parseData } from '~/pipelines/components/parsing_utils'; -import { createJobsHash } from '~/pipelines/utils'; -import { - jobRect, - largePipelineData, - parallelNeedData, - pipelineData, - pipelineDataWithNoNeeds, - rootRect, - sameStageNeeds, -} from '../pipeline_graph/mock_data'; - -describe('Links Inner component', () => { - const containerId = 'pipeline-graph-container'; - const defaultProps = { - containerId, - containerMeasurements: { width: 1019, height: 445 }, - pipelineId: 1, - pipelineData: [], - totalGroups: 10, - }; - - let wrapper; - - const createComponent = (props) => { - const currentPipelineData = props?.pipelineData || defaultProps.pipelineData; - wrapper = shallowMount(LinksInner, { - propsData: { - ...defaultProps, - ...props, - linksData: parseData(currentPipelineData.flatMap(({ groups }) => groups)).links, - }, - }); - }; - - const findLinkSvg = () => wrapper.find('#link-svg'); - const findAllLinksPath = () => findLinkSvg().findAll('path'); - - // We create fixture so that each job has an empty div that represent - // the JobPill in the DOM. Each `JobPill` would have different coordinates, - // so we increment their coordinates on each iteration to simulate different positions. - const setHTMLFixtureLocal = ({ stages }) => { - const jobs = createJobsHash(stages); - const arrayOfJobs = Object.keys(jobs); - - const linksHtmlElements = arrayOfJobs.map((job) => { - return `<div id=${job}-${defaultProps.pipelineId} />`; - }); - - setHTMLFixture(`<div id="${containerId}">${linksHtmlElements.join(' ')}</div>`); - - // We are mocking the clientRect data of each job and the container ID. - jest - .spyOn(document.getElementById(containerId), 'getBoundingClientRect') - .mockImplementation(() => rootRect); - - arrayOfJobs.forEach((job, index) => { - jest - .spyOn( - document.getElementById(`${job}-${defaultProps.pipelineId}`), - 'getBoundingClientRect', - ) - .mockImplementation(() => { - const newValue = 10 * index; - const { left, right, top, bottom, x, y } = jobRect; - return { - ...jobRect, - left: left + newValue, - right: right + newValue, - top: top + newValue, - bottom: bottom + newValue, - x: x + newValue, - y: y + newValue, - }; - }); - }); - }; - - afterEach(() => { - resetHTMLFixture(); - }); - - describe('basic SVG creation', () => { - beforeEach(() => { - createComponent(); - }); - - it('renders an SVG of the right size', () => { - expect(findLinkSvg().exists()).toBe(true); - expect(findLinkSvg().attributes('width')).toBe( - `${defaultProps.containerMeasurements.width}px`, - ); - expect(findLinkSvg().attributes('height')).toBe( - `${defaultProps.containerMeasurements.height}px`, - ); - }); - }); - - describe('no pipeline data', () => { - beforeEach(() => { - createComponent(); - }); - - it('renders the component', () => { - expect(findLinkSvg().exists()).toBe(true); - expect(findAllLinksPath()).toHaveLength(0); - }); - }); - - describe('pipeline data with no needs', () => { - beforeEach(() => { - createComponent({ pipelineData: pipelineDataWithNoNeeds.stages }); - }); - - it('renders no links', () => { - expect(findLinkSvg().exists()).toBe(true); - expect(findAllLinksPath()).toHaveLength(0); - }); - }); - - describe('with one need', () => { - beforeEach(() => { - setHTMLFixtureLocal(pipelineData); - createComponent({ pipelineData: pipelineData.stages }); - }); - - it('renders one link', () => { - expect(findAllLinksPath()).toHaveLength(1); - }); - - it('path does not contain NaN values', () => { - expect(wrapper.html()).not.toContain('NaN'); - }); - - it('matches snapshot and has expected path', () => { - expect(wrapper.html()).toMatchSnapshot(); - }); - }); - - describe('with a parallel need', () => { - beforeEach(() => { - setHTMLFixtureLocal(parallelNeedData); - createComponent({ pipelineData: parallelNeedData.stages }); - }); - - it('renders only one link for all the same parallel jobs', () => { - expect(findAllLinksPath()).toHaveLength(1); - }); - - it('path does not contain NaN values', () => { - expect(wrapper.html()).not.toContain('NaN'); - }); - - it('matches snapshot and has expected path', () => { - expect(wrapper.html()).toMatchSnapshot(); - }); - }); - - describe('with same stage needs', () => { - beforeEach(() => { - setHTMLFixtureLocal(sameStageNeeds); - createComponent({ pipelineData: sameStageNeeds.stages }); - }); - - it('renders the correct number of links', () => { - expect(findAllLinksPath()).toHaveLength(2); - }); - - it('path does not contain NaN values', () => { - expect(wrapper.html()).not.toContain('NaN'); - }); - - it('matches snapshot and has expected path', () => { - expect(wrapper.html()).toMatchSnapshot(); - }); - }); - - describe('with a large number of needs', () => { - beforeEach(() => { - setHTMLFixtureLocal(largePipelineData); - createComponent({ pipelineData: largePipelineData.stages }); - }); - - it('renders the correct number of links', () => { - expect(findAllLinksPath()).toHaveLength(5); - }); - - it('path does not contain NaN values', () => { - expect(wrapper.html()).not.toContain('NaN'); - }); - - it('matches snapshot and has expected path', () => { - expect(wrapper.html()).toMatchSnapshot(); - }); - }); - - describe('interactions', () => { - beforeEach(() => { - setHTMLFixtureLocal(largePipelineData); - createComponent({ pipelineData: largePipelineData.stages }); - }); - - it('highlight needs on hover', async () => { - const firstLink = findAllLinksPath().at(0); - - const defaultColorClass = 'gl-stroke-gray-200'; - const hoverColorClass = 'gl-stroke-blue-400'; - - expect(firstLink.classes(defaultColorClass)).toBe(true); - expect(firstLink.classes(hoverColorClass)).toBe(false); - - // Because there is a watcher, we need to set the props after the component - // has mounted. - await wrapper.setProps({ highlightedJob: 'test_1' }); - - expect(firstLink.classes(defaultColorClass)).toBe(false); - expect(firstLink.classes(hoverColorClass)).toBe(true); - }); - }); -}); diff --git a/spec/frontend/pipelines/graph_shared/links_layer_spec.js b/spec/frontend/pipelines/graph_shared/links_layer_spec.js deleted file mode 100644 index 88ba84c395a..00000000000 --- a/spec/frontend/pipelines/graph_shared/links_layer_spec.js +++ /dev/null @@ -1,85 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import mockPipelineResponse from 'test_fixtures/pipelines/pipeline_details.json'; -import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue'; -import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue'; - -import { generateResponse } from '../graph/mock_data'; - -describe('links layer component', () => { - let wrapper; - - const findLinksInner = () => wrapper.findComponent(LinksInner); - - const pipeline = generateResponse(mockPipelineResponse, 'root/fungi-xoxo'); - const containerId = `pipeline-links-container-${pipeline.id}`; - const slotContent = "<div>Ceci n'est pas un graphique</div>"; - - const defaultProps = { - containerId, - containerMeasurements: { width: 400, height: 400 }, - pipelineId: pipeline.id, - pipelineData: pipeline.stages, - showLinks: false, - }; - - const createComponent = ({ mountFn = shallowMount, props = {} } = {}) => { - wrapper = mountFn(LinksLayer, { - propsData: { - ...defaultProps, - ...props, - }, - slots: { - default: slotContent, - }, - stubs: { - 'links-inner': true, - }, - }); - }; - - describe('with show links off', () => { - beforeEach(() => { - createComponent(); - }); - - it('renders the default slot', () => { - expect(wrapper.html()).toContain(slotContent); - }); - - it('does not render inner links component', () => { - expect(findLinksInner().exists()).toBe(false); - }); - }); - - describe('with show links on', () => { - beforeEach(() => { - createComponent({ - props: { - showLinks: true, - }, - }); - }); - - it('renders the default slot', () => { - expect(wrapper.html()).toContain(slotContent); - }); - - it('renders the inner links component', () => { - expect(findLinksInner().exists()).toBe(true); - }); - }); - - describe('with width or height measurement at 0', () => { - beforeEach(() => { - createComponent({ props: { containerMeasurements: { width: 0, height: 100 } } }); - }); - - it('renders the default slot', () => { - expect(wrapper.html()).toContain(slotContent); - }); - - it('does not render the inner links component', () => { - expect(findLinksInner().exists()).toBe(false); - }); - }); -}); |