fix: always use window.location?.origin for Paragon fallbackThemeUrl (#806)

Author: brian-smith-tcril

src/react/hooks/paragon/useParagonThemeCore.test.js

@@ -10,6 +10,8 @@ jest.mock('../../../logging');
 describe('useParagonThemeCore', () => {
   const themeOnComplete = jest.fn();
   let coreConfig;
+  const originalWindowLocation = window.location;
+  const mockWindowLocationOrigin = jest.fn();
 
   beforeEach(() => {
     document.head.innerHTML = '';
@@ -21,9 +23,25 @@ describe('useParagonThemeCore', () => {
       },
       onComplete: themeOnComplete,
     };
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        get origin() {
+          return mockWindowLocationOrigin();
+        },
+      },
+    });
+    mockWindowLocationOrigin.mockReturnValue(getConfig().BASE_URL);
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
+  afterAll(() => {
+    Object.defineProperty(window, 'location', originalWindowLocation);
+  });
+
   it('should load the core url and change the loading state to true', () => {
     renderHook(() => useParagonThemeCore(coreConfig));
     const createdLinkTag = document.head.querySelector('link');

src/react/hooks/paragon/useParagonThemeUrls.test.js

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import useParagonThemeUrls from './useParagonThemeUrls';
-import { mergeConfig } from '../../../config';
+import { mergeConfig, getConfig } from '../../../config';
 
 Object.defineProperty(global, 'PARAGON_THEME', {
   value: {
@@ -41,8 +41,26 @@ Object.defineProperty(global, 'PARAGON_THEME', {
   writable: true,
 });
 
+const originalWindowLocation = window.location;
+const mockWindowLocationOrigin = jest.fn();
+Object.defineProperty(window, 'location', {
+  value: {
+    get origin() {
+      return mockWindowLocationOrigin();
+    },
+  },
+});
+
 describe('useParagonThemeUrls', () => {
-  beforeEach(() => { jest.resetAllMocks(); });
+  beforeEach(() => {
+    mockWindowLocationOrigin.mockReturnValue(getConfig().BASE_URL);
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+  afterAll(() => {
+    Object.defineProperty(window, 'location', originalWindowLocation);
+  });
   it.each([
     [undefined, undefined],
     [{}, {

src/react/hooks/paragon/useParagonThemeVariants.test.js

@@ -9,12 +9,29 @@ jest.mock('../../../logging');
 
 describe('useParagonThemeVariants', () => {
   const themeOnComplete = jest.fn();
+  const originalWindowLocation = window.location;
+  const mockWindowLocationOrigin = jest.fn();
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        get origin() {
+          return mockWindowLocationOrigin();
+        },
+      },
+    });
+    mockWindowLocationOrigin.mockReturnValue(getConfig().BASE_URL);
+  });
 
   afterEach(() => {
     document.head.innerHTML = '';
     jest.clearAllMocks();
   });
 
+  afterAll(() => {
+    Object.defineProperty(window, 'location', originalWindowLocation);
+  });
+
   it('should create the links tags for each theme variant and change the state to true when all variants are loaded', () => {
     const themeVariants = {
       light: {

src/react/hooks/paragon/utils.js

@@ -1,4 +1,3 @@
-import { getConfig } from '../../../config';
 import { basename } from '../../../initialize';
 
 /**
@@ -17,7 +16,7 @@ export const removeExistingLinks = (existingLinks) => {
 * @returns {string} The default theme url.
 */
 export const fallbackThemeUrl = (url) => {
-  const baseUrl = getConfig().BASE_URL || window.location?.origin;
+  const baseUrl = window.location?.origin;
 
   // validates if the baseurl has the protocol to be interpreted correctly by the browser,
   // if is not present add '//' to use Protocol-relative URL

src/react/hooks/paragon/utils.test.js

@@ -1,43 +1,30 @@
 import { fallbackThemeUrl } from './utils';
-import { mergeConfig } from '../../../config';
 
 describe('fallbackThemeUrl', () => {
-  it('if should return a relative url if the BASE_URL does not provide the protocol', () => {
-    mergeConfig({
-      BASE_URL: 'example.com',
-    });
-
-    expect(fallbackThemeUrl('my.css')).toBe('//example.com/my.css');
-  });
+  const originalWindowLocation = window.location;
+  const mockWindowLocationOrigin = jest.fn();
 
-  it('if should return a relative url if the BASE_URL is a relative url', () => {
-    mergeConfig({
-      BASE_URL: '//example.com',
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        get origin() {
+          return mockWindowLocationOrigin();
+        },
+      },
     });
-    expect(fallbackThemeUrl('my.css')).toBe('//example.com/my.css');
   });
 
-  it('if should return a full url if the BASE_URL provides the protocol', () => {
-    mergeConfig({
-      BASE_URL: 'http://example.com',
-    });
-    expect(fallbackThemeUrl('my.css')).toBe('http://example.com/my.css');
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-    mergeConfig({
-      BASE_URL: 'https://example.com',
-    });
-    expect(fallbackThemeUrl('my.css')).toBe('https://example.com/my.css');
+  afterAll(() => {
+    Object.defineProperty(window, 'location', originalWindowLocation);
   });
 
-  it('if should return a full url base on the window location if BASE_URL is not defined', () => {
-    mergeConfig({
-      BASE_URL: 'http://example.com',
-    });
-    expect(fallbackThemeUrl('my.css')).toBe('http://example.com/my.css');
+  it('should return a full url based on the window location', () => {
+    mockWindowLocationOrigin.mockReturnValue('http://example.com');
 
-    mergeConfig({
-      BASE_URL: '',
-    });
-    expect(fallbackThemeUrl('my.css')).toBe('http://localhost/my.css');
+    expect(fallbackThemeUrl('my.css')).toBe('http://example.com/my.css');
   });
 });