test: add test to useParagonTheme hook and paragon utils (openedx#525)

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

@@ -1,97 +1,38 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-
-import { getConfig } from '../../../config';
-
 import useParagonTheme from './useParagonTheme';
 
-jest.mock('../../../config', () => ({
-  ...jest.requireActual('.../../../config'),
-  getConfig: jest.fn().mockReturnValue({
-    PARAGON_THEME_URLS: {
-      core: {
-        urls: {
-          default: 'core.css',
-        },
-      },
-      defaults: {
-        light: 'light',
-        dark: 'dark',
-      },
-      variants: {
-        light: {
+describe('useParagonTheme', () => {
+  it('should return an array with and object that indicates the theme status, and a function', () => {
+    const config = {
+      PARAGON_THEME_URLS: {
+        core: {
           urls: {
-            default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/light.min.css',
+            default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
           },
         },
-        dark: {
-          urls: {
-            default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/dark.min.css',
+        defaults: {
+          light: 'light',
+          dark: 'dark',
+        },
+        variants: {
+          light: {
+            urls: {
+              default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+            },
+          },
+          dark: {
+            urls: {
+              default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/dark.min.css',
+            },
           },
         },
       },
-    },
-  }),
-}));
-
-let mockMediaQueryListEvent;
-const mockAddEventListener = jest.fn((dispatch, fn) => fn(mockMediaQueryListEvent));
-const mockRemoveEventListener = jest.fn();
-
-Object.defineProperty(window, 'matchMedia', {
-  value: jest.fn(() => ({
-    addEventListener: mockAddEventListener,
-    removeEventListener: mockRemoveEventListener,
-  })),
-});
-
-Object.defineProperty(window, 'localStorage', {
-  value: {
-    getItem: jest.fn(),
-  },
-});
-
-describe('useParagonTheme', () => {
-  beforeEach(() => {
-    document.head.innerHTML = '';
-    mockMediaQueryListEvent = { matches: true };
-    mockAddEventListener.mockClear();
-    mockRemoveEventListener.mockClear();
-    window.localStorage.getItem.mockClear();
-  });
-
-  it('should configure theme variants according with system preference and add the change event listener', () => {
-    const { result, unmount } = renderHook(() => useParagonTheme(getConfig()));
-    const themeLinks = document.head.querySelectorAll('link');
-    const darkLink = document.head.querySelector('link[data-paragon-theme-variant="dark"]');
-    const lightLink = document.head.querySelector('link[data-paragon-theme-variant="light"]');
-    act(() => { themeLinks.forEach((link) => link.onload()); });
-
-    expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
-    expect(mockAddEventListener).toHaveBeenCalled();
-    expect(darkLink.rel).toBe('stylesheet');
-    expect(lightLink.rel).toBe('alternate stylesheet');
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'dark' });
-
-    unmount();
-    expect(mockRemoveEventListener).toHaveBeenCalled();
-  });
-
-  it('should configure theme variants according with user preference if is defined (localStorage)', () => {
-    window.localStorage.getItem.mockReturnValue('light');
-    const { result, unmount } = renderHook(() => useParagonTheme(getConfig()));
-    const themeLinks = document.head.querySelectorAll('link');
-    const darkLink = document.head.querySelector('link[data-paragon-theme-variant="dark"]');
-    const lightLink = document.head.querySelector('link[data-paragon-theme-variant="light"]');
-    act(() => { themeLinks.forEach((link) => link.onload()); });
-
-    expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
-    expect(mockAddEventListener).toHaveBeenCalled();
+    };
 
-    expect(darkLink.rel).toBe('alternate stylesheet');
-    expect(lightLink.rel).toBe('stylesheet');
-    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
+    const { result } = renderHook(() => useParagonTheme(config));
+    const createdLinksTag = document.head.querySelectorAll('link');
+    act(() => { createdLinksTag.forEach((link) => link.onload()); });
 
-    unmount();
-    expect(mockRemoveEventListener).toHaveBeenCalled();
+    expect(result.current).toEqual([{ isThemeLoaded: true, themeVariant: 'light' }, expect.any(Function)]);
   });
 });

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

@@ -28,16 +28,16 @@ describe('useParagonThemeCore', () => {
 		expect(themeOnLoad).toHaveBeenCalledTimes(1);
 	});
 
-	it('should load the core default and brand url and change the loading state to true', () => {
-		const coreConfig = {
-			themeCore: {
-				urls: {
-					default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
-					brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$2.0.0Version/dist/core.min.css',
-				},
-			},
-			onLoad: themeOnLoad,
-		};
+  it('should load the core default and brand url and change the loading state to true', () => {
+    const coreConfig = {
+      themeCore: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$2.0.0/dist/core.min.css',
+        },
+      },
+      onLoad: themeOnLoad,
+    };
 
 		renderHook(() => useParagonThemeCore(coreConfig));
 		const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]');

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

@@ -0,0 +1,95 @@
+import { removeExistingLinks, getDefaultThemeVariant, handleVersionSubstitution } from './utils';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: true,
+    media: query,
+  })),
+});
+
+const mockGetItem = jest.fn();
+Object.defineProperty(window, 'localStorage', {
+  value: {
+    getItem: mockGetItem,
+  },
+});
+
+describe('removeExistingLinks', () => {
+  afterEach(() => {
+    document.head.innerHTML = '';
+    jest.clearAllMocks();
+  });
+
+  it('should remove all the links in the DOM', () => {
+    document.head.innerHTML = `
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@edx/brand@$2.0.0/dist/core.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/light.min.css">
+    `;
+
+    removeExistingLinks(document.querySelectorAll('link'));
+    expect(document.querySelectorAll('link').length).toBe(0);
+  });
+});
+
+describe('getDefaultThemeVariant', () => {
+  it('should return the theme variant according with system preference', () => {
+    const variant = getDefaultThemeVariant({
+      themeVariantDefaults: {
+        light: 'light',
+        dark: 'dark',
+      },
+      themeVariants: {
+        light: {
+          fileName: 'light.min.css',
+        },
+        dark: {
+          fileName: 'dark.min.css',
+        },
+      },
+    });
+    expect(variant).toEqual({ metadata: { fileName: 'dark.min.css' }, name: 'dark' });
+  });
+
+  it('should return the theme variant according with local storage preference', () => {
+    mockGetItem.mockImplementation(() => 'light');
+    const variant = getDefaultThemeVariant({
+      themeVariantDefaults: {
+        light: 'light',
+        dark: 'dark',
+      },
+      themeVariants: {
+        light: {
+          fileName: 'light.min.css',
+        },
+        dark: {
+          fileName: 'dark.min.css',
+        },
+      },
+    });
+    expect(variant).toEqual({ metadata: { fileName: 'light.min.css' }, name: 'light' });
+  });
+
+  it('should return the theme variant configuration as default', () => {
+    const variant = getDefaultThemeVariant({
+      themeVariantDefaults: {
+        light: 'light',
+      },
+      themeVariants: {
+        light: {
+          fileName: 'light.min.css',
+        },
+      },
+    });
+    expect(variant).toEqual({ metadata: { fileName: 'light.min.css' }, name: 'light' });
+  });
+});
+
+describe('handleVersionSubstitution', () => {
+  it('should substitude the paragon version to use', () => {
+    const config = { localVersion: '21.1.1', wildcardKeyword: 'alpha', url: 'https://cdn.jsdelivr.net/npm/@edx/paragon@alpha/dist/core.min.css' };
+    const newLink = handleVersionSubstitution(config);
+    expect(newLink).toBe('https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/core.min.css');
+  });
+});