Merge branch 'master' into docs-patch-71docs-patch-71

4 files changed, 107 insertions, 11 deletions

diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index ac7e0bb12a1..57f99a09002 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -1,21 +1,26 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from '~/monitoring/stores';
+import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
 import Area from '~/monitoring/components/charts/area.vue';
-import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
+import { TEST_HOST } from 'spec/test_constants';
 import MonitoringMock, { deploymentData } from '../mock_data';
 
 describe('Area component', () => {
+  const mockSha = 'mockSha';
   const mockWidgets = 'mockWidgets';
   const mockSvgPathContent = 'mockSvgPathContent';
+  const projectPath = `${TEST_HOST}/path/to/project`;
+  const commitUrl = `${projectPath}/commit/${mockSha}`;
   let mockGraphData;
   let areaChart;
   let spriteSpy;
+  let store;
 
   beforeEach(() => {
-    const store = createStore();
-
+    store = createStore();
     store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, MonitoringMock.data);
     store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
@@ -26,10 +31,12 @@ describe('Area component', () => {
         graphData: mockGraphData,
         containerWidth: 0,
         deploymentData: store.state.monitoringDashboard.deploymentData,
+        projectPath,
       },
       slots: {
         default: mockWidgets,
       },
+      store,
     });
 
     spriteSpy = spyOnDependency(Area, 'getSvgIconPathContent').and.callFake(
@@ -88,11 +95,14 @@ describe('Area component', () => {
           );
         });
 
-        it('renders commit sha in tooltip content', () => {
-          const mockSha = 'mockSha';
+        it('renders clickable commit sha in tooltip content', () => {
           areaChart.vm.tooltip.sha = mockSha;
+          areaChart.vm.tooltip.commitUrl = commitUrl;
+
+          const commitLink = areaChart.find(GlLink);
 
-          expect(shallowWrapperContainsSlotText(glAreaChart, 'tooltipContent', mockSha)).toBe(true);
+          expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true);
+          expect(commitLink.attributes('href')).toEqual(commitUrl);
         });
       });
     });
diff --git a/spec/javascripts/monitoring/charts/column_spec.js b/spec/javascripts/monitoring/charts/column_spec.js
new file mode 100644
index 00000000000..d8ac68b9484
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/column_spec.js
@@ -0,0 +1,58 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import ColumnChart from '~/monitoring/components/charts/column.vue';
+
+describe('Column component', () => {
+  let columnChart;
+
+  beforeEach(() => {
+    columnChart = shallowMount(ColumnChart, {
+      propsData: {
+        graphData: {
+          queries: [
+            {
+              x_label: 'Time',
+              y_label: 'Usage',
+              result: [
+                {
+                  metric: {},
+                  values: [
+                    [1495700554.925, '8.0390625'],
+                    [1495700614.925, '8.0390625'],
+                    [1495700674.925, '8.0390625'],
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        containerWidth: 100,
+      },
+    });
+  });
+
+  afterEach(() => {
+    columnChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI column chart', () => {
+      let glColumnChart;
+
+      beforeEach(() => {
+        glColumnChart = columnChart.find(GlColumnChart);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glColumnChart.isVueInstance()).toBe(true);
+      });
+
+      it('receives data properties needed for proper chart render', () => {
+        const props = glColumnChart.props();
+
+        expect(props.data).toBe(columnChart.vm.chartData);
+        expect(props.option).toBe(columnChart.vm.chartOptions);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/charts/empty_chart_spec.js b/spec/javascripts/monitoring/charts/empty_chart_spec.js
new file mode 100644
index 00000000000..bbfca27dc5a
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/empty_chart_spec.js
@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+
+describe('Empty Chart component', () => {
+  let emptyChart;
+  const graphTitle = 'Memory Usage';
+
+  beforeEach(() => {
+    emptyChart = shallowMount(EmptyChart, {
+      propsData: {
+        graphTitle,
+      },
+    });
+  });
+
+  afterEach(() => {
+    emptyChart.destroy();
+  });
+
+  it('render the chart title', () => {
+    expect(emptyChart.find({ ref: 'graphTitle' }).text()).toBe(graphTitle);
+  });
+
+  describe('Computed props', () => {
+    it('sets the height for the svg container', () => {
+      expect(emptyChart.vm.svgContainerStyle.height).toBe('300px');
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/charts/single_stat_spec.js b/spec/javascripts/monitoring/charts/single_stat_spec.js
index 12b73002f97..127a4a7955a 100644
--- a/spec/javascripts/monitoring/charts/single_stat_spec.js
+++ b/spec/javascripts/monitoring/charts/single_stat_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
+import { graphDataPrometheusQuery } from '../mock_data';
 
 describe('Single Stat Chart component', () => {
   let singleStatChart;
@@ -7,9 +8,7 @@ describe('Single Stat Chart component', () => {
   beforeEach(() => {
     singleStatChart = shallowMount(SingleStatChart, {
       propsData: {
-        title: 'Time to render',
-        value: 1,
-        unit: 'sec',
+        graphData: graphDataPrometheusQuery,
       },
     });
   });
@@ -19,9 +18,9 @@ describe('Single Stat Chart component', () => {
   });
 
   describe('computed', () => {
-    describe('valueWithUnit', () => {
+    describe('engineeringNotation', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.valueWithUnit).toBe('1sec');
+        expect(singleStatChart.vm.engineeringNotation).toBe('91MB');
       });
     });
   });