/
ssr-vue.spec.ts
154 lines (138 loc) · 4.71 KB
/
ssr-vue.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import { editFile, getColor, isBuild, untilUpdated } from '../../testUtils'
import { port } from './serve'
import fetch from 'node-fetch'
const url = `http://localhost:${port}`
test('/about', async () => {
await page.goto(url + '/about')
expect(await page.textContent('h1')).toMatch('About')
// should not have hydration mismatch
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('mismatch')
})
// fetch sub route
const aboutHtml = await (await fetch(url + '/about')).text()
expect(aboutHtml).toMatch('About')
if (isBuild) {
// assert correct preload directive generation for async chunks and CSS
expect(aboutHtml).not.toMatch(
/link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
)
expect(aboutHtml).not.toMatch(
/link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
)
expect(aboutHtml).toMatch(
/link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
)
expect(aboutHtml).toMatch(
/link rel="stylesheet".*?href="\/assets\/About\.\w{8}\.css"/
)
}
})
test('/external', async () => {
await page.goto(url + '/external')
expect(await page.textContent('div')).toMatch(
'Example external component content'
)
// should not have hydration mismatch
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('mismatch')
})
// fetch sub route
const externalHtml = await (await fetch(url + '/external')).text()
expect(externalHtml).toMatch('Example external component content')
if (isBuild) {
// assert correct preload directive generation for async chunks and CSS
expect(externalHtml).not.toMatch(
/link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
)
expect(externalHtml).not.toMatch(
/link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
)
expect(externalHtml).toMatch(
/link rel="modulepreload".*?href="\/assets\/External\.\w{8}\.js"/
)
}
})
test('/', async () => {
await page.goto(url)
expect(await page.textContent('h1')).toMatch('Home')
// should not have hydration mismatch
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('mismatch')
})
const html = await (await fetch(url)).text()
expect(html).toMatch('Home')
if (isBuild) {
// assert correct preload directive generation for async chunks and CSS
expect(html).toMatch(
/link rel="modulepreload".*?href="\/assets\/Home\.\w{8}\.js"/
)
expect(html).toMatch(
/link rel="stylesheet".*?href="\/assets\/Home\.\w{8}\.css"/
)
// JSX component preload registration
expect(html).toMatch(
/link rel="modulepreload".*?href="\/assets\/Foo\.\w{8}\.js"/
)
expect(html).toMatch(
/link rel="stylesheet".*?href="\/assets\/Foo\.\w{8}\.css"/
)
expect(html).not.toMatch(
/link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
)
expect(html).not.toMatch(
/link rel="stylesheet".*?href="\/assets\/About\.\w{8}\.css"/
)
}
})
test('css', async () => {
if (isBuild) {
expect(await getColor('h1')).toBe('green')
expect(await getColor('.jsx')).toBe('blue')
} else {
// During dev, the CSS is loaded from async chunk and we may have to wait
// when the test runs concurrently.
await untilUpdated(() => getColor('h1'), 'green')
await untilUpdated(() => getColor('.jsx'), 'blue')
}
})
test('asset', async () => {
// should have no 404s
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('404')
})
const img = await page.$('img')
expect(await img.getAttribute('src')).toMatch(
isBuild ? /\/assets\/logo\.\w{8}\.png/ : '/src/assets/logo.png'
)
})
test('jsx', async () => {
expect(await page.textContent('.jsx')).toMatch('from JSX')
})
test('virtual module', async () => {
expect(await page.textContent('.virtual')).toMatch('hi')
})
test('hydration', async () => {
expect(await page.textContent('button')).toMatch('0')
await page.click('button')
expect(await page.textContent('button')).toMatch('1')
})
test('hmr', async () => {
editFile('src/pages/Home.vue', (code) => code.replace('Home', 'changed'))
await untilUpdated(() => page.textContent('h1'), 'changed')
})
test('client navigation', async () => {
await untilUpdated(() => page.textContent('a[href="/about"]'), 'About')
await page.click('a[href="/about"]')
await untilUpdated(() => page.textContent('h1'), 'About')
editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
await untilUpdated(() => page.textContent('h1'), 'changed')
})
test('import.meta.url', async () => {
await page.goto(url)
expect(await page.textContent('.protocol')).toEqual('file:')
})
test('deep import built-in module', async () => {
await page.goto(url)
expect(await page.textContent('.file-message')).toMatch('fs/promises')
})