-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
/
css-dynamic-import.spec.ts
86 lines (75 loc) · 2.3 KB
/
css-dynamic-import.spec.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
import type { InlineConfig } from 'vite'
import { build, createServer, preview } from 'vite'
import { expect, test } from 'vitest'
import { getColor, isBuild, isServe, page, ports, rootDir } from '~utils'
const baseOptions = [
{ base: '', label: 'relative' },
{ base: '/', label: 'absolute' }
]
const getConfig = (base: string): InlineConfig => ({
base,
root: rootDir,
logLevel: 'silent',
preview: { port: ports['css/dynamic-import'] }
})
async function withBuild(base: string, fn: () => Promise<void>) {
const config = getConfig(base)
await build(config)
const server = await preview(config)
try {
await page.goto(server.resolvedUrls.local[0])
await fn()
} finally {
server.httpServer.close()
}
}
async function withServe(base: string, fn: () => Promise<void>) {
const config = getConfig(base)
const server = await createServer(config)
await server.listen()
await new Promise((r) => setTimeout(r, 500))
try {
await page.goto(server.resolvedUrls.local[0])
await fn()
} finally {
await server.close()
}
}
async function getChunks() {
const links = await page.$$('link')
const hrefs = await Promise.all(links.map((l) => l.evaluate((el) => el.href)))
return hrefs.map((href) => {
// drop hash part from the file name
const [_, name, ext] = href.match(/assets\/([a-z]+)\..*?\.(.*)$/)
return `${name}.${ext}`
})
}
baseOptions.forEach(({ base, label }) => {
test.runIf(isBuild)(
`doesn't duplicate dynamically imported css files when built with ${label} base`,
async () => {
await withBuild(base, async () => {
await page.waitForSelector('.loaded', { state: 'attached' })
expect(await getColor('.css-dynamic-import')).toBe('green')
expect(await getChunks()).toEqual([
'index.css',
'dynamic.js',
'dynamic.css',
'static.js',
'index.js'
])
})
}
)
test.runIf(isServe)(
`doesn't duplicate dynamically imported css files when served with ${label} base`,
async () => {
await withServe(base, async () => {
await page.waitForSelector('.loaded', { state: 'attached' })
expect(await getColor('.css-dynamic-import')).toBe('green')
// in serve there is no preloading
expect(await getChunks()).toEqual([])
})
}
)
})