1 files changed, 69 insertions, 0 deletions
diff --git a/spec/javascripts/monitoring/charts/heatmap_spec.js b/spec/javascripts/monitoring/charts/heatmap_spec.js
new file mode 100644
index 00000000000..9a98fc6fb05
--- /dev/null
+++ b/spec/javascripts/monitoring/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);
+      });
+    });
+  });
+});