Merge branch '208800-step-2-3-fix-jest-environment' into 'master'

Step 3 - Setup testURL in jest jsdom

See merge request gitlab-org/gitlab!36407

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -17,6 +17,8 @@ import RequirementForm from 'ee/requirements/components/requirement_form.vue';
 import createRequirement from 'ee/requirements/queries/createRequirement.mutation.graphql';
 import updateRequirement from 'ee/requirements/queries/updateRequirement.mutation.graphql';
 
+import { TEST_HOST } from 'helpers/test_constants';
+
 import {
   FilterState,
   mockRequirementsOpen,
@@ -280,7 +282,7 @@ describe('RequirementsRoot', () => {
           wrapper.vm.updateUrl();
 
           expect(global.window.location.href).toBe(
-            `http://localhost/?page=2&next=${mockPageInfo.endCursor}&state=all&search=foo&sort=updated_asc&author_username%5B%5D=root&author_username%5B%5D=john.doe`,
+            `${TEST_HOST}/?page=2&next=${mockPageInfo.endCursor}&state=all&search=foo&sort=updated_asc&author_username%5B%5D=root&author_username%5B%5D=john.doe`,
           );
         });
       });
@@ -664,7 +666,7 @@ describe('RequirementsRoot', () => {
         expect(wrapper.vm.prevPageCursor).toBe('');
         expect(wrapper.vm.nextPageCursor).toBe('');
         expect(global.window.location.href).toBe(
-          `http://localhost/?page=1&state=opened&search=foo&sort=created_desc&author_username%5B%5D=root&author_username%5B%5D=john.doe`,
+          `${TEST_HOST}/?page=1&state=opened&search=foo&sort=created_desc&author_username%5B%5D=root&author_username%5B%5D=john.doe`,
         );
       });
 
@@ -690,7 +692,7 @@ describe('RequirementsRoot', () => {
         expect(wrapper.vm.prevPageCursor).toBe('');
         expect(wrapper.vm.nextPageCursor).toBe('');
         expect(global.window.location.href).toBe(
-          `http://localhost/?page=1&state=opened&sort=updated_desc`,
+          `${TEST_HOST}/?page=1&state=opened&sort=updated_desc`,
         );
       });
     });
@@ -711,7 +713,7 @@ describe('RequirementsRoot', () => {
         expect(wrapper.vm.prevPageCursor).toBe('');
         expect(wrapper.vm.nextPageCursor).toBe(mockPageInfo.endCursor);
         expect(global.window.location.href).toBe(
-          `http://localhost/?page=2&state=opened&sort=created_desc&next=${mockPageInfo.endCursor}`,
+          `${TEST_HOST}/?page=2&state=opened&sort=created_desc&next=${mockPageInfo.endCursor}`,
         );
       });
 
