Add latest changes from gitlab-org/gitlab@master

4 files changed, 106 insertions, 1 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__/pipelines_area_chart_spec.js.snap
new file mode 100644
index 00000000000..c15971912dd
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PipelinesAreaChart matches the snapshot 1`] = `
+<div
+  class="prepend-top-default"
+>
+  <p>
+    Some title
+  </p>
+   
+  <div>
+    <glareachart-stub
+      data="[object Object],[object Object]"
+      height="300"
+      legendaveragetext="Avg"
+      legendmaxtext="Max"
+      option="[object Object]"
+      thresholds=""
+      width="0"
+    />
+  </div>
+</div>
+`;
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 8aeeb4d5d7d..883f2bec5f7 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -2,7 +2,14 @@ import { shallowMount } from '@vue/test-utils';
 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 { counts, timesChartData } from '../mock_data';
+import PipelinesAreaChart from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import {
+  counts,
+  timesChartData,
+  areaChartData as lastWeekChartData,
+  areaChartData as lastMonthChartData,
+  lastYearChartData,
+} from '../mock_data';
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
@@ -12,6 +19,9 @@ describe('ProjectsPipelinesChartsApp', () => {
       propsData: {
         counts,
         timesChartData,
+        lastWeekChartData,
+        lastMonthChartData,
+        lastYearChartData,
       },
     });
   });
@@ -39,4 +49,24 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
     });
   });
+
+  describe('pipelines charts', () => {
+    it('displays 3 area charts', () => {
+      expect(wrapper.findAll(PipelinesAreaChart).length).toBe(3);
+    });
+
+    describe('displays individual correctly', () => {
+      it('renders with the correct data', () => {
+        const charts = wrapper.findAll(PipelinesAreaChart);
+
+        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);
+        }
+      });
+    });
+  });
 });
diff --git a/spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js b/spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js
new file mode 100644
index 00000000000..aea25903023
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import Component from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
+import { transformedAreaChartData } from '../mock_data';
+
+describe('PipelinesAreaChart', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Component, {
+      propsData: {
+        chartData: transformedAreaChartData,
+      },
+      slots: {
+        default: 'Some title',
+      },
+      stubs: {
+        GlAreaChart: true,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/spec/frontend/projects/pipelines/charts/mock_data.js b/spec/frontend/projects/pipelines/charts/mock_data.js
index 93e53125679..db5164c8f99 100644
--- a/spec/frontend/projects/pipelines/charts/mock_data.js
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -9,3 +9,25 @@ export const timesChartData = {
   labels: ['as1234', 'kh423hy', 'ji56bvg', 'th23po'],
   values: [5, 3, 7, 4],
 };
+
+export const areaChartData = {
+  labels: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan'],
+  totals: [4, 6, 3, 6, 7],
+  success: [3, 5, 3, 3, 5],
+};
+
+export const lastYearChartData = {
+  ...areaChartData,
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+};
+
+export const transformedAreaChartData = [
+  {
+    name: 'all',
+    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]],
+  },
+];