Vue js應(yīng)用測試

●第1章　Vue程序測試介紹 1
1.1　測試的定義 2
1.1.1　手動(dòng)測試 2
1.1.2　自動(dòng)化測試 3
1.1.3　測試GitHub的拉取請求 3
1.2　測試概覽 4
1.2.1　端到端測試概覽 4
1.2.2　單元測試概覽 6
1.2.3　快照測試 7
1.2.4　有效地組合測試類型 8
1.2.5　測試驅(qū)動(dòng)開發(fā) 9
1.2.6　了解何時(shí)不進(jìn)行自動(dòng)化測試 9
1.2.7　100%代碼覆蓋率的謬誤 10
1.3　編寫Hacker News應(yīng)用程序 11
1.4　Vue測試概覽 12
1.4.1　Vue實(shí)例 12
1.4.2　模板和渲染函數(shù) 13
1.4.3　了解Vue組件系統(tǒng) 14
1.4.4　單元測試組件 16

●第2章　創(chuàng)建你的第一個(gè)測試 18
2.1　了解Vue項(xiàng)目結(jié)構(gòu) 19
2.1.1　了解構(gòu)建工具 19
2.1.2　使用Vue CLI生成項(xiàng)目 19
2.1.3　了解目錄結(jié)構(gòu) 20
2.1.4　了解npm 20
2.1.5　了解package.json文件 22
2.1.6　使用ESLint校驗(yàn)文件 22
2.1.7　編寫測試腳本 23
2.1.8　構(gòu)建項(xiàng)目 24
2.2　Jest簡介 24
2.2.1　編寫可用性測試 24
2.2.2　了解測試斷言 27
2.2.3　避免誤報(bào) 28
2.2.4　使用describe函數(shù)組織測試 29
2.2.5　組件的單元測試 31
2.2.6　使用Jest編譯文件 31
2.2.7　掛載組件 32
2.3　Vue Test Utils簡介 34
2.3.1　了解API 34
2.3.2　使用shallowMount 35
2.4　使用Chrome Debugger調(diào)試測試 36

●第3章　渲染組件輸出測試 40
3.1　創(chuàng)建測試規(guī)范 40
3.1.1　高級規(guī)范 41
3.1.2　創(chuàng)建組件級規(guī)范 42
3.2　渲染文本測試 43
3.2.1　向一個(gè)組件傳遞prop 43
3.2.2　組件文本內(nèi)容測試 44
3.2.3　使用find 45
3.2.4　測試元素的文本內(nèi)容 46
3.3　測試DOM屬性 47
3.4　測試渲染組件的數(shù)量 48
3.5　測試prop 51
3.5.1　使用Vue Test Utils props方法 51
3.5.2　避免測試prop過程中的陷阱 52
3.6　測試class 53
3.7　測試樣式 54
3.7.1　訪問一個(gè)包裝器元素 55
3.7.2　向一個(gè)應(yīng)用程序添加樣式 55
3.8　何時(shí)測試渲染的組件輸出 56

●第4章　測試組件方法 59
4.1　測試公共組件和私有組件方法 60
4.2　測試定時(shí)器函數(shù) 64
4.2.1　使用假定時(shí)器 65
4.2.2　使用spy測試 67
4.3　向Vue實(shí)例添加屬性 69
4.4　模擬代碼 70
4.4.1　模擬組件中的Vue實(shí)例屬性 70
4.4.2　了解Jest mock函數(shù) 71
4.4.3　使用Vue生命周期鉤子 72
4.5　模擬模塊依賴 73
4.5.1　使用Jest mock模擬模塊依賴 75
4.5.2　測試異步代碼 76
4.5.3　適度使用mock 80

●第5章　測試事件 82
5.1　測試原生DOM事件 83
5.2　測試自定義事件 85
5.2.1　測試發(fā)射自定義事件的組件 86
5.2.2　測試監(jiān)聽Vue自定義事件的組件 88
5.3　測試輸入表單 89
5.3.1　測試文本輸入框 90
5.3.2　測試單選按鈕 93
5.4　了解jsdom的局限性 95

