forked from openedx/frontend-platform
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add testing to useParagonTheme hooks (openedx#514)
* test: add testing to useParagonThemeCore * test: add test to useThemeVariants hook * fix: Paragon definition and remove onload mock * test: change test message to be clear
- Loading branch information
Showing
2 changed files
with
229 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,108 @@ | ||
| import { renderHook, act } from '@testing-library/react-hooks'; | ||
|
|
||
| import { getConfig } from '../../../config'; | ||
| import { logError } from '../../../logging'; | ||
|
|
||
| import useParagonThemeCore from './useParagonThemeCore'; | ||
|
|
||
| jest.mock('../../../logging'); | ||
|
|
||
| describe('useParagonThemeCore', () => { | ||
| const themeOnLoad = jest.fn(); | ||
| let coreConfig; | ||
| const themeOnLoad = jest.fn(); | ||
|
|
||
| beforeEach(() => { | ||
| document.head.innerHTML = ''; | ||
| coreConfig = { | ||
| themeCore: { | ||
| urls: { | ||
| default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css', | ||
| }, | ||
| }, | ||
| onLoad: themeOnLoad, | ||
| }; | ||
| jest.clearAllMocks(); | ||
| }); | ||
| afterEach(() => { | ||
| document.head.innerHTML = ''; | ||
| 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()); | ||
| expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
| it('should load the core 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' }, | ||
| }, | ||
| onLoad: themeOnLoad, | ||
| }; | ||
|
|
||
| it('should load the core default and brand url and change the loading state to true', () => { | ||
| 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'); | ||
| act(() => createdLinkTag.onload()); | ||
| expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]'); | ||
| const createdBrandLinkTag = document.head.querySelector('link[data-brand-theme-core="true"]'); | ||
| 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, | ||
| }; | ||
|
|
||
| act(() => { createdLinkTag.onload(); createdBrandLinkTag.onload(); }); | ||
| expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default); | ||
| expect(createdBrandLinkTag.href).toBe(coreConfig.themeCore.urls.brandOverride); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]'); | ||
| const createdBrandLinkTag = document.head.querySelector('link[data-brand-theme-core="true"]'); | ||
|
|
||
| it('should dispatch a log error and fallback to PARAGON_THEME if can not load the core theme link', () => { | ||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]'); | ||
| act(() => { | ||
| createdLinkTag.onload(); | ||
| createdBrandLinkTag.onload(); | ||
| }); | ||
| expect(createdLinkTag.href).toBe(coreConfig.themeCore.urls.default); | ||
| expect(createdBrandLinkTag.href).toBe(coreConfig.themeCore.urls.brandOverride); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| act(() => { createdLinkTag.onerror(); }); | ||
| expect(logError).toHaveBeenCalledTimes(1); | ||
| expect(logError).toHaveBeenCalledWith(`Failed to load core theme CSS from ${coreConfig.themeCore.urls.default}`); | ||
| expect(document.querySelector('link').href).toBe(`${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.core.fileName}`); | ||
| }); | ||
| 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, | ||
| }; | ||
|
|
||
| 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();">'; | ||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| const createdLinkTag = document.head.querySelector('link[data-paragon-theme-core="true"]'); | ||
|
|
||
| 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'); | ||
| }); | ||
| act(() => { | ||
| createdLinkTag.onerror(); | ||
| }); | ||
| expect(logError).toHaveBeenCalledTimes(1); | ||
| expect(logError).toHaveBeenCalledWith(`Failed to load core theme CSS from ${coreConfig.themeCore.urls.default}`); | ||
| expect(document.querySelector('link').href).toBe( | ||
| `${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.core.fileName}`, | ||
| ); | ||
| }); | ||
|
|
||
| it('should not create any core link if can not find themeCore urls definition', () => { | ||
| coreConfig = { | ||
| themeCore: { | ||
| default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css', | ||
| }, | ||
| onLoad: themeOnLoad, | ||
| }; | ||
| it('should not create any core link if can not find themeCore urls definition', () => { | ||
| const coreConfig = { | ||
| themeCore: { | ||
| default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css', | ||
| }, | ||
| onLoad: themeOnLoad, | ||
| }; | ||
|
|
||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| expect(document.head.querySelectorAll('link').length).toBe(0); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
| renderHook(() => useParagonThemeCore(coreConfig)); | ||
| expect(document.head.querySelectorAll('link').length).toBe(0); | ||
| expect(themeOnLoad).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
Oops, something went wrong.