blob: 59a72cc2551f2aae115121853cd1c741d4e5d20b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import { type FC, useContext } from 'react';
import { getThemeFromSystem } from '../../helpers';
import { ThemeContext, ThemeProvider } from './theme-provider';
const bodyPrefix = 'Current theme is:';
const ComponentTest: FC = () => {
const { theme } = useContext(ThemeContext);
return (
<div>
{bodyPrefix} {theme}
</div>
);
};
describe('ThemeProvider', () => {
it('uses the default value when the provider is not used', () => {
const defaultValue = 'system';
render(<ComponentTest />);
expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
`${bodyPrefix} ${defaultValue}`
);
});
it('provides the given value to its children and set a matching attribute', () => {
const attribute = 'iure';
const theme = 'dark';
const { baseElement } = render(
<ThemeProvider
attribute={attribute}
defaultTheme={theme}
storageKey="dolores"
>
<ComponentTest />
</ThemeProvider>
);
expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
`${bodyPrefix} ${theme}`
);
expect(baseElement.parentElement?.getAttribute(`data-${attribute}`)).toBe(
theme
);
expect(baseElement.parentElement).toHaveStyle(`color-scheme: ${theme};`);
});
it('can resolve the preferred theme from user system settings', () => {
const attribute = 'qui';
const defaultTheme = 'system';
const resolvedTheme = getThemeFromSystem();
const { baseElement } = render(
<ThemeProvider
attribute={attribute}
defaultTheme={defaultTheme}
storageKey="modi"
>
<ComponentTest />
</ThemeProvider>
);
expect(rtlScreen.getByText(new RegExp(bodyPrefix))).toHaveTextContent(
`${bodyPrefix} ${defaultTheme}`
);
expect(baseElement.parentElement?.getAttribute(`data-${attribute}`)).toBe(
resolvedTheme
);
expect(baseElement.parentElement).toHaveStyle(
`color-scheme: ${resolvedTheme};`
);
});
});
|
