test: refactor testing fot app provider, theme core hook, theme variants hook

dcoa · dcoa · commit 317b0c15da03 · 2024-05-28T18:38:16.000+10:00
diff --git a/src/react/AppProvider.test.jsx b/src/react/AppProvider.test.jsx
@@ -142,24 +142,19 @@ describe('AppProvider', () => {
   });
 
   describe('paragon theme and brand', () => {
+    let Component = (
+      <AppProvider>
+        <div>Child One</div>
+        <div>Child Two</div>
+      </AppProvider>
+    );
+
     it('calls trackColorSchemeChoice', () => {
-      const Component = (
-        <AppProvider>
-          <div>Child One</div>
-          <div>Child Two</div>
-        </AppProvider>
-      );
       render(Component);
       expect(useTrackColorSchemeChoice).toHaveBeenCalled();
     });
 
     it('calls useParagonTheme', () => {
-      const Component = (
-        <AppProvider>
-          <div>Child One</div>
-          <div>Child Two</div>
-        </AppProvider>
-      );
       render(Component);
       expect(useParagonTheme).toHaveBeenCalled();
       expect(useParagonTheme).toHaveBeenCalledWith(
@@ -180,12 +175,6 @@ describe('AppProvider', () => {
         { isThemeLoaded: false },
         jest.fn(),
       ]);
-      const Component = (
-        <AppProvider>
-          <div>Child One</div>
-          <div>Child Two</div>
-        </AppProvider>
-      );
       const { container } = render(Component);
       expect(container).toBeEmptyDOMElement();
     });
@@ -196,7 +185,7 @@ describe('AppProvider', () => {
         { isThemeLoaded: true, themeVariant: 'light' },
         mockUseParagonThemeDispatch,
       ]);
-      const Component = (
+      Component = (
         <AppProvider>
           <AppContext.Consumer>
             {({ paragonTheme }) => (
@@ -235,12 +224,12 @@ describe('AppProvider', () => {
   });
 
   describe('useAppEvent', () => {
+    const Component = (
+      <AppProvider>
+        <div>Child</div>
+      </AppProvider>
+    );
     it('subscribes to `AUTHENTICATED_USER_CHANGED`', async () => {
-      const Component = (
-        <AppProvider>
-          <div>Child</div>
-        </AppProvider>
-      );
       render(Component);
       expect(useAppEvent).toHaveBeenCalledWith(AUTHENTICATED_USER_CHANGED, expect.any(Function));
       const useAppEventMockCalls = useAppEvent.mock.calls;
@@ -252,11 +241,6 @@ describe('AppProvider', () => {
     });
 
     it('subscribes to `CONFIG_CHANGED`', async () => {
-      const Component = (
-        <AppProvider>
-          <div>Child</div>
-        </AppProvider>
-      );
       render(Component);
       expect(useAppEvent).toHaveBeenCalledWith(CONFIG_CHANGED, expect.any(Function));
       const useAppEventMockCalls = useAppEvent.mock.calls;
@@ -268,11 +252,6 @@ describe('AppProvider', () => {
     });
 
     it('subscribes to `LOCALE_CHANGED`', async () => {
-      const Component = (
-        <AppProvider>
-          <div>Child</div>
-        </AppProvider>
-      );
       render(Component);
       expect(useAppEvent).toHaveBeenCalledWith(LOCALE_CHANGED, expect.any(Function));
       const useAppEventMockCalls = useAppEvent.mock.calls;
diff --git a/src/react/hooks/paragon/useParagonTheme.test.js b/src/react/hooks/paragon/useParagonTheme.test.js
@@ -60,7 +60,7 @@ describe('useParagonTheme', () => {
   });
 
   it('should configure theme variants according with system preference and add the change event listener', () => {
-    const { unmount } = renderHook(() => useParagonTheme(getConfig()));
+    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"]');
@@ -70,13 +70,15 @@ describe('useParagonTheme', () => {
     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 { unmount } = renderHook(() => useParagonTheme(getConfig()));
+    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"]');
@@ -87,6 +89,8 @@ describe('useParagonTheme', () => {
 
     expect(darkLink.rel).toBe('alternate stylesheet');
     expect(lightLink.rel).toBe('stylesheet');
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
+
     unmount();
     expect(mockRemoveEventListener).toHaveBeenCalled();
   });
diff --git a/src/react/hooks/paragon/useParagonThemeCore.test.js b/src/react/hooks/paragon/useParagonThemeCore.test.js
@@ -9,20 +9,22 @@ jest.mock('../../../logging');
 
 describe('useParagonThemeCore', () => {
   const themeOnLoad = jest.fn();
+  let coreConfig;
 
-  afterEach(() => {
+  beforeEach(() => {
     document.head.innerHTML = '';
-    jest.clearAllMocks();
-  });
-
-  it('should load the core url and change the loading state to true', () => {
-    const coreConfig = {
+    coreConfig = {
       themeCore: {
-        urls: { default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css' },
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
+        },
       },
       onLoad: themeOnLoad,
     };
+    jest.clearAllMocks();
+  });
 
+  it('should load the core url and change the loading state to true', () => {
     renderHook(() => useParagonThemeCore(coreConfig));
     const createdLinkTag = document.head.querySelector('link');
     act(() => createdLinkTag.onload());
@@ -31,15 +33,7 @@ describe('useParagonThemeCore', () => {
   });
 
   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,
-    };
+    coreConfig.themeCore.urls.brandOverride = 'https://cdn.jsdelivr.net/npm/@edx/brand@$2.0.0Version/dist/core.min.css';
 
     renderHook(() => useParagonThemeCore(coreConfig));
     const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]');
@@ -52,33 +46,6 @@ describe('useParagonThemeCore', () => {
   });
 
   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',
-          },
-          defaults: {
-            light: 'light',
-          },
-          variants: {
-            light: {
-              fileName: 'light.min.css',
-            },
-          },
-        },
-      },
-    };
-    const coreConfig = {
-      themeCore: {
-        urls: {
-          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
-        },
-      },
-      onLoad: themeOnLoad,
-    };
-
     renderHook(() => useParagonThemeCore(coreConfig));
     const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]');
 
@@ -90,14 +57,6 @@ describe('useParagonThemeCore', () => {
 
   it('should not create a new link if the core theme is already loaded', () => {
     document.head.innerHTML = '<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css" onerror="this.remove();">';
-    const coreConfig = {
-      themeCore: {
-        urls: {
-          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
-        },
-      },
-      onLoad: themeOnLoad,
-    };
 
     renderHook(() => useParagonThemeCore(coreConfig));
     const themeCoreLinks = document.head.querySelectorAll('link');
@@ -107,7 +66,7 @@ describe('useParagonThemeCore', () => {
   });
 
   it('should not create any core link if can not find themeCore urls definition', () => {
-    const coreConfig = {
+    coreConfig = {
       themeCore: {
         default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css',
       },
diff --git a/src/react/hooks/paragon/useParagonThemeVariants.test.js b/src/react/hooks/paragon/useParagonThemeVariants.test.js
@@ -40,24 +40,6 @@ describe('useParagonThemeVariants', () => {
   });
 
   it('should dispatch a log error and fallback to PARAGON_THEME if can not load the variant theme link', () => {
-    global.PARAGON_THEME = {
-      paragon: {
-        version: '1.0.0',
-        themeUrls: {
-          core: {
-            fileName: 'core.min.css',
-          },
-          defaults: {
-            light: 'light',
-          },
-          variants: {
-            light: {
-              fileName: 'light.min.css',
-            },
-          },
-        },
-      },
-    };
     const themeVariants = {
       light: {
         urls: {
