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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import { describe, expect, it } from '@jest/globals';
import {
act,
render,
renderHook,
screen as rtlScreen,
} from '@testing-library/react';
import type { FC, ReactNode } from 'react';
import {
PrismThemeProvider,
type PrismThemeProviderProps,
} from '../../providers/prism-theme-provider';
import { usePrismTheme } from './use-prism-theme';
const codeSample1 = `const foo = 42;`;
const codeSample2 = `const bar = "baz";`;
const codeSample3 = `const baz = () => false;`;
const ComponentTest: FC = () => {
usePrismTheme();
return (
<div>
<pre className="language-js">{codeSample1}</pre>
<pre className="language-js">{codeSample2}</pre>
<pre>{codeSample3}</pre>
</div>
);
};
const createWrapper = (
Wrapper: FC<PrismThemeProviderProps>,
config: PrismThemeProviderProps
) =>
function CreatedWrapper({ children }: { children: ReactNode }) {
return <Wrapper {...config}>{children}</Wrapper>;
};
describe('usePrismTheme', () => {
it('should return the default value without provider and prevent update', () => {
const defaultTheme = 'system';
const { result } = renderHook(() => usePrismTheme());
expect(result.current.theme).toBe(defaultTheme);
act(() => result.current.setTheme('dark'));
expect(result.current.theme).toBe(defaultTheme);
});
it('should add an attribute on pre elements when matching a Prism block', () => {
const defaultTheme = 'light';
const attribute = 'data-debitis';
render(
<PrismThemeProvider
attribute={attribute}
defaultTheme={defaultTheme}
storageKey="soluta"
>
<ComponentTest />
</PrismThemeProvider>
);
expect(rtlScreen.getByText(codeSample1)).toHaveAttribute(
attribute,
defaultTheme
);
expect(rtlScreen.getByText(codeSample2)).toHaveAttribute(
attribute,
defaultTheme
);
expect(rtlScreen.getByText(codeSample3)).not.toHaveAttribute(
attribute,
defaultTheme
);
});
it('can update the theme value using a setter', () => {
const defaultTheme = 'dark';
const { result } = renderHook(() => usePrismTheme(), {
wrapper: createWrapper(PrismThemeProvider, {
attribute: 'consequuntur',
defaultTheme,
storageKey: 'deleniti',
}),
});
expect(result.current.theme).toBe(defaultTheme);
const newTheme = 'light';
act(() => result.current.setTheme(newTheme));
expect(result.current.theme).toBe(newTheme);
});
it('can toggle the theme from light to dark', () => {
const defaultTheme = 'light';
const { result } = renderHook(() => usePrismTheme(), {
wrapper: createWrapper(PrismThemeProvider, {
attribute: 'et',
defaultTheme,
storageKey: 'velit',
}),
});
expect(result.current.theme).toBe(defaultTheme);
act(() => result.current.toggleTheme());
expect(result.current.theme).toBe('dark');
});
it('can toggle the theme from dark to light', () => {
const defaultTheme = 'dark';
const { result } = renderHook(() => usePrismTheme(), {
wrapper: createWrapper(PrismThemeProvider, {
attribute: 'et',
defaultTheme,
storageKey: 'velit',
}),
});
expect(result.current.theme).toBe(defaultTheme);
act(() => result.current.toggleTheme());
expect(result.current.theme).toBe('light');
});
});
|
