Add latest changes from gitlab-org/gitlab@13-3-stable-ee

21 files changed, 496 insertions, 398 deletions

diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js
index 7dea6d819b9..989f6c17197 100644
--- a/spec/frontend/pipelines/components/dag/dag_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_spec.js
@@ -1,7 +1,4 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import waitForPromises from 'helpers/wait_for_promises';
 import { GlAlert, GlEmptyState } from '@gitlab/ui';
 import Dag from '~/pipelines/components/dag/dag.vue';
 import DagGraph from '~/pipelines/components/dag/dag_graph.vue';
@@ -11,13 +8,11 @@ import {
   ADD_NOTE,
   REMOVE_NOTE,
   REPLACE_NOTES,
-  DEFAULT,
   PARSE_FAILURE,
-  LOAD_FAILURE,
   UNSUPPORTED_DATA,
 } from '~/pipelines/components/dag//constants';
 import {
-  mockBaseData,
+  mockParsedGraphQLNodes,
   tooSmallGraph,
   unparseableGraph,
   graphWithoutDependencies,
@@ -27,7 +22,6 @@ import {
 
 describe('Pipeline DAG graph wrapper', () => {
   let wrapper;
-  let mock;
   const getAlert = () => wrapper.find(GlAlert);
   const getAllAlerts = () => wrapper.findAll(GlAlert);
   const getGraph = () => wrapper.find(DagGraph);
@@ -35,45 +29,46 @@ describe('Pipeline DAG graph wrapper', () => {
   const getErrorText = type => wrapper.vm.$options.errorTexts[type];
   const getEmptyState = () => wrapper.find(GlEmptyState);
 
-  const dataPath = '/root/test/pipelines/90/dag.json';
-
-  const createComponent = (propsData = {}, method = shallowMount) => {
+  const createComponent = ({
+    graphData = mockParsedGraphQLNodes,
+    provideOverride = {},
+    method = shallowMount,
+  } = {}) => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
 
     wrapper = method(Dag, {
-      propsData: {
+      provide: {
+        pipelineProjectPath: 'root/abc-dag',
+        pipelineIid: '1',
         emptySvgPath: '/my-svg',
         dagDocPath: '/my-doc',
-        ...propsData,
+        ...provideOverride,
       },
       data() {
         return {
+          graphData,
           showFailureAlert: false,
         };
       },
     });
   };
 
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
   afterEach(() => {
-    mock.restore();
     wrapper.destroy();
     wrapper = null;
   });
 
-  describe('when there is no dataUrl', () => {
+  describe('when a query argument is undefined', () => {
     beforeEach(() => {
-      createComponent({ graphUrl: undefined });
+      createComponent({
+        provideOverride: { pipelineProjectPath: undefined },
+        graphData: null,
+      });
     });
 
-    it('shows the DEFAULT alert and not the graph', () => {
-      expect(getAlert().exists()).toBe(true);
-      expect(getAlert().text()).toBe(getErrorText(DEFAULT));
+    it('does not render the graph', async () => {
       expect(getGraph().exists()).toBe(false);
     });
 
@@ -82,36 +77,12 @@ describe('Pipeline DAG graph wrapper', () => {
     });
   });
 
-  describe('when there is a dataUrl', () => {
-    describe('but the data fetch fails', () => {
+  describe('when all query variables are defined', () => {
+    describe('but the parse fails', () => {
       beforeEach(async () => {
-        mock.onGet(dataPath).replyOnce(500);
-        createComponent({ graphUrl: dataPath });
-
-        await wrapper.vm.$nextTick();
-
-        return waitForPromises();
-      });
-
-      it('shows the LOAD_FAILURE alert and not the graph', () => {
-        expect(getAlert().exists()).toBe(true);
-        expect(getAlert().text()).toBe(getErrorText(LOAD_FAILURE));
-        expect(getGraph().exists()).toBe(false);
-      });
-
-      it('does not render the empty state', () => {
-        expect(getEmptyState().exists()).toBe(false);
-      });
-    });
-
-    describe('the data fetch succeeds but the parse fails', () => {
-      beforeEach(async () => {
-        mock.onGet(dataPath).replyOnce(200, unparseableGraph);
-        createComponent({ graphUrl: dataPath });
-
-        await wrapper.vm.$nextTick();
-
-        return waitForPromises();
+        createComponent({
+          graphData: unparseableGraph,
+        });
       });
 
       it('shows the PARSE_FAILURE alert and not the graph', () => {
@@ -125,19 +96,12 @@ describe('Pipeline DAG graph wrapper', () => {
       });
     });
 
-    describe('and the data fetch and parse succeeds', () => {
+    describe('parse succeeds', () => {
       beforeEach(async () => {
-        mock.onGet(dataPath).replyOnce(200, mockBaseData);
-        createComponent({ graphUrl: dataPath }, mount);
-
-        await wrapper.vm.$nextTick();
-
-        return waitForPromises();
+        createComponent({ method: mount });
       });
 
-      it('shows the graph and the beta alert', () => {
-        expect(getAllAlerts().length).toBe(1);
-        expect(getAlert().text()).toContain('This feature is currently in beta.');
+      it('shows the graph', () => {
         expect(getGraph().exists()).toBe(true);
       });
 
@@ -146,14 +110,11 @@ describe('Pipeline DAG graph wrapper', () => {
       });
     });
 
-    describe('the data fetch and parse succeeds, but the resulting graph is too small', () => {
+    describe('parse succeeds, but the resulting graph is too small', () => {
       beforeEach(async () => {
-        mock.onGet(dataPath).replyOnce(200, tooSmallGraph);
-        createComponent({ graphUrl: dataPath });
-
-        await wrapper.vm.$nextTick();
-
-        return waitForPromises();
+        createComponent({
+          graphData: tooSmallGraph,
+        });
       });
 
       it('shows the UNSUPPORTED_DATA alert and not the graph', () => {
@@ -167,19 +128,16 @@ describe('Pipeline DAG graph wrapper', () => {
       });
     });
 
-    describe('the data fetch succeeds but the returned data is empty', () => {
+    describe('the returned data is empty', () => {
       beforeEach(async () => {
-        mock.onGet(dataPath).replyOnce(200, graphWithoutDependencies);
-        createComponent({ graphUrl: dataPath }, mount);
-
-        await wrapper.vm.$nextTick();
-
-        return waitForPromises();
+        createComponent({
+          method: mount,
+          graphData: graphWithoutDependencies,
+        });
       });
 
       it('does not render an error alert or the graph', () => {
-        expect(getAllAlerts().length).toBe(1);
-        expect(getAlert().text()).toContain('This feature is currently in beta.');
+        expect(getAllAlerts().length).toBe(0);
         expect(getGraph().exists()).toBe(false);
       });
 
@@ -191,12 +149,7 @@ describe('Pipeline DAG graph wrapper', () => {
 
   describe('annotations', () => {
     beforeEach(async () => {
-      mock.onGet(dataPath).replyOnce(200, mockBaseData);
-      createComponent({ graphUrl: dataPath }, mount);
-
-      await wrapper.vm.$nextTick();
-
-      return waitForPromises();
+      createComponent();
     });
 
     it('toggles on link mouseover and mouseout', async () => {
diff --git a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
index a50163411ed..37a7d07485b 100644
--- a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
+++ b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js
@@ -1,9 +1,9 @@
 import { createSankey } from '~/pipelines/components/dag/drawing_utils';
 import { parseData } from '~/pipelines/components/dag/parsing_utils';
-import { mockBaseData } from './mock_data';
+import { mockParsedGraphQLNodes } from './mock_data';
 
 describe('DAG visualization drawing utilities', () => {
-  const parsed = parseData(mockBaseData.stages);
+  const parsed = parseData(mockParsedGraphQLNodes);
 
   const layoutSettings = {
     width: 200,
diff --git a/spec/frontend/pipelines/components/dag/mock_data.js b/spec/frontend/pipelines/components/dag/mock_data.js
index 3b39b9cd21c..e7e93804195 100644
--- a/spec/frontend/pipelines/components/dag/mock_data.js
+++ b/spec/frontend/pipelines/components/dag/mock_data.js
@@ -1,127 +1,56 @@
-/*
-  It is important that the simple base include parallel jobs
-  as well as non-parallel jobs with spaces in the name to prevent
-  us relying on spaces as an indicator.
-*/
-export const mockBaseData = {
-  stages: [
-    {
-      name: 'test',
-      groups: [
-        {
-          name: 'jest',
-          size: 2,
-          jobs: [{ name: 'jest 1/2', needs: ['frontend fixtures'] }, { name: 'jest 2/2' }],
-        },
-        {
-          name: 'rspec',
-          size: 1,
-          jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }],
-        },
-      ],
-    },
-    {
-      name: 'fixtures',
-      groups: [
-        {
-          name: 'frontend fixtures',
-          size: 1,
-          jobs: [{ name: 'frontend fixtures' }],
-        },
-      ],
-    },
-    {
-      name: 'un-needed',
-      groups: [
-        {
-          name: 'un-needed',
-          size: 1,
-          jobs: [{ name: 'un-needed' }],
-        },
-      ],
-    },
-  ],
-};
-
-export const tooSmallGraph = {
-  stages: [
-    {
-      name: 'test',
-      groups: [
-        {
-          name: 'jest',
-          size: 2,
-          jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }],
-        },
-        {
-          name: 'rspec',
-          size: 1,
-          jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }],
-        },
-      ],
-    },
-    {
-      name: 'fixtures',
-      groups: [
-        {
-          name: 'frontend fixtures',
-          size: 1,
-          jobs: [{ name: 'frontend fixtures' }],
-        },
-      ],
-    },
-    {
-      name: 'un-needed',
-      groups: [
-        {
-          name: 'un-needed',
-          size: 1,
-          jobs: [{ name: 'un-needed' }],
-        },
-      ],
-    },
-  ],
-};
+export const tooSmallGraph = [
+  {
+    category: 'test',
+    name: 'jest',
+    size: 2,
+    jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }],
+  },
+  {
+    category: 'test',
+    name: 'rspec',
+    size: 1,
+    jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }],
+  },
+  {
+    category: 'fixtures',
+    name: 'frontend fixtures',
+    size: 1,
+    jobs: [{ name: 'frontend fixtures' }],
+  },
+  {
+    category: 'un-needed',
+    name: 'un-needed',
+    size: 1,
+    jobs: [{ name: 'un-needed' }],
+  },
+];
 
-export const graphWithoutDependencies = {
-  stages: [
-    {
-      name: 'test',
-      groups: [
-        {
-          name: 'jest',
-          size: 2,
-          jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }],
-        },
-        {
-          name: 'rspec',
-          size: 1,
-          jobs: [{ name: 'rspec' }],
-        },
-      ],
-    },
-    {
-      name: 'fixtures',
-      groups: [
-        {
-          name: 'frontend fixtures',
-          size: 1,
-          jobs: [{ name: 'frontend fixtures' }],
-        },
-      ],
-    },
-    {
-      name: 'un-needed',
-      groups: [
-        {
-          name: 'un-needed',
-          size: 1,
-          jobs: [{ name: 'un-needed' }],
-        },
-      ],
-    },
-  ],
-};
+export const graphWithoutDependencies = [
+  {
+    category: 'test',
+    name: 'jest',
+    size: 2,
+    jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }],
+  },
+  {
+    category: 'test',
+    name: 'rspec',
+    size: 1,
+    jobs: [{ name: 'rspec' }],
+  },
+  {
+    category: 'fixtures',
+    name: 'frontend fixtures',
+    size: 1,
+    jobs: [{ name: 'frontend fixtures' }],
+  },
+  {
+    category: 'un-needed',
+    name: 'un-needed',
+    size: 1,
+    jobs: [{ name: 'un-needed' }],
+  },
+];
 
 export const unparseableGraph = [
   {
@@ -468,3 +397,264 @@ export const multiNote = {
     },
   },
 };
+
+/*
+  It is important that the base include parallel jobs
+  as well as non-parallel jobs with spaces in the name to prevent
+  us relying on spaces as an indicator.
+*/
+
+export const mockParsedGraphQLNodes = [
+  {
+    category: 'build',
+    name: 'build_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'build_a',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'build',
+    name: 'build_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'build_b',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'test',
+    name: 'test_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'test_a',
+        needs: ['build_a'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'test',
+    name: 'test_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'test_b',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'test',
+    name: 'test_c',
+    size: 1,
+    jobs: [
+      {
+        name: 'test_c',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'test',
+    name: 'test_d',
+    size: 1,
+    jobs: [
+      {
+        name: 'test_d',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'post-test',
+    name: 'post_test_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'post_test_a',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'post-test',
+    name: 'post_test_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'post_test_b',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'post-test',
+    name: 'post_test_c',
+    size: 1,
+    jobs: [
+      {
+        name: 'post_test_c',
+        needs: ['test_b', 'test_a'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'staging',
+    name: 'staging_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'staging_a',
+        needs: ['post_test_a'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'staging',
+    name: 'staging_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'staging_b',
+        needs: ['post_test_b'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'staging',
+    name: 'staging_c',
+    size: 1,
+    jobs: [
+      {
+        name: 'staging_c',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'staging',
+    name: 'staging_d',
+    size: 1,
+    jobs: [
+      {
+        name: 'staging_d',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'staging',
+    name: 'staging_e',
+    size: 1,
+    jobs: [
+      {
+        name: 'staging_e',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'canary',
+    name: 'canary_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'canary_a',
+        needs: ['staging_b', 'staging_a'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'canary',
+    name: 'canary_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'canary_b',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'canary',
+    name: 'canary_c',
+    size: 1,
+    jobs: [
+      {
+        name: 'canary_c',
+        needs: ['staging_b'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'production',
+    name: 'production_a',
+    size: 1,
+    jobs: [
+      {
+        name: 'production_a',
+        needs: ['canary_a'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'production',
+    name: 'production_b',
+    size: 1,
+    jobs: [
+      {
+        name: 'production_b',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'production',
+    name: 'production_c',
+    size: 1,
+    jobs: [
+      {
+        name: 'production_c',
+        needs: [],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+  {
+    category: 'production',
+    name: 'production_d',
+    size: 1,
+    jobs: [
+      {
+        name: 'production_d',
+        needs: ['canary_c'],
+      },
+    ],
+    __typename: 'CiGroup',
+  },
+];
diff --git a/spec/frontend/pipelines/components/dag/parsing_utils_spec.js b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js
index d9a1296e572..e93fa8e6760 100644
--- a/spec/frontend/pipelines/components/dag/parsing_utils_spec.js
+++ b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js
@@ -1,5 +1,5 @@
 import {
-  createNodesStructure,
+  createNodeDict,
   makeLinksFromNodes,
   filterByAncestors,
   parseData,
@@ -8,56 +8,17 @@ import {
 } from '~/pipelines/components/dag/parsing_utils';
 
 import { createSankey } from '~/pipelines/components/dag/drawing_utils';
-import { mockBaseData } from './mock_data';
+import { mockParsedGraphQLNodes } from './mock_data';
 
 describe('DAG visualization parsing utilities', () => {
-  const { nodes, nodeDict } = createNodesStructure(mockBaseData.stages);
-  const unfilteredLinks = makeLinksFromNodes(nodes, nodeDict);
-  const parsed = parseData(mockBaseData.stages);
-
-  const layoutSettings = {
-    width: 200,
-    height: 200,
-    nodeWidth: 10,
-    nodePadding: 20,
-    paddingForLabels: 100,
-  };
-
-  const sankeyLayout = createSankey(layoutSettings)(parsed);
-
-  describe('createNodesStructure', () => {
-    const parallelGroupName = 'jest';
-    const parallelJobName = 'jest 1/2';
-    const singleJobName = 'frontend fixtures';
-
-    const { name, jobs, size } = mockBaseData.stages[0].groups[0];
-
-    it('returns the expected node structure', () => {
-      expect(nodes[0]).toHaveProperty('category', mockBaseData.stages[0].name);
-      expect(nodes[0]).toHaveProperty('name', name);
-      expect(nodes[0]).toHaveProperty('jobs', jobs);
-      expect(nodes[0]).toHaveProperty('size', size);
-    });
-
-    it('adds needs to top level of nodeDict entries', () => {
-      expect(nodeDict[parallelGroupName]).toHaveProperty('needs');
-      expect(nodeDict[parallelJobName]).toHaveProperty('needs');
-      expect(nodeDict[singleJobName]).toHaveProperty('needs');
-    });
-
-    it('makes entries in nodeDict for jobs and parallel jobs', () => {
-      const nodeNames = Object.keys(nodeDict);
-
-      expect(nodeNames.includes(parallelGroupName)).toBe(true);
-      expect(nodeNames.includes(parallelJobName)).toBe(true);
-      expect(nodeNames.includes(singleJobName)).toBe(true);
-    });
-  });
+  const nodeDict = createNodeDict(mockParsedGraphQLNodes);
+  const unfilteredLinks = makeLinksFromNodes(mockParsedGraphQLNodes, nodeDict);
+  const parsed = parseData(mockParsedGraphQLNodes);
 
   describe('makeLinksFromNodes', () => {
     it('returns the expected link structure', () => {
-      expect(unfilteredLinks[0]).toHaveProperty('source', 'frontend fixtures');
-      expect(unfilteredLinks[0]).toHaveProperty('target', 'jest');
+      expect(unfilteredLinks[0]).toHaveProperty('source', 'build_a');
+      expect(unfilteredLinks[0]).toHaveProperty('target', 'test_a');
       expect(unfilteredLinks[0]).toHaveProperty('value', 10);
     });
   });
@@ -107,8 +68,22 @@ describe('DAG visualization parsing utilities', () => {
 
   describe('removeOrphanNodes', () => {
     it('removes sankey nodes that have no needs and are not needed', () => {
+      const layoutSettings = {
+        width: 200,
+        height: 200,
+        nodeWidth: 10,
+        nodePadding: 20,
+        paddingForLabels: 100,
+      };
+
+      const sankeyLayout = createSankey(layoutSettings)(parsed);
       const cleanedNodes = removeOrphanNodes(sankeyLayout.nodes);
-      expect(cleanedNodes).toHaveLength(sankeyLayout.nodes.length - 1);
+      /*
+        These lengths are determined by the mock data.
+        If the data changes, the numbers may also change.
+      */
+      expect(parsed.nodes).toHaveLength(21);
+      expect(cleanedNodes).toHaveLength(12);
     });
   });
 
diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index add7b56845e..c5b7318d3af 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -1,10 +1,10 @@
-import Api from '~/api';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { GlFilteredSearch } from '@gitlab/ui';
+import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesFilteredSearch from '~/pipelines/components/pipelines_list/pipelines_filtered_search.vue';
 import { users, mockSearch, branches, tags } from '../mock_data';
-import { GlFilteredSearch } from '@gitlab/ui';
 
 describe('Pipelines filtered search', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js
index 3c5938cfa1f..ab477292bc1 100644
--- a/spec/frontend/pipelines/graph/action_component_spec.js
+++ b/spec/frontend/pipelines/graph/action_component_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
@@ -7,7 +8,7 @@ import ActionComponent from '~/pipelines/components/graph/action_component.vue';
 describe('pipeline graph action component', () => {
   let wrapper;
   let mock;
-  const findButton = () => wrapper.find('button');
+  const findButton = () => wrapper.find(GlButton);
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index 9731ce3f8a6..1389649abea 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import { setHTMLFixture } from 'helpers/fixtures';
 import PipelineStore from '~/pipelines/stores/pipeline_store';
 import graphComponent from '~/pipelines/components/graph/graph_component.vue';
 import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
@@ -7,7 +8,6 @@ import linkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines
 import graphJSON from './mock_data';
 import linkedPipelineJSON from './linked_pipelines_mock_data';
 import PipelinesMediator from '~/pipelines/pipeline_details_mediator';
-import { setHTMLFixture } from 'helpers/fixtures';
 
 describe('graph component', () => {
   const store = new PipelineStore();
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index 133d5695afb..59121c54ff3 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 
@@ -12,7 +13,7 @@ const invalidTriggeredPipelineId = mockPipeline.project.id + 5;
 describe('Linked pipeline', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find('button');
+  const findButton = () => wrapper.find(GlButton);
   const findPipelineLabel = () => wrapper.find('[data-testid="downstream-pipeline-label"]');
   const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
 
@@ -42,9 +43,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render a button', () => {
-      const linkElement = wrapper.find('.js-linked-pipeline-content');
-
-      expect(linkElement.exists()).toBe(true);
+      expect(findButton().exists()).toBe(true);
     });
 
     it('should render the project name', () => {
@@ -62,7 +61,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should have a ci-status child component', () => {
-      expect(wrapper.find('.js-linked-pipeline-status').exists()).toBe(true);
+      expect(wrapper.find(CiStatus).exists()).toBe(true);
     });
 
     it('should render the pipeline id', () => {
@@ -77,15 +76,14 @@ describe('Linked pipeline', () => {
     });
 
     it('should render the tooltip text as the title attribute', () => {
-      const tooltipRef = wrapper.find('.js-linked-pipeline-content');
-      const titleAttr = tooltipRef.attributes('title');
+      const titleAttr = findButton().attributes('title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
       expect(titleAttr).toContain(mockPipeline.details.status.label);
     });
 
-    it('does not render the loading icon when isLoading is false', () => {
-      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(false);
+    it('sets the loading prop to false', () => {
+      expect(findButton().props('loading')).toBe(false);
     });
 
     it('should display multi-project label when pipeline project id is not the same as triggered pipeline project id', () => {
@@ -132,8 +130,8 @@ describe('Linked pipeline', () => {
       createWrapper(props);
     });
 
-    it('renders a loading icon', () => {
-      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(true);
+    it('sets the loading prop to true', () => {
+      expect(findButton().props('loading')).toBe(true);
     });
   });
 
diff --git a/spec/frontend/pipelines/header_component_spec.js b/spec/frontend/pipelines/header_component_spec.js
index 1c3a6c545a0..5388d624d3c 100644
--- a/spec/frontend/pipelines/header_component_spec.js
+++ b/spec/frontend/pipelines/header_component_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
 import HeaderComponent from '~/pipelines/components/header_component.vue';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import eventHub from '~/pipelines/event_hub';
-import { GlModal } from '@gitlab/ui';
 
 describe('Pipeline details header', () => {
   let wrapper;
@@ -85,13 +85,13 @@ describe('Pipeline details header', () => {
     });
 
     it('should call postAction when retry button action is clicked', () => {
-      wrapper.find('.js-retry-button').vm.$emit('click');
+      wrapper.find('[data-testid="retryButton"]').vm.$emit('click');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
     });
 
     it('should call postAction when cancel button action is clicked', () => {
-      wrapper.find('.js-btn-cancel-pipeline').vm.$emit('click');
+      wrapper.find('[data-testid="cancelPipeline"]').vm.$emit('click');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
     });
diff --git a/spec/frontend/pipelines/pipeline_details_mediator_spec.js b/spec/frontend/pipelines/pipeline_details_mediator_spec.js
index 083e97666ed..d6699a43b54 100644
--- a/spec/frontend/pipelines/pipeline_details_mediator_spec.js
+++ b/spec/frontend/pipelines/pipeline_details_mediator_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import PipelineMediator from '~/pipelines/pipeline_details_mediator';
-import waitForPromises from 'helpers/wait_for_promises';
 
 describe('PipelineMdediator', () => {
   let mediator;
diff --git a/spec/frontend/pipelines/pipelines_actions_spec.js b/spec/frontend/pipelines/pipelines_actions_spec.js
index aef54d94974..cce4c2dfa7b 100644
--- a/spec/frontend/pipelines/pipelines_actions_spec.js
+++ b/spec/frontend/pipelines/pipelines_actions_spec.js
@@ -1,11 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'spec/test_constants';
+import { GlDeprecatedButton } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesActions from '~/pipelines/components/pipelines_list/pipelines_actions.vue';
-import { GlDeprecatedButton } from '@gitlab/ui';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
-import waitForPromises from 'helpers/wait_for_promises';
 
 describe('Pipelines Actions dropdown', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/pipelines_artifacts_spec.js b/spec/frontend/pipelines/pipelines_artifacts_spec.js
index 512205c3fc3..83f6cb68eba 100644
--- a/spec/frontend/pipelines/pipelines_artifacts_spec.js
+++ b/spec/frontend/pipelines/pipelines_artifacts_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 import { GlLink } from '@gitlab/ui';
+import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index 66446b9aa1d..b0ad6bbd228 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -1,16 +1,16 @@
-import Api from '~/api';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
 import waitForPromises from 'helpers/wait_for_promises';
+import { GlFilteredSearch } from '@gitlab/ui';
+import Api from '~/api';
+import axios from '~/lib/utils/axios_utils';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
 import { pipelineWithStages, stageReply, users, mockSearch, branches } from './mock_data';
 import { RAW_TEXT_WARNING } from '~/pipelines/constants';
-import { GlFilteredSearch } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 
-jest.mock('~/flash', () => jest.fn());
+jest.mock('~/flash');
 
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
diff --git a/spec/frontend/pipelines/stage_spec.js b/spec/frontend/pipelines/stage_spec.js
index 547f8994ca5..e134b81856b 100644
--- a/spec/frontend/pipelines/stage_spec.js
+++ b/spec/frontend/pipelines/stage_spec.js
@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import StageComponent from '~/pipelines/components/pipelines_list/stage.vue';
 import eventHub from '~/pipelines/event_hub';
 import { stageReply } from './mock_data';
-import waitForPromises from 'helpers/wait_for_promises';
 
 describe('Pipelines stage component', () => {
   let wrapper;
diff --git a/spec/frontend/pipelines/test_reports/stores/actions_spec.js b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
index d4647c55a53..1809f15a6e6 100644
--- a/spec/frontend/pipelines/test_reports/stores/actions_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
@@ -5,7 +5,7 @@ import * as actions from '~/pipelines/stores/test_reports/actions';
 import * as types from '~/pipelines/stores/test_reports/mutation_types';
 import { TEST_HOST } from '../../../helpers/test_constants';
 import testAction from '../../../helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 jest.mock('~/flash.js');
 
@@ -16,14 +16,13 @@ describe('Actions TestReports Store', () => {
   const testReports = getJSONFixture('pipelines/test_report.json');
   const summary = { total_count: 1 };
 
-  const fullReportEndpoint = `${TEST_HOST}/test_reports.json`;
+  const suiteEndpoint = `${TEST_HOST}/tests/:suite_name.json`;
   const summaryEndpoint = `${TEST_HOST}/test_reports/summary.json`;
   const defaultState = {
-    fullReportEndpoint,
+    suiteEndpoint,
     summaryEndpoint,
     testReports: {},
     selectedSuite: null,
-    useBuildSummaryReport: false,
   };
 
   beforeEach(() => {
@@ -40,89 +39,63 @@ describe('Actions TestReports Store', () => {
       mock.onGet(summaryEndpoint).replyOnce(200, summary, {});
     });
 
-    describe('when useBuildSummaryReport in state is true', () => {
-      it('sets testReports and shows tests', done => {
-        testAction(
-          actions.fetchSummary,
-          null,
-          { ...state, useBuildSummaryReport: true },
-          [{ type: types.SET_SUMMARY, payload: summary }],
-          [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-          done,
-        );
-      });
-
-      it('should create flash on API error', done => {
-        testAction(
-          actions.fetchSummary,
-          null,
-          {
-            summaryEndpoint: null,
-            useBuildSummaryReport: true,
-          },
-          [],
-          [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
-          () => {
-            expect(createFlash).toHaveBeenCalled();
-            done();
-          },
-        );
-      });
+    it('sets testReports and shows tests', done => {
+      testAction(
+        actions.fetchSummary,
+        null,
+        state,
+        [{ type: types.SET_SUMMARY, payload: summary }],
+        [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
+        done,
+      );
     });
 
-    describe('when useBuildSummaryReport in state is false', () => {
-      it('sets testReports and shows tests', done => {
-        testAction(
-          actions.fetchSummary,
-          null,
-          state,
-          [{ type: types.SET_SUMMARY, payload: summary }],
-          [],
-          done,
-        );
-      });
-
-      it('should create flash on API error', done => {
-        testAction(
-          actions.fetchSummary,
-          null,
-          {
-            summaryEndpoint: null,
-          },
-          [],
-          [],
-          () => {
-            expect(createFlash).toHaveBeenCalled();
-            done();
-          },
-        );
-      });
+    it('should create flash on API error', done => {
+      testAction(
+        actions.fetchSummary,
+        null,
+        { summaryEndpoint: null },
+        [],
+        [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
+        () => {
+          expect(createFlash).toHaveBeenCalled();
+          done();
+        },
+      );
     });
   });
 
-  describe('fetch full report', () => {
+  describe('fetch test suite', () => {
     beforeEach(() => {
-      mock.onGet(fullReportEndpoint).replyOnce(200, testReports, {});
+      const buildIds = [1];
+      testReports.test_suites[0].build_ids = buildIds;
+      const endpoint = suiteEndpoint.replace(':suite_name', testReports.test_suites[0].name);
+      mock
+        .onGet(endpoint, { params: { build_ids: buildIds } })
+        .replyOnce(200, testReports.test_suites[0], {});
     });
 
-    it('sets testReports and shows tests', done => {
+    it('sets test suite and shows tests', done => {
+      const suite = testReports.test_suites[0];
+      const index = 0;
+
       testAction(
-        actions.fetchFullReport,
-        null,
-        state,
-        [{ type: types.SET_REPORTS, payload: testReports }],
+        actions.fetchTestSuite,
+        index,
+        { ...state, testReports },
+        [{ type: types.SET_SUITE, payload: { suite, index } }],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
         done,
       );
     });
 
     it('should create flash on API error', done => {
+      const index = 0;
+
       testAction(
-        actions.fetchFullReport,
-        null,
-        {
-          fullReportEndpoint: null,
-        },
+        actions.fetchTestSuite,
+        index,
+        { ...state, testReports, suiteEndpoint: null },
         [],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
         () => {
@@ -131,6 +104,15 @@ describe('Actions TestReports Store', () => {
         },
       );
     });
+
+    describe('when we already have the suite data', () => {
+      it('should not fetch suite', done => {
+        const index = 0;
+        testReports.test_suites[0].hasFullSuite = true;
+
+        testAction(actions.fetchTestSuite, index, { ...state, testReports }, [], [], done);
+      });
+    });
   });
 
   describe('set selected suite index', () => {
diff --git a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
index f4cc5c4bc5d..b935029bc6a 100644
--- a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
@@ -12,20 +12,24 @@ describe('Mutations TestReports Store', () => {
     testReports: {},
     selectedSuite: null,
     isLoading: false,
-    hasFullReport: false,
   };
 
   beforeEach(() => {
     mockState = { ...defaultState };
   });
 
-  describe('set reports', () => {
-    it('should set testReports', () => {
-      const expectedState = { ...mockState, testReports };
-      mutations[types.SET_REPORTS](mockState, testReports);
+  describe('set suite', () => {
+    it('should set the suite at the given index', () => {
+      mockState.testReports = testReports;
+      const suite = { name: 'test_suite' };
+      const index = 0;
+      const expectedState = { ...mockState };
+      expectedState.testReports.test_suites[index] = { suite, hasFullSuite: true };
+      mutations[types.SET_SUITE](mockState, { suite, index });
 
-      expect(mockState.testReports).toEqual(expectedState.testReports);
-      expect(mockState.hasFullReport).toBe(true);
+      expect(mockState.testReports.test_suites[index]).toEqual(
+        expectedState.testReports.test_suites[index],
+      );
     });
   });
 
@@ -40,10 +44,21 @@ describe('Mutations TestReports Store', () => {
 
   describe('set summary', () => {
     it('should set summary', () => {
-      const summary = { total_count: 1 };
+      const summary = {
+        total: { time: 0, count: 10, success: 1, failed: 2, skipped: 3, error: 4 },
+      };
+      const expectedSummary = {
+        ...summary,
+        total_time: 0,
+        total_count: 10,
+        success_count: 1,
+        failed_count: 2,
+        skipped_count: 3,
+        error_count: 4,
+      };
       mutations[types.SET_SUMMARY](mockState, summary);
 
-      expect(mockState.testReports).toEqual(summary);
+      expect(mockState.testReports).toEqual(expectedSummary);
     });
   });
 
diff --git a/spec/frontend/pipelines/test_reports/test_reports_spec.js b/spec/frontend/pipelines/test_reports/test_reports_spec.js
index ef0bcffabe3..a709edf5184 100644
--- a/spec/frontend/pipelines/test_reports/test_reports_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_reports_spec.js
@@ -22,7 +22,7 @@ describe('Test reports app', () => {
   const testSummaryTable = () => wrapper.find(TestSummaryTable);
 
   const actionSpies = {
-    fetchFullReport: jest.fn(),
+    fetchTestSuite: jest.fn(),
     fetchSummary: jest.fn(),
     setSelectedSuiteIndex: jest.fn(),
     removeSelectedSuiteIndex: jest.fn(),
@@ -91,28 +91,14 @@ describe('Test reports app', () => {
   });
 
   describe('when a suite is clicked', () => {
-    describe('when the full test report has already been received', () => {
-      beforeEach(() => {
-        createComponent({ hasFullReport: true });
-        testSummaryTable().vm.$emit('row-click', 0);
-      });
-
-      it('should only call setSelectedSuiteIndex', () => {
-        expect(actionSpies.setSelectedSuiteIndex).toHaveBeenCalled();
-        expect(actionSpies.fetchFullReport).not.toHaveBeenCalled();
-      });
+    beforeEach(() => {
+      createComponent({ hasFullReport: true });
+      testSummaryTable().vm.$emit('row-click', 0);
     });
 
-    describe('when the full test report has not been received', () => {
-      beforeEach(() => {
-        createComponent({ hasFullReport: false });
-        testSummaryTable().vm.$emit('row-click', 0);
-      });
-
-      it('should call setSelectedSuiteIndex and fetchFullReport', () => {
-        expect(actionSpies.setSelectedSuiteIndex).toHaveBeenCalled();
-        expect(actionSpies.fetchFullReport).toHaveBeenCalled();
-      });
+    it('should call setSelectedSuiteIndex and fetchTestSuite', () => {
+      expect(actionSpies.setSelectedSuiteIndex).toHaveBeenCalled();
+      expect(actionSpies.fetchTestSuite).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
index 65bffe7039a..3a4aa94571e 100644
--- a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
@@ -23,6 +23,8 @@ describe('Test reports suite table', () => {
   const noCasesMessage = () => wrapper.find('.js-no-test-cases');
   const allCaseRows = () => wrapper.findAll('.js-case-row');
   const findCaseRowAtIndex = index => wrapper.findAll('.js-case-row').at(index);
+  const allCaseNames = () =>
+    wrapper.findAll('[data-testid="caseName"]').wrappers.map(el => el.attributes('text'));
   const findIconForRow = (row, status) => row.find(`.ci-status-icon-${status}`);
 
   const createComponent = (suite = testSuite) => {
@@ -61,18 +63,14 @@ describe('Test reports suite table', () => {
       expect(allCaseRows().length).toBe(testCases.length);
     });
 
-    it('renders the failed tests first', () => {
-      const failedCaseNames = testCases
-        .filter(x => x.status === TestStatus.FAILED)
-        .map(x => x.name);
+    it('renders the failed tests first, skipped tests next, then successful tests', () => {
+      const expectedCaseOrder = [
+        ...testCases.filter(x => x.status === TestStatus.FAILED),
+        ...testCases.filter(x => x.status === TestStatus.SKIPPED),
+        ...testCases.filter(x => x.status === TestStatus.SUCCESS),
+      ].map(x => x.name);
 
-      const skippedCaseNames = testCases
-        .filter(x => x.status === TestStatus.SKIPPED)
-        .map(x => x.name);
-
-      expect(findCaseRowAtIndex(0).text()).toContain(failedCaseNames[0]);
-      expect(findCaseRowAtIndex(1).text()).toContain(failedCaseNames[1]);
-      expect(findCaseRowAtIndex(2).text()).toContain(skippedCaseNames[0]);
+      expect(allCaseNames()).toEqual(expectedCaseOrder);
     });
 
     it('renders the correct icon for each status', () => {
diff --git a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
index 650dd8a1def..2e32d62b4bd 100644
--- a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
@@ -1,6 +1,6 @@
-import Api from '~/api';
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import Api from '~/api';
 import PipelineBranchNameToken from '~/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue';
 import { branches, mockBranchesAfterMap } from '../mock_data';
 
diff --git a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
index 15b283dc2ff..42c9dfc9ff0 100644
--- a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
@@ -1,6 +1,6 @@
-import Api from '~/api';
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import Api from '~/api';
 import PipelineTagNameToken from '~/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue';
 import { tags, mockTagsAfterMap } from '../mock_data';
 
diff --git a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
index 0b5cf2e202b..c95d2ea1b7b 100644
--- a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
@@ -1,6 +1,6 @@
-import Api from '~/api';
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import Api from '~/api';
 import PipelineTriggerAuthorToken from '~/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue';
 import { users } from '../mock_data';