Add latest changes from gitlab-org/gitlab@master

4 files changed, 122 insertions, 0 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
new file mode 100644
index 00000000000..ff0351bd099
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatisticsList matches the snapshot 1`] = `
+<ul>
+  <li>
+    <span>
+      Total:
+    </span>
+     
+    <strong>
+      4 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Successful:
+    </span>
+     
+    <strong>
+      2 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Failed:
+    </span>
+     
+    <strong>
+      2 pipelines
+    </strong>
+  </li>
+   
+  <li>
+    <span>
+      Success ratio:
+    </span>
+     
+    <strong>
+      50%
+    </strong>
+  </li>
+</ul>
+`;
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
new file mode 100644
index 00000000000..48ea333e2c3
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import Component from '~/projects/pipelines/charts/components/app';
+import StatisticsList from '~/projects/pipelines/charts/components/statistics_list';
+import { counts, timesChartData } from '../mock_data';
+
+describe('ProjectsPipelinesChartsApp', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        counts,
+        timesChartData,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('overall statistics', () => {
+    it('displays the statistics list', () => {
+      const list = wrapper.find(StatisticsList);
+
+      expect(list.exists()).toBeTruthy();
+      expect(list.props('counts')).toBe(counts);
+    });
+
+    it('displays the commit duration chart', () => {
+      const chart = wrapper.find(GlColumnChart);
+
+      expect(chart.exists()).toBeTruthy();
+      expect(chart.props('yAxisTitle')).toBe('Minutes');
+      expect(chart.props('xAxisTitle')).toBe('Commit');
+      expect(chart.props('data')).toBe(wrapper.vm.timesChartTransformedData);
+      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
+    });
+  });
+});
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
new file mode 100644
index 00000000000..93130f22407
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import Component from '~/projects/pipelines/charts/components/statistics_list';
+import { counts } from '../mock_data';
+
+describe('StatisticsList', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        counts,
+      },
+    });
+  });
+
+  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
new file mode 100644
index 00000000000..93e53125679
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -0,0 +1,11 @@
+export const counts = {
+  failed: 2,
+  success: 2,
+  total: 4,
+  successRatio: 50,
+};
+
+export const timesChartData = {
+  labels: ['as1234', 'kh423hy', 'ji56bvg', 'th23po'],
+  values: [5, 3, 7, 4],
+};