|
1 | | -import { describe, it, expect, beforeEach } from 'vitest'; |
| 1 | +import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; |
2 | 2 | import { renderHook, act } from '@testing-library/react'; |
3 | 3 | import { useThemeMode } from './useThemeMode'; |
4 | 4 |
|
| 5 | +type MQListener = (e: MediaQueryListEvent) => void; |
| 6 | + |
| 7 | +interface MockMediaQuery { |
| 8 | + matches: boolean; |
| 9 | + media: string; |
| 10 | + addEventListener: (type: 'change', listener: MQListener) => void; |
| 11 | + removeEventListener: (type: 'change', listener: MQListener) => void; |
| 12 | + // Test-only helpers |
| 13 | + _emit: (matches: boolean) => void; |
| 14 | +} |
| 15 | + |
| 16 | +function installMatchMedia(initialDark: boolean) { |
| 17 | + let matches = initialDark; |
| 18 | + const listeners = new Set<MQListener>(); |
| 19 | + const mq: MockMediaQuery = { |
| 20 | + get matches() { return matches; }, |
| 21 | + set matches(v: boolean) { matches = v; }, |
| 22 | + media: '(prefers-color-scheme: dark)', |
| 23 | + addEventListener: (_type, listener) => { listeners.add(listener); }, |
| 24 | + removeEventListener: (_type, listener) => { listeners.delete(listener); }, |
| 25 | + _emit(next: boolean) { |
| 26 | + matches = next; |
| 27 | + const event = { matches: next, media: mq.media } as MediaQueryListEvent; |
| 28 | + listeners.forEach(l => l(event)); |
| 29 | + }, |
| 30 | + }; |
| 31 | + vi.stubGlobal('matchMedia', vi.fn().mockReturnValue(mq)); |
| 32 | + return mq; |
| 33 | +} |
| 34 | + |
5 | 35 | describe('useThemeMode', () => { |
| 36 | + let mq: MockMediaQuery; |
| 37 | + |
6 | 38 | beforeEach(() => { |
7 | 39 | localStorage.clear(); |
8 | 40 | document.documentElement.removeAttribute('data-theme'); |
| 41 | + mq = installMatchMedia(false); |
| 42 | + }); |
| 43 | + |
| 44 | + afterEach(() => { |
| 45 | + vi.unstubAllGlobals(); |
9 | 46 | }); |
10 | 47 |
|
11 | | - it('defaults to light mode when no stored preference', () => { |
| 48 | + it('first-ever visit defaults to system mode and persists nothing', () => { |
12 | 49 | const { result } = renderHook(() => useThemeMode()); |
| 50 | + expect(result.current.mode).toBe('system'); |
| 51 | + expect(result.current.effective).toBe('light'); |
13 | 52 | expect(result.current.isDark).toBe(false); |
| 53 | + expect(localStorage.getItem('theme')).toBeNull(); |
| 54 | + expect(document.documentElement.getAttribute('data-theme')).toBe('light'); |
| 55 | + }); |
| 56 | + |
| 57 | + it('system mode follows the OS preference at mount', () => { |
| 58 | + mq._emit(true); // OS prefers dark before mount |
| 59 | + const { result } = renderHook(() => useThemeMode()); |
| 60 | + expect(result.current.mode).toBe('system'); |
| 61 | + expect(result.current.effective).toBe('dark'); |
| 62 | + expect(localStorage.getItem('theme')).toBeNull(); |
14 | 63 | }); |
15 | 64 |
|
16 | | - it('sets data-theme attribute on html element', () => { |
17 | | - renderHook(() => useThemeMode()); |
| 65 | + it('system → light transition persists the choice', () => { |
| 66 | + const { result } = renderHook(() => useThemeMode()); |
| 67 | + |
| 68 | + act(() => { result.current.cycle(); }); |
| 69 | + |
| 70 | + expect(result.current.mode).toBe('light'); |
| 71 | + expect(result.current.effective).toBe('light'); |
| 72 | + expect(localStorage.getItem('theme')).toBe('light'); |
18 | 73 | expect(document.documentElement.getAttribute('data-theme')).toBe('light'); |
19 | 74 | }); |
20 | 75 |
|
21 | | - it('toggles to dark mode', () => { |
| 76 | + it('light → dark transition persists the new choice', () => { |
| 77 | + localStorage.setItem('theme', 'light'); |
22 | 78 | const { result } = renderHook(() => useThemeMode()); |
23 | 79 |
|
24 | | - act(() => { |
25 | | - result.current.toggle(); |
26 | | - }); |
| 80 | + act(() => { result.current.cycle(); }); |
27 | 81 |
|
28 | | - expect(result.current.isDark).toBe(true); |
29 | | - expect(document.documentElement.getAttribute('data-theme')).toBe('dark'); |
| 82 | + expect(result.current.mode).toBe('dark'); |
| 83 | + expect(result.current.effective).toBe('dark'); |
30 | 84 | expect(localStorage.getItem('theme')).toBe('dark'); |
| 85 | + expect(document.documentElement.getAttribute('data-theme')).toBe('dark'); |
31 | 86 | }); |
32 | 87 |
|
33 | | - it('restores dark mode from localStorage', () => { |
| 88 | + it('dark → system transition clears localStorage and re-follows the OS', () => { |
34 | 89 | localStorage.setItem('theme', 'dark'); |
| 90 | + mq._emit(false); // OS prefers light |
35 | 91 | const { result } = renderHook(() => useThemeMode()); |
36 | | - expect(result.current.isDark).toBe(true); |
| 92 | + expect(result.current.mode).toBe('dark'); |
| 93 | + |
| 94 | + act(() => { result.current.cycle(); }); |
| 95 | + |
| 96 | + expect(result.current.mode).toBe('system'); |
| 97 | + expect(result.current.effective).toBe('light'); |
| 98 | + expect(localStorage.getItem('theme')).toBeNull(); |
| 99 | + expect(document.documentElement.getAttribute('data-theme')).toBe('light'); |
37 | 100 | }); |
38 | 101 |
|
39 | | - it('toggles back to light mode', () => { |
40 | | - localStorage.setItem('theme', 'dark'); |
| 102 | + it('live OS change flips the theme while in system mode', () => { |
41 | 103 | const { result } = renderHook(() => useThemeMode()); |
| 104 | + expect(result.current.effective).toBe('light'); |
42 | 105 |
|
43 | | - act(() => { |
44 | | - result.current.toggle(); |
45 | | - }); |
| 106 | + act(() => { mq._emit(true); }); |
46 | 107 |
|
47 | | - expect(result.current.isDark).toBe(false); |
48 | | - expect(localStorage.getItem('theme')).toBe('light'); |
| 108 | + expect(result.current.effective).toBe('dark'); |
| 109 | + expect(document.documentElement.getAttribute('data-theme')).toBe('dark'); |
| 110 | + expect(localStorage.getItem('theme')).toBeNull(); |
| 111 | + }); |
| 112 | + |
| 113 | + it('explicit light/dark mode ignores OS-level changes', () => { |
| 114 | + localStorage.setItem('theme', 'light'); |
| 115 | + const { result } = renderHook(() => useThemeMode()); |
| 116 | + |
| 117 | + act(() => { mq._emit(true); }); // OS flips to dark — should be ignored |
| 118 | + |
| 119 | + expect(result.current.mode).toBe('light'); |
| 120 | + expect(result.current.effective).toBe('light'); |
| 121 | + }); |
| 122 | + |
| 123 | + it('setMode jumps directly to a target mode', () => { |
| 124 | + const { result } = renderHook(() => useThemeMode()); |
| 125 | + |
| 126 | + act(() => { result.current.setMode('dark'); }); |
| 127 | + expect(result.current.mode).toBe('dark'); |
| 128 | + expect(localStorage.getItem('theme')).toBe('dark'); |
| 129 | + |
| 130 | + act(() => { result.current.setMode('system'); }); |
| 131 | + expect(result.current.mode).toBe('system'); |
| 132 | + expect(localStorage.getItem('theme')).toBeNull(); |
| 133 | + }); |
| 134 | + |
| 135 | + it('restores explicit dark mode from localStorage on remount', () => { |
| 136 | + localStorage.setItem('theme', 'dark'); |
| 137 | + const { result } = renderHook(() => useThemeMode()); |
| 138 | + expect(result.current.mode).toBe('dark'); |
| 139 | + expect(result.current.effective).toBe('dark'); |
| 140 | + expect(document.documentElement.getAttribute('data-theme')).toBe('dark'); |
49 | 141 | }); |
50 | 142 | }); |
0 commit comments