fix: update dependenices and AppProvider test

Author: dcoa

package-lock.json

@@ -35,14 +35,16 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "1.2.0",
-    "@openedx/frontend-build": "14.0.3",
-    "@openedx/paragon": "22.3.2",
+    "@openedx/frontend-build": "github:edunext/frontend-build#dcoa/design-tokens-support",
+    "@openedx/paragon": "npm:@openedx/paragon@^22.0.0-alpha.25",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "14.4.3",
     "axios-mock-adapter": "^1.21.3",
     "core-js": "3.37.0",
     "husky": "8.0.3",
+    "jest-localstorage-mock": "^2.4.26",
     "jsdoc": "^4.0.0",
     "nodemon": "3.1.0",
     "prop-types": "15.8.1",

package.json

@@ -2,7 +2,7 @@ import React from 'react';
 import { createStore } from 'redux';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import AppProvider from './AppProvider';
 import { initialize } from '../initialize';
@@ -32,6 +32,7 @@ jest.mock('../config', () => ({
     REFRESH_ACCESS_TOKEN_ENDPOINT: 'localhost:18000/oauth2/access_token',
     ACCESS_TOKEN_COOKIE_NAME: 'access_token',
     CSRF_TOKEN_API_PATH: 'localhost:18000/csrf',
+    PUBLIC_PATH: '/',
   }),
 }));
 

src/react/AppProvider.test.jsx

@@ -34,8 +34,9 @@ const useParagonThemeCore = ({
       setIsBrandThemeCoreLoaded(true);
       return;
     }
-    const getParagonThemeCoreLink = () => document.head.querySelector('link[data-paragon-theme-core="true"');
+    const getParagonThemeCoreLink = () => document.head.querySelector('link[data-paragon-theme-core="true"]');
     const existingCoreThemeLink = document.head.querySelector(`link[href='${themeCore.urls.default}']`);
+    const brandCoreLink = document.head.querySelector(`link[href='${themeCore.urls.brandOverride}']`);
     if (!existingCoreThemeLink) {
       const getExistingCoreThemeLinks = (isBrandOverride) => {
         const coreThemeLinkSelector = `link[data-${isBrandOverride ? 'brand' : 'paragon'}-theme-core="true"]`;
@@ -126,6 +127,15 @@ const useParagonThemeCore = ({
       } else {
         setIsBrandThemeCoreLoaded(true);
       }
+    } else {
+      existingCoreThemeLink.rel = 'stylesheet';
+      existingCoreThemeLink.removeAttribute('as');
+      if (brandCoreLink) {
+        brandCoreLink.rel = 'stylesheet';
+        brandCoreLink.removeAttribute('as');
+      }
+      setIsParagonThemeCoreLoaded(true);
+      setIsBrandThemeCoreLoaded(true);
     }
   }, [themeCore?.urls, onLoad]);
 };

src/react/hooks/paragon/useParagonThemeCore.js

@@ -187,7 +187,13 @@ const useParagonThemeVariants = ({
       } else {
         const updatedStylesheetRel = generateStylesheetRelAttr(themeVariant);
         existingThemeVariantLink.rel = updatedStylesheetRel;
-        existingThemeVariantBrandLink.rel = updatedStylesheetRel;
+        existingThemeVariantLink.removeAttribute('as');
+        if (existingThemeVariantBrandLink) {
+          existingThemeVariantBrandLink.rel = updatedStylesheetRel;
+          existingThemeVariantBrandLink.removeAttribute('as');
+        }
+        setIsParagonThemeVariantLoaded(true);
+        setIsBrandThemeVariantLoaded(true);
       }
     });
   }, [themeVariants, currentThemeVariant, onLoad]);

src/react/hooks/paragon/useParagonThemeVariants.js

@@ -2,6 +2,7 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
+import 'jest-localstorage-mock';
 
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing