1 files changed, 34 insertions, 1 deletions

diff --git a/spec/javascripts/monitoring/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js
index 2efdbb9327b..086be628093 100644
--- a/spec/javascripts/monitoring/panel_type_spec.js
+++ b/spec/javascripts/monitoring/panel_type_spec.js
@@ -1,15 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+import AreaChart from '~/monitoring/components/charts/area.vue';
 import { graphDataPrometheusQueryRange } from './mock_data';
+import { createStore } from '~/monitoring/stores';
 
 describe('Panel Type component', () => {
+  let store;
   let panelType;
   const dashboardWidth = 100;
 
   describe('When no graphData is available', () => {
     let glEmptyChart;
-    const graphDataNoResult = graphDataPrometheusQueryRange;
+    // Deep clone object before modifying
+    const graphDataNoResult = JSON.parse(JSON.stringify(graphDataPrometheusQueryRange));
     graphDataNoResult.queries[0].result = [];
 
     beforeEach(() => {
@@ -42,4 +46,33 @@ describe('Panel Type component', () => {
       });
     });
   });
+
+  describe('when Graph data is available', () => {
+    const exampleText = 'example_text';
+
+    beforeEach(() => {
+      store = createStore();
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: exampleText,
+          dashboardWidth,
+          graphData: graphDataPrometheusQueryRange,
+        },
+        store,
+      });
+    });
+
+    describe('Area Chart panel type', () => {
+      it('is rendered', () => {
+        expect(panelType.find(AreaChart).exists()).toBe(true);
+      });
+
+      it('sets clipboard text on the dropdown', () => {
+        const link = () => panelType.find('.js-chart-link');
+        const clipboardText = () => link().element.dataset.clipboardText;
+
+        expect(clipboardText()).toBe(exampleText);
+      });
+    });
+  });
 });