Add latest changes from gitlab-org/gitlab@master

1 files changed, 39 insertions, 20 deletions

diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
index d6a96ffbd65..f368cb7916c 100644
--- a/spec/frontend/monitoring/components/charts/column_spec.js
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -6,56 +6,75 @@ jest.mock('~/lib/utils/icon_utils', () => ({
   getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
 }));
 
+const yAxisName = 'Y-axis mock name';
+const yAxisFormat = 'bytes';
+const yAxisPrecistion = 3;
+const dataValues = [
+  [1495700554.925, '8.0390625'],
+  [1495700614.925, '8.0390625'],
+  [1495700674.925, '8.0390625'],
+];
+
 describe('Column component', () => {
-  let columnChart;
+  let wrapper;
+
+  const findChart = () => wrapper.find(GlColumnChart);
+  const chartProps = prop => findChart().props(prop);
 
   beforeEach(() => {
-    columnChart = shallowMount(ColumnChart, {
+    wrapper = shallowMount(ColumnChart, {
       propsData: {
         graphData: {
+          yAxis: {
+            name: yAxisName,
+            format: yAxisFormat,
+            precision: yAxisPrecistion,
+          },
           metrics: [
             {
-              x_label: 'Time',
-              y_label: 'Usage',
               result: [
                 {
                   metric: {},
-                  values: [
-                    [1495700554.925, '8.0390625'],
-                    [1495700614.925, '8.0390625'],
-                    [1495700674.925, '8.0390625'],
-                  ],
+                  values: dataValues,
                 },
               ],
             },
           ],
         },
-        containerWidth: 100,
       },
     });
   });
 
   afterEach(() => {
-    columnChart.destroy();
+    wrapper.destroy();
   });
 
   describe('wrapped components', () => {
     describe('GitLab UI column chart', () => {
-      let glColumnChart;
+      it('is a Vue instance', () => {
+        expect(findChart().isVueInstance()).toBe(true);
+      });
 
-      beforeEach(() => {
-        glColumnChart = columnChart.find(GlColumnChart);
+      it('receives data properties needed for proper chart render', () => {
+        expect(chartProps('data').values).toEqual(dataValues);
       });
 
-      it('is a Vue instance', () => {
-        expect(glColumnChart.isVueInstance()).toBe(true);
+      it('passes the y axis name correctly', () => {
+        expect(chartProps('yAxisTitle')).toBe(yAxisName);
       });
 
-      it('receives data properties needed for proper chart render', () => {
-        const props = glColumnChart.props();
+      it('passes the y axis configuration correctly', () => {
+        expect(chartProps('option').yAxis).toMatchObject({
+          name: yAxisName,
+          axisLabel: {
+            formatter: expect.any(Function),
+          },
+          scale: false,
+        });
+      });
 
-        expect(props.data).toBe(columnChart.vm.chartData);
-        expect(props.option).toBe(columnChart.vm.chartOptions);
+      it('passes a dataZoom configuration', () => {
+        expect(chartProps('option').dataZoom).toBeDefined();
       });
     });
   });