2 files changed, 128 insertions, 15 deletions

diff --git a/spec/frontend/pipelines/pipeline_graph/mock_data.js b/spec/frontend/pipelines/pipeline_graph/mock_data.js
index 7d1a7a79c7f..339aac9f349 100644
--- a/spec/frontend/pipelines/pipeline_graph/mock_data.js
+++ b/spec/frontend/pipelines/pipeline_graph/mock_data.js
@@ -1,5 +1,3 @@
-import { createUniqueLinkId } from '~/pipelines/components/graph_shared/drawing_utils';
-
 export const yamlString = `stages:
 - empty
 - build
@@ -41,10 +39,28 @@ deploy_a:
   script: echo hello
 `;
 
-const jobId1 = createUniqueLinkId('build', 'build_1');
-const jobId2 = createUniqueLinkId('test', 'test_1');
-const jobId3 = createUniqueLinkId('test', 'test_2');
-const jobId4 = createUniqueLinkId('deploy', 'deploy_1');
+export const pipelineDataWithNoNeeds = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+      ],
+    },
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'test_1',
+          jobs: [{ script: 'yarn test', stage: 'test' }],
+        },
+      ],
+    },
+  ],
+};
 
 export const pipelineData = {
   stages: [
@@ -54,7 +70,6 @@ export const pipelineData = {
         {
           name: 'build_1',
           jobs: [{ script: 'echo hello', stage: 'build' }],
-          id: jobId1,
         },
       ],
     },
@@ -64,12 +79,10 @@ export const pipelineData = {
         {
           name: 'test_1',
           jobs: [{ script: 'yarn test', stage: 'test' }],
-          id: jobId2,
         },
         {
           name: 'test_2',
           jobs: [{ script: 'yarn karma', stage: 'test' }],
-          id: jobId3,
         },
       ],
     },
@@ -79,7 +92,86 @@ export const pipelineData = {
         {
           name: 'deploy_1',
           jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['test_1'] }],
-          id: jobId4,
+        },
+      ],
+    },
+  ],
+};
+
+export const parallelNeedData = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          parallel: 3,
+          jobs: [
+            { script: 'echo hello', stage: 'build', name: 'build_1 1/3' },
+            { script: 'echo hello', stage: 'build', name: 'build_1 2/3' },
+            { script: 'echo hello', stage: 'build', name: 'build_1 3/3' },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'test_1',
+          jobs: [{ script: 'yarn test', stage: 'test', needs: ['build_1'] }],
+        },
+      ],
+    },
+  ],
+};
+
+export const largePipelineData = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+        {
+          name: 'build_2',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+        {
+          name: 'build_3',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+      ],
+    },
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'test_1',
+          jobs: [{ script: 'yarn test', stage: 'test', needs: ['build_2'] }],
+        },
+        {
+          name: 'test_2',
+          jobs: [{ script: 'yarn karma', stage: 'test', needs: ['build_2'] }],
+        },
+      ],
+    },
+    {
+      name: 'deploy',
+      groups: [
+        {
+          name: 'deploy_1',
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['test_1'] }],
+        },
+        {
+          name: 'deploy_2',
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['build_3'] }],
+        },
+        {
+          name: 'deploy_3',
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['test_2'] }],
         },
       ],
     },
@@ -94,9 +186,30 @@ export const singleStageData = {
         {
           name: 'build_1',
           jobs: [{ script: 'echo hello', stage: 'build' }],
-          id: jobId1,
         },
       ],
     },
   ],
 };
+
+export const rootRect = {
+  bottom: 463,
+  height: 271,
+  left: 236,
+  right: 1252,
+  top: 192,
+  width: 1016,
+  x: 236,
+  y: 192,
+};
+
+export const jobRect = {
+  bottom: 312,
+  height: 24,
+  left: 308,
+  right: 428,
+  top: 288,
+  width: 120,
+  x: 308,
+  y: 288,
+};
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
index b6b0a964383..718667fcc73 100644
--- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
+++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
@@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlAlert } from '@gitlab/ui';
-import { pipelineData, singleStageData } from './mock_data';
+import { shallowMount } from '@vue/test-utils';
 import { CI_CONFIG_STATUS_INVALID, CI_CONFIG_STATUS_VALID } from '~/pipeline_editor/constants';
-import { DRAW_FAILURE, EMPTY_PIPELINE_DATA, INVALID_CI_CONFIG } from '~/pipelines/constants';
+import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
-import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
+import { DRAW_FAILURE, EMPTY_PIPELINE_DATA, INVALID_CI_CONFIG } from '~/pipelines/constants';
+import { pipelineData, singleStageData } from './mock_data';
 
 describe('pipeline graph component', () => {
   const defaultProps = { pipelineData };