From 60c49f18389ff625177a57277ef8f292a31097bf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 28 Oct 2023 17:12:58 +0200 Subject: refactor(providers,hooks): rewrite PrismThemeProvider & usePrismTheme * reuse Theme provider logic * move DOM mutation from provider to hook * add a script to init theme before page load --- .../prism-theme-provider.test.tsx | 50 ++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx (limited to 'src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx') diff --git a/src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx b/src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx new file mode 100644 index 0000000..d0c2630 --- /dev/null +++ b/src/utils/providers/prism-theme-provider/prism-theme-provider.test.tsx @@ -0,0 +1,50 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { type FC, useContext } from 'react'; +import { PrismThemeContext, PrismThemeProvider } from './prism-theme-provider'; + +const bodyPrefix = 'Current Prism theme is:'; + +const ComponentTest: FC = () => { + const { theme } = useContext(PrismThemeContext); + + return ( +
+ {bodyPrefix} {theme} +
+ ); +}; + +describe('PrismThemeProvider', () => { + it('uses the default value when the provider is not used', () => { + const defaultValue = 'system'; + + render(); + + expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent( + `${bodyPrefix} ${defaultValue}` + ); + }); + + it('provides the given value to its children and set a matching attribute', () => { + const attribute = 'ratione'; + const theme = 'dark'; + + const { baseElement } = render( + + + + ); + + expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent( + `${bodyPrefix} ${theme}` + ); + expect(baseElement.parentElement?.getAttribute(`data-${attribute}`)).toBe( + theme + ); + }); +}); -- cgit v1.2.3