Vue js應(yīng)用測(cè)試

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

●第2章　創(chuàng)建你的第一個(gè)測(cè)試 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　編寫測(cè)試腳本 23
2.1.8　構(gòu)建項(xiàng)目 24
2.2　Jest簡(jiǎn)介 24
2.2.1　編寫可用性測(cè)試 24
2.2.2　了解測(cè)試斷言 27
2.2.3　避免誤報(bào) 28
2.2.4　使用describe函數(shù)組織測(cè)試 29
2.2.5　組件的單元測(cè)試 31
2.2.6　使用Jest編譯文件 31
2.2.7　掛載組件 32
2.3　Vue Test Utils簡(jiǎn)介 34
2.3.1　了解API 34
2.3.2　使用shallowMount 35
2.4　使用Chrome Debugger調(diào)試測(cè)試 36

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

●第4章　測(cè)試組件方法 59
4.1　測(cè)試公共組件和私有組件方法 60
4.2　測(cè)試定時(shí)器函數(shù) 64
4.2.1　使用假定時(shí)器 65
4.2.2　使用spy測(cè)試 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　測(cè)試異步代碼 76
4.5.3　適度使用mock 80

●第5章　測(cè)試事件 82
5.1　測(cè)試原生DOM事件 83
5.2　測(cè)試自定義事件 85
5.2.1　測(cè)試發(fā)射自定義事件的組件 86
5.2.2　測(cè)試監(jiān)聽Vue自定義事件的組件 88
5.3　測(cè)試輸入表單 89
5.3.1　測(cè)試文本輸入框 90
5.3.2　測(cè)試單選按鈕 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章　測(cè)試Vuex 107
7.1　了解store設(shè)計(jì) 108
7.2　向項(xiàng)目中添加Vuex 109
7.3　分別測(cè)試Vuex store的組成部分 111
7.3.1　測(cè)試mutation 112
7.3.2　測(cè)試Vuex getter 113
7.3.3　測(cè)試Vuex action 115
7.4　測(cè)試一個(gè)Vuex store實(shí)例 118
7.5　測(cè)試組件中的Vuex 123

●第8章　使用工廠函數(shù)組織測(cè)試 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章　測(cè)試 Vue Router 150
10.1　測(cè)試路由屬性 151
10.1.1　測(cè)試$route屬性 151
10.1.2　測(cè)試$router屬性 155
10.1.3　避免常見的陷阱 156
10.2　測(cè)試 RouterLink 組件 157
10.3　Vuex與Vue Router配合使用 162
10.3.1　把路由添加到store 162
10.3.2　在store中使用路由參數(shù) 162

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

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

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

●第14章　編寫端到端測(cè)試 205
14.1　了解端到端測(cè)試 206
14.1.1　高效地使用端到端測(cè)試 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è)可用性測(cè)試 210
14.2.4　編寫一個(gè)端到端測(cè)試腳本 211
14.3　使用 Nightwatch編寫端到端測(cè)試 212
14.3.1　選擇要編寫哪些端到端測(cè)試 213
14.3.2　為路由編寫端到端測(cè)試 213
14.3.3　為動(dòng)態(tài)數(shù)據(jù)編寫端到端測(cè)試 215
14.4　在多瀏覽器運(yùn)行端到端測(cè)試 217
14.5　接下來何去何從 218
附錄 A　安裝開發(fā)環(huán)境 220
附錄 B　運(yùn)行生產(chǎn)構(gòu)建 226
附錄 C　練習(xí)題答案 228