Restores previously ignored specs

Karma has some flaky test issues, now that these tests are written
in jest they can be readded.

Moves panel types spec to thei correct location.

app/assets/javascripts/monitoring/components/panel_type.vue

@@ -182,8 +182,8 @@ export default {
         </gl-dropdown-item>
         <gl-dropdown-item
           v-if="clipboardText"
+          ref="copyChartLink"
           v-track-event="generateLinkToChartOptions(clipboardText)"
-          class="js-chart-link"
           :data-clipboard-text="clipboardText"
           @click="showToast(clipboardText)"
         >

spec/frontend/monitoring/components/dashboard_spec.js

 import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
-import { GlDropdownItem, GlButton, GlToast } from '@gitlab/ui';
+import { GlDropdownItem, GlButton } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -10,6 +10,7 @@ import Dashboard from '~/monitoring/components/dashboard.vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
+import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { setupComponentStore, propsData } from '../init_utils';
@@ -540,37 +541,36 @@ describe('Dashboard', () => {
     });
   });
 
-  // https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('link to chart', () => {
+  describe('Clipboard text in panels', () => {
     const currentDashboard = 'TEST_DASHBOARD';
-    localVue.use(GlToast);
-    const link = () => wrapper.find('.js-chart-link');
-    const clipboardText = () => link().element.dataset.clipboardText;
+
+    const getClipboardTextAt = i =>
+      wrapper
+        .findAll(PanelType)
+        .at(i)
+        .props('clipboardText');
 
     beforeEach(done => {
       createShallowWrapper({ hasMetrics: true, currentDashboard });
 
-      setTimeout(done);
-    });
+      setupComponentStore(wrapper);
 
-    it('adds a copy button to the dropdown', () => {
-      expect(link().text()).toContain('Generate link to chart');
+      wrapper.vm.$nextTick(done);
     });
 
     it('contains a link to the dashboard', () => {
-      expect(clipboardText()).toContain(`dashboard=${currentDashboard}`);
-      expect(clipboardText()).toContain(`group=`);
-      expect(clipboardText()).toContain(`title=`);
-      expect(clipboardText()).toContain(`y_label=`);
+      expect(getClipboardTextAt(0)).toContain(`dashboard=${currentDashboard}`);
+      expect(getClipboardTextAt(0)).toContain(`group=`);
+      expect(getClipboardTextAt(0)).toContain(`title=`);
+      expect(getClipboardTextAt(0)).toContain(`y_label=`);
     });
 
-    it('undefined parameter is stripped', done => {
+    it('strips the undefined parameter', done => {
       wrapper.setProps({ currentDashboard: undefined });
 
       wrapper.vm.$nextTick(() => {
-        expect(clipboardText()).not.toContain(`dashboard=`);
-        expect(clipboardText()).toContain(`y_label=`);
+        expect(getClipboardTextAt(0)).not.toContain(`dashboard=`);
+        expect(getClipboardTextAt(0)).toContain(`y_label=`);
         done();
       });
     });
@@ -579,18 +579,10 @@ describe('Dashboard', () => {
       wrapper.setProps({ currentDashboard: null });
 
       wrapper.vm.$nextTick(() => {
-        expect(clipboardText()).not.toContain(`dashboard=`);
-        expect(clipboardText()).toContain(`y_label=`);
+        expect(getClipboardTextAt(0)).not.toContain(`dashboard=`);
+        expect(getClipboardTextAt(0)).toContain(`y_label=`);
         done();
       });
     });
-
-    it('creates a toast when clicked', () => {
-      jest.spyOn(wrapper.vm.$toast, 'show').and.stub();
-
-      link().vm.$emit('click');
-
-      expect(wrapper.vm.$toast.show).toHaveBeenCalled();
-    });
   });
 });

spec/frontend/monitoring/panel_type_spec.js → spec/frontend/monitoring/components/panel_type_spec.js

@@ -3,22 +3,29 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import { setTestTimeout } from 'helpers/timeout';
 import invalidUrl from '~/lib/utils/invalid_url';
 import axios from '~/lib/utils/axios_utils';
+
 import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
 import TimeSeriesChart from '~/monitoring/components/charts/time_series.vue';
 import AnomalyChart from '~/monitoring/components/charts/anomaly.vue';
-import { graphDataPrometheusQueryRange } from '../../javascripts/monitoring/mock_data';
-import { anomalyMockGraphData } from '../../frontend/monitoring/mock_data';
+import { anomalyMockGraphData, graphDataPrometheusQueryRange } from 'jest/monitoring/mock_data';
 import { createStore } from '~/monitoring/stores';
 
 global.IS_EE = true;
 global.URL.createObjectURL = jest.fn();
 
+const mocks = {
+  $toast: {
+    show: jest.fn(),
+  },
+};
+
 describe('Panel Type component', () => {
   let axiosMock;
   let store;
   let state;
   let wrapper;
+
   const exampleText = 'example_text';
 
   const createWrapper = props => {
@@ -27,6 +34,7 @@ describe('Panel Type component', () => {
         ...props,
       },
       store,
+      mocks,
     });
   };
 
@@ -88,7 +96,7 @@ describe('Panel Type component', () => {
     });
 
     it('sets no clipboard copy link on dropdown by default', () => {
-      const link = () => wrapper.find('.js-chart-link');
+      const link = () => wrapper.find({ ref: 'copyChartLink' });
       expect(link().exists()).toBe(false);
     });
 
@@ -175,6 +183,7 @@ describe('Panel Type component', () => {
   });
 
   describe('when cliboard data is available', () => {
+    const link = () => wrapper.find({ ref: 'copyChartLink' });
     const clipboardText = 'A value to copy.';
 
     beforeEach(() => {
@@ -189,11 +198,19 @@ describe('Panel Type component', () => {
     });
 
     it('sets clipboard text on the dropdown', () => {
-      const link = () => wrapper.find('.js-chart-link');
-
       expect(link().exists()).toBe(true);
       expect(link().element.dataset.clipboardText).toBe(clipboardText);
     });
+
+    it('adds a copy button to the dropdown', () => {
+      expect(link().text()).toContain('Generate link to chart');
+    });
+
+    it('opens a toast on click', () => {
+      link().vm.$emit('click');
+
+      expect(wrapper.vm.$toast.show).toHaveBeenCalled();
+    });
   });
 
   describe('when downloading metrics data as CSV', () => {