1 files changed, 103 insertions, 65 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 44329944097..e8aace14db4 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,32 +1,19 @@
-import { merge } from 'lodash';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
 import { GlTabs, GlTab } from '@gitlab/ui';
-import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMount } from '@vue/test-utils';
+import { merge } from 'lodash';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import Component from '~/projects/pipelines/charts/components/app.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';
 
-const projectPath = 'gitlab-org/gitlab';
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+jest.mock('~/lib/utils/url_utility');
 
 const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
-  function createMockApolloProvider() {
-    const requestHandlers = [
-      [getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
-      [getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
-    ];
-
-    return createMockApollo(requestHandlers);
-  }
-
   function createComponent(mountOptions = {}) {
     wrapper = shallowMount(
       Component,
@@ -34,11 +21,8 @@ describe('ProjectsPipelinesChartsApp', () => {
         {},
         {
           provide: {
-            projectPath,
             shouldRenderDeploymentFrequencyCharts: false,
           },
-          localVue,
-          apolloProvider: createMockApolloProvider(),
           stubs: {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
           },
@@ -57,52 +41,15 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper = null;
   });
 
-  describe('pipelines charts', () => {
-    it('displays the pipeline charts', () => {
-      const chart = wrapper.find(PipelineCharts);
-      const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
-
-      const {
-        totalPipelines: total,
-        successfulPipelines: success,
-        failedPipelines: failed,
-      } = mockPipelineCount.data.project;
-
-      expect(chart.exists()).toBe(true);
-      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,
-        },
-      });
-    });
-  });
-
-  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findGlTabs = () => wrapper.find(GlTabs);
   const findAllGlTab = () => wrapper.findAll(GlTab);
   const findGlTabAt = (i) => findAllGlTab().at(i);
+  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
+  const findPipelineCharts = () => wrapper.find(PipelineCharts);
+
+  it('renders the pipeline charts', () => {
+    expect(findPipelineCharts().exists()).toBe(true);
+  });
 
   describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
     beforeEach(() => {
@@ -115,6 +62,97 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
       expect(findDeploymentFrequencyCharts().exists()).toBe(true);
     });
+
+    it('sets the tab and url when a tab is clicked', async () => {
+      let chartsPath;
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => {
+        expect(chart).toBe('deployments');
+        expect(path).toBe(window.location.pathname);
+        chartsPath = `${path}?chart=${chart}`;
+        return chartsPath;
+      });
+
+      updateHistory.mockImplementation(({ url }) => {
+        expect(url).toBe(chartsPath);
+      });
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 1);
+
+      await wrapper.vm.$nextTick();
+
+      expect(tabs.attributes('value')).toBe('1');
+    });
+
+    it('should not try to push history if the tab does not change', async () => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => `${path}?chart=${chart}`);
+
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 0);
+
+      await wrapper.vm.$nextTick();
+
+      expect(updateHistory).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when provided with a query param', () => {
+    it.each`
+      chart            | tab
+      ${'deployments'} | ${'1'}
+      ${'pipelines'}   | ${'0'}
+      ${'fake'}        | ${'0'}
+      ${''}            | ${'0'}
+    `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`);
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return chart ? [chart] : [];
+      });
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+      expect(findGlTabs().attributes('value')).toBe(tab);
+    });
+
+    it('should set the tab when the back button is clicked', async () => {
+      let popstateHandler;
+
+      window.addEventListener = jest.fn();
+
+      window.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'popstate') {
+          popstateHandler = handler;
+        }
+      });
+
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return [];
+      });
+
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+
+      expect(findGlTabs().attributes('value')).toBe('0');
+
+      getParameterValues.mockImplementationOnce((name) => {
+        expect(name).toBe('chart');
+        return ['deployments'];
+      });
+
+      popstateHandler();
+
+      await wrapper.vm.$nextTick();
+
+      expect(findGlTabs().attributes('value')).toBe('1');
+    });
   });
 
   describe('when shouldRenderDeploymentFrequencyCharts is false', () => {