/
css-dynamic-import.spec.ts
121 lines (110 loc) · 3.21 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
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
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'] },
build: { assetsInlineLimit: 0 }
})
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 getLinks() {
const links = await page.$$('link')
return await Promise.all(
links.map((handle) => {
return handle.evaluate((link) => ({
pathname: new URL(link.href).pathname,
rel: link.rel,
as: link.as
}))
})
)
}
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 getLinks()).toEqual([
{
pathname: expect.stringMatching(/^\/assets\/index\..+\.css$/),
rel: 'stylesheet',
as: ''
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
rel: 'preload',
as: 'style'
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.js$/),
rel: 'modulepreload',
as: 'script'
},
{
pathname: expect.stringMatching(/^\/assets\/dynamic\..+\.css$/),
rel: 'stylesheet',
as: ''
},
{
pathname: expect.stringMatching(/^\/assets\/static\..+\.js$/),
rel: 'modulepreload',
as: 'script'
},
{
pathname: expect.stringMatching(/^\/assets\/index\..+\.js$/),
rel: 'modulepreload',
as: 'script'
}
])
})
}
)
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 getLinks()).toEqual([
{
pathname: '/dynamic.css',
rel: 'preload',
as: 'style'
}
])
})
}
)
})