Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

6 files changed, 132 insertions, 80 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
index d68e009f46e..fc51825f15b 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PipelinesAreaChart matches the snapshot 1`] = `
+exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
 <div
   class="gl-mt-3"
 >
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index c7e760486c0..be3716c24e6 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -38,14 +38,5 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
       50.00%
     </strong>
   </li>
-  <li>
-    <span>
-      Total duration:
-    </span>
-     
-    <strong>
-      00:01:56
-    </strong>
-  </li>
 </ul>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index f8737dda5f6..44329944097 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,10 +1,10 @@
+import { merge } from 'lodash';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
-import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { GlTabs, GlTab } from '@gitlab/ui';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import Component from '~/projects/pipelines/charts/components/app.vue';
-import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
@@ -13,6 +13,8 @@ const projectPath = 'gitlab-org/gitlab';
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
+const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
+
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
@@ -25,21 +27,29 @@ describe('ProjectsPipelinesChartsApp', () => {
     return createMockApollo(requestHandlers);
   }
 
-  function createComponent(options = {}) {
-    const { fakeApollo } = options;
-
-    return shallowMount(Component, {
-      provide: {
-        projectPath,
-      },
-      localVue,
-      apolloProvider: fakeApollo,
-    });
+  function createComponent(mountOptions = {}) {
+    wrapper = shallowMount(
+      Component,
+      merge(
+        {},
+        {
+          provide: {
+            projectPath,
+            shouldRenderDeploymentFrequencyCharts: false,
+          },
+          localVue,
+          apolloProvider: createMockApolloProvider(),
+          stubs: {
+            DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
+          },
+        },
+        mountOptions,
+      ),
+    );
   }
 
   beforeEach(() => {
-    const fakeApollo = createMockApolloProvider();
-    wrapper = createComponent({ fakeApollo });
+    createComponent();
   });
 
   afterEach(() => {
@@ -47,50 +57,74 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper = null;
   });
 
-  describe('overall statistics', () => {
-    it('displays the statistics list', () => {
-      const list = wrapper.find(StatisticsList);
-
-      expect(list.exists()).toBe(true);
-      expect(list.props('counts')).toMatchObject({
-        failed: 1,
-        success: 23,
-        total: 34,
-        successRatio: 95.83333333333334,
-        totalDuration: 2471,
-      });
-    });
+  describe('pipelines charts', () => {
+    it('displays the pipeline charts', () => {
+      const chart = wrapper.find(PipelineCharts);
+      const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
 
-    it('displays the commit duration chart', () => {
-      const chart = wrapper.find(GlColumnChart);
+      const {
+        totalPipelines: total,
+        successfulPipelines: success,
+        failedPipelines: failed,
+      } = mockPipelineCount.data.project;
 
       expect(chart.exists()).toBe(true);
-      expect(chart.props('yAxisTitle')).toBe('Minutes');
-      expect(chart.props('xAxisTitle')).toBe('Commit');
-      expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData);
-      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
+      expect(chart.props()).toMatchObject({
+        counts: {
+          failed: failed.count,
+          success: success.count,
+          total: total.count,
+          successRatio: (success.count / (success.count + failed.count)) * 100,
+        },
+        lastWeek: {
+          labels: analytics.weekPipelinesLabels,
+          totals: analytics.weekPipelinesTotals,
+          success: analytics.weekPipelinesSuccessful,
+        },
+        lastMonth: {
+          labels: analytics.monthPipelinesLabels,
+          totals: analytics.monthPipelinesTotals,
+          success: analytics.monthPipelinesSuccessful,
+        },
+        lastYear: {
+          labels: analytics.yearPipelinesLabels,
+          totals: analytics.yearPipelinesTotals,
+          success: analytics.yearPipelinesSuccessful,
+        },
+        timesChart: {
+          labels: analytics.pipelineTimesLabels,
+          values: analytics.pipelineTimesValues,
+        },
+      });
     });
   });
 
-  describe('pipelines charts', () => {
-    it('displays 3 area charts', () => {
-      expect(wrapper.findAll(PipelinesAreaChart)).toHaveLength(3);
+  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
+  const findGlTabs = () => wrapper.find(GlTabs);
+  const findAllGlTab = () => wrapper.findAll(GlTab);
+  const findGlTabAt = (i) => findAllGlTab().at(i);
+
+  describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
+    beforeEach(() => {
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
     });
 
-    describe('displays individual correctly', () => {
-      it('renders with the correct data', () => {
-        const charts = wrapper.findAll(PipelinesAreaChart);
+    it('renders the deployment frequency charts in a tab', () => {
+      expect(findGlTabs().exists()).toBe(true);
+      expect(findGlTabAt(0).attributes('title')).toBe('Pipelines');
+      expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
+      expect(findDeploymentFrequencyCharts().exists()).toBe(true);
+    });
+  });
 
-        for (let i = 0; i < charts.length; i += 1) {
-          const chart = charts.at(i);
+  describe('when shouldRenderDeploymentFrequencyCharts is false', () => {
+    beforeEach(() => {
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } });
+    });
 
-          expect(chart.exists()).toBe(true);
-          // TODO: Refactor this to use the mocked data instead of the vm data
-          // https://gitlab.com/gitlab-org/gitlab/-/issues/292085
-          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
-          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
-        }
-      });
+    it('does not render the deployment frequency charts in a tab', () => {
+      expect(findGlTabs().exists()).toBe(false);
+      expect(findDeploymentFrequencyCharts().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
index aea25903023..64f80300237 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
@@ -1,14 +1,23 @@
 import { mount } from '@vue/test-utils';
-import Component from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
 import { transformedAreaChartData } from '../mock_data';
 
-describe('PipelinesAreaChart', () => {
+describe('CiCdAnalyticsAreaChart', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(Component, {
+    wrapper = mount(CiCdAnalyticsAreaChart, {
       propsData: {
         chartData: transformedAreaChartData,
+        areaChartOptions: {
+          xAxis: {
+            name: 'X axis title',
+            type: 'category',
+          },
+          yAxis: {
+            name: 'Y axis title',
+          },
+        },
       },
       slots: {
         default: 'Some title',
diff --git a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index c03b571eb26..598055d5828 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -1,27 +1,34 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
-import Component from '~/projects/pipelines/charts/components/app_legacy.vue';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import {
   counts,
-  timesChartData,
-  areaChartData as lastWeekChartData,
-  areaChartData as lastMonthChartData,
-  lastYearChartData,
+  timesChartData as timesChart,
+  areaChartData as lastWeek,
+  areaChartData as lastMonth,
+  lastYearChartData as lastYear,
 } from '../mock_data';
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMount(Component, {
+    wrapper = shallowMount(PipelineCharts, {
       propsData: {
         counts,
-        timesChartData,
-        lastWeekChartData,
-        lastMonthChartData,
-        lastYearChartData,
+        timesChart,
+        lastWeek,
+        lastMonth,
+        lastYear,
+      },
+      provide: {
+        projectPath: 'test/project',
+        shouldRenderDeploymentFrequencyCharts: true,
+      },
+      stubs: {
+        DeploymentFrequencyCharts: true,
       },
     });
   });
@@ -35,7 +42,7 @@ describe('ProjectsPipelinesChartsApp', () => {
     it('displays the statistics list', () => {
       const list = wrapper.find(StatisticsList);
 
-      expect(list.exists()).toBeTruthy();
+      expect(list.exists()).toBe(true);
       expect(list.props('counts')).toBe(counts);
     });
 
@@ -52,13 +59,12 @@ describe('ProjectsPipelinesChartsApp', () => {
 
   describe('pipelines charts', () => {
     it('displays 3 area charts', () => {
-      expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3);
+      expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3);
     });
 
     describe('displays individual correctly', () => {
       it('renders with the correct data', () => {
-        const charts = wrapper.findAll(PipelinesAreaChart);
-
+        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
         for (let i = 0; i < charts.length; i += 1) {
           const chart = charts.at(i);
 
diff --git a/spec/frontend/projects/pipelines/charts/mock_data.js b/spec/frontend/projects/pipelines/charts/mock_data.js
index da055536fcc..3bc09f0b0a0 100644
--- a/spec/frontend/projects/pipelines/charts/mock_data.js
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -25,11 +25,23 @@ export const lastYearChartData = {
 export const transformedAreaChartData = [
   {
     name: 'all',
-    data: [['01 Jan', 4], ['02 Jan', 6], ['03 Jan', 3], ['04 Jan', 6], ['05 Jan', 7]],
+    data: [
+      ['01 Jan', 4],
+      ['02 Jan', 6],
+      ['03 Jan', 3],
+      ['04 Jan', 6],
+      ['05 Jan', 7],
+    ],
   },
   {
     name: 'success',
-    data: [['01 Jan', 3], ['02 Jan', 3], ['03 Jan', 3], ['04 Jan', 3], ['05 Jan', 5]],
+    data: [
+      ['01 Jan', 3],
+      ['02 Jan', 3],
+      ['03 Jan', 3],
+      ['04 Jan', 3],
+      ['05 Jan', 5],
+    ],
   },
 ];