Merge branch 'jivanvl-update-dashboard-specs-jest' into 'master'

Move non EE dashboard specs to jest

See merge request gitlab-org/gitlab!21143

ee/spec/javascripts/monitoring/components/dashboard_spec.js

@@ -8,7 +8,7 @@ import {
   mockedQueryResultPayload,
   environmentData,
 } from 'spec/monitoring/mock_data';
-import propsData from 'spec/monitoring/components/dashboard_spec';
+import propsData from 'spec/monitoring/components/dashboard_resize_spec';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
 import Tracking from '~/tracking';
 import { createStore } from '~/monitoring/stores';

spec/frontend/monitoring/components/dashboard_time_url_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import createFlash from '~/flash';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { createStore } from '~/monitoring/stores';
+import { propsData } from '../init_utils';
+
+const localVue = createLocalVue();
+
+jest.mock('~/flash');
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterValues: jest.fn().mockReturnValue('<script>alert("XSS")</script>'),
+}));
+
+describe('dashboard invalid url parameters', () => {
+  let store;
+  let wrapper;
+
+  const createMountedWrapper = (props = {}, options = {}) => {
+    wrapper = mount(localVue.extend(Dashboard), {
+      localVue,
+      sync: false,
+      propsData: { ...propsData, ...props },
+      store,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('shows an error message if invalid url parameters are passed', done => {
+    createMountedWrapper(
+      { hasMetrics: true },
+      { attachToDocument: true, stubs: ['graph-group', 'panel-type'] },
+    );
+
+    wrapper.vm
+      .$nextTick()
+      .then(() => {
+        expect(createFlash).toHaveBeenCalled();
+
+        done();
+      })
+      .catch(done.fail);
+  });
+});

spec/frontend/monitoring/components/dashboard_time_window_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlDropdownItem } from '@gitlab/ui';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import statusCodes from '~/lib/utils/http_status';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { createStore } from '~/monitoring/stores';
+import { propsData, setupComponentStore } from '../init_utils';
+import { metricsGroupsAPIResponse, mockApiEndpoint } from '../mock_data';
+
+const localVue = createLocalVue();
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterValues: jest.fn().mockImplementation(param => {
+    if (param === 'start') return ['2019-10-01T18:27:47.000Z'];
+    if (param === 'end') return ['2019-10-01T18:57:47.000Z'];
+    return [];
+  }),
+  mergeUrlParams: jest.fn().mockReturnValue('#'),
+}));
+
+describe('dashboard time window', () => {
+  let store;
+  let wrapper;
+  let mock;
+
+  const createComponentWrapperMounted = (props = {}, options = {}) => {
+    wrapper = mount(localVue.extend(Dashboard), {
+      localVue,
+      sync: false,
+      propsData: { ...propsData, ...props },
+      store,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+    mock.restore();
+  });
+
+  it('shows an error message if invalid url parameters are passed', done => {
+    mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse);
+
+    createComponentWrapperMounted(
+      { hasMetrics: true },
+      { attachToDocument: true, stubs: ['graph-group', 'panel-type'] },
+    );
+
+    setupComponentStore(wrapper);
+
+    wrapper.vm
+      .$nextTick()
+      .then(() => {
+        const timeWindowDropdownItems = wrapper
+          .find('.js-time-window-dropdown')
+          .findAll(GlDropdownItem);
+        const activeItem = timeWindowDropdownItems.wrappers.filter(itemWrapper =>
+          itemWrapper.find('.active').exists(),
+        );
+
+        expect(activeItem.length).toBe(1);
+
+        done();
+      })
+      .catch(done.fail);
+  });
+});

spec/frontend/monitoring/init_utils.js