●第6章　了解Vuex 97
6.1　了解state 98
6.2　Vuex可以解決的問題 99
6.3　了解Vuex store 99
6.3.1　創(chuàng)建一個(gè)store 100
6.3.2　了解Vuex mutation 101
6.3.3　了解Vuex action 102
6.3.4　了解Vuex getter 104

●第7章　測試Vuex 107
7.1　了解store設(shè)計(jì) 108
7.2　向項(xiàng)目中添加Vuex 109
7.3　分別測試Vuex store的組成部分 111
7.3.1　測試mutation 112
7.3.2　測試Vuex getter 113
7.3.3　測試Vuex action 115
7.4　測試一個(gè)Vuex store實(shí)例 118
7.5　測試組件中的Vuex 123

●第8章　使用工廠函數(shù)組織測試 129
8.1　了解工廠函數(shù) 129
8.1.1　使代碼符合DRY原則 130
8.1.2　通過沿用同一種模式來提升代碼質(zhì)量 131
8.1.3　了解工廠函數(shù)的利弊 132
8.2　創(chuàng)建store工廠函數(shù) 132
8.3　覆蓋工廠函數(shù)中的默認(rèn)選項(xiàng) 133
8.4　創(chuàng)建包裝器工廠函數(shù) 136

●第9章　了解 Vue Router 141
9.1　了解路由 142
9.1.1　了解服務(wù)端路由 142
9.1.2　了解客戶端路由 143
9.1.3　了解Vue Router的概念 144
9.1.4　了解動(dòng)態(tài)路由匹配 145
9.1.5　為應(yīng)用程序添加Vue Router 146

●第10章　測試 Vue Router 150
10.1　測試路由屬性 151
10.1.1　測試$route屬性 151
10.1.2　測試$router屬性 155
10.1.3　避免常見的陷阱 156
10.2　測試 RouterLink 組件 157
10.3　Vuex與Vue Router配合使用 162
10.3.1　把路由添加到store 162
10.3.2　在store中使用路由參數(shù) 162

●第11章　測試mixin和過濾器 166
11.1　測試mixin 166
11.1.1　了解mixin 167
11.1.2　為mixin編寫測試 168
11.1.3　測試組件中的局部mixin 171
11.1.4　測試組件中的全局mixin 172
11.2　測試過濾器 174
11.2.1　為過濾器編寫測試 175
11.2.2　測試使用了Date.now的過濾器 177
11.2.3　測試組件中的過濾器 180

●第12章　編寫快照測試 183
12.1　了解快照測試 184
12.1.1　為組件編寫快照測試 186
12.1.2　為靜態(tài)組件編寫快照測試 186
12.1.3　為動(dòng)態(tài)組件編寫快照測試 187
12.2　將快照測試添加到你的工作流 190

●第13章　測試服務(wù)端渲染 192
13.1　了解服務(wù)端渲染 193
13.1.1　SSR的優(yōu)點(diǎn) 193
13.1.2　SSR的缺點(diǎn) 195
13.2　測試服務(wù)端渲染的組件 196
13.2.1　使用Vue Server Test Utils 197
13.2.2　使用render遍歷服務(wù)端渲染的標(biāo)簽 199
13.3　使用SuperTest測試狀態(tài)碼 200
13.4　隱式測試SSR 203

●第14章　編寫端到端測試 205
14.1　了解端到端測試 206
14.1.1　高效地使用端到端測試 206
14.1.2　了解Nightwatch和WebDriver 207
14.2　把Nightwatch添加到項(xiàng)目中 208
14.2.1　安裝依賴項(xiàng) 208
14.2.2　配置Nightwatch 209
14.2.3　添加一個(gè)可用性測試 210
14.2.4　編寫一個(gè)端到端測試腳本 211
14.3　使用 Nightwatch編寫端到端測試 212
14.3.1　選擇要編寫哪些端到端測試 213
14.3.2　為路由編寫端到端測試 213
14.3.3　為動(dòng)態(tài)數(shù)據(jù)編寫端到端測試 215
14.4　在多瀏覽器運(yùn)行端到端測試 217
14.5　接下來何去何從 218
附錄 A　安裝開發(fā)環(huán)境 220
附錄 B　運(yùn)行生產(chǎn)構(gòu)建 226
附錄 C　練習(xí)題答案 228