add test for scheme model

configs/tests/setup.ts

@@ -1,7 +1,8 @@
 import { expect, afterEach, beforeAll, afterAll, vi } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import * as matchers from '@testing-library/jest-dom/matchers';
-import { server } from '~/test-utils';
+import { matchMedia, MediaQueryListEvent } from 'mock-match-media';
+import { server, cleanup as cleanupMatchMedia } from '~/test-utils';
 
 expect.extend(matchers);
 
@@ -16,18 +17,22 @@ vi.mock('@farfetched/core', async (importOriginal) => {
 	};
 });
 
-afterEach(() => {
-	cleanup();
-});
-
 beforeAll(() => {
 	server.listen();
 });
 
 afterEach(() => {
+	cleanup();
+	cleanupMatchMedia();
 	server.resetHandlers();
 });
 
 afterAll(() => {
 	server.close();
 });
+
+window.MediaQueryListEvent = MediaQueryListEvent;
+window.matchMedia = (...args) => {
+	console.log(args);
+	return matchMedia(...args);
+};

package.json

@@ -78,6 +78,7 @@
 		"husky": "^8.0.3",
 		"jsdom": "^24.1.0",
 		"lint-staged": "^15.0.2",
+		"mock-match-media": "^0.4.3",
 		"msw": "^2.3.1",
 		"typed-css-modules": "^0.8.0",
 		"typescript": "^5.2.2",

src/shared/models/scheme.spec.ts

@@ -0,0 +1,139 @@
+import { useColorScheme } from '@mui/material';
+import { ColorSchemeContextValue } from '@mui/system';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { started } from './app';
+import {
+	$biScheme,
+	$scheme,
+	colorSchemeChanged,
+	useSyncScheme
+} from './scheme';
+
+import {
+	RenderHookResult,
+	Scope,
+	act,
+	allSettled,
+	fork,
+	renderHook,
+	setMedia
+} from '~/test-utils';
+
+describe('shared/models/scheme', () => {
+	const schemes = ['light', 'system', 'dark'] as const;
+	let scope: Scope;
+
+	beforeEach(async () => {
+		setMedia({
+			'prefers-color-scheme': 'light',
+		});
+
+		scope = fork();
+
+		await allSettled(started, { scope, });
+	});
+
+	test('should has system value by default', async () => {
+		expect(scope.getState($scheme)).toBe('system');
+	});
+
+	describe('change', () => {
+		test.each(schemes)(
+			'should change color scheme on colorSchemeChanged call with %s',
+			async (scheme) => {
+				await allSettled(colorSchemeChanged, { scope, params: scheme, });
+
+				expect(scope.getState($scheme)).toBe(scheme);
+			}
+		);
+
+		test('should keep old value if colorSchemeChanged was called with empty one', async () => {
+			const currentScheme = scope.getState($scheme);
+
+			await allSettled(colorSchemeChanged, { scope, params: null, });
+
+			expect(scope.getState($scheme)).toBe(currentScheme);
+		});
+	});
+
+	describe('bivalue scheme', () => {
+		test('should convert light scheme to light in bivalue one', async () => {
+			await allSettled(colorSchemeChanged, { scope, params: 'light', });
+
+			expect(scope.getState($biScheme)).toBe('light');
+		});
+
+		test('should convert light scheme to dark in bivalue one', async () => {
+			await allSettled(colorSchemeChanged, { scope, params: 'dark', });
+
+			expect(scope.getState($biScheme)).toBe('dark');
+		});
+
+		test.skip.each(['dark', 'light'])(
+			'should convert auto scheme to %s in bivalue one if prefers-ciolor-scheme=%s',
+			async (scheme) => {
+				setMedia({
+					'prefers-color-scheme': scheme,
+				});
+
+				await allSettled(colorSchemeChanged, { scope, params: 'system', });
+
+				expect(scope.getState($biScheme)).toBe(scheme);
+			}
+		);
+	});
+
+	describe('persist', () => {
+		const key = 'abc-color-scheme';
+
+		test.each(schemes)(
+			'should save current scheme into local storage',
+			async (scheme) => {
+				// To initiate reading from local storage
+				window.dispatchEvent(new StorageEvent('storage', { key, }));
+
+				await allSettled(colorSchemeChanged, { scope, params: scheme, });
+
+				expect(localStorage.getItem(key)).toBe(JSON.stringify(scheme));
+			}
+		);
+
+		test.each(schemes)(
+			'should load saved %s scheme from local storage',
+			(scheme) => {
+				localStorage.setItem(key, JSON.stringify(scheme));
+
+				window.dispatchEvent(new StorageEvent('storage', { key, }));
+
+				expect(scope.getState($scheme)).toBe(scheme);
+			}
+		);
+	});
+
+	describe('useSyncScheme', () => {
+		let wrapper: RenderHookResult<ColorSchemeContextValue<string>, void>;
+
+		const createComponent = () => {
+			wrapper = renderHook(
+				() => {
+					useSyncScheme();
+					return useColorScheme();
+				},
+				{ scope, }
+			);
+		};
+
+		beforeEach(async () => {
+			await act(() => createComponent());
+		});
+
+		test('should sync biScheme with mui scheme', async () => {
+			expect(wrapper.result.current.mode).toBe(scope.getState($biScheme));
+
+			await allSettled(colorSchemeChanged, { scope, params: 'dark', });
+
+			expect(wrapper.result.current.mode).toBe(scope.getState($biScheme));
+		});
+	});
+});

src/shared/models/scheme.ts

@@ -43,7 +43,7 @@ export const useSyncScheme = () => {
 
 persist({
 	store: $scheme,
-	key: 'bt-color-scheme',
+	key: 'abc-color-scheme',
 });
 
 sample({

test-utils/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
 export * from './fixtures';
 export * from './mock-server';
 export * from './utils';
+export { setMedia, MediaQueryListEvent } from 'mock-match-media';

test-utils/utils/render.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -42,9 +43,11 @@ const createAllProviders = (
 		return (
 			<StoreProvider value={scope}>
 				<RouterProvider router={router}>
-					<LocalizationProvider dateAdapter={AdapterDayjs}>
-						<Wrapper>{children}</Wrapper>
-					</LocalizationProvider>
+					<CssVarsProvider>
+						<LocalizationProvider dateAdapter={AdapterDayjs}>
+							<Wrapper>{children}</Wrapper>
+						</LocalizationProvider>
+					</CssVarsProvider>
 				</RouterProvider>
 			</StoreProvider>
 		);

vitest.config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
 	test: {
 		environment: 'jsdom',
-		setupFiles: ['./configs/tests/setup.ts'],
+		setupFiles: [path.resolve(__dirname, './configs/tests/setup.ts')],
 		include: ['./src/**/*.spec.{ts,tsx}'],
 		clearMocks: true,
 		globals: true,