@wise/components-theming 0.0.0-experimental-d0db9bd → 0.0.0-experimental-ee9a660
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ThemeProvider.spec.tsx +28 -0
package/package.json
CHANGED
|
@@ -4,6 +4,34 @@ import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
|
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
|
|
6
6
|
describe('ThemeProvider', () => {
|
|
7
|
+
it('tests root provider set root theme (on html element) and it is not affected by nested provider(s)', () => {
|
|
8
|
+
render(
|
|
9
|
+
<ThemeProvider theme="personal" screenMode="dark">
|
|
10
|
+
<div>root-dark-theme</div>
|
|
11
|
+
<ThemeProvider theme="forest-green">
|
|
12
|
+
<div>nested-forest-green</div>
|
|
13
|
+
</ThemeProvider>
|
|
14
|
+
<ThemeProvider theme="personal" screenMode="light">
|
|
15
|
+
<div>nested-personal</div>
|
|
16
|
+
</ThemeProvider>
|
|
17
|
+
</ThemeProvider>,
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
// root provider set dark theme and it wasn't changed by two nested providers
|
|
21
|
+
expect(document.documentElement).toHaveClass('np-theme-personal np-theme-personal--dark');
|
|
22
|
+
|
|
23
|
+
// eslint-disable-next-line testing-library/no-node-access
|
|
24
|
+
expect(screen.getByText('root-dark-theme').parentElement).toHaveClass(
|
|
25
|
+
'np-theme-personal np-theme-personal--dark',
|
|
26
|
+
);
|
|
27
|
+
// eslint-disable-next-line testing-library/no-node-access
|
|
28
|
+
expect(screen.getByText('nested-forest-green').parentElement).toHaveClass(
|
|
29
|
+
'np-theme-personal np-theme-personal--forest-green',
|
|
30
|
+
);
|
|
31
|
+
// eslint-disable-next-line testing-library/no-node-access
|
|
32
|
+
expect(screen.getByText('nested-personal').parentElement).toHaveClass('np-theme-personal');
|
|
33
|
+
});
|
|
34
|
+
|
|
7
35
|
it('can nest theme providers', () => {
|
|
8
36
|
render(
|
|
9
37
|
<ThemeProvider theme="light">
|