+import * as types from '~/monitoring/stores/mutation_types';
+import {
+  metricsGroupsAPIResponse,
+  mockedEmptyResult,
+  mockedQueryResultPayload,
+  mockedQueryResultPayloadCoresTotal,
+  mockApiEndpoint,
+  environmentData,
+} from './mock_data';
+
+export const propsData = {
+  hasMetrics: false,
+  documentationPath: '/path/to/docs',
+  settingsPath: '/path/to/settings',
+  clustersPath: '/path/to/clusters',
+  tagsPath: '/path/to/tags',
+  projectPath: '/path/to/project',
+  metricsEndpoint: mockApiEndpoint,
+  deploymentsEndpoint: null,
+  emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
+  emptyLoadingSvgPath: '/path/to/loading.svg',
+  emptyNoDataSvgPath: '/path/to/no-data.svg',
+  emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
+  emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+  environmentsEndpoint: '/root/hello-prometheus/environments/35',
+  currentEnvironmentName: 'production',
+  customMetricsAvailable: false,
+  customMetricsPath: '',
+  validateQueryPath: '',
+};
+
+export const setupComponentStore = wrapper => {
+  wrapper.vm.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+    metricsGroupsAPIResponse,
+  );
+
+  // Load 3 panels to the dashboard, one with an empty result
+  wrapper.vm.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedEmptyResult,
+  );
+  wrapper.vm.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedQueryResultPayload,
+  );
+  wrapper.vm.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedQueryResultPayloadCoresTotal,
+  );
+
+  wrapper.vm.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+    environmentData,
+  );
+};

spec/javascripts/monitoring/components/dashboard_resize_spec.js

+import Vue from 'vue';
+import { createLocalVue } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import * as types from '~/monitoring/stores/mutation_types';
+import { createStore } from '~/monitoring/stores';
+import axios from '~/lib/utils/axios_utils';
+import {
+  metricsGroupsAPIResponse,
+  mockedEmptyResult,
+  mockedQueryResultPayload,
+  mockedQueryResultPayloadCoresTotal,
+  mockApiEndpoint,
+  environmentData,
+} from '../mock_data';
+
+const localVue = createLocalVue();
+const propsData = {
+  hasMetrics: false,
+  documentationPath: '/path/to/docs',
+  settingsPath: '/path/to/settings',
+  clustersPath: '/path/to/clusters',
+  tagsPath: '/path/to/tags',
+  projectPath: '/path/to/project',
+  metricsEndpoint: mockApiEndpoint,
+  deploymentsEndpoint: null,
+  emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
+  emptyLoadingSvgPath: '/path/to/loading.svg',
+  emptyNoDataSvgPath: '/path/to/no-data.svg',
+  emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
+  emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+  environmentsEndpoint: '/root/hello-prometheus/environments/35',
+  currentEnvironmentName: 'production',
+  customMetricsAvailable: false,
+  customMetricsPath: '',
+  validateQueryPath: '',
+};
+
+function setupComponentStore(component) {
+  // Load 2 panel groups
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+    metricsGroupsAPIResponse,
+  );
+
+  // Load 3 panels to the dashboard, one with an empty result
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedEmptyResult,
+  );
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedQueryResultPayload,
+  );
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
+    mockedQueryResultPayloadCoresTotal,
+  );
+
+  component.$store.commit(
+    `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+    environmentData,
+  );
+}
+
+describe('Dashboard', () => {
+  let DashboardComponent;
+  let mock;
+  let store;
+  let component;
+  let wrapper;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="prometheus-graphs"></div>
+      <div class="layout-page"></div>
+    `);
+
+    store = createStore();
+    mock = new MockAdapter(axios);
+    DashboardComponent = localVue.extend(Dashboard);
+  });
+
+  afterEach(() => {
+    if (component) {
+      component.$destroy();
+    }
+    if (wrapper) {
+      wrapper.destroy();
+    }
+    mock.restore();
+  });
+
+  describe('responds to window resizes', () => {
+    let promPanel;
+    let promGroup;
+    let panelToggle;
+    let chart;
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: true,
+        },
+        store,
+      });
+
+      setupComponentStore(component);
+
+      return Vue.nextTick().then(() => {
+        [, promPanel] = component.$el.querySelectorAll('.prometheus-panel');
+        promGroup = promPanel.querySelector('.prometheus-graph-group');
+        panelToggle = promPanel.querySelector('.js-graph-group-toggle');
+        chart = promGroup.querySelector('.position-relative svg');
+      });
+    });
+
+    it('setting chart size to zero when panel group is hidden', () => {
+      expect(promGroup.style.display).toBe('');
+      expect(chart.clientWidth).toBeGreaterThan(0);
+
+      panelToggle.click();
+      return Vue.nextTick().then(() => {
+        expect(promGroup.style.display).toBe('none');
+        expect(chart.clientWidth).toBe(0);
+        promPanel.style.width = '500px';
+      });
+    });
+
+    it('expanding chart panel group after resize displays chart', () => {
+      panelToggle.click();
+
+      expect(chart.clientWidth).toBeGreaterThan(0);
+    });
+  });
+});