-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
theme.test.ts
113 lines (88 loc) · 3.03 KB
/
theme.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
import { beforeAll, expect, test } from 'vitest'
function resetDocument() {
globalThis.localStorage = {
getItem: () => null,
setItem: () => {}
} as any
document.documentElement.innerHTML = `
<html>
<head>
<meta name="theme-color">
<meta name="msapplication-TileColor">
</head>
<body>
<div id="sun"></div>
<div id="moon"></div>
</body>
</html>
`
}
beforeAll(() => {
resetDocument()
})
test('data-theme attribute is set as quickly as possible', async () => {
globalThis.localStorage = {
getItem: () => 'dark', // or 'dark'/'light' to simulate saved theme
setItem: () => {}
} as any
globalThis.window.matchMedia = () =>
({ matches: true, addEventListener: () => {} }) as any
await import('./theme.cjs')
// Check the data-theme attribute
const htmlEl = document.querySelector('html')
expect(htmlEl?.getAttribute('data-theme')).toBe('dark') // or 'light'
})
test('data-theme attribute is set based on localStorage', async () => {
globalThis.localStorage = {
getItem: () => 'dark',
setItem: () => {}
} as any
await import('./theme.cjs')
const htmlEl = document.querySelector('html')
expect(htmlEl?.getAttribute('data-theme')).toBe('dark')
})
test('data-theme attribute is set based on system preference', async () => {
globalThis.window.matchMedia = () =>
({ matches: true, addEventListener: () => {} }) as any
await import('./theme.cjs')
const htmlEl = document.querySelector('html')
expect(htmlEl?.getAttribute('data-theme')).toBe('dark')
})
test('data-theme attribute changes on system preference change', async () => {
let changeCallback: ({ matches }: { matches: boolean }) => void = () => {}
globalThis.window.matchMedia = () =>
({
matches: false,
addEventListener: (
_: any,
callback: ({ matches }: { matches: boolean }) => void
) => {
changeCallback = callback
}
}) as any
await import('./theme.cjs')
// Simulate a system preference change
changeCallback({ matches: true })
const htmlEl = document.querySelector('html')
expect(htmlEl?.getAttribute('data-theme')).toBe('dark')
})
test('meta tags are updated', async () => {
globalThis.window.matchMedia = () =>
({ matches: true, addEventListener: () => {} }) as any
await import('./theme.cjs')
const metaThemeColor = document.querySelector('meta[name=theme-color]')
const metaThemeColorMs = document.querySelector(
'meta[name=msapplication-TileColor]'
)
expect(metaThemeColor?.getAttribute('content')).toBe('#1d2224')
expect(metaThemeColorMs?.getAttribute('content')).toBe('#1d2224')
})
test('sun and moon hidden attributes are updated', async () => {
globalThis.window.matchMedia = () =>
({ matches: true, addEventListener: () => {} }) as any
await import('./theme.cjs')
const sun = document.querySelector('#sun')
const moon = document.querySelector('#moon')
expect(sun?.hasAttribute('hidden')).toBe(false)
expect(moon?.hasAttribute('hidden')).toBe(true)
})