Merge branch 'address-dashboard-ignored-tests' into 'master'

Restores previously ignored specs

See merge request gitlab-org/gitlab!24337

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

@@ -195,8 +195,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);
     });
 
@@ -196,6 +204,7 @@ describe('Panel Type component', () => {
   });
 
   describe('when cliboard data is available', () => {
+    const link = () => wrapper.find({ ref: 'copyChartLink' });
     const clipboardText = 'A value to copy.';
 
     beforeEach(() => {
@@ -210,11 +219,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', () => {