1 files changed, 56 insertions, 3 deletions

diff --git a/spec/frontend/monitoring/panel_type_spec.js b/spec/frontend/monitoring/panel_type_spec.js
index 1cf302c25da..54a63e7f61f 100644
--- a/spec/frontend/monitoring/panel_type_spec.js
+++ b/spec/frontend/monitoring/panel_type_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { setTestTimeout } from 'helpers/timeout';
 import axios from '~/lib/utils/axios_utils';
 import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
@@ -10,15 +11,17 @@ import { anomalyMockGraphData } from '../../frontend/monitoring/mock_data';
 import { createStore } from '~/monitoring/stores';
 
 global.IS_EE = true;
-global.URL.createObjectURL = jest.fn(() => {});
+global.URL.createObjectURL = jest.fn();
 
 describe('Panel Type component', () => {
   let axiosMock;
   let store;
   let panelType;
   const dashboardWidth = 100;
+  const exampleText = 'example_text';
 
   beforeEach(() => {
+    setTestTimeout(1000);
     axiosMock = new AxiosMockAdapter(axios);
   });
 
@@ -40,6 +43,7 @@ describe('Panel Type component', () => {
           graphData: graphDataNoResult,
         },
         sync: false,
+        attachToDocument: true,
       });
     });
 
@@ -65,14 +69,13 @@ describe('Panel Type component', () => {
   });
 
   describe('when Graph data is available', () => {
-    const exampleText = 'example_text';
     const propsData = {
       clipboardText: exampleText,
       dashboardWidth,
       graphData: graphDataPrometheusQueryRange,
     };
 
-    beforeEach(() => {
+    beforeEach(done => {
       store = createStore();
       panelType = shallowMount(PanelType, {
         propsData,
@@ -80,6 +83,11 @@ describe('Panel Type component', () => {
         sync: false,
         attachToDocument: true,
       });
+      panelType.vm.$nextTick(done);
+    });
+
+    afterEach(() => {
+      panelType.destroy();
     });
 
     describe('Time Series Chart panel type', () => {
@@ -110,4 +118,49 @@ describe('Panel Type component', () => {
       });
     });
   });
+
+  describe('when downloading metrics data as CSV', () => {
+    beforeEach(done => {
+      graphDataPrometheusQueryRange.y_label = 'metric';
+      store = createStore();
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: exampleText,
+          dashboardWidth,
+          graphData: graphDataPrometheusQueryRange,
+        },
+        store,
+        sync: false,
+        attachToDocument: true,
+      });
+      panelType.vm.$nextTick(done);
+    });
+
+    afterEach(() => {
+      panelType.destroy();
+    });
+
+    describe('csvText', () => {
+      it('converts metrics data from json to csv', () => {
+        const header = `timestamp,${graphDataPrometheusQueryRange.y_label}`;
+        const data = graphDataPrometheusQueryRange.queries[0].result[0].values;
+        const firstRow = `${data[0][0]},${data[0][1]}`;
+        const secondRow = `${data[1][0]},${data[1][1]}`;
+
+        expect(panelType.vm.csvText).toBe(`${header}\r\n${firstRow}\r\n${secondRow}\r\n`);
+      });
+    });
+
+    describe('downloadCsv', () => {
+      it('produces a link with a Blob', () => {
+        expect(global.URL.createObjectURL).toHaveBeenLastCalledWith(expect.any(Blob));
+        expect(global.URL.createObjectURL).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            size: panelType.vm.csvText.length,
+            type: 'text/plain',
+          }),
+        );
+      });
+    });
+  });
 });