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: {