diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-03 00:08:00 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-03 00:08:00 +0300 |
commit | 2164573e4531de7949b0ad9fe1d55bfb9c42765d (patch) | |
tree | 10cf954a1225eb3162009f5c2457bacdc388aa63 /spec/frontend/pipelines | |
parent | f3e7bc80608c100227030030a6a601897f8e4ff9 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/pipelines')
-rw-r--r-- | spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap | 130 | ||||
-rw-r--r-- | spec/frontend/pipelines/components/dag/dag_graph_spec.js | 3 | ||||
-rw-r--r-- | spec/frontend/pipelines/components/dag/drawing_utils_spec.js | 57 | ||||
-rw-r--r-- | spec/frontend/pipelines/components/dag/parsing_utils_spec.js (renamed from spec/frontend/pipelines/components/dag/utils_spec.js) | 42 |
4 files changed, 131 insertions, 101 deletions
diff --git a/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap b/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap index 5390c2f8e0c..629efc6d3fa 100644 --- a/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap +++ b/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap @@ -10,12 +10,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip63\\"> <path d=\\" - M100, 129 - V158 - H377.3333333333333 - V100 - H100 - Z\\"></path> + M100, 129 + V158 + H377.3333333333333 + V100 + H100 + Z + \\"></path> </clipPath> <path d=\\"M108,129L190,129L190,129L369.3333333333333,129\\" stroke=\\"url(#dag-grad53)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip63)\\"></path> </g> @@ -26,12 +27,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip64\\"> <path d=\\" - M361.3333333333333, 129.0000000000002 - V158.0000000000002 - H638.6666666666666 - V100 - H361.3333333333333 - Z\\"></path> + M361.3333333333333, 129.0000000000002 + V158.0000000000002 + H638.6666666666666 + V100 + H361.3333333333333 + Z + \\"></path> </clipPath> <path d=\\"M369.3333333333333,129L509.3333333333333,129L509.3333333333333,129.0000000000002L630.6666666666666,129.0000000000002\\" stroke=\\"url(#dag-grad54)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip64)\\"></path> </g> @@ -42,12 +44,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip65\\"> <path d=\\" - M100, 187.0000000000002 - V241.00000000000003 - H638.6666666666666 - V158.0000000000002 - H100 - Z\\"></path> + M100, 187.0000000000002 + V241.00000000000003 + H638.6666666666666 + V158.0000000000002 + H100 + Z + \\"></path> </clipPath> <path d=\\"M108,212.00000000000003L306,212.00000000000003L306,187.0000000000002L630.6666666666666,187.0000000000002\\" stroke=\\"url(#dag-grad55)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip65)\\"></path> </g> @@ -58,12 +61,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip66\\"> <path d=\\" - M100, 269.9999999999998 - V324 - H377.3333333333333 - V240.99999999999977 - H100 - Z\\"></path> + M100, 269.9999999999998 + V324 + H377.3333333333333 + V240.99999999999977 + H100 + Z + \\"></path> </clipPath> <path d=\\"M108,295L338.93333333333334,295L338.93333333333334,269.9999999999998L369.3333333333333,269.9999999999998\\" stroke=\\"url(#dag-grad56)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip66)\\"></path> </g> @@ -74,12 +78,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip67\\"> <path d=\\" - M100, 352.99999999999994 - V407.00000000000006 - H377.3333333333333 - V323.99999999999994 - H100 - Z\\"></path> + M100, 352.99999999999994 + V407.00000000000006 + H377.3333333333333 + V323.99999999999994 + H100 + Z + \\"></path> </clipPath> <path d=\\"M108,378.00000000000006L144.66666666666669,378.00000000000006L144.66666666666669,352.99999999999994L369.3333333333333,352.99999999999994\\" stroke=\\"url(#dag-grad57)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip67)\\"></path> </g> @@ -90,12 +95,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip68\\"> <path d=\\" - M361.3333333333333, 270.0000000000001 - V299.0000000000001 - H638.6666666666666 - V240.99999999999977 - H361.3333333333333 - Z\\"></path> + M361.3333333333333, 270.0000000000001 + V299.0000000000001 + H638.6666666666666 + V240.99999999999977 + H361.3333333333333 + Z + \\"></path> </clipPath> <path d=\\"M369.3333333333333,269.9999999999998L464,269.9999999999998L464,270.0000000000001L630.6666666666666,270.0000000000001\\" stroke=\\"url(#dag-grad58)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip68)\\"></path> </g> @@ -106,12 +112,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip69\\"> <path d=\\" - M361.3333333333333, 328.0000000000001 - V381.99999999999994 - H638.6666666666666 - V299.0000000000001 - H361.3333333333333 - Z\\"></path> + M361.3333333333333, 328.0000000000001 + V381.99999999999994 + H638.6666666666666 + V299.0000000000001 + H361.3333333333333 + Z + \\"></path> </clipPath> <path d=\\"M369.3333333333333,352.99999999999994L522,352.99999999999994L522,328.0000000000001L630.6666666666666,328.0000000000001\\" stroke=\\"url(#dag-grad59)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip69)\\"></path> </g> @@ -122,12 +129,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip70\\"> <path d=\\" - M361.3333333333333, 411 - V440 - H638.6666666666666 - V381.99999999999994 - H361.3333333333333 - Z\\"></path> + M361.3333333333333, 411 + V440 + H638.6666666666666 + V381.99999999999994 + H361.3333333333333 + Z + \\"></path> </clipPath> <path d=\\"M369.3333333333333,410.99999999999994L580,410.99999999999994L580,411L630.6666666666666,411\\" stroke=\\"url(#dag-grad60)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip70)\\"></path> </g> @@ -138,12 +146,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip71\\"> <path d=\\" - M622.6666666666666, 270.1890725105691 - V299.1890725105691 - H900 - V241.0000000000001 - H622.6666666666666 - Z\\"></path> + M622.6666666666666, 270.1890725105691 + V299.1890725105691 + H900 + V241.0000000000001 + H622.6666666666666 + Z + \\"></path> </clipPath> <path d=\\"M630.6666666666666,270.0000000000001L861.6,270.0000000000001L861.6,270.1890725105691L892,270.1890725105691\\" stroke=\\"url(#dag-grad61)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip71)\\"></path> </g> @@ -154,12 +163,13 @@ exports[`The DAG graph in the basic case renders the graph svg 1`] = ` </linearGradient> <clipPath id=\\"dag-clip72\\"> <path d=\\" - M622.6666666666666, 411 - V440 - H900 - V382 - H622.6666666666666 - Z\\"></path> + M622.6666666666666, 411 + V440 + H900 + V382 + H622.6666666666666 + Z + \\"></path> </clipPath> <path d=\\"M630.6666666666666,411L679.9999999999999,411L679.9999999999999,411L892,411\\" stroke=\\"url(#dag-grad62)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip72)\\"></path> </g> diff --git a/spec/frontend/pipelines/components/dag/dag_graph_spec.js b/spec/frontend/pipelines/components/dag/dag_graph_spec.js index bc576397967..a6f712b1984 100644 --- a/spec/frontend/pipelines/components/dag/dag_graph_spec.js +++ b/spec/frontend/pipelines/components/dag/dag_graph_spec.js @@ -1,6 +1,7 @@ import { mount } from '@vue/test-utils'; import DagGraph from '~/pipelines/components/dag/dag_graph.vue'; -import { createSankey, removeOrphanNodes } from '~/pipelines/components/dag/utils'; +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; +import { removeOrphanNodes } from '~/pipelines/components/dag/parsing_utils'; import { parsedData } from './mock_data'; describe('The DAG graph', () => { diff --git a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js new file mode 100644 index 00000000000..a50163411ed --- /dev/null +++ b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js @@ -0,0 +1,57 @@ +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; +import { parseData } from '~/pipelines/components/dag/parsing_utils'; +import { mockBaseData } from './mock_data'; + +describe('DAG visualization drawing utilities', () => { + const parsed = parseData(mockBaseData.stages); + + const layoutSettings = { + width: 200, + height: 200, + nodeWidth: 10, + nodePadding: 20, + paddingForLabels: 100, + }; + + const sankeyLayout = createSankey(layoutSettings)(parsed); + + describe('createSankey', () => { + it('returns a nodes data structure with expected d3-added properties', () => { + const exampleNode = sankeyLayout.nodes[0]; + expect(exampleNode).toHaveProperty('sourceLinks'); + expect(exampleNode).toHaveProperty('targetLinks'); + expect(exampleNode).toHaveProperty('depth'); + expect(exampleNode).toHaveProperty('layer'); + expect(exampleNode).toHaveProperty('x0'); + expect(exampleNode).toHaveProperty('x1'); + expect(exampleNode).toHaveProperty('y0'); + expect(exampleNode).toHaveProperty('y1'); + }); + + it('returns a links data structure with expected d3-added properties', () => { + const exampleLink = sankeyLayout.links[0]; + expect(exampleLink).toHaveProperty('source'); + expect(exampleLink).toHaveProperty('target'); + expect(exampleLink).toHaveProperty('width'); + expect(exampleLink).toHaveProperty('y0'); + expect(exampleLink).toHaveProperty('y1'); + }); + + describe('data structure integrity', () => { + const newObject = { name: 'bad-actor' }; + + beforeEach(() => { + sankeyLayout.nodes.unshift(newObject); + }); + + it('sankey does not propagate changes back to the original', () => { + expect(sankeyLayout.nodes[0]).toBe(newObject); + expect(parsed.nodes[0]).not.toBe(newObject); + }); + + afterEach(() => { + sankeyLayout.nodes.shift(); + }); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/dag/utils_spec.js b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js index be0e4f0ea8e..d9a1296e572 100644 --- a/spec/frontend/pipelines/components/dag/utils_spec.js +++ b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js @@ -3,11 +3,11 @@ import { makeLinksFromNodes, filterByAncestors, parseData, - createSankey, removeOrphanNodes, getMaxNodes, -} from '~/pipelines/components/dag/utils'; +} from '~/pipelines/components/dag/parsing_utils'; +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; import { mockBaseData } from './mock_data'; describe('DAG visualization parsing utilities', () => { @@ -105,44 +105,6 @@ describe('DAG visualization parsing utilities', () => { }); }); - describe('createSankey', () => { - it('returns a nodes data structure with expected d3-added properties', () => { - expect(sankeyLayout.nodes[0]).toHaveProperty('sourceLinks'); - expect(sankeyLayout.nodes[0]).toHaveProperty('targetLinks'); - expect(sankeyLayout.nodes[0]).toHaveProperty('depth'); - expect(sankeyLayout.nodes[0]).toHaveProperty('layer'); - expect(sankeyLayout.nodes[0]).toHaveProperty('x0'); - expect(sankeyLayout.nodes[0]).toHaveProperty('x1'); - expect(sankeyLayout.nodes[0]).toHaveProperty('y0'); - expect(sankeyLayout.nodes[0]).toHaveProperty('y1'); - }); - - it('returns a links data structure with expected d3-added properties', () => { - expect(sankeyLayout.links[0]).toHaveProperty('source'); - expect(sankeyLayout.links[0]).toHaveProperty('target'); - expect(sankeyLayout.links[0]).toHaveProperty('width'); - expect(sankeyLayout.links[0]).toHaveProperty('y0'); - expect(sankeyLayout.links[0]).toHaveProperty('y1'); - }); - - describe('data structure integrity', () => { - const newObject = { name: 'bad-actor' }; - - beforeEach(() => { - sankeyLayout.nodes.unshift(newObject); - }); - - it('sankey does not propagate changes back to the original', () => { - expect(sankeyLayout.nodes[0]).toBe(newObject); - expect(parsed.nodes[0]).not.toBe(newObject); - }); - - afterEach(() => { - sankeyLayout.nodes.shift(); - }); - }); - }); - describe('removeOrphanNodes', () => { it('removes sankey nodes that have no needs and are not needed', () => { const cleanedNodes = removeOrphanNodes(sankeyLayout.nodes); |