diff --git a/src/react/AppProvider.test.jsx b/src/react/AppProvider.test.jsx
index 0a0400e88..a8f61aa0b 100644
--- 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 = (
+
+ Child One
+ Child Two
+
+ );
+
it('calls trackColorSchemeChoice', () => {
- const Component = (
-
- Child One
- Child Two
-
- );
render(Component);
expect(useTrackColorSchemeChoice).toHaveBeenCalled();
});
it('calls useParagonTheme', () => {
- const Component = (
-
- Child One
- Child Two
-
- );
render(Component);
expect(useParagonTheme).toHaveBeenCalled();
expect(useParagonTheme).toHaveBeenCalledWith(
@@ -180,12 +175,6 @@ describe('AppProvider', () => {
{ isThemeLoaded: false },
jest.fn(),
]);
- const Component = (
-
- Child One
- Child Two
-
- );
const { container } = render(Component);
expect(container).toBeEmptyDOMElement();
});
@@ -196,7 +185,7 @@ describe('AppProvider', () => {
{ isThemeLoaded: true, themeVariant: 'light' },
mockUseParagonThemeDispatch,
]);
- const Component = (
+ Component = (
{({ paragonTheme }) => (
@@ -235,12 +224,12 @@ describe('AppProvider', () => {
});
describe('useAppEvent', () => {
+ const Component = (
+
+ Child
+
+ );
it('subscribes to `AUTHENTICATED_USER_CHANGED`', async () => {
- const Component = (
-
- Child
-
- );
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 = (
-
- Child
-
- );
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 = (
-
- Child
-
- );
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
index 1528b69f0..fcc352ffa 100644
--- 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
index f5ff1a687..c1fd4933b 100644
--- 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 = '';
- 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
index 50fad4d74..1836a9d66 100644
--- 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: {