Add tests to cover multiple time series

This adds a test to cover multiple time series
and their respective colors in the component
of the same name

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { setTestTimeout } from 'helpers/timeout';
 import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import { cloneDeep } from 'lodash';
 import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper';
 import { chartColorValues } from '~/monitoring/constants';
 import { createStore } from '~/monitoring/stores';
@@ -32,9 +33,19 @@ jest.mock('~/lib/utils/icon_utils', () => ({
 
 describe('Time series component', () => {
   let mockGraphData;
-  let makeTimeSeriesChart;
   let store;
 
+  const makeTimeSeriesChart = (graphData, type) =>
+    shallowMount(TimeSeries, {
+      propsData: {
+        graphData: { ...graphData, type },
+        deploymentData: store.state.monitoringDashboard.deploymentData,
+        projectPath: `${mockHost}${mockProjectDir}`,
+      },
+      store,
+    });
+
+  describe('With a single time series', () => {
     beforeEach(() => {
       setTestTimeout(1000);
 
@@ -55,16 +66,6 @@ describe('Time series component', () => {
 
       // Pick the second panel group and the first panel in it
       [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
-
-    makeTimeSeriesChart = (graphData, type) =>
-      shallowMount(TimeSeries, {
-        propsData: {
-          graphData: { ...graphData, type },
-          deploymentData: store.state.monitoringDashboard.deploymentData,
-          projectPath: `${mockHost}${mockProjectDir}`,
-        },
-        store,
-      });
     });
 
     describe('general functions', () => {
@@ -531,4 +532,66 @@ describe('Time series component', () => {
         });
       });
     });
+  });
+
+  describe('with multiple time series', () => {
+    const mockedResultMultipleSeries = [];
+    const [, , panelData] = metricsDashboardPayload.panel_groups[1].panels;
+
+    for (let i = 0; i < panelData.metrics.length; i += 1) {
+      mockedResultMultipleSeries.push(cloneDeep(mockedQueryResultPayload));
+      mockedResultMultipleSeries[
+        i
+      ].metricId = `${panelData.metrics[i].metric_id}_${panelData.metrics[i].id}`;
+    }
+
+    beforeEach(() => {
+      setTestTimeout(1000);
+
+      store = createStore();
+
+      store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        metricsDashboardPayload,
+      );
+
+      store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
+
+      // Mock data contains the metric_id for a multiple time series panel
+      for (let i = 0; i < panelData.metrics.length; i += 1) {
+        store.commit(
+          `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+          mockedResultMultipleSeries[i],
+        );
+      }
+
+      // Pick the second panel group and the second panel in it
+      [, , mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
+    });
+
+    describe('General functions', () => {
+      let timeSeriesChart;
+
+      beforeEach(done => {
+        timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
+        timeSeriesChart.vm.$nextTick(done);
+      });
+
+      describe('computed', () => {
+        let chartData;
+
+        beforeEach(() => {
+          ({ chartData } = timeSeriesChart.vm);
+        });
+
+        it('should contain different colors for each time series', () => {
+          expect(chartData[0].lineStyle.color).toBe('#1f78d1');
+          expect(chartData[1].lineStyle.color).toBe('#1aaa55');
+          expect(chartData[2].lineStyle.color).toBe('#fc9403');
+          expect(chartData[3].lineStyle.color).toBe('#6d49cb');
+          expect(chartData[4].lineStyle.color).toBe('#1f78d1');
+        });
+      });
+    });
+  });
 });

spec/frontend/monitoring/components/dashboard_spec.js

@@ -22,7 +22,7 @@ import {
 } from '../mock_data';
 
 const localVue = createLocalVue();
-const expectedPanelCount = 2;
+const expectedPanelCount = 3;
 
 describe('Dashboard', () => {
   let store;

spec/frontend/monitoring/mock_data.js

@@ -513,6 +513,48 @@ export const metricsDashboardPayload = {
             },
           ],
         },
+        {
+          title: 'memories',
+          type: 'area-chart',
+          y_label: 'memories',
+          metrics: [
+            {
+              id: 'metric_of_ages_1000',
+              label: 'memory_1000',
+              unit: 'count',
+              prometheus_endpoint_path: '/root',
+              metric_id: 20,
+            },
+            {
+              id: 'metric_of_ages_1001',
+              label: 'memory_1000',
+              unit: 'count',
+              prometheus_endpoint_path: '/root',
+              metric_id: 21,
+            },
+            {
+              id: 'metric_of_ages_1002',
+              label: 'memory_1000',
+              unit: 'count',
+              prometheus_endpoint_path: '/root',
+              metric_id: 22,
+            },
+            {
+              id: 'metric_of_ages_1003',
+              label: 'memory_1000',
+              unit: 'count',
+              prometheus_endpoint_path: '/root',
+              metric_id: 23,
+            },
+            {
+              id: 'metric_of_ages_1004',
+              label: 'memory_1004',
+              unit: 'count',
+              prometheus_endpoint_path: '/root',
+              metric_id: 24,
+            },
+          ],
+        },
       ],
     },
   ],

spec/frontend/monitoring/store/mutations_spec.js

@@ -50,9 +50,10 @@ describe('Monitoring mutations', () => {
       expect(groups[0].panels).toHaveLength(1);
       expect(groups[0].panels[0].metrics).toHaveLength(1);
 
-      expect(groups[1].panels).toHaveLength(2);
+      expect(groups[1].panels).toHaveLength(3);
       expect(groups[1].panels[0].metrics).toHaveLength(1);
       expect(groups[1].panels[1].metrics).toHaveLength(1);
+      expect(groups[1].panels[2].metrics).toHaveLength(5);
     });
     it('assigns metrics a metric id', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);