1 files changed, 45 insertions, 21 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 0dd3407dbbc..f8737dda5f6 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,29 +1,45 @@
-import { shallowMount } from '@vue/test-utils';
+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 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 {
-  counts,
-  timesChartData,
-  areaChartData as lastWeekChartData,
-  areaChartData as lastMonthChartData,
-  lastYearChartData,
-} from '../mock_data';
+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';
+
+const projectPath = 'gitlab-org/gitlab';
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallowMount(Component, {
-      propsData: {
-        counts,
-        timesChartData,
-        lastWeekChartData,
-        lastMonthChartData,
-        lastYearChartData,
+  function createMockApolloProvider() {
+    const requestHandlers = [
+      [getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
+      [getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
+    ];
+
+    return createMockApollo(requestHandlers);
+  }
+
+  function createComponent(options = {}) {
+    const { fakeApollo } = options;
+
+    return shallowMount(Component, {
+      provide: {
+        projectPath,
       },
+      localVue,
+      apolloProvider: fakeApollo,
     });
+  }
+
+  beforeEach(() => {
+    const fakeApollo = createMockApolloProvider();
+    wrapper = createComponent({ fakeApollo });
   });
 
   afterEach(() => {
@@ -35,14 +51,20 @@ describe('ProjectsPipelinesChartsApp', () => {
     it('displays the statistics list', () => {
       const list = wrapper.find(StatisticsList);
 
-      expect(list.exists()).toBeTruthy();
-      expect(list.props('counts')).toBe(counts);
+      expect(list.exists()).toBe(true);
+      expect(list.props('counts')).toMatchObject({
+        failed: 1,
+        success: 23,
+        total: 34,
+        successRatio: 95.83333333333334,
+        totalDuration: 2471,
+      });
     });
 
     it('displays the commit duration chart', () => {
       const chart = wrapper.find(GlColumnChart);
 
-      expect(chart.exists()).toBeTruthy();
+      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);
@@ -52,7 +74,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
   describe('pipelines charts', () => {
     it('displays 3 area charts', () => {
-      expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3);
+      expect(wrapper.findAll(PipelinesAreaChart)).toHaveLength(3);
     });
 
     describe('displays individual correctly', () => {
@@ -62,7 +84,9 @@ describe('ProjectsPipelinesChartsApp', () => {
         for (let i = 0; i < charts.length; i += 1) {
           const chart = charts.at(i);
 
-          expect(chart.exists()).toBeTruthy();
+          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);
         }