Add latest changes from gitlab-org/gitlab@master

3 files changed, 112 insertions, 11 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
new file mode 100644
index 00000000000..773d7526f12
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -0,0 +1,94 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlSegmentedControl } from '@gitlab/ui';
+import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import { transformedAreaChartData, chartOptions } from '../mock_data';
+
+const DEFAULT_PROPS = {
+  chartOptions,
+  charts: [
+    {
+      range: 'test range 1',
+      title: 'title 1',
+      data: transformedAreaChartData,
+    },
+    {
+      range: 'test range 2',
+      title: 'title 2',
+      data: transformedAreaChartData,
+    },
+    {
+      range: 'test range 3',
+      title: 'title 3',
+      data: transformedAreaChartData,
+    },
+  ],
+};
+
+describe('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => {
+  let wrapper;
+
+  const createWrapper = (props = {}) =>
+    shallowMount(CiCdAnalyticsCharts, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+    });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  describe('segmented control', () => {
+    let segmentedControl;
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+      segmentedControl = wrapper.find(GlSegmentedControl);
+    });
+
+    it('should default to the first chart', () => {
+      expect(segmentedControl.props('checked')).toBe(0);
+    });
+
+    it('should use the title and index as values', () => {
+      const options = segmentedControl.props('options');
+      expect(options).toHaveLength(3);
+      expect(options).toEqual([
+        {
+          text: 'title 1',
+          value: 0,
+        },
+        {
+          text: 'title 2',
+          value: 1,
+        },
+        {
+          text: 'title 3',
+          value: 2,
+        },
+      ]);
+    });
+
+    it('should select a different chart on change', async () => {
+      segmentedControl.vm.$emit('input', 1);
+
+      const chart = wrapper.find(CiCdAnalyticsAreaChart);
+
+      await nextTick();
+
+      expect(chart.props('chartData')).toEqual(transformedAreaChartData);
+      expect(chart.text()).toBe('Date range: test range 2');
+    });
+  });
+
+  it('should not display charts if there are no charts', () => {
+    wrapper = createWrapper({ charts: [] });
+    expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index 3e588d46a4f..9e051550fae 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.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';
@@ -65,20 +65,17 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
   });
 
   describe('pipelines charts', () => {
-    it('displays 3 area charts', () => {
-      expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3);
+    it('displays the charts components', () => {
+      expect(wrapper.find(CiCdAnalyticsCharts).exists()).toBe(true);
     });
 
     describe('displays individual correctly', () => {
       it('renders with the correct data', () => {
-        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
-        for (let i = 0; i < charts.length; i += 1) {
-          const chart = charts.at(i);
-
-          expect(chart.exists()).toBeTruthy();
-          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
-          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
-        }
+        const charts = wrapper.find(CiCdAnalyticsCharts);
+        expect(charts.props()).toEqual({
+          charts: wrapper.vm.areaCharts,
+          chartOptions: wrapper.vm.$options.areaChartOptions,
+        });
       });
     });
   });
diff --git a/spec/frontend/projects/pipelines/charts/mock_data.js b/spec/frontend/projects/pipelines/charts/mock_data.js
index 3bc09f0b0a0..2e2c594102c 100644
--- a/spec/frontend/projects/pipelines/charts/mock_data.js
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -57,6 +57,16 @@ export const mockPipelineCount = {
   },
 };
 
+export const chartOptions = {
+  xAxis: {
+    name: 'X axis title',
+    type: 'category',
+  },
+  yAxis: {
+    name: 'Y axis title',
+  },
+};
+
 export const mockPipelineStatistics = {
   data: {
     project: {