Skip to content

Commit 36dde7c

Browse files
designcisedesigncise
committed
test: manually remove tests from type-checking
1 parent 6b2b324 commit 36dde7c

File tree

7 files changed

+338
-3
lines changed

7 files changed

+338
-3
lines changed

‎__tests__/ThemeProvider.test.jsx‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
// @ts-nocheck
4+
var react_1 = require("@testing-library/react");
5+
var client_1 = require("../src/client");
6+
var device_mock_1 = require("./mocks/device.mock");
7+
var storage_adapter_1 = require("../src/adapter/storage.adapter");
8+
var ThemeAutoToggle_1 = require("./assets/ThemeAutoToggle");
9+
var ThemeManualToggle_1 = require("./assets/ThemeManualToggle");
10+
var ThemeSwitcher_1 = require("./assets/ThemeSwitcher");
11+
var env_helper_1 = require("../src/helper/env.helper");
12+
beforeAll(function () {
13+
(0, device_mock_1.mockLocalStorage)();
14+
(0, device_mock_1.mockMatchMedia)();
15+
});
16+
beforeEach(function () {
17+
(0, storage_adapter_1.clear)();
18+
document.documentElement.style.colorScheme = '';
19+
document.documentElement.removeAttribute('class');
20+
});
21+
describe('ThemeProvider', function () {
22+
test('should set storage key according to the specified value', function () {
23+
var storageKey = 'theme-test';
24+
var expectedTheme = 'light';
25+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={expectedTheme}>
26+
<ThemeAutoToggle_1.default />
27+
</client_1.ThemeProvider>);
28+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(expectedTheme);
29+
});
30+
test('should use default storage key when none is specified value', function () {
31+
var expectedThemeType = 'light';
32+
(0, react_1.render)(<client_1.ThemeProvider defaultTheme={expectedThemeType}>
33+
<ThemeAutoToggle_1.default />
34+
</client_1.ThemeProvider>);
35+
expect((0, storage_adapter_1.read)(env_helper_1.DEFAULT_STORAGE_KEY)).toEqual(expectedThemeType);
36+
});
37+
test.each(['light', 'dark'])('should use the `defaultTheme` when nothing is stored in `localStorage`', function (theme) {
38+
var storageKey = 'test';
39+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={theme}>
40+
<ThemeAutoToggle_1.default />
41+
</client_1.ThemeProvider>);
42+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(theme);
43+
expect(document.documentElement.classList[0]).toBe(theme);
44+
expect(document.documentElement.style.colorScheme).toBe(theme);
45+
});
46+
test.each(['light', 'dark'])('should auto-determine theme color when nothing is stored in `localStorage` and `defaultTheme` is set to "auto"', function (color) {
47+
var storageKey = 'test';
48+
(0, device_mock_1.mockPreferredColorScheme)(color);
49+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
50+
<ThemeAutoToggle_1.default />
51+
</client_1.ThemeProvider>);
52+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
53+
expect(document.documentElement.classList[0]).toBe(color);
54+
expect(document.documentElement.style.colorScheme).toBe(color);
55+
});
56+
test.each(['light', 'dark'])('should set `color-scheme` and `class` to "%s" theme color according to saved theme preference', function (color) {
57+
var storageKey = 'test';
58+
(0, storage_adapter_1.write)(storageKey, color);
59+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey}>
60+
<ThemeAutoToggle_1.default />
61+
</client_1.ThemeProvider>);
62+
expect(document.documentElement.classList[0]).toBe(color);
63+
expect(document.documentElement.style.colorScheme).toBe(color);
64+
});
65+
test.each(['light', 'dark', 'auto'])('should use system resolved "%s" color and "auto" theme when no `defaultTheme` is provided and nothing is stored in `localStorage`', function (color) {
66+
var storageKey = 'sys-resolved-theme';
67+
var prefColor = color === 'auto' ? 'dark' : color;
68+
(0, device_mock_1.mockPreferredColorScheme)(prefColor);
69+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey}>
70+
<ThemeAutoToggle_1.default />
71+
</client_1.ThemeProvider>);
72+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
73+
expect(document.documentElement.classList[0]).toBe(prefColor);
74+
expect(document.documentElement.style.colorScheme).toBe(prefColor);
75+
});
76+
test.each(['light', 'dark'])('should set theme color automatically based on user system preference', function (sysPrefColor) {
77+
var storageKey = 'sys-resolved-theme';
78+
(0, device_mock_1.mockPreferredColorScheme)(sysPrefColor);
79+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
80+
<ThemeAutoToggle_1.default />
81+
</client_1.ThemeProvider>);
82+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
83+
expect(document.documentElement.classList[0]).toBe(sysPrefColor);
84+
expect(document.documentElement.style.colorScheme).toBe(sysPrefColor);
85+
});
86+
test.each([
87+
['light', 'dark'],
88+
['dark', 'light'],
89+
])('should ignore nested `ThemeProvider`', function (expectedTheme, nestedTheme) {
90+
var storageKey = 'test';
91+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={expectedTheme}>
92+
<client_1.ThemeProvider storageKey={storageKey} defaultTheme={nestedTheme}>
93+
<ThemeAutoToggle_1.default />
94+
</client_1.ThemeProvider>
95+
</client_1.ThemeProvider>);
96+
expect(document.documentElement.classList[0]).toBe(expectedTheme);
97+
});
98+
test.each([
99+
['light', 'dark'],
100+
['dark', 'light'],
101+
])('should update value in storage when toggling from "%s" to "%s" theme', function (themeFrom, themeTo) {
102+
var storageKey = 'test';
103+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={themeFrom}>
104+
<ThemeAutoToggle_1.default />
105+
</client_1.ThemeProvider>);
106+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeFrom);
107+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
108+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeTo);
109+
});
110+
test.each([
111+
['light', 'dark'],
112+
['dark', 'light'],
113+
])('should update value in storage when manually setting theme from "%s" to "%s"', function (themeFrom, themeTo) {
114+
var storageKey = 'test';
115+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={themeFrom}>
116+
<ThemeManualToggle_1.default />
117+
</client_1.ThemeProvider>);
118+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeFrom);
119+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
120+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeTo);
121+
});
122+
test.each(['light', 'dark'])('should switch from "auto" to "%s"', function (theme) {
123+
var storageKey = 'sys-resolved-theme';
124+
var oppositeTheme = theme === 'dark' ? 'light' : 'dark';
125+
(0, device_mock_1.mockPreferredColorScheme)(oppositeTheme);
126+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
127+
<ThemeSwitcher_1.default />
128+
</client_1.ThemeProvider>);
129+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
130+
expect(document.documentElement.classList[0]).toBe(oppositeTheme);
131+
expect(document.documentElement.style.colorScheme).toBe(oppositeTheme);
132+
react_1.fireEvent.click(react_1.screen.getByText(new RegExp("".concat(theme, " theme"), 'i')));
133+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(theme);
134+
expect(document.documentElement.classList[0]).toBe(theme);
135+
expect(document.documentElement.style.colorScheme).toBe(theme);
136+
});
137+
test.each(['light', 'dark'])('should switch from "%s" to "auto"', function (theme) {
138+
var storageKey = 'sys-resolved-theme';
139+
var oppositeTheme = theme === 'dark' ? 'light' : 'dark';
140+
(0, device_mock_1.mockPreferredColorScheme)(oppositeTheme);
141+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={theme}>
142+
<ThemeSwitcher_1.default />
143+
</client_1.ThemeProvider>);
144+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(theme);
145+
expect(document.documentElement.classList[0]).toBe(theme);
146+
expect(document.documentElement.style.colorScheme).toBe(theme);
147+
react_1.fireEvent.click(react_1.screen.getByText('Auto Theme'));
148+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
149+
expect(document.documentElement.classList[0]).toBe(oppositeTheme);
150+
expect(document.documentElement.style.colorScheme).toBe(oppositeTheme);
151+
});
152+
test('should not set `colorScheme` and class name to "auto"', function () {
153+
var storageKey = 'sys-resolved-theme';
154+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
155+
<ThemeSwitcher_1.default />
156+
</client_1.ThemeProvider>);
157+
expect(document.documentElement.classList[0]).not.toBe('auto');
158+
expect(document.documentElement.style.colorScheme).not.toBe('auto');
159+
});
160+
});

