Merge branch 'migrate-monitoring-specs' into 'master'

Migrate monitoring specs to Jest & VTU

See merge request gitlab-org/gitlab!19266

jest.config.js

@@ -60,7 +60,7 @@ module.exports = {
   cacheDirectory: '<rootDir>/tmp/cache/jest',
   modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
   reporters,
-  setupFilesAfterEnv: ['<rootDir>/spec/frontend/test_setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/spec/frontend/test_setup.js', 'jest-canvas-mock'],
   restoreMocks: true,
   transform: {
     '^.+\\.(gql|graphql)$': 'jest-transform-graphql',

package.json

@@ -174,6 +174,7 @@
     "jasmine-diff": "^0.1.3",
     "jasmine-jquery": "^2.1.1",
     "jest": "^24.1.0",
+    "jest-canvas-mock": "^2.1.2",
     "jest-environment-jsdom": "^24.0.0",
     "jest-junit": "^6.3.0",
     "jest-util": "^24.0.0",

spec/javascripts/monitoring/charts/time_series_spec.js → spec/frontend/monitoring/charts/time_series_spec.js

@@ -2,21 +2,34 @@ import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
 import { GlLink } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
-import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
+import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper';
 import TimeSeries from '~/monitoring/components/charts/time_series.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 import { TEST_HOST } from 'spec/test_constants';
-import MonitoringMock, { deploymentData, mockProjectPath } from '../mock_data';
+import MonitoringMock, {
+  deploymentData,
+  mockProjectPath,
+} from '../../../javascripts/monitoring/mock_data';
+import * as iconUtils from '~/lib/utils/icon_utils';
+
+const mockSvgPathContent = 'mockSvgPathContent';
+const mockSha = 'mockSha';
+const mockWidgets = 'mockWidgets';
+const projectPath = `${TEST_HOST}${mockProjectPath}`;
+const commitUrl = `${projectPath}/commit/${mockSha}`;
+
+jest.mock('~/lib/utils/icon_utils', () => ({
+  getSvgIconPathContent: jest.fn().mockImplementation(
+    () =>
+      new Promise(resolve => {
+        resolve(mockSvgPathContent);
+      }),
+  ),
+}));
 
 describe('Time series component', () => {
-  const mockSha = 'mockSha';
-  const mockWidgets = 'mockWidgets';
-  const mockSvgPathContent = 'mockSvgPathContent';
-  const projectPath = `${TEST_HOST}${mockProjectPath}`;
-  const commitUrl = `${projectPath}/commit/${mockSha}`;
   let mockGraphData;
   let makeTimeSeriesChart;
-  let spriteSpy;
   let store;
 
   beforeEach(() => {
@@ -27,6 +40,7 @@ describe('Time series component', () => {
 
     makeTimeSeriesChart = (graphData, type) =>
       shallowMount(TimeSeries, {
+        attachToDocument: true,
         propsData: {
           graphData: { ...graphData, type },
           deploymentData: store.state.monitoringDashboard.deploymentData,
@@ -38,10 +52,6 @@ describe('Time series component', () => {
         sync: false,
         store,
       });
-
-    spriteSpy = spyOnDependency(TimeSeries, 'getSvgIconPathContent').and.callFake(
-      () => new Promise(resolve => resolve(mockSvgPathContent)),
-    );
   });
 
   describe('general functions', () => {
@@ -147,7 +157,7 @@ describe('Time series component', () => {
         });
 
         it('gets svg path content', () => {
-          expect(spriteSpy).toHaveBeenCalledWith(mockSvgName);
+          expect(iconUtils.getSvgIconPathContent).toHaveBeenCalledWith(mockSvgName);
         });
 
         it('sets svg path content', () => {
@@ -171,7 +181,7 @@ describe('Time series component', () => {
         const mockWidth = 233;
 
         beforeEach(() => {
-          spyOn(Element.prototype, 'getBoundingClientRect').and.callFake(() => ({
+          jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
             width: mockWidth,
           }));
           timeSeriesChart.vm.onResize();
@@ -227,7 +237,7 @@ describe('Time series component', () => {
               option: mockOption,
             });
 
-            expect(timeSeriesChart.vm.chartOptions).toEqual(jasmine.objectContaining(mockOption));
+            expect(timeSeriesChart.vm.chartOptions).toEqual(expect.objectContaining(mockOption));
           });
 
           it('additional series', () => {

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

 import { shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+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 './mock_data';
+import { graphDataPrometheusQueryRange } from '../../javascripts/monitoring/mock_data';
 import { anomalyMockGraphData } from '../../frontend/monitoring/mock_data';
 import { createStore } from '~/monitoring/stores';
 
+global.IS_EE = true;
+global.URL.createObjectURL = jest.fn(() => {});
+
 describe('Panel Type component', () => {
+  let axiosMock;
   let store;
   let panelType;
   const dashboardWidth = 100;
 
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
   describe('When no graphData is available', () => {
     let glEmptyChart;
     // Deep clone object before modifying
@@ -25,6 +39,7 @@ describe('Panel Type component', () => {
           dashboardWidth,
           graphData: graphDataNoResult,
         },
+        sync: false,
       });
     });
 
@@ -57,14 +72,14 @@ describe('Panel Type component', () => {
       graphData: graphDataPrometheusQueryRange,
     };
 
-    beforeEach(done => {
+    beforeEach(() => {
       store = createStore();
       panelType = shallowMount(PanelType, {
         propsData,
-        sync: false,
         store,
+        sync: false,
+        attachToDocument: true,
       });
-      panelType.vm.$nextTick(done);
     });
 
     describe('Time Series Chart panel type', () => {

yarn.lock

@@ -2991,7 +2991,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^0.5.3:
+color-convert@^0.5.3, color-convert@~0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
   integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
@@ -3468,6 +3468,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
@@ -6877,6 +6882,14 @@ jed@^1.1.1:
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
   integrity sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ=
 
+jest-canvas-mock@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.1.2.tgz#0d16c9f91534f773fd132fc289f2e6b6db8faa28"
+  integrity sha512-1VI4PK4/X70yrSjYScYVkYJYbXYlZLKJkUrAlyHjQsfolv64aoFyIrmMDtqCjpYrpVvWYEcAGUaYv5DVJj00oQ==
+  dependencies:
+    cssfontparser "^1.2.1"
+    parse-color "^1.0.0"
+
 jest-changed-files@^24.8.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.8.0.tgz#7e7eb21cf687587a85e50f3d249d1327e15b157b"
@@ -9123,6 +9136,13 @@ parse-asn1@^5.0.0:
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
 
+parse-color@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+  integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+  dependencies:
+    color-convert "~0.5.0"
+
 parse-entities@^1.0.2, parse-entities@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.0.tgz#9deac087661b2e36814153cb78d7e54a4c5fd6f4"