@@ -730,7 +732,7 @@ describe('RequirementsRoot', () => {
         expect(wrapper.vm.prevPageCursor).toBe(mockPageInfo.startCursor);
         expect(wrapper.vm.nextPageCursor).toBe('');
         expect(global.window.location.href).toBe(
-          `http://localhost/?page=1&state=opened&sort=created_desc&prev=${mockPageInfo.startCursor}`,
+          `${TEST_HOST}/?page=1&state=opened&sort=created_desc&prev=${mockPageInfo.startCursor}`,
         );
       });
     });

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -13,7 +13,6 @@ describe('Blob Header Default Actions', () => {
   let wrapper;
   let btnGroup;
   let buttons;
-  const hrefPrefix = 'http://localhost';
 
   function createComponent(propsData = {}) {
     wrapper = mount(BlobHeaderActions, {
@@ -47,11 +46,11 @@ describe('Blob Header Default Actions', () => {
     });
 
     it('correct href attribute on RAW button', () => {
-      expect(buttons.at(1).vm.$el.href).toBe(`${hrefPrefix}${Blob.rawPath}`);
+      expect(buttons.at(1).attributes('href')).toBe(Blob.rawPath);
     });
 
     it('correct href attribute on Download button', () => {
-      expect(buttons.at(2).vm.$el.href).toBe(`${hrefPrefix}${Blob.rawPath}?inline=false`);
+      expect(buttons.at(2).attributes('href')).toBe(`${Blob.rawPath}?inline=false`);
     });
 
     it('does not render "Copy file contents" button as disables if the viewer is Simple', () => {

spec/frontend/environment.js

@@ -3,12 +3,14 @@
 const path = require('path');
 const { ErrorWithStack } = require('jest-util');
 const JSDOMEnvironment = require('jest-environment-jsdom-sixteen');
+const { TEST_HOST } = require('./helpers/test_constants');
 
 const ROOT_PATH = path.resolve(__dirname, '../..');
 
 class CustomEnvironment extends JSDOMEnvironment {
   constructor(config, context) {
-    super(config, context);
+    // Setup testURL so that window.location is setup properly
+    super({ ...config, testURL: TEST_HOST }, context);
 
     Object.assign(context.console, {
       error(...args) {
@@ -57,6 +59,9 @@ class CustomEnvironment extends JSDOMEnvironment {
         ownerDocument: this.global.document,
       },
     });
+
+    // Expose the jsdom (created in super class) to the global so that we can call reconfigure({ url: '' }) to properly set `window.location`
+    this.global.dom = this.dom;
   }
 
   async teardown() {

spec/frontend/helpers/test_constants.js

-export const FIXTURES_PATH = `/fixtures`;
-export const TEST_HOST = 'http://test.host';
+const FIXTURES_PATH = `/fixtures`;
+const TEST_HOST = 'http://test.host';
 
-export const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`;
+const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`;
 
-export const GREEN_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/green_box.png`;
-export const RED_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/red_box.png`;
+const GREEN_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/green_box.png`;
+const RED_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/red_box.png`;
+
+// NOTE: module.exports is needed so that this file can be used
+// by environment.js
+//
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  FIXTURES_PATH,
+  TEST_HOST,
+  DUMMY_IMAGE_URL,
+  GREEN_BOX_IMAGE_URL,
+  RED_BOX_IMAGE_URL,
+};

spec/frontend/monitoring/components/dashboard_spec.js

@@ -36,6 +36,7 @@ import {
   dashboardProps,
 } from '../fixture_data';
 import createFlash from '~/flash';
+import { TEST_HOST } from 'helpers/test_constants';
 
 jest.mock('~/flash');
 
@@ -448,7 +449,7 @@ describe('Dashboard', () => {
           path: 'dashboard&copy.yml',
         });
         expect(window.location.assign).toHaveBeenCalledWith(
-          'http://localhost/?dashboard=dashboard%2526copy.yml',
+          `${TEST_HOST}/?dashboard=dashboard%2526copy.yml`,
         );
       });
     });

spec/frontend/monitoring/utils_spec.js

@@ -460,7 +460,7 @@ describe('monitoring/utils', () => {
 
         expect(urlUtils.updateHistory).toHaveBeenCalledTimes(1);
         expect(urlUtils.updateHistory).toHaveBeenCalledWith({
-          url: `http://localhost/${urlParams}`,
+          url: `${TEST_HOST}/${urlParams}`,
           title: '',
         });
       },

spec/frontend/repository/utils/dom_spec.js

 import { setHTMLFixture } from '../../helpers/fixtures';
 import { updateElementsVisibility, updateFormAction } from '~/repository/utils/dom';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('updateElementsVisibility', () => {
   it('adds hidden class', () => {
@@ -31,7 +32,7 @@ describe('updateFormAction', () => {
     updateFormAction('.js-test', '/gitlab/create', path);
 
     expect(document.querySelector('.js-test').action).toBe(
-      `http://localhost/gitlab/create/${path.replace(/^\//, '')}`,
+      `${TEST_HOST}/gitlab/create/${path.replace(/^\//, '')}`,
     );
   });
 });

spec/frontend/self_monitor/components/self_monitor_form_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { GlDeprecatedButton } from '@gitlab/ui';
 import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue';
 import { createStore } from '~/self_monitor/store';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('self monitor component', () => {
   let wrapper;
@@ -82,7 +83,7 @@ describe('self monitor component', () => {
             .find({ ref: 'selfMonitoringFormText' })
             .find('a')
             .attributes('href'),
-        ).toEqual('http://localhost/instance-administrators-random/gitlab-self-monitoring');
+        ).toEqual(`${TEST_HOST}/instance-administrators-random/gitlab-self-monitoring`);
       });
     });
   });