test: add new test csse for useParagonThemeCore

openedx · May 23, 2024 · 9814fb3 · 9814fb3
1 parent f4556a3
commit 9814fb3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/react/hooks/paragon/useParagonThemeCore.js b/src/react/hooks/paragon/useParagonThemeCore.js
@@ -130,9 +130,11 @@ const useParagonThemeCore = ({
     } else {
       existingCoreThemeLink.rel = 'stylesheet';
       existingCoreThemeLink.removeAttribute('as');
+      existingCoreThemeLink.dataset.paragonThemeCore = true;
       if (brandCoreLink) {
         brandCoreLink.rel = 'stylesheet';
         brandCoreLink.removeAttribute('as');
+        brandCoreLink.dataset.brandThemeCore = true;
       }
       setIsParagonThemeCoreLoaded(true);
       setIsBrandThemeCoreLoaded(true);

diff --git a/src/react/hooks/paragon/useParagonThemeCore.test.js b/src/react/hooks/paragon/useParagonThemeCore.test.js
@@ -86,6 +86,24 @@ describe('useParagonThemeCore', () => {
     expect(document.querySelector('link').href).toBe(`${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.core.fileName}`);
   });
 
+  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');
+    expect(themeCoreLinks.length).toBe(1);
+    expect(themeCoreLinks[0].rel).toContain('stylesheet');
+    expect(themeCoreLinks[0]).not.toHaveAttribute('as', 'style');
+  });
+
   it('should not create any core link if can not find themeCore urls definition', () => {
     const coreConfig = {
       themeCore: {