Vue.js 應用測試 (Testing Vue.js Applications)
內容描述
Vue.js創始人尤雨溪(Evan You)鼎力推薦!Vue官方測試工具作者親筆撰寫。
本書是一本為Vue應用程序開發者提供程序測試指導的書籍,適用於不同能力水平的Vue應用程序開發者。
本書通過從零編寫Hacker News應用程序的方式,詳細闡述了Vue.js應用程序在每個開發階段所適用的測試技巧,
完整展示了編制Vue.js應用程序測試套件所需的技能。
本書的前兩章是對測試Vue.js應用的介紹,以及編寫Vue.js測試的基礎引導;
在第3章到第11章,以及第13章的部分中,書中針對Vue.js程序的特性,
分別介紹了測試Vue組件輸出、events、methods 、Vuex、Vue Router以及測試mixin、filter和SSR的方法;
第12章和第14章介紹了常見的快照測試和端到端測試的相關內容。
除此之外,書中還對測試中遇到的一些特殊情況進行了描述,
作者在演示如何通過mock Date.now 方法來解決此特殊情況的同時,
也向我們展示了該系列問題的解決思路。
讀者結合書中實例進行演練,即可迅速掌握相關測試技巧。
目錄大綱
目錄Contents
譯者序
前言
致謝
●第1章Vue程序測試介紹1
1.1測試的定義2
1.1.1手動測試2
1.1.2自動化測試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測試驅動開發9
1.2.6了解何時不進行自動化測試9
1.2.7 100%代碼覆蓋率的謬誤10
1.3編寫Hacker News應用程序11
1.4 Vue測試概覽12
1.4.1 Vue實例12
1.4.2模板和渲染函數13
1.4.3了解Vue組件系統14
1.4.4單元測試組件16
●第2章創建你的第一個測試18
2.1了解Vue項目結構19
2.1.1了解構建工具19
2.1.2使用Vue CLI生成項目19
2.1.3了解目錄結構20
2.1.4了解npm 20
2.1.5了解package.json文件22
2.1.6使用ESLint校驗文件22
2.1.7編寫測試腳本23
2.1.8構建項目24
2.2 Jest簡介24
2.2.1編寫可用性測試24
2.2.2了解測試斷言27
2.2.3避免誤報28
2.2.4使用describe函數組織測試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調試測試36
●第3章渲染組件輸出測試40
3.1創建測試規範40
3.1.1高級規範41
3.1.2創建組件級規範42
3.2渲染文本測試43
3.2.1向一個組件傳遞prop 43
3.2 .2組件文本內容測試44
3.2.3使用find 45
3.2.4測試元素的文本內容46
3.3測試DOM屬性47
3.4測試渲染組件的數量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訪問一個包裝器元素55
3.7.2向一個應用程序添加樣式55
3.8何時測試渲染的組件輸出56
●第4章測試組件方法59
4.1測試公共組件和私有組件方法60
4.2測試定時器函數64
4.2.1使用假定時器65
4.2.2使用spy測試67
4.3向Vue實例添加屬性69
4.4模擬代碼70
4.4.1模擬組件中的Vue實例屬性70
4.4.2了解Jest mock函數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測試發射自定義事件的組件86
5.2.2測試監聽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創建一個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設計108
7.2向項目中添加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測試一個Vuex store實例118
7.5測試組件中的Vuex 123
●第8章使用工廠函數組織測試129
8.1了解工廠函數129
8.1.1使代碼符合DRY原則130
8.1.2通過沿用同一種模式來提升代碼質量131
8.1.3了解工廠函數的利弊132
8.2創建store工廠函數132
8.3覆蓋工廠函數中的默認選項133
8.4創建包裝器工廠函數136
●第9章了解Vue Router 141
9.1了解路由142
9.1.1了解服務端路由142
9.1.2了解客戶端路由143
9.1.3了解Vue Router的概念144
9.1.4了解動態路由匹配145
9.1. 5為應用程序添加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中使用路由參數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為靜態組件編寫快照測試186
12.1.3為動態組件編寫快照測試187
12.2將快照測試添加到你的工作流190
●第13章測試服務端渲染192
13.1了解服務端渲染193
13.1.1 SSR的優點193
13.1.2 SSR的缺點195
13.2測試服務端渲染的組件196
13.2.1使用Vue Server Test Utils 197
13.2.2使用render遍歷服務端渲染的標籤199
13.3使用SuperTest測試狀態碼200
13.4隱式測試SSR 203
●第14章編寫端到端測試205
14.1了解端到端測試206
14.1.1高效地使用端到端測試206
14.1 .2了解Nightwatch和WebDriver 207
14.2把Nightwatch添加到項目中208
14.2.1安裝依賴項208
14.2.2配置Nightwatch 209
14.2.3添加一個可用性測試210
14.2.4編寫一個端到端測試腳本211
14.3使用Nightwatch編寫端到端測試212
14.3.1選擇要編寫哪些端到端測試213
14.3.2為路由編寫端到端測試213
14.3.3為動態數據編寫端到端測試215
14.4在多瀏覽器運行端到端測試217
14.5接下來何去何從218
附錄A安裝開發環境220
附錄B運行生產構建226
附錄C練習題答案228
作者介紹
Edd Yerburgh
Vue核心貢獻者, 官方Vue測試庫的主要作者。
BBC的軟件工程師,經驗豐富的JavaScript開發者。