Merge branch 'set-location-correctly-in-url-utils-spec' into 'master'

Set window location in tests more consistently

See merge request gitlab-org/gitlab!63878

doc/development/testing_guide/frontend_testing.md

@@ -423,6 +423,40 @@ it('does something', () => {
 });
 ```
 
+### Mocking the current location in Jest
+
+If your tests require `window.location.href` to take a particular value, use
+the `setWindowLocation` helper:
+
+```javascript
+import setWindowLocation from 'helpers/set_window_location';
+
+it('passes', () => {
+  setWindowLocation('https://gitlab.test/foo?bar=true');
+
+  expect(window.location).toMatchObject({
+    hostname: 'gitlab.test',
+    pathname: '/foo',
+    search: '?bar=true',
+  });
+});
+```
+
+If your tests need to assert that certain `window.location` methods were
+called, use the `useMockLocationHelper` helper:
+
+```javascript
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+
+useMockLocationHelper();
+
+it('passes', () => {
+  window.location.reload();
+
+  expect(window.location.reload).toHaveBeenCalled();
+});
+```
+
 ### Waiting in tests
 
 Sometimes a test needs to wait for something to happen in the application before it continues.

ee/spec/frontend/audit_events/components/audit_events_table_spec.js

@@ -2,6 +2,7 @@ import { GlPagination, GlTable } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 
 import AuditEventsTable from 'ee/audit_events/components/audit_events_table.vue';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import createEvents from '../mock_data';
 
 const EVENTS = createEvents();
@@ -24,8 +25,7 @@ describe('AuditEventsTable component', () => {
   };
 
   beforeEach(() => {
-    delete window.location;
-    window.location = new URL('https://localhost');
+    setWindowLocation('https://localhost');
 
     wrapper = createComponent();
   });
@@ -60,21 +60,21 @@ describe('AuditEventsTable component', () => {
     });
 
     it('should get the page number from the URL', () => {
-      window.location.search = '?page=2';
+      setWindowLocation('?page=2');
       wrapper = createComponent();
 
       expect(wrapper.find(GlPagination).props().value).toBe(2);
     });
 
     it('should not have a prevPage if the page is 1', () => {
-      window.location.search = '?page=1';
+      setWindowLocation('?page=1');
       wrapper = createComponent();
 
       expect(wrapper.find(GlPagination).props().prevPage).toBe(null);
     });
 
     it('should set the prevPage to 1 if the page is 2', () => {
-      window.location.search = '?page=2';
+      setWindowLocation('?page=2');
       wrapper = createComponent();
 
       expect(wrapper.find(GlPagination).props().prevPage).toBe(1);
@@ -88,7 +88,7 @@ describe('AuditEventsTable component', () => {
     });
 
     it('should set the nextPage to 2 if the page is 1', () => {
-      window.location.search = '?page=1';
+      setWindowLocation('?page=1');
       wrapper = createComponent();
 
       expect(wrapper.find(GlPagination).props().nextPage).toBe(2);

ee/spec/frontend/boards/stores/actions_spec.js

@@ -8,6 +8,7 @@ import actions, { gqlClient } from 'ee/boards/stores/actions';
 import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
 import * as types from 'ee/boards/stores/mutation_types';
 import mutations from 'ee/boards/stores/mutations';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import { mockMoveIssueParams, mockMoveData, mockMoveState } from 'jest/boards/mock_data';
@@ -32,6 +33,7 @@ Vue.use(Vuex);
 let mock;
 
 beforeEach(() => {
+  setWindowLocation(TEST_HOST);
   mock = new MockAdapter(axios);
   window.gon = { features: {} };
   jest.spyOn(commonUtils, 'historyPushState');
@@ -615,9 +617,7 @@ describe('fetchIssuesForEpic', () => {
 describe('toggleEpicSwimlanes', () => {
   it('should commit mutation TOGGLE_EPICS_SWIMLANES', () => {
     const startURl = `${TEST_HOST}/groups/gitlab-org/-/boards/1?group_by=epic`;
-    global.jsdom.reconfigure({
-      url: startURl,
-    });
+    setWindowLocation(startURl);
 
     const state = {
       isShowingEpicsSwimlanes: false,
@@ -643,9 +643,7 @@ describe('toggleEpicSwimlanes', () => {
   });
 
   it('should dispatch fetchEpicsSwimlanes and fetchLists actions when isShowingEpicsSwimlanes is true', () => {
-    global.jsdom.reconfigure({
-      url: `${TEST_HOST}/groups/gitlab-org/-/boards/1`,
-    });
+    setWindowLocation(`${TEST_HOST}/groups/gitlab-org/-/boards/1`);
 
     jest.spyOn(gqlClient, 'query').mockResolvedValue({});
 

ee/spec/frontend/compliance_dashboard/components/shared/pagination_spec.js

 import { GlPagination } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-
 import Pagination from 'ee/compliance_dashboard/components/shared/pagination.vue';
+import setWindowLocation from 'helpers/set_window_location_helper';
 
 describe('Pagination component', () => {
   let wrapper;
+  const origin = 'https://localhost';
 
   const findGlPagination = () => wrapper.find(GlPagination);
   const getLink = (query) => wrapper.find(query).element.getAttribute('href');
@@ -23,8 +24,7 @@ describe('Pagination component', () => {
   };
 
   beforeEach(() => {
-    delete window.location;
-    window.location = new URL('https://localhost');
+    setWindowLocation(origin);
   });
 
   afterEach(() => {
@@ -33,7 +33,7 @@ describe('Pagination component', () => {
 
   describe('when initialized', () => {
     beforeEach(() => {
-      window.location.search = '?page=2';
+      setWindowLocation('?page=2');
       wrapper = createComponent();
     });
 
@@ -42,17 +42,17 @@ describe('Pagination component', () => {
     });
 
     it('should create a link to the previous page', () => {
-      expect(findPrevPageLink()).toEqual('https://localhost/?page=1');
+      expect(findPrevPageLink()).toBe(`${origin}/?page=1`);
     });
 
     it('should create a link to the next page', () => {
-      expect(findNextPageLink()).toEqual('https://localhost/?page=3');
+      expect(findNextPageLink()).toBe(`${origin}/?page=3`);
     });
   });
 
   describe('when on last page', () => {
     beforeEach(() => {
-      window.location.search = '?page=2';
+      setWindowLocation('?page=2');
       wrapper = createComponent(true);
     });
 
@@ -63,7 +63,7 @@ describe('Pagination component', () => {
 
   describe('when there is only one page', () => {
     beforeEach(() => {
-      window.location.search = '?page=1';
+      setWindowLocation('?page=1');
       wrapper = createComponent(true);
     });
 

ee/spec/frontend/on_demand_scans/components/on_demand_scans_form_spec.js

@@ -11,15 +11,15 @@ import dastScannerProfilesQuery from 'ee/security_configuration/dast_profiles/gr
 import dastSiteProfilesQuery from 'ee/security_configuration/dast_profiles/graphql/dast_site_profiles.query.graphql';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createApolloProvider from 'helpers/mock_apollo_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
-import { redirectTo, setUrlParams } from '~/lib/utils/url_utility';
+import { redirectTo } from '~/lib/utils/url_utility';
 import RefSelector from '~/ref/components/ref_selector.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import * as responses from '../mocks/apollo_mocks';
 import { scannerProfiles, siteProfiles } from '../mocks/mock_data';
 
-const URL_HOST = 'https://localhost/';
 const helpPagePath = '/application_security/dast/index#on-demand-scans';
 const projectPath = 'group/project';
 const defaultBranch = 'main';
@@ -52,7 +52,6 @@ useLocalStorageSpy();
 jest.mock('~/lib/utils/url_utility', () => ({
   isAbsolute: jest.requireActual('~/lib/utils/url_utility').isAbsolute,
   queryToObject: jest.requireActual('~/lib/utils/url_utility').queryToObject,
-  setUrlParams: jest.requireActual('~/lib/utils/url_utility').setUrlParams,
   redirectTo: jest.fn(),
 }));
 
@@ -578,27 +577,21 @@ describe('OnDemandScansForm', () => {
     const [scannerProfile] = scannerProfiles;
 
     it('scanner profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ scanner_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation('?scanner_profile_id=1');
       createShallowComponent();
 
       expect(wrapper.find(ScannerProfileSelector).attributes('value')).toBe(scannerProfile.id);
     });
 
     it('site profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ site_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation('?site_profile_id=1');
       createShallowComponent();
 
       expect(wrapper.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
     });
 
     it('both scanner & site profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ site_profile_id: 1, scanner_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation('?site_profile_id=1&scanner_profile_id=1');
       createShallowComponent();
 
       expect(wrapper.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
@@ -614,10 +607,6 @@ describe('OnDemandScansForm', () => {
         }),
       );
 
-      global.jsdom.reconfigure({
-        url: setUrlParams({ site_profile_id: 1, scanner_profile_id: 1 }, URL_HOST),
-      });
-
       createShallowComponent();
       await wrapper.vm.$nextTick();
 

ee/spec/frontend/on_demand_scans/components/profile_selector/dast_profiles_selector_spec.js

@@ -8,9 +8,9 @@ import SiteProfileSelector from 'ee/on_demand_scans/components/profile_selector/
 import dastScannerProfilesQuery from 'ee/security_configuration/dast_profiles/graphql/dast_scanner_profiles.query.graphql';
 import dastSiteProfilesQuery from 'ee/security_configuration/dast_profiles/graphql/dast_site_profiles.query.graphql';
 import createApolloProvider from 'helpers/mock_apollo_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { setUrlParams } from '~/lib/utils/url_utility';
 import * as responses from '../../mocks/apollo_mocks';
 import { scannerProfiles, siteProfiles } from '../../mocks/mock_data';
 
@@ -21,6 +21,10 @@ const fullPath = '/project/path';
 const [passiveScannerProfile, activeScannerProfile] = scannerProfiles;
 const [nonValidatedSiteProfile, validatedSiteProfile] = siteProfiles;
 
+beforeEach(() => {
+  setWindowLocation(URL_HOST);
+});
+
 describe('EE - DAST Profiles Selector', () => {
   let wrapper;
   let localVue;
@@ -179,27 +183,21 @@ describe('EE - DAST Profiles Selector', () => {
     const [scannerProfile] = scannerProfiles;
 
     it('scanner profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ scanner_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation(`?scanner_profile_id=1`);
       createComponent();
 
       expect(findScannerProfilesSelector().attributes('value')).toBe(scannerProfile.id);
     });
 
     it('site profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ site_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation(`?site_profile_id=1`);
       createComponent();
 
       expect(findSiteProfilesSelector().attributes('value')).toBe(siteProfile.id);
     });
 
     it('both scanner & site profile', () => {
-      global.jsdom.reconfigure({
-        url: setUrlParams({ site_profile_id: 1, scanner_profile_id: 1 }, URL_HOST),
-      });
+      setWindowLocation(`?site_profile_id=1&scanner_profile_id=1`);
       createComponent();
 
       expect(wrapper.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);

ee/spec/frontend/oncall_schedule/add_edit_schedule_modal_spec.js

@@ -10,6 +10,7 @@ import { addScheduleModalId } from 'ee/oncall_schedules/components/oncall_schedu
 import updateOncallScheduleMutation from 'ee/oncall_schedules/graphql/mutations/update_oncall_schedule.mutation.graphql';
 import getOncallSchedulesWithRotationsQuery from 'ee/oncall_schedules/graphql/queries/get_oncall_schedules.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   getOncallSchedulesQueryResponse,
@@ -250,19 +251,7 @@ describe('AddScheduleModal', () => {
     });
 
     describe('when the schedule timezone is updated', () => {
-      const { location } = window;
-
-      beforeEach(() => {
-        delete window.location;
-        window.location = {
-          reload: jest.fn(),
-          hash: location.hash,
-        };
-      });
-
-      afterEach(() => {
-        window.location = location;
-      });
+      useMockLocationHelper();
 
       it('it should not reload the page if the timezone has not changed', async () => {
         mutate.mockResolvedValueOnce({});

ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_spec.js

@@ -5,12 +5,17 @@ import { merge } from 'lodash';
 import DastFailedSiteValidations from 'ee/security_configuration/dast_profiles/components/dast_failed_site_validations.vue';
 import DastProfiles from 'ee/security_configuration/dast_profiles/components/dast_profiles.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 
 const TEST_NEW_DAST_SAVED_SCAN_PATH = '/-/on_demand_scans/new';
 const TEST_NEW_DAST_SCANNER_PROFILE_PATH = '/-/on_demand_scans/scanner_profiles/new';
 const TEST_NEW_DAST_SITE_PROFILE_PATH = '/-/on_demand_scans/site_profiles/new';
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
 
+beforeEach(() => {
+  setWindowLocation(TEST_HOST);
+});
+
 describe('EE - DastProfiles', () => {
   let wrapper;
 
@@ -115,8 +120,6 @@ describe('EE - DastProfiles', () => {
   });
 
   describe('tabs', () => {
-    const originalLocation = window.location;
-
     describe('without location hash set', () => {
       beforeEach(() => {
         createFullComponent();
@@ -148,19 +151,15 @@ describe('EE - DastProfiles', () => {
 
     describe.each`
       tabName               | index | givenLocationHash
