-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
/
ssr-vue.spec.ts
124 lines (112 loc) · 3.57 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
import {
editFile,
getColor,
isBuild,
untilUpdated,
autoRetry
} 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('/', 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 page.click('a[href="/about"]')
await autoRetry(async () => {
expect(await page.textContent('h1')).toMatch('About')
})
editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
await untilUpdated(() => page.textContent('h1'), 'changed')
})