test: add testing to useParagonTheme hooks

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

@@ -0,0 +1,106 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { getConfig } from '../../../config';
+import { logError } from '../../../logging';
+import useParagonThemeCore from './useParagonThemeCore';
+
+jest.mock('../../../logging');
+
+describe('useParagonThemeCore', () => {
+  const themeOnLoad = jest.fn();
+  let initialState = false;
+
+  afterEach(() => {
+    initialState = false;
+    document.head.innerHTML = '';
+    themeOnLoad.mockClear();
+    logError.mockClear();
+  });
+  it('should load the core url and change the loading state to true', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const coreConfig = {
+      themeCore: {
+        urls: { default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css' },
+      },
+      onLoad: themeOnLoad,
+    };
+    renderHook(() => useParagonThemeCore(coreConfig));
+    const createdLinkTag = document.head.querySelector('link');
+    act(() => createdLinkTag.onload());
+    expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default);
+    expect(themeOnLoad).toHaveBeenCalledTimes(1);
+    expect(initialState).toBeTruthy();
+  });
+
+  it('should load the core default and brand url and change the loading state to true', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const coreConfig = {
+      themeCore: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$brandVersionVersion/dist/core.min.css',
+        },
+      },
+      onLoad: themeOnLoad,
+    };
+    renderHook(() => useParagonThemeCore(coreConfig));
+    const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]');
+    const createdBrandLinkTag = document.head.querySelector('link[data-brand-theme-core="true"]');
+
+    act(() => { createdLinkTag.onload(); createdBrandLinkTag.onload(); });
+    expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default);
+    expect(createdBrandLinkTag.href).toBe(coreConfig.themeCore.urls.brandOverride);
+    expect(themeOnLoad).toHaveBeenCalledTimes(1);
+    expect(initialState).toBeTruthy();
+  });
+
+  it('should dispatch a log error and fallback to PARAGON_THEME if can not load the core theme link', () => {
+    global.PARAGON_THEME = {
+      paragon: {
+        version: '1.0.0',
+        themeUrls: {
+          core: {
+            fileName: 'core.min.css',
+          },
+          variants: {
+            light: {
+              fileName: 'light.min.css',
+              default: true,
+              dark: false,
+            },
+          },
+        },
+      },
+    };
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const coreConfig = {
+      themeCore: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
+        },
+      },
+      onLoad: themeOnLoad,
+    };
+    renderHook(() => useParagonThemeCore(coreConfig));
+    const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]');
+
+    act(() => { createdLinkTag.onerror(); });
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(logError).toHaveBeenCalledWith(`Failed to load core theme CSS from ${coreConfig.themeCore.urls.default}`);
+    expect(document.querySelector('link').href).toBe(`${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.core.fileName}`);
+    expect(initialState).toBeFalsy();
+  });
+
+  it('should not create any core link if is properly configured', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const coreConfig = {
+      themeCore: {
+        default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
+      },
+      onLoad: themeOnLoad,
+    };
+    renderHook(() => useParagonThemeCore(coreConfig));
+    expect(document.head.querySelectorAll('link').length).toBe(0);
+    expect(themeOnLoad).toHaveBeenCalledTimes(1);
+    expect(initialState).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,159 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { getConfig } from '../../../config';
+import { logError } from '../../../logging';
+import useParagonThemeVariants from './useParagonThemeVariants';
+
+jest.mock('../../../logging');
+
+const mockAddEventListener = jest.fn();
+const mockRemoveEventListener = jest.fn();
+const mockOnChange = jest.fn();
+
+Object.defineProperty(window, 'matchMedia', {
+  value: jest.fn(() => ({
+    addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
+    onchange: mockOnChange,
+  })),
+});
+
+describe('useParagonThemeVariants', () => {
+  const themeOnLoad = jest.fn();
+  let initialState = false;
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+    themeOnLoad.mockClear();
+    initialState = false;
+    logError.mockClear();
+    mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
+  });
+
+  it('should create the links tags for each theme variant and change the state to true when are loaded', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const themeVariants = {
+      light: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$brandVersion/dist/light.min.css',
+
+        },
+      },
+      dark: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/dark.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$brandVersion/dist/dark.min.css',
+
+        },
+      },
+    };
+    const currentThemeVariant = 'light';
+    renderHook(() => useParagonThemeVariants({ themeVariants, currentThemeVariant, onLoad: themeOnLoad }));
+    const themeLinks = document.head.querySelectorAll('link');
+    act(() => { themeLinks.forEach((link) => link.onload()); });
+
+    expect(themeLinks.length).toBe(4);
+    expect(initialState).toBeTruthy();
+  });
+
+  it('should dispatch a log error and fallback to PARAGON_THEME if can not load the core theme link', () => {
+    global.PARAGON_THEME = {
+      paragon: {
+        version: '1.0.0',
+        themeUrls: {
+          core: {
+            fileName: 'core.min.css',
+          },
+          variants: {
+            light: {
+              fileName: 'light.min.css',
+              default: true,
+              dark: false,
+            },
+          },
+        },
+      },
+    };
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const themeVariants = {
+      light: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+        },
+      },
+    };
+    const currentThemeVariant = 'light';
+    renderHook(() => useParagonThemeVariants({ themeVariants, currentThemeVariant, onLoad: themeOnLoad }));
+    const createdLinkTag = document.head.querySelector('link');
+    act(() => { createdLinkTag.onerror(); });
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(logError).toHaveBeenCalledWith(`Failed to load theme variant (${currentThemeVariant}) CSS from ${themeVariants.light.urls.default}`);
+    expect(document.querySelector('link').href).toBe(`${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.variants.light.fileName}`);
+    expect(initialState).toBeFalsy();
+  });
+
+  it('should configure themes acording with system preference and add the change event listener', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    window.matchMedia['prefers-color-scheme'] = 'dark';
+
+    const themeVariants = {
+      light: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$brandVersion/dist/light.min.css',
+
+        },
+      },
+      dark: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/dark.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand@$brandVersion/dist/dark.min.css',
+
+        },
+      },
+    };
+
+    const currentThemeVariant = 'light';
+    renderHook(() => useParagonThemeVariants({
+      themeVariants,
+      currentThemeVariant,
+      onLoad: themeOnLoad,
+    }));
+
+    const themeLinks = document.head.querySelectorAll('link');
+    act(() => {
+      themeLinks.forEach((link) => link.onload());
+      window.matchMedia.matches = false;
+    });
+
+    expect(mockAddEventListener).toHaveBeenCalledTimes(1);
+    expect(initialState).toBeTruthy();
+  });
+
+  it('should do nothing if themeVariants is not configured', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const themeVariants = null;
+    const currentTheme = 'light';
+    renderHook(() => useParagonThemeVariants({ themeVariants, currentTheme, onLoad: themeOnLoad }));
+    expect(document.head.querySelectorAll('link').length).toBe(0);
+    expect(initialState).toBeFalsy();
+  });
+
+  it('should do nothing if themeVariants is not configured properly', () => {
+    themeOnLoad.mockImplementation(() => { initialState = true; });
+    const themeVariants = {
+      light: {
+        default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+      },
+      dark: {
+        default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/dark.min.css',
+      },
+    };
+
+    const currentTheme = 'light';
+    renderHook(() => useParagonThemeVariants({ themeVariants, currentTheme, onLoad: themeOnLoad }));
+    expect(document.head.querySelectorAll('link').length).toBe(0);
+    expect(initialState).toBeTruthy();
+  });
+});