1 files changed, 84 insertions, 50 deletions

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);
     });
   });
 });