Add latest changes from gitlab-org/gitlab@master

2 files changed, 383 insertions, 0 deletions

diff --git a/spec/frontend/ci/pipeline_editor/components/graph/mock_data.js b/spec/frontend/ci/pipeline_editor/components/graph/mock_data.js
new file mode 100644
index 00000000000..db77e0a0573
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/graph/mock_data.js
@@ -0,0 +1,283 @@
+export const yamlString = `stages:
+- empty
+- build
+- test
+- deploy
+- final
+
+include:
+- template: 'Workflows/MergeRequest-Pipelines.gitlab-ci.yml'
+
+build_a:
+  stage: build
+  script: echo hello
+build_b:
+  stage: build
+  script: echo hello
+build_c:
+  stage: build
+  script: echo hello
+build_d:
+  stage: Queen
+  script: echo hello
+
+test_a:
+  stage: test
+  script: ls
+  needs: [build_a, build_b, build_c]
+test_b:
+  stage: test
+  script: ls
+  needs: [build_a, build_b, build_d]
+test_c:
+  stage: test
+  script: ls
+  needs: [build_a, build_b, build_c]
+
+deploy_a:
+  stage: deploy
+  script: echo hello
+`;
+
+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: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+      ],
+    },
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'test_1',
+          jobs: [{ script: 'yarn test', stage: 'test' }],
+        },
+        {
+          name: 'test_2',
+          jobs: [{ script: 'yarn karma', stage: 'test' }],
+        },
+      ],
+    },
+    {
+      name: 'deploy',
+      groups: [
+        {
+          name: 'deploy_1',
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['test_1'] }],
+        },
+      ],
+    },
+  ],
+};
+
+export const invalidNeedsData = {
+  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' }],
+        },
+        {
+          name: 'test_2',
+          jobs: [{ script: 'yarn karma', stage: 'test' }],
+        },
+      ],
+    },
+    {
+      name: 'deploy',
+      groups: [
+        {
+          name: 'deploy_1',
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['invalid_job'] }],
+        },
+      ],
+    },
+  ],
+};
+
+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 sameStageNeeds = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build', name: 'build_1' }],
+        },
+      ],
+    },
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_2',
+          jobs: [{ script: 'yarn test', stage: 'build', needs: ['build_1'] }],
+        },
+      ],
+    },
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_3',
+          jobs: [{ script: 'yarn test', stage: 'build', needs: ['build_2'] }],
+        },
+      ],
+    },
+  ],
+};
+
+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'] }],
+        },
+      ],
+    },
+  ],
+};
+
+export const singleStageData = {
+  stages: [
+    {
+      name: 'build',
+      groups: [
+        {
+          name: 'build_1',
+          jobs: [{ script: 'echo hello', stage: 'build' }],
+        },
+      ],
+    },
+  ],
+};
+
+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/ci/pipeline_editor/components/graph/pipeline_graph_spec.js b/spec/frontend/ci/pipeline_editor/components/graph/pipeline_graph_spec.js
new file mode 100644
index 00000000000..95edfb01cf0
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/graph/pipeline_graph_spec.js
@@ -0,0 +1,100 @@
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { setHTMLFixture } from 'helpers/fixtures';
+import { CI_CONFIG_STATUS_VALID } from '~/ci/pipeline_editor/constants';
+import LinksInner from '~/ci/pipeline_details/graph/components/links_inner.vue';
+import LinksLayer from '~/ci/common/private/job_links_layer.vue';
+import JobPill from '~/ci/pipeline_editor/components/graph/job_pill.vue';
+import PipelineGraph from '~/ci/pipeline_editor/components/graph/pipeline_graph.vue';
+import StageName from '~/ci/pipeline_editor/components/graph/stage_name.vue';
+import { pipelineData, singleStageData } from './mock_data';
+
+describe('pipeline graph component', () => {
+  const defaultProps = { pipelineData };
+  let wrapper;
+
+  const containerId = 'pipeline-graph-container-0';
+  setHTMLFixture(`<div id="${containerId}"></div>`);
+
+  const createComponent = (props = defaultProps) => {
+    return shallowMount(PipelineGraph, {
+      propsData: {
+        ...props,
+      },
+      stubs: { LinksLayer, LinksInner },
+      data() {
+        return {
+          measurements: {
+            width: 1000,
+            height: 1000,
+          },
+        };
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAllJobPills = () => wrapper.findAllComponents(JobPill);
+  const findAllStageNames = () => wrapper.findAllComponents(StageName);
+  const findLinksLayer = () => wrapper.findComponent(LinksLayer);
+  const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]');
+
+  describe('with `VALID` status', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        pipelineData: {
+          status: CI_CONFIG_STATUS_VALID,
+          stages: [{ name: 'hello', groups: [] }],
+        },
+      });
+    });
+
+    it('renders the graph with no status error', () => {
+      expect(findAlert().exists()).toBe(false);
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findLinksLayer().exists()).toBe(true);
+    });
+  });
+
+  describe('with only one stage', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ pipelineData: singleStageData });
+    });
+
+    it('renders the right number of stage titles', () => {
+      const expectedStagesLength = singleStageData.stages.length;
+
+      expect(findAllStageNames()).toHaveLength(expectedStagesLength);
+    });
+
+    it('renders the right number of job pills', () => {
+      // We count the number of jobs in the mock data
+      const expectedJobsLength = singleStageData.stages.reduce((acc, val) => {
+        return acc + val.groups.length;
+      }, 0);
+
+      expect(findAllJobPills()).toHaveLength(expectedJobsLength);
+    });
+  });
+
+  describe('with multiple stages and jobs', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders the right number of stage titles', () => {
+      const expectedStagesLength = pipelineData.stages.length;
+
+      expect(findAllStageNames()).toHaveLength(expectedStagesLength);
+    });
+
+    it('renders the right number of job pills', () => {
+      // We count the number of jobs in the mock data
+      const expectedJobsLength = pipelineData.stages.reduce((acc, val) => {
+        return acc + val.groups.length;
+      }, 0);
+
+      expect(findAllJobPills()).toHaveLength(expectedJobsLength);
+    });
+  });
+});