-      ${'Saved Scans'}      | ${0}  | ${'saved-scans'}
-      ${'Site Profiles'}    | ${1}  | ${'site-profiles'}
-      ${'Scanner Profiles'} | ${2}  | ${'scanner-profiles'}
+      ${'Saved Scans'}      | ${0}  | ${'#saved-scans'}
+      ${'Site Profiles'}    | ${1}  | ${'#site-profiles'}
+      ${'Scanner Profiles'} | ${2}  | ${'#scanner-profiles'}
     `('with location hash set to "$givenLocationHash"', ({ tabName, index, givenLocationHash }) => {
       beforeEach(() => {
-        setWindowLocation(`http://foo.com/index#${givenLocationHash}`);
+        setWindowLocation(givenLocationHash);
         createFullComponent();
       });
 
-      afterEach(() => {
-        window.location = originalLocation;
-      });
-
       it(`has "${tabName}" selected`, () => {
         const tab = getTab({
           tabName,
@@ -171,7 +170,8 @@ describe('EE - DastProfiles', () => {
       });
 
       it('updates the browsers URL to contain the selected tab', () => {
-        window.location.hash = '';
+        setWindowLocation('#');
+        expect(window.location.hash).toBe('');
 
         getTabsComponent().vm.$emit('input', index);
 

ee/spec/frontend_integration/security_dashboard/security_dashboard_init_integration_spec.js

 import initSecurityDashboard from 'ee/security_dashboard/security_dashboard_init';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 
 const EMPTY_DIV = document.createElement('div');
@@ -19,9 +20,7 @@ describe('Security Dashboard', () => {
     root = document.createElement('div');
     document.body.appendChild(root);
 
-    global.jsdom.reconfigure({
-      url: `${TEST_HOST}/-/security/dashboard`,
-    });
+    setWindowLocation(`${TEST_HOST}/-/security/dashboard`);
   });
 
   afterEach(() => {

ee/spec/frontend_integration/security_dashboard/vulnerability_report_init_integration_spec.js

 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import initVulnerabilityReport from 'ee/security_dashboard/vulnerability_report_init';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 
 const EMPTY_DIV = document.createElement('div');
@@ -25,9 +26,7 @@ describe('Vulnerability Report', () => {
     root = document.createElement('div');
     document.body.appendChild(root);
 
-    global.jsdom.reconfigure({
-      url: `${TEST_HOST}/-/security/vulnerabilities`,
-    });
+    setWindowLocation(`${TEST_HOST}/-/security/vulnerabilities`);
   });
 
   afterEach(() => {

spec/frontend/__helpers__/set_window_location_helper.js

 /**
- * setWindowLocation allows for setting `window.location`
- * (doing so directly is causing an error in jsdom)
+ * setWindowLocation allows for setting `window.location` within Jest.
  *
- * Example usage:
- * assert(window.location.hash === undefined);
- * setWindowLocation('http://example.com#foo')
- * assert(window.location.hash === '#foo');
+ * The jsdom environment at the time of writing does not support changing the
+ * current location (see
+ * https://github.com/jsdom/jsdom/blob/16.4.0/lib/jsdom/living/window/navigation.js#L76),
+ * hence this helper.
  *
- * More information:
- * https://github.com/facebook/jest/issues/890
+ * This helper mutates the current `window.location` very similarly to how
+ * a direct assignment to `window.location.href` would in a browser (but
+ * without the navigation/reload behaviour). For instance:
  *
- * @param url
+ * - Set the full href by passing an absolute URL, e.g.:
+ *
+ *     setWindowLocation('https://gdk.test');
+ *     // window.location.href is now 'https://gdk.test'
+ *
+ * - Set the path, search and/or hash components by passing a relative URL:
+ *
+ *     setWindowLocation('/foo/bar');
+ *     // window.location.href is now 'http://test.host/foo/bar'
+ *
+ *     setWindowLocation('?foo=bar');
+ *     // window.location.href is now 'http://test.host/?foo=bar'
+ *
+ *     setWindowLocation('#foo');
+ *     // window.location.href is now 'http://test.host/#foo'
+ *
+ *     setWindowLocation('/a/b/foo.html?bar=1#qux');
+ *     // window.location.href is now 'http://test.host/a/b/foo.html?bar=1#qux
+ *
+ * Both approaches also automatically update the rest of the properties on
+ * `window.locaton`. For instance:
+ *
+ *     setWindowLocation('http://test.host/a/b/foo.html?bar=1#qux');
+ *     // window.location.origin is now 'http://test.host'
+ *     // window.location.pathname is now '/a/b/foo.html'
+ *     // window.location.search is now '?bar=1'
+ *     // window.location.searchParams is now { bar: 1 }
+ *     // window.location.hash is now '#qux'
+ *
+ * @param {string} url A string representing an absolute or relative URL.
+ * @returns {undefined}
  */
 export default function setWindowLocation(url) {
-  const parsedUrl = new URL(url);
+  if (typeof url !== 'string') {
+    throw new TypeError(`Expected string; got ${url} (${typeof url})`);
+  }
 
-  const newLocationValue = [
-    'hash',
-    'host',
-    'hostname',
-    'href',
-    'origin',
-    'pathname',
-    'port',
-    'protocol',
-    'search',
-  ].reduce(
-    (location, prop) => ({
-      ...location,
-      [prop]: parsedUrl[prop],
-    }),
-    {},
-  );
+  const newUrl = new URL(url, window.location.href);
 
-  Object.defineProperty(window, 'location', {
-    value: newLocationValue,
-    writable: true,
-  });
+  global.jsdom.reconfigure({ url: newUrl.href });
 }

spec/frontend/__helpers__/set_window_location_helper_spec.js

 import setWindowLocation from './set_window_location_helper';
 
-describe('setWindowLocation', () => {
-  const originalLocation = window.location;
+describe('helpers/set_window_location_helper', () => {
+  const originalLocation = window.location.href;
 
-  afterEach(() => {
-    window.location = originalLocation;
+  beforeEach(() => {
+    setWindowLocation(originalLocation);
   });
 
-  it.each`
-    url                                    | property      | value
-    ${'https://gitlab.com#foo'}            | ${'hash'}     | ${'#foo'}
-    ${'http://gitlab.com'}                 | ${'host'}     | ${'gitlab.com'}
-    ${'http://gitlab.org'}                 | ${'hostname'} | ${'gitlab.org'}
-    ${'http://gitlab.org/foo#bar'}         | ${'href'}     | ${'http://gitlab.org/foo#bar'}
-    ${'http://gitlab.com'}                 | ${'origin'}   | ${'http://gitlab.com'}
-    ${'http://gitlab.com/foo/bar/baz'}     | ${'pathname'} | ${'/foo/bar/baz'}
-    ${'https://gitlab.com'}                | ${'protocol'} | ${'https:'}
-    ${'http://gitlab.com#foo'}             | ${'protocol'} | ${'http:'}
-    ${'http://gitlab.com:8080'}            | ${'port'}     | ${'8080'}
-    ${'http://gitlab.com?foo=bar&bar=foo'} | ${'search'}   | ${'?foo=bar&bar=foo'}
-  `(
-    'sets "window.location.$property" to be "$value" when called with: "$url"',
-    ({ url, property, value }) => {
-      expect(window.location).toBe(originalLocation);
-
-      setWindowLocation(url);
-
-      expect(window.location[property]).toBe(value);
-    },
-  );
-
-  it.each([null, 1, undefined, false, '', 'gitlab.com'])(
-    'throws an error when called with an invalid url: "%s"',
-    (invalidUrl) => {
-      expect(() => setWindowLocation(invalidUrl)).toThrow(/Invalid URL/);
-      expect(window.location).toBe(originalLocation);
-    },
-  );
+  describe('setWindowLocation', () => {
+    describe('given a complete URL', () => {
+      it.each`
+        url                                    | property      | value
+        ${'https://gitlab.com#foo'}            | ${'hash'}     | ${'#foo'}
+        ${'http://gitlab.com'}                 | ${'host'}     | ${'gitlab.com'}
+        ${'http://gitlab.org'}                 | ${'hostname'} | ${'gitlab.org'}
+        ${'http://gitlab.org/foo#bar'}         | ${'href'}     | ${'http://gitlab.org/foo#bar'}
+        ${'http://gitlab.com'}                 | ${'origin'}   | ${'http://gitlab.com'}
+        ${'http://gitlab.com/foo/bar/baz'}     | ${'pathname'} | ${'/foo/bar/baz'}
+        ${'https://gitlab.com'}                | ${'protocol'} | ${'https:'}
+        ${'ftp://gitlab.com#foo'}              | ${'protocol'} | ${'ftp:'}
+        ${'http://gitlab.com:8080'}            | ${'port'}     | ${'8080'}
+        ${'http://gitlab.com?foo=bar&bar=foo'} | ${'search'}   | ${'?foo=bar&bar=foo'}
+      `(
+        'sets "window.location.$property" to be "$value" when called with: "$url"',
+        ({ url, property, value }) => {
+          expect(window.location.href).toBe(originalLocation);
+
+          setWindowLocation(url);
+
+          expect(window.location[property]).toBe(value);
+        },
+      );
+    });
+
+    describe('given a partial URL', () => {
+      it.each`
+        partialURL            | href
+        ${'//foo.test:3000/'} | ${'http://foo.test:3000/'}
+        ${'/foo/bar'}         | ${`${originalLocation}foo/bar`}
+        ${'foo/bar'}          | ${`${originalLocation}foo/bar`}
+        ${'?foo=bar'}         | ${`${originalLocation}?foo=bar`}
+        ${'#a-thing'}         | ${`${originalLocation}#a-thing`}
+      `('$partialURL sets location.href to $href', ({ partialURL, href }) => {
+        expect(window.location.href).toBe(originalLocation);
+
+        setWindowLocation(partialURL);
+
+        expect(window.location.href).toBe(href);
+      });
+    });
+
+    describe('relative path', () => {
+      describe.each`
+        initialHref                    | path        | newHref
+        ${'https://gdk.test/foo/bar'}  | ${'/qux'}   | ${'https://gdk.test/qux'}
+        ${'https://gdk.test/foo/bar/'} | ${'/qux'}   | ${'https://gdk.test/qux'}
+        ${'https://gdk.test/foo/bar'}  | ${'qux'}    | ${'https://gdk.test/foo/qux'}
+        ${'https://gdk.test/foo/bar/'} | ${'qux'}    | ${'https://gdk.test/foo/bar/qux'}
+        ${'https://gdk.test/foo/bar'}  | ${'../qux'} | ${'https://gdk.test/qux'}
+        ${'https://gdk.test/foo/bar/'} | ${'../qux'} | ${'https://gdk.test/foo/qux'}
+      `('when location is $initialHref', ({ initialHref, path, newHref }) => {
+        beforeEach(() => {
+          setWindowLocation(initialHref);
+        });
+
+        it(`${path} sets window.location.href to ${newHref}`, () => {
+          expect(window.location.href).toBe(initialHref);
+
+          setWindowLocation(path);
+
+          expect(window.location.href).toBe(newHref);
+        });
+      });
+    });
+
+    it.each([null, 1, undefined, false, 'https://', 'https:', { foo: 1 }, []])(
+      'throws an error when called with an invalid url: "%s"',
+      (invalidUrl) => {
+        expect(() => setWindowLocation(invalidUrl)).toThrow();
+        expect(window.location.href).toBe(originalLocation);
+      },
+    );
+
+    describe('affects links', () => {
+      it.each`
+        url                                 | hrefAttr          | expectedHref
+        ${'http://gitlab.com/'}             | ${'foo'}          | ${'http://gitlab.com/foo'}
+        ${'http://gitlab.com/bar/'}         | ${'foo'}          | ${'http://gitlab.com/bar/foo'}
+        ${'http://gitlab.com/bar/'}         | ${'/foo'}         | ${'http://gitlab.com/foo'}
+        ${'http://gdk.test:3000/?foo=bar'}  | ${'?qux=1'}       | ${'http://gdk.test:3000/?qux=1'}
+        ${'https://gdk.test:3000/?foo=bar'} | ${'//other.test'} | ${'https://other.test/'}
+      `(
+        'given $url, <a href="$hrefAttr"> points to $expectedHref',
+        ({ url, hrefAttr, expectedHref }) => {
+          setWindowLocation(url);
+
+          const link = document.createElement('a');
+          link.setAttribute('href', hrefAttr);
+
+          expect(link.href).toBe(expectedHref);
+        },
+      );
+    });
+  });
 });

spec/frontend/diffs/components/compare_versions_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { trimText } from 'helpers/text_helper';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
@@ -13,6 +14,10 @@ localVue.use(Vuex);
 const NEXT_COMMIT_URL = `${TEST_HOST}/?commit_id=next`;
 const PREV_COMMIT_URL = `${TEST_HOST}/?commit_id=prev`;
 
+beforeEach(() => {
+  setWindowLocation(TEST_HOST);
+});
+
 describe('CompareVersions', () => {
   let wrapper;
   let store;
@@ -215,15 +220,7 @@ describe('CompareVersions', () => {
 
     describe('prev commit', () => {
       beforeAll(() => {
-        global.jsdom.reconfigure({
-          url: `${TEST_HOST}?commit_id=${mrCommit.id}`,
-        });
-      });
-
-      afterAll(() => {
-        global.jsdom.reconfigure({
-          url: TEST_HOST,
-        });
+        setWindowLocation(`${TEST_HOST}?commit_id=${mrCommit.id}`);
       });
 
       beforeEach(() => {
@@ -258,15 +255,7 @@ describe('CompareVersions', () => {
 
     describe('next commit', () => {
       beforeAll(() => {
-        global.jsdom.reconfigure({
-          url: `${TEST_HOST}?commit_id=${mrCommit.id}`,
-        });
-      });
-
-      afterAll(() => {
-        global.jsdom.reconfigure({
-          url: TEST_HOST,
-        });
+        setWindowLocation(`${TEST_HOST}?commit_id=${mrCommit.id}`);
       });
 
       beforeEach(() => {

spec/frontend/diffs/store/getters_versions_dropdowns_spec.js

+import setWindowLocation from 'helpers/set_window_location_helper';
 import {
   DIFF_COMPARE_BASE_VERSION_INDEX,
   DIFF_COMPARE_HEAD_VERSION_INDEX,
@@ -47,15 +48,12 @@ describe('Compare diff version dropdowns', () => {
     let expectedFirstVersion;
     let expectedBaseVersion;
     let expectedHeadVersion;
-    const originalLocation = window.location;
+    const originalLocation = window.location.href;
 
     const setupTest = (includeDiffHeadParam) => {
       const diffHeadParam = includeDiffHeadParam ? '?diff_head=true' : '';
 
-      Object.defineProperty(window, 'location', {
-        writable: true,
-        value: { search: diffHeadParam },
-      });
+      setWindowLocation(diffHeadParam);
 
       expectedFirstVersion = {
         ...diffsMockData[1],
@@ -91,7 +89,7 @@ describe('Compare diff version dropdowns', () => {
     };
 
     afterEach(() => {
-      window.location = originalLocation;
+      setWindowLocation(originalLocation);
     });
 
     it('base version selected', () => {

spec/frontend/issues_list/components/issuables_list_app_spec.js

@@ -6,6 +6,7 @@ import {
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
@@ -27,11 +28,6 @@ const TEST_ENDPOINT = '/issues';
 const TEST_CREATE_ISSUES_PATH = '/createIssue';
 const TEST_SVG_PATH = '/emptySvg';
 
-const setUrl = (query) => {
-  window.location.href = `${TEST_LOCATION}${query}`;
-  window.location.search = query;
-};
-
 const MOCK_ISSUES = Array(PAGE_SIZE_MANUAL)
   .fill(0)
   .map((_, i) => ({
@@ -40,7 +36,6 @@ const MOCK_ISSUES = Array(PAGE_SIZE_MANUAL)
   }));
 
 describe('Issuables list component', () => {
-  let oldLocation;
   let mockAxios;
   let wrapper;
   let apiSpy;
@@ -75,19 +70,13 @@ describe('Issuables list component', () => {
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
 
-    oldLocation = window.location;
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: { href: '', search: '' },
-    });
-    window.location.href = TEST_LOCATION;
+    setWindowLocation(TEST_LOCATION);
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
     mockAxios.restore();
-    window.location = oldLocation;
   });
 
   describe('with failed issues response', () => {
@@ -314,7 +303,7 @@ describe('Issuables list component', () => {
         '?assignee_username=root&author_username=root&confidential=yes&label_name%5B%5D=Aquapod&label_name%5B%5D=Astro&milestone_title=v3.0&my_reaction_emoji=airplane&scope=all&sort=priority&state=opened&weight=0&not[label_name][]=Afterpod&not[milestone_title][]=13';
 
       beforeEach(() => {
-        setUrl(query);
+        setWindowLocation(query);
 
         setupApiMock(() => [200, MOCK_ISSUES.slice(0)]);
         factory({ sortKey: 'milestone_due_desc' });
@@ -358,7 +347,7 @@ describe('Issuables list component', () => {
         '?assignee_username=root&author_username=root&confidential=yes&label_name%5B%5D=Aquapod&label_name%5B%5D=Astro&milestone_title=v3.0&my_reaction_emoji=airplane&scope=all&sort=priority&state=opened&weight=0&page=3';
 
       beforeEach(() => {
-        setUrl(query);
+        setWindowLocation(query);
 
         setupApiMock(() => [200, MOCK_ISSUES.slice(0)]);
         factory({ sortKey: 'milestone_due_desc' });
@@ -387,7 +376,7 @@ describe('Issuables list component', () => {
 
   describe('with hash in window.location', () => {
     beforeEach(() => {
-      window.location.href = `${TEST_LOCATION}#stuff`;
+      setWindowLocation(`${TEST_LOCATION}#stuff`);
       setupApiMock(() => [200, MOCK_ISSUES.slice(0)]);
       factory();
       return waitForPromises();
@@ -422,7 +411,7 @@ describe('Issuables list component', () => {
 
     describe('with query in window location', () => {
       beforeEach(() => {
-        window.location.search = '?weight=Any';
+        setWindowLocation('?weight=Any');
 
         factory();
 
@@ -436,7 +425,7 @@ describe('Issuables list component', () => {
 
     describe('with closed state', () => {
       beforeEach(() => {
-        window.location.search = '?state=closed';
+        setWindowLocation('?state=closed');
 
         factory();
 
@@ -450,7 +439,7 @@ describe('Issuables list component', () => {
 
     describe('with all state', () => {
       beforeEach(() => {
-        window.location.search = '?state=all';
+        setWindowLocation('?state=all');
 
         factory();
 
@@ -565,7 +554,7 @@ describe('Issuables list component', () => {
       });
 
       it('sets value according to query', () => {
-        setUrl(query);
+        setWindowLocation(query);
 
         factory({ type: 'jira' });
 
@@ -583,7 +572,7 @@ describe('Issuables list component', () => {
       it('sets value according to query', () => {
         const query = '?search=free+text';
 
-        setUrl(query);
+        setWindowLocation(query);
 
         factory({ type: 'jira' });
 

spec/frontend/issues_list/components/issues_list_app_spec.js

@@ -7,6 +7,7 @@ import VueApollo from 'vue-apollo';
 import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
 import getIssuesCountQuery from 'ee_else_ce/issues_list/queries/get_issues_count.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -42,7 +43,6 @@ import eventHub from '~/issues_list/eventhub';
 import { getSortOptions } from '~/issues_list/utils';
 import axios from '~/lib/utils/axios_utils';
 import { scrollUp } from '~/lib/utils/scroll_utils';
-import { setUrlParams } from '~/lib/utils/url_utility';
 
 jest.mock('~/flash');
 jest.mock('~/lib/utils/scroll_utils', () => ({
@@ -115,11 +115,11 @@ describe('IssuesListApp component', () => {
   };
 
   beforeEach(() => {
+    setWindowLocation(TEST_HOST);
     axiosMock = new AxiosMockAdapter(axios);
   });
 
   afterEach(() => {
-    global.jsdom.reconfigure({ url: TEST_HOST });
     axiosMock.reset();
     wrapper.destroy();
   });
@@ -186,7 +186,7 @@ describe('IssuesListApp component', () => {
         const search = '?search=refactor&sort=created_date&state=opened';
 
         beforeEach(() => {
-          global.jsdom.reconfigure({ url: `${TEST_HOST}${search}` });
+          setWindowLocation(search);
 
           wrapper = mountComponent({
             provide: { ...defaultProvide, isSignedIn: true },
@@ -258,7 +258,7 @@ describe('IssuesListApp component', () => {
   describe('initial url params', () => {
     describe('due_date', () => {
       it('is set from the url params', () => {
-        global.jsdom.reconfigure({ url: `${TEST_HOST}?${PARAM_DUE_DATE}=${DUE_DATE_OVERDUE}` });
+        setWindowLocation(`?${PARAM_DUE_DATE}=${DUE_DATE_OVERDUE}`);
 
         wrapper = mountComponent();
 
@@ -268,7 +268,7 @@ describe('IssuesListApp component', () => {
 
     describe('search', () => {
       it('is set from the url params', () => {
-        global.jsdom.reconfigure({ url: `${TEST_HOST}${locationSearch}` });
+        setWindowLocation(locationSearch);
 
         wrapper = mountComponent();
 
@@ -278,9 +278,7 @@ describe('IssuesListApp component', () => {
 
     describe('sort', () => {
       it.each(Object.keys(urlSortParams))('is set as %s from the url params', (sortKey) => {
-        global.jsdom.reconfigure({
-          url: setUrlParams({ sort: urlSortParams[sortKey] }, TEST_HOST),
-        });
+        setWindowLocation(`?sort=${urlSortParams[sortKey]}`);
 
         wrapper = mountComponent();
 
@@ -297,7 +295,7 @@ describe('IssuesListApp component', () => {
       it('is set from the url params', () => {
         const initialState = IssuableStates.All;
 
-        global.jsdom.reconfigure({ url: setUrlParams({ state: initialState }, TEST_HOST) });
+        setWindowLocation(`?state=${initialState}`);
 
         wrapper = mountComponent();
 
@@ -307,7 +305,7 @@ describe('IssuesListApp component', () => {
 
     describe('filter tokens', () => {
       it('is set from the url params', () => {
-        global.jsdom.reconfigure({ url: `${TEST_HOST}${locationSearch}` });
+        setWindowLocation(locationSearch);
 
         wrapper = mountComponent();
 
@@ -347,7 +345,7 @@ describe('IssuesListApp component', () => {
     describe('when there are issues', () => {
       describe('when search returns no results', () => {
         beforeEach(() => {
-          global.jsdom.reconfigure({ url: `${TEST_HOST}?search=no+results` });
+          setWindowLocation(`?search=no+results`);
 
           wrapper = mountComponent({ provide: { hasProjectIssues: true }, mountFn: mount });
         });
@@ -377,9 +375,7 @@ describe('IssuesListApp component', () => {
 
       describe('when "Closed" tab has no issues', () => {
         beforeEach(() => {
-          global.jsdom.reconfigure({
-            url: setUrlParams({ state: IssuableStates.Closed }, TEST_HOST),
-          });
+          setWindowLocation(`?state=${IssuableStates.Closed}`);
 
           wrapper = mountComponent({ provide: { hasProjectIssues: true }, mountFn: mount });
         });

spec/frontend/lib/utils/url_utility_spec.js

+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import * as urlUtils from '~/lib/utils/url_utility';
 
@@ -16,24 +17,11 @@ const shas = {
   ],
 };
 
-const setWindowLocation = (value) => {
-  Object.defineProperty(window, 'location', {
-    writable: true,
-    value,
-  });
-};
+beforeEach(() => {
+  setWindowLocation(TEST_HOST);
+});
 
 describe('URL utility', () => {
-  let originalLocation;
-
-  beforeAll(() => {
-    originalLocation = window.location;
-  });
-
-  afterAll(() => {
-    window.location = originalLocation;
-  });
-
   describe('webIDEUrl', () => {
     afterEach(() => {
       gon.relative_url_root = '';
@@ -68,14 +56,7 @@ describe('URL utility', () => {
 
   describe('getParameterValues', () => {
     beforeEach(() => {
-      setWindowLocation({
-        href: 'https://gitlab.com?test=passing&multiple=1&multiple=2',
-        // make our fake location act like real window.location.toString
-        // URL() (used in getParameterValues) does this if passed an object
-        toString() {
-          return this.href;
-        },
-      });
+      setWindowLocation('https://gitlab.com?test=passing&multiple=1&multiple=2');
     });
 
     it('returns empty array for no params', () => {
@@ -330,9 +311,7 @@ describe('URL utility', () => {
 
   describe('doesHashExistInUrl', () => {
     beforeEach(() => {
-      setWindowLocation({
-        hash: 'https://gitlab.com/gitlab-org/gitlab-test/issues/1#note_1',
-      });
+      setWindowLocation('#note_1');
     });
 
     it('should return true when the given string exists in the URL hash', () => {
@@ -442,10 +421,7 @@ describe('URL utility', () => {
 
   describe('getBaseURL', () => {
     beforeEach(() => {
-      setWindowLocation({
-        protocol: 'https:',
-        host: 'gitlab.com',
-      });
+      setWindowLocation('https://gitlab.com');
     });
 
     it('returns correct base URL', () => {
@@ -637,10 +613,7 @@ describe('URL utility', () => {
       ${'http:'}  | ${'ws:'}
       ${'https:'} | ${'wss:'}
     `('returns "$expectation" with "$protocol" protocol', ({ protocol, expectation }) => {
-      setWindowLocation({
-        protocol,
-        host: 'example.com',
-      });
+      setWindowLocation(`${protocol}//example.com`);
 
       expect(urlUtils.getWebSocketProtocol()).toEqual(expectation);
     });
@@ -648,10 +621,7 @@ describe('URL utility', () => {
 
   describe('getWebSocketUrl', () => {
     it('joins location host to path', () => {
-      setWindowLocation({
-        protocol: 'http:',
-        host: 'example.com',
-      });
+      setWindowLocation('http://example.com');
 
       const path = '/lorem/ipsum?a=bc';
 
@@ -724,32 +694,32 @@ describe('URL utility', () => {
     const { getParameterByName } = urlUtils;
 
     it('should return valid parameter', () => {
-      setWindowLocation({ search: '?scope=all&p=2' });
+      setWindowLocation('?scope=all&p=2');
 
       expect(getParameterByName('p')).toEqual('2');
       expect(getParameterByName('scope')).toBe('all');
     });
 
     it('should return invalid parameter', () => {
-      setWindowLocation({ search: '?scope=all&p=2' });
+      setWindowLocation('?scope=all&p=2');
 
       expect(getParameterByName('fakeParameter')).toBe(null);
     });
 
     it('should return a parameter with spaces', () => {
-      setWindowLocation({ search: '?search=my terms' });
+      setWindowLocation('?search=my terms');
 
       expect(getParameterByName('search')).toBe('my terms');
     });
 
     it('should return a parameter with encoded spaces', () => {
-      setWindowLocation({ search: '?search=my%20terms' });
+      setWindowLocation('?search=my%20terms');
 
       expect(getParameterByName('search')).toBe('my terms');
     });
 
     it('should return a parameter with plus signs as spaces', () => {
-      setWindowLocation({ search: '?search=my+terms' });
+      setWindowLocation('?search=my+terms');
 
       expect(getParameterByName('search')).toBe('my terms');
     });
@@ -842,18 +812,20 @@ describe('URL utility', () => {
   });
 
   describe('urlIsDifferent', () => {
+    const current = 'http://current.test/';
+
     beforeEach(() => {
-      setWindowLocation('current');
+      setWindowLocation(current);
     });
 
     it('should compare against the window location if no compare value is provided', () => {
       expect(urlUtils.urlIsDifferent('different')).toBeTruthy();
-      expect(urlUtils.urlIsDifferent('current')).toBeFalsy();
+      expect(urlUtils.urlIsDifferent(current)).toBeFalsy();
     });
 
     it('should use the provided compare value', () => {
-      expect(urlUtils.urlIsDifferent('different', 'current')).toBeTruthy();
-      expect(urlUtils.urlIsDifferent('current', 'current')).toBeFalsy();
+      expect(urlUtils.urlIsDifferent('different', current)).toBeTruthy();
+      expect(urlUtils.urlIsDifferent(current, current)).toBeFalsy();
     });
   });
 
@@ -944,9 +916,8 @@ describe('URL utility', () => {
     it.each([[httpProtocol], [httpsProtocol]])(
       'when no url passed, returns correct protocol for %i from window location',
       (protocol) => {
-        setWindowLocation({
-          protocol,
-        });
+        setWindowLocation(`${protocol}//test.host`);
+
         expect(urlUtils.getHTTPProtocol()).toBe(protocol.slice(0, -1));
       },
     );
@@ -979,10 +950,8 @@ describe('URL utility', () => {
 
   describe('getURLOrigin', () => {
     it('when no url passed, returns correct origin from window location', () => {
-      const origin = 'https://foo.bar';
-
-      setWindowLocation({ origin });
-      expect(urlUtils.getURLOrigin()).toBe(origin);
+      setWindowLocation('https://user:pass@origin.test:1234/foo/bar?foo=1#bar');
+      expect(urlUtils.getURLOrigin()).toBe('https://origin.test:1234');
     });
 
     it.each`
@@ -1032,10 +1001,6 @@ describe('URL utility', () => {
     // eslint-disable-next-line no-script-url
     const javascriptUrl = 'javascript:alert(1)';
 
-    beforeEach(() => {
-      setWindowLocation({ origin: TEST_HOST });
-    });
-
     it.each`
       url                                | expected
       ${TEST_HOST}                       | ${true}

spec/frontend/pipeline_editor/components/ui/pipeline_editor_messages_spec.js

 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import CodeSnippetAlert from '~/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue';
 import { CODE_SNIPPET_SOURCES } from '~/pipeline_editor/components/code_snippet_alert/constants';
@@ -12,6 +13,10 @@ import {
   LOAD_FAILURE_UNKNOWN,
 } from '~/pipeline_editor/constants';
 
+beforeEach(() => {
+  setWindowLocation(TEST_HOST);
+});
+
 describe('Pipeline Editor messages', () => {
   let wrapper;
 
@@ -95,9 +100,7 @@ describe('Pipeline Editor messages', () => {
 
   describe('code snippet alert', () => {
     const setCodeSnippetUrlParam = (value) => {
-      global.jsdom.reconfigure({
-        url: `${TEST_HOST}/?code_snippet_copied_from=${value}`,
-      });
+      setWindowLocation(`${TEST_HOST}/?code_snippet_copied_from=${value}`);
     };
 
     it('does not show by default', () => {

spec/frontend/pipelines/pipelines_spec.js

@@ -4,6 +4,8 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { chunk } from 'lodash';
 import { nextTick } from 'vue';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
@@ -40,7 +42,6 @@ const mockPipelineWithStages = mockPipelinesResponse.pipelines.find(
 describe('Pipelines', () => {
   let wrapper;
   let mock;
-  let origWindowLocation;
 
   const paths = {
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
@@ -98,17 +99,8 @@ describe('Pipelines', () => {
     );
   };
 
-  beforeAll(() => {
-    origWindowLocation = window.location;
-    delete window.location;
-    window.location = {
-      search: '',
-      protocol: 'https:',
-    };
-  });
-
-  afterAll(() => {
-    window.location = origWindowLocation;
+  beforeEach(() => {
+    setWindowLocation(TEST_HOST);
   });
 
   beforeEach(() => {

spec/frontend/releases/components/app_edit_new_spec.js

@@ -4,6 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import Vuex from 'vuex';
 import { getJSONFixture } from 'helpers/fixtures';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import * as commonUtils from '~/lib/utils/common_utils';
 import ReleaseEditNewApp from '~/releases/components/app_edit_new.vue';
@@ -77,7 +78,7 @@ describe('Release edit/new component', () => {
   };
 
   beforeEach(() => {
-    global.jsdom.reconfigure({ url: TEST_HOST });
+    setWindowLocation(TEST_HOST);
 
     mock = new MockAdapter(axios);
     gon.api_version = 'v4';
@@ -164,9 +165,7 @@ describe('Release edit/new component', () => {
     `when the URL contains a "${BACK_URL_PARAM}=$backUrl" parameter`,
     ({ backUrl, expectedHref }) => {
       beforeEach(async () => {
-        global.jsdom.reconfigure({
-          url: `${TEST_HOST}?${BACK_URL_PARAM}=${encodeURIComponent(backUrl)}`,
-        });
+        setWindowLocation(`${TEST_HOST}?${BACK_URL_PARAM}=${encodeURIComponent(backUrl)}`);
 
         await factory();
       });

spec/frontend/releases/components/release_block_header_spec.js

@@ -2,6 +2,7 @@ import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
 import { getJSONFixture } from 'helpers/fixtures';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import ReleaseBlockHeader from '~/releases/components/release_block_header.vue';
 import { BACK_URL_PARAM } from '~/releases/constants';
@@ -60,12 +61,7 @@ describe('Release block header', () => {
     const currentUrl = 'https://example.gitlab.com/path';
 
     beforeEach(() => {
-      Object.defineProperty(window, 'location', {
-        writable: true,
-        value: {
-          href: currentUrl,
-        },
-      });
+      setWindowLocation(currentUrl);
 
       factory();
     });

spec/frontend/runner/admin_runners/admin_runners_app_spec.js

 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { TEST_HOST } from 'helpers/test_constants';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -43,7 +43,6 @@ localVue.use(VueApollo);
 describe('AdminRunnersApp', () => {
   let wrapper;
   let mockRunnersQuery;
-  let originalLocation;
 
   const findRunnerTypeHelp = () => wrapper.findComponent(RunnerTypeHelp);
   const findRunnerManualSetupHelp = () => wrapper.findComponent(RunnerManualSetupHelp);
@@ -65,22 +64,8 @@ describe('AdminRunnersApp', () => {
     });
   };
 
-  const setQuery = (query) => {
-    window.location.href = `${TEST_HOST}/admin/runners?${query}`;
-    window.location.search = query;
-  };
-
-  beforeAll(() => {
-    originalLocation = window.location;
-    Object.defineProperty(window, 'location', { writable: true, value: { href: '', search: '' } });
-  });
-
-  afterAll(() => {
-    window.location = originalLocation;
-  });
-
   beforeEach(async () => {
-    setQuery('');
+    setWindowLocation('/admin/runners');
 
     mockRunnersQuery = jest.fn().mockResolvedValue(runnersData);
     createComponentWithApollo();
@@ -116,7 +101,7 @@ describe('AdminRunnersApp', () => {
 
   describe('when a filter is preselected', () => {
     beforeEach(async () => {
-      setQuery(`?status[]=${STATUS_ACTIVE}&runner_type[]=${INSTANCE_TYPE}&tag[]=tag1`);
+      setWindowLocation(`?status[]=${STATUS_ACTIVE}&runner_type[]=${INSTANCE_TYPE}&tag[]=tag1`);
 
       createComponentWithApollo();
       await waitForPromises();

spec/frontend/search/index_spec.js

 import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { initSearchApp } from '~/search';
 import createStore from '~/search/store';
 
@@ -8,25 +9,6 @@ jest.mock('~/search/sidebar');
 jest.mock('ee_else_ce/search/highlight_blob_search_result');
 
 describe('initSearchApp', () => {
-  let defaultLocation;
-
-  const setUrl = (query) => {
-    window.location.href = `https://localhost:3000/search${query}`;
-    window.location.search = query;
-  };
-
-  beforeEach(() => {
-    defaultLocation = window.location;
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: { href: '', search: '' },
-    });
-  });
-
-  afterEach(() => {
-    window.location = defaultLocation;
-  });
-
   describe.each`
     search                           | decodedSearch
     ${'test'}                        | ${'test'}
@@ -38,7 +20,7 @@ describe('initSearchApp', () => {
     ${'test+%2520+this+%2520+stuff'} | ${'test %20 this %20 stuff'}
   `('parameter decoding', ({ search, decodedSearch }) => {
     beforeEach(() => {
-      setUrl(`?search=${search}`);
+      setWindowLocation(`/search?search=${search}`);
       initSearchApp();
     });
 

spec/frontend_integration/diffs/diffs_interopability_spec.js

 import { waitFor } from '@testing-library/dom';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import initDiffsApp from '~/diffs';
 import { createStore } from '~/mr_notes/stores';
@@ -111,9 +112,7 @@ describe('diffs third party interoperability', () => {
     ${'parallel view right side'} | ${'parallel'} | ${'.diff-tr.line_holder'} | ${'.diff-td.line_content.right-side'} | ${EXPECT_PARALLEL_RIGHT_SIDE}
   `('$desc', ({ view, rowSelector, codeSelector, expectation }) => {
     beforeEach(async () => {
-      global.jsdom.reconfigure({
-        url: `${TEST_HOST}/${TEST_BASE_URL}/diffs?view=${view}`,
-      });
+      setWindowLocation(`${TEST_HOST}/${TEST_BASE_URL}/diffs?view=${view}`);
 
       vm = startDiffsApp();
 

spec/frontend_integration/ide/helpers/start.js

 /* global monaco */
 
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { initIde } from '~/ide';
 import extendStore from '~/ide/stores/extend';
@@ -9,9 +10,7 @@ export default (container, { isRepoEmpty = false, path = '', mrId = '' } = {}) =
   const projectName = isRepoEmpty ? 'lorem-ipsum-empty' : 'lorem-ipsum';
   const pathSuffix = mrId ? `merge_requests/${mrId}` : `tree/master/-/${path}`;
 
-  global.jsdom.reconfigure({
-    url: `${TEST_HOST}/-/ide/project/gitlab-test/${projectName}/${pathSuffix}`,
-  });
+  setWindowLocation(`${TEST_HOST}/-/ide/project/gitlab-test/${projectName}/${pathSuffix}`);
 
   const el = document.createElement('div');
   Object.assign(el.dataset, IDE_DATASET);