‎__tests__/ThemeProvider.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-nocheck
12
import { render, screen, fireEvent } from '@testing-library/react'
23
import { ThemeProvider } from '../src/client'
34
import { mockLocalStorage, mockMatchMedia, mockPreferredColorScheme } from './mocks/device.mock'

‎__tests__/mocks/device.mock.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
// @ts-nocheck
12
export function mockMatchMedia() {
23
Object.defineProperty(window, 'matchMedia', {
34
writable: true,
4-
value: jest.fn().mockImplementation((query) => ({
5+
value: jest.fn().mockImplementation(query => ({
56
matches: false,
67
media: query,
78
onchange: null,
@@ -17,7 +18,7 @@ export function mockMatchMedia() {
1718
export function mockPreferredColorScheme(color, options = {}) {
1819
Object.defineProperty(window, 'matchMedia', {
1920
writable: true,
20-
value: jest.fn().mockImplementation((query) => ({
21+
value: jest.fn().mockImplementation(query => ({
2122
matches: color === 'dark',
2223
media: query,
2324
onchange: null,

‎__tests__/theme.helper.test.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
// @ts-nocheck
4+
require("./mocks/matchMedia.mock");
5+
require("./mocks/localStorage.mock");
6+
var device_mock_1 = require("./mocks/device.mock");
7+
var storage_adapter_1 = require("../src/adapter/storage.adapter");
8+
var theme_helper_1 = require("../src/helper/theme.helper");
9+
var types_1 = require("../src/types");
10+
var storageKey = 'theme-pref';
11+
beforeEach(function () {
12+
(0, storage_adapter_1.clear)();
13+
});
14+
describe('getThemeByKey()', function () {
15+
test.each([
16+
[undefined, undefined, theme_helper_1.themes.auto],
17+
[undefined, 'dark', theme_helper_1.themes.dark],
18+
[undefined, 'light', theme_helper_1.themes.light],
19+
[undefined, 'auto', theme_helper_1.themes.auto],
20+
['dark', undefined, theme_helper_1.themes.dark],
21+
['light', undefined, theme_helper_1.themes.light],
22+
['auto', undefined, theme_helper_1.themes.auto],
23+
['dark', 'light', theme_helper_1.themes.dark],
24+
['light', 'dark', theme_helper_1.themes.light],
25+
['auto', 'light', theme_helper_1.themes.auto],
26+
])('should get the theme from storage or the fallback', function (storedTheme, defaultTheme, expectedTheme) {
27+
if (storedTheme) {
28+
(0, storage_adapter_1.write)(storageKey, storedTheme);
29+
}
30+
var activeTheme = (0, theme_helper_1.getThemeByKey)(storageKey, defaultTheme);
31+
expect(activeTheme).toEqual(expectedTheme);
32+
});
33+
});
34+
describe('getColorByThemeType()', function () {
35+
test.each([
36+
[theme_helper_1.themes.dark, theme_helper_1.colors.dark],
37+
[theme_helper_1.themes.light, theme_helper_1.colors.light],
38+
[theme_helper_1.themes.auto, theme_helper_1.colors.dark],
39+
])('should get the color based on the theme (theme: "%o", color: "%s")', function (theme, expectedColor) {
40+
if (theme.type === types_1.ThemeTypes.auto) {
41+
(0, device_mock_1.mockPreferredColorScheme)(expectedColor);
42+
}
43+
expect((0, theme_helper_1.getColorByThemeType)(theme.type)).toEqual(expectedColor);
44+
});
45+
});
46+
describe('getFlippedThemeByColor()', function () {
47+
test.each([
48+
[theme_helper_1.colors.dark, theme_helper_1.themes.light],
49+
[theme_helper_1.colors.light, theme_helper_1.themes.dark],
50+
])('should get the opposite theme based on the color (color: "%s", theme: "%o")', function (color, expectedTheme) {
51+
expect((0, theme_helper_1.getFlippedThemeByColor)(color)).toEqual(expectedTheme);
52+
});
53+
});
54+
describe('themes.auto.color', function () {
55+
test.each(['dark', 'light'])('should automatically determine the color based on the system preferred color "%s"', function (prefColor) {
56+
(0, device_mock_1.mockPreferredColorScheme)(prefColor);
57+
expect(theme_helper_1.themes.auto.color).toEqual(prefColor);
58+
});
59+
});

‎__tests__/theme.helper.test.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-nocheck
12
import './mocks/matchMedia.mock'
23
import './mocks/localStorage.mock'
34
import { mockPreferredColorScheme } from './mocks/device.mock'
@@ -75,7 +76,7 @@ describe('getFlippedThemeByColor()', () => {
7576
describe('themes.auto.color', () => {
7677
test.each(['dark', 'light'])(
7778
'should automatically determine the color based on the system preferred color "%s"',
78-
(prefColor) => {
79+
prefColor => {
7980
mockPreferredColorScheme(prefColor)
8081
expect(themes.auto.color).toEqual(prefColor)
8182
},

‎__tests__/useTheme.test.jsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
var react_1 = require("@testing-library/react");
4+
var client_1 = require("../src/client");
5+
var device_mock_1 = require("./mocks/device.mock");
6+
var storage_adapter_1 = require("../src/adapter/storage.adapter");
7+
var ThemeAutoToggle_1 = require("./assets/ThemeAutoToggle");
8+
var ThemeManualToggle_1 = require("./assets/ThemeManualToggle");
9+
var ThemeSwitcher_1 = require("./assets/ThemeSwitcher");
10+
beforeAll(function () {
11+
(0, device_mock_1.mockLocalStorage)();
12+
(0, device_mock_1.mockMatchMedia)();
13+
});
14+
beforeEach(function () {
15+
(0, storage_adapter_1.clear)();
16+
document.documentElement.style.colorScheme = '';
17+
document.documentElement.removeAttribute('class');
18+
});
19+
describe('useTheme()', function () {
20+
test.each([
21+
['light', 'dark'],
22+
['dark', 'light'],
23+
])('should toggle "%s" theme to "%s"', function (themeFrom, themeTo) {
24+
var storageKey = 'test';
25+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={themeFrom}>
26+
<ThemeAutoToggle_1.default />
27+
</client_1.ThemeProvider>);
28+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeFrom);
29+
expect(document.documentElement.classList[0]).toBe(themeFrom);
30+
expect(document.documentElement.style.colorScheme).toBe(themeFrom);
31+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
32+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeTo);
33+
expect(document.documentElement.classList[0]).toBe(themeTo);
34+
expect(document.documentElement.style.colorScheme).toBe(themeTo);
35+
});
36+
test.each([
37+
['light', 'dark'],
38+
['dark', 'light'],
39+
])('should toggle from system resolved "%s" theme to opposite theme "%s" when using `toggle` function', function (themeFrom, themeTo) {
40+
var storageKey = 'sys-resolved-theme';
41+
(0, device_mock_1.mockPreferredColorScheme)(themeFrom);
42+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey}>
43+
<ThemeAutoToggle_1.default />
44+
</client_1.ThemeProvider>);
45+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
46+
expect(document.documentElement.classList[0]).toBe(themeFrom);
47+
expect(document.documentElement.style.colorScheme).toBe(themeFrom);
48+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
49+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeTo);
50+
expect(document.documentElement.classList[0]).toBe(themeTo);
51+
expect(document.documentElement.style.colorScheme).toBe(themeTo);
52+
});
53+
test.each([
54+
['light', 'dark'],
55+
['dark', 'light'],
56+
])('should get right values to manually set theme from "%s" to "%s"', function (themeFrom, themeTo) {
57+
var storageKey = 'test';
58+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={themeFrom}>
59+
<ThemeManualToggle_1.default />
60+
</client_1.ThemeProvider>);
61+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeFrom);
62+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
63+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(themeTo);
64+
});
65+
test.each([client_1.themes.light, client_1.themes.dark])('should get "%s" as the active `theme` and `color`', function (theme) {
66+
var storageKey = 'user-theme';
67+
var oppositeTheme = theme.type === 'light' ? client_1.themes.dark.type : client_1.themes.light.type;
68+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme={oppositeTheme}>
69+
<ThemeSwitcher_1.default />
70+
</client_1.ThemeProvider>);
71+
react_1.fireEvent.click(react_1.screen.getByText(new RegExp("".concat(theme.type, " theme"), 'i')));
72+
expect(react_1.screen.getByText("Active Theme: ".concat(theme.type))).toBeInTheDocument();
73+
expect(react_1.screen.getByText("Active Color: ".concat(theme.color))).toBeInTheDocument();
74+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(theme.type);
75+
});
76+
test.each(['light', 'dark'])('should get "%s" as the active `color` when theme is set to "auto"', function (colorScheme) {
77+
var storageKey = 'user-theme';
78+
(0, device_mock_1.mockPreferredColorScheme)(colorScheme);
79+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
80+
<ThemeSwitcher_1.default />
81+
</client_1.ThemeProvider>);
82+
expect(react_1.screen.getByText('Active Theme: auto')).toBeInTheDocument();
83+
expect(react_1.screen.getByText("Active Color: ".concat(colorScheme))).toBeInTheDocument();
84+
});
85+
test.each([
86+
['light', 'dark'],
87+
['dark', 'light'],
88+
])('should switch to opposite color of "%s" when toggling from "auto"', function (sysPrefColor, switchToTheme) {
89+
var storageKey = 'sys-resolved-theme';
90+
(0, device_mock_1.mockPreferredColorScheme)(sysPrefColor);
91+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
92+
<ThemeAutoToggle_1.default />
93+
</client_1.ThemeProvider>);
94+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
95+
expect(document.documentElement.classList[0]).toBe(sysPrefColor);
96+
expect(document.documentElement.style.colorScheme).toBe(sysPrefColor);
97+
react_1.fireEvent.click(react_1.screen.getByText(/toggle theme/i));
98+
expect((0, storage_adapter_1.read)(storageKey)).toEqual(switchToTheme);
99+
expect(document.documentElement.classList[0]).toBe(switchToTheme);
100+
expect(document.documentElement.style.colorScheme).toBe(switchToTheme);
101+
});
102+
test.each(['light', 'dark'])('should auto-determine color to be "%s" via `colors.auto`', function (prefColor) {
103+
var storageKey = 'sys-resolved-theme';
104+
(0, device_mock_1.mockPreferredColorScheme)(prefColor);
105+
(0, react_1.render)(<client_1.ThemeProvider storageKey={storageKey} defaultTheme="auto">
106+
<ThemeAutoToggle_1.default />
107+
</client_1.ThemeProvider>);
108+
expect((0, storage_adapter_1.read)(storageKey)).toEqual('auto');
109+
expect(document.documentElement.classList[0]).toBe(prefColor);
110+
expect(document.documentElement.style.colorScheme).toBe(prefColor);
111+
});
112+
});

‎__tests__/useTheme.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-nocheck
12
import { render, screen, fireEvent } from '@testing-library/react'
23
import { ThemeProvider, themes } from '../src/client'
34
import { mockLocalStorage, mockMatchMedia, mockPreferredColorScheme } from './mocks/device.mock'

0 commit comments

Comments
 (0)