Add specs for the chart components60008-support-for-additional-panel-types-in-dashboard-schema-definition

This commit adds basic specs to all chart types, with the exception
of single stat charts, since the component is simple
single stat already contains a sufficient number of specs

6 files changed, 180 insertions, 5 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
index 4415e456fef..b03a6ca1806 100644
--- a/app/assets/javascripts/monitoring/components/charts/single_stat.vue
+++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue
@@ -30,9 +30,7 @@ export default {
 <template>
   <div class="prometheus-graph col-12 col-lg-6">
     <div class="prometheus-graph-header">
-      <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
-      <!-- Do we need widgets for this graph type? -->
-      <!-- <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div> -->
+      <h5 ref="graphTitle" class="prometheus-graph-title">{{ title }}</h5>
     </div>
     <gl-single-stat :value="valueWithUnit" :title="title" variant="success" />
   </div>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index c7b2b6bda0e..7f4ae38463e 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -17,6 +17,7 @@ import MonitorAreaChart from './charts/area.vue';
 import LineChart from './charts/line.vue';
 import SingleStatChart from './charts/single_stat.vue';
 import HeatmapChart from './charts/heatmap.vue';
+import ColumnChart from './charts/column.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import { timeWindows, timeWindowsKeyNames } from '../constants';
@@ -39,6 +40,7 @@ export default {
     LineChart,
     SingleStatChart,
     HeatmapChart,
+    ColumnChart,
   },
   directives: {
     GlModalDirective,
@@ -238,10 +240,10 @@ export default {
             class="prepend-left-10 js-environments-dropdown"
             toggle-class="dropdown-menu-toggle"
             :text="currentEnvironmentName"
-            :disabled="store.environmentsData.length === 0"
+            :disabled="environments.length === 0"
           >
             <gl-dropdown-item
-              v-for="environment in store.environmentsData"
+              v-for="environment in environments"
               :key="environment.id"
               :active="environment.name === currentEnvironmentName"
               active-class="is-active"
diff --git a/spec/javascripts/monitoring/charts/column_spec.js b/spec/javascripts/monitoring/charts/column_spec.js
new file mode 100644
index 00000000000..16bb1d6c9a8
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/column_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import ColumnChart from '~/monitoring/components/charts/column.vue';
+import { createStore } from '~/monitoring/stores';
+import * as types from '~/monitoring/stores/mutation_types';
+import MonitoringMock from '../mock_data';
+
+describe('Column component', () => {
+  let columnChart;
+
+  beforeEach(() => {
+    const store = createStore();
+    store.commit(types.RECEIVE_METRICS_DATA_SUCCESS, MonitoringMock.data);
+
+    columnChart = shallowMount(ColumnChart, {
+      propsData: {
+        graphData: {
+          x_label: 'time',
+          y_label: 'usage',
+          queries: [{ result: {} }], // TODO: Update mock data
+        },
+        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);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/charts/heatmap_spec.js b/spec/javascripts/monitoring/charts/heatmap_spec.js
new file mode 100644
index 00000000000..685454c181d
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/heatmap_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlHeatmap } from '@gitlab/ui/dist/charts';
+import HeatmapChart from '~/monitoring/components/charts/heatmap.vue';
+import { createStore } from '~/monitoring/stores';
+import * as types from '~/monitoring/stores/mutation_types';
+import MonitoringMock from '../mock_data';
+
+describe('Heatmap Chart component', () => {
+  let heatmapChart;
+
+  beforeEach(() => {
+    const store = createStore();
+    store.commit(types.RECEIVE_METRICS_DATA_SUCCESS, MonitoringMock.data);
+
+    heatmapChart = shallowMount(HeatmapChart, {
+      propsData: {
+        graphData: {
+          x_label: 'time',
+          y_label: 'usage',
+          queries: [{ result: {} }], // TODO: Update mock data
+        },
+        containerWidth: 100,
+      },
+    });
+  });
+
+  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);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/charts/line_spec.js b/spec/javascripts/monitoring/charts/line_spec.js
new file mode 100644
index 00000000000..de5e7765ef4
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/line_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLineChart } from '@gitlab/ui/dist/charts';
+import LineChart from '~/monitoring/components/charts/line.vue';
+import { createStore } from '~/monitoring/stores';
+import * as types from '~/monitoring/stores/mutation_types';
+import MonitoringMock from '../mock_data';
+
+describe('Line Chart component', () => {
+  let lineChart;
+
+  beforeEach(() => {
+    const store = createStore();
+    store.commit(types.RECEIVE_METRICS_DATA_SUCCESS, MonitoringMock.data);
+
+    lineChart = shallowMount(LineChart, {
+      propsData: {
+        graphData: {
+          x_label: 'time',
+          y_label: 'usage',
+          queries: [{ result: {} }], // TODO: Update mock data
+        },
+        containerWidth: 100,
+      },
+    });
+  });
+
+  afterEach(() => {
+    lineChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI line chart', () => {
+      let glLineChart;
+
+      beforeEach(() => {
+        glLineChart = lineChart.find(GlLineChart);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glLineChart.isVueInstance()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/monitoring/charts/single_stat_spec.js b/spec/javascripts/monitoring/charts/single_stat_spec.js
new file mode 100644
index 00000000000..b1435372a4d
--- /dev/null
+++ b/spec/javascripts/monitoring/charts/single_stat_spec.js
@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
+
+describe('Single Stat Chart component', () => {
+  let singleStatChart;
+
+  beforeEach(() => {
+    singleStatChart = shallowMount(SingleStatChart, {
+      propsData: {
+        title: 'Time to render',
+        value: 1,
+        unit: 'sec',
+      },
+    });
+  });
+
+  afterEach(() => {
+    singleStatChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI single stat chart', () => {
+      let glSingleStatChart;
+
+      beforeEach(() => {
+        glSingleStatChart = singleStatChart.find(GlSingleStat);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glSingleStatChart.isVueInstance()).toBe(true);
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe('valueWithUnit', () => {
+      it('should interpolate the value and unit props', () => {
+        expect(singleStatChart.vm.valueWithUnit).toBe('1sec');
+      });
+    });
+  });
+});