@wise/components-theming 0.0.0-experimental-d0db9bd → 0.0.0-experimental-c7754d1

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/components-theming",
3
- "version": "0.0.0-experimental-d0db9bd",
3
+ "version": "0.0.0-experimental-c7754d1",
4
4
  "description": "Provides theming support for the Wise Design system components",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
@@ -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 without className and nested providers', () => {
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">