-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.test.ts
126 lines (108 loc) · 3.87 KB
/
index.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { nextTwoTick } from 'packages/.test'
import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
import { ref } from 'vue-demi'
import { usePreferredDark } from '../usePreferredDark'
import { useColorMode } from '.'
describe('useColorMode', () => {
const storageKey = 'vueuse-color-scheme'
const htmlEl = document.querySelector('html')
vi.mock('../usePreferredDark', () => {
const mockPreferredDark = ref(false)
return {
usePreferredDark: () => mockPreferredDark,
}
})
beforeEach(() => {
usePreferredDark().value = false
localStorage.clear()
htmlEl!.className = ''
})
afterAll(() => {
vi.clearAllMocks()
vi.resetModules()
})
it('should translate auto mode when prefer dark', async () => {
const mode = useColorMode()
mode.value = 'auto'
usePreferredDark().value = true
await nextTwoTick()
expect(mode.value).toBe('dark')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toMatch(/dark/)
})
it('should translate auto mode', () => {
const mode = useColorMode()
mode.value = 'auto'
expect(mode.value).toBe('light')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toMatch(/light/)
})
it('should translate custom mode', async () => {
const mode = useColorMode<'custom' | 'unknown'>({ modes: { custom: 'custom' } })
mode.value = 'custom'
await nextTwoTick()
expect(mode.value).toBe('custom')
expect(localStorage.getItem(storageKey)).toBe('custom')
expect(htmlEl?.className).toMatch(/custom/)
mode.value = 'unknown'
await nextTwoTick()
expect(mode.value).toBe('unknown')
expect(localStorage.getItem(storageKey)).toBe('unknown')
expect(htmlEl?.className).toBe('')
})
it('should include auto mode', () => {
const mode = useColorMode({ emitAuto: true })
mode.value = 'auto'
expect(mode.value).toBe('auto')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toMatch(/light/)
})
it('should not persist mode into localStorage', () => {
const mode = useColorMode({ storageKey: null })
mode.value = 'auto'
expect(mode.value).toBe('light')
expect(localStorage.getItem(storageKey)).toBeNull()
expect(htmlEl?.className).toMatch(/light/)
})
it('should set html attribute to be mode', () => {
const mode = useColorMode({ attribute: 'data-color-mode' })
mode.value = 'auto'
expect(mode.value).toBe('light')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.getAttribute('data-color-mode')).toBe('light')
})
it('should not affect html when selector invalid', () => {
const mode = useColorMode({ selector: 'unknown' })
mode.value = 'auto'
expect(mode.value).toBe('light')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toBe('')
})
it('should call onChanged when mode changed', () => {
let nextMode = null
const onChanged = (mode: any, defaultOnChanged: any) => {
nextMode = mode
defaultOnChanged(mode)
}
const mode = useColorMode({ onChanged })
mode.value = 'auto'
expect(mode.value).toBe('light')
expect(nextMode).toBe('light')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toMatch(/light/)
})
it('should only change html class when preferred dark changed', async () => {
const mode = useColorMode({ emitAuto: true })
usePreferredDark().value = true
await nextTwoTick()
expect(mode.value).toBe('auto')
expect(localStorage.getItem(storageKey)).toBe('auto')
expect(htmlEl?.className).toMatch(/dark/)
})
it('should be able access the store & system preference', () => {
const mode = useColorMode()
expect(mode.store.value).toBe('auto')
expect(mode.system.value).toBe('light')
expect(mode.state.value).toBe('light')
})
})