5 files changed, 202 insertions, 9 deletions
diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
new file mode 100644
index 00000000000..b4539801e0f
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -0,0 +1,66 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import ColumnChart from '~/monitoring/components/charts/column.vue';
+
+const localVue = createLocalVue();
+
+jest.mock('~/lib/utils/icon_utils', () => ({
+  getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
+}));
+
+describe('Column component', () => {
+  let columnChart;
+
+  beforeEach(() => {
+    columnChart = shallowMount(localVue.extend(ColumnChart), {
+      propsData: {
+        graphData: {
+          metrics: [
+            {
+              x_label: 'Time',
+              y_label: 'Usage',
+              result: [
+                {
+                  metric: {},
+                  values: [
+                    [1495700554.925, '8.0390625'],
+                    [1495700614.925, '8.0390625'],
+                    [1495700674.925, '8.0390625'],
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        containerWidth: 100,
+      },
+      sync: false,
+      localVue,
+    });
+  });
+
+  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/frontend/monitoring/components/charts/empty_chart_spec.js b/spec/frontend/monitoring/components/charts/empty_chart_spec.js
new file mode 100644
index 00000000000..06822126b59
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/empty_chart_spec.js
@@ -0,0 +1,33 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+
+const localVue = createLocalVue();
+
+describe('Empty Chart component', () => {
+  let emptyChart;
+  const graphTitle = 'Memory Usage';
+
+  beforeEach(() => {
+    emptyChart = shallowMount(localVue.extend(EmptyChart), {
+      propsData: {
+        graphTitle,
+      },
+      sync: false,
+      localVue,
+    });
+  });
+
+  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/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js
new file mode 100644
index 00000000000..5e2c1932e9e
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js
@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlHeatmap } from '@gitlab/ui/dist/charts';
+import Heatmap from '~/monitoring/components/charts/heatmap.vue';
+import { graphDataPrometheusQueryRangeMultiTrack } from '../../mock_data';
+
+describe('Heatmap component', () => {
+  let heatmapChart;
+  let store;
+
+  beforeEach(() => {
+    heatmapChart = shallowMount(Heatmap, {
+      propsData: {
+        graphData: graphDataPrometheusQueryRangeMultiTrack,
+        containerWidth: 100,
+      },
+      store,
+    });
+  });
+
+  afterEach(() => {
+    heatmapChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI heatmap chart', () => {
+      let glHeatmapChart;
+
+      beforeEach(() => {
+        glHeatmapChart = heatmapChart.find(GlHeatmap);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glHeatmapChart.isVueInstance()).toBe(true);
+      });
+
+      it('should display a label on the x axis', () => {
+        expect(heatmapChart.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label);
+      });
+
+      it('should display a label on the y axis', () => {
+        expect(heatmapChart.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label);
+      });
+
+      // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data
+      // each row of the heatmap chart is represented by an array inside another parent array
+      // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value
+      // corresponding to the cell
+
+      it('should return chartData with a length of x by y, with a length of 3 per array', () => {
+        const row = heatmapChart.vm.chartData[0];
+
+        expect(row.length).toBe(3);
+        expect(heatmapChart.vm.chartData.length).toBe(30);
+      });
+
+      it('returns a series of labels for the x axis', () => {
+        const { xAxisLabels } = heatmapChart.vm;
+
+        expect(xAxisLabels.length).toBe(5);
+      });
+
+      it('returns a series of labels for the y axis', () => {
+        const { yAxisLabels } = heatmapChart.vm;
+
+        expect(yAxisLabels.length).toBe(6);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js
new file mode 100644
index 00000000000..78bcc400787
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
+import { graphDataPrometheusQuery } from '../../mock_data';
+
+const localVue = createLocalVue();
+
+describe('Single Stat Chart component', () => {
+  let singleStatChart;
+
+  beforeEach(() => {
+    singleStatChart = shallowMount(localVue.extend(SingleStatChart), {
+      propsData: {
+        graphData: graphDataPrometheusQuery,
+      },
+      sync: false,
+      localVue,
+    });
+  });
+
+  afterEach(() => {
+    singleStatChart.destroy();
+  });
+
+  describe('computed', () => {
+    describe('engineeringNotation', () => {
+      it('should interpolate the value and unit props', () => {
+        expect(singleStatChart.vm.engineeringNotation).toBe('91MB');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index 128c4bc49f1..098b3408e67 100644
--- a/spec/frontend/monitoring/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/components/charts/time_series_spec.js
@@ -12,20 +12,14 @@ import {
   mockedQueryResultPayload,
   mockProjectDir,
   mockHost,
-} from '../mock_data';
-
+} from '../../mock_data';
 import * as iconUtils from '~/lib/utils/icon_utils';
 
-const mockSvgPathContent = 'mockSvgPathContent';
 const mockWidgets = 'mockWidgets';
 
+const mockSvgPathContent = 'mockSvgPathContent';
 jest.mock('~/lib/utils/icon_utils', () => ({
-  getSvgIconPathContent: jest.fn().mockImplementation(
-    () =>
-      new Promise(resolve => {
-        resolve(mockSvgPathContent);
-      }),
-  ),
+  getSvgIconPathContent: jest.fn().mockImplementation(() => Promise.resolve(mockSvgPathContent)),
 }));
 
 describe('Time series component', () => {