# 前端工程簡介
[TOC=2,2]
## 持續集成流程
前端開發轉移到后端環境，意味著可以適用標準的軟件工程流程。
1. 本地開發（developing）
2. 靜態代碼檢查（linting）
3. 單元測試（testing）
4. 合并進入主干（merging）
5. 自動構建（building）
6. 自動發布（publishing）
## 持續集成的概念
Continuous integration（簡稱 CI）：
開發代碼頻繁地合并進主干，始終保持可發布狀態的這個過程。
優點
* 快速發現錯誤
* 防止分支大幅偏離主干
* 讓產品可以快速迭代，同時還能保持高質量
## ESLint：靜態代碼檢查工具
* 發現語法錯誤
* 發現風格錯誤
* 自動糾正錯誤
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/eslint.png)
## 課堂練習：ESLint 的用法
進入`demos/eslint-demo`目錄，按照[《操作指南》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#eslint)，完成練習。
## 為什么寫測試？
Web 應用越來越復雜，意味著更可能出錯。測試是提高代碼質量、降低錯誤的最好方法之一。
* 測試可以確保得到預期結果。
* 加快開發速度。
* 方便維護。
* 提供用法的文檔。
對于長期維護的項目，測試會大大加快開發速度，減輕維護難度。
## 測試的類型
* 單元測試（unit testing）
* 功能測試（feature testing）
* 集成測試（integration testing）
* 端對端測試 (End-to-End testing）
## 以測試為導向的開發模式
* TDD：測試驅動的開發（Test-Driven Development）
* BDD：行為驅動的開發（Behavior-Driven Development）
## TDD vs. BDD
兩者側重點不一樣
* TDD：基于開發者角度，重點測試函數的輸入輸出
* BDD：基于使用者角度，重點測試對用戶行為的反應
比如，有一個計數器函數`counter`，TDD 測試的是輸入1，輸出的應該是2；BDD 測試的是用戶訪問以后，計數器應該增加一次。
## Mocha
Mocha 是目前最常用的測試框架。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/mocha.png)
## 課堂練習：Mocha 的用法
進入`demos/mocha-demo`目錄，按照[《操作指南》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#mocha)，練習寫單元測試。
## 功能測試
功能測試指的是，站在外部用戶的角度，測試軟件的某項功能。
與內部代碼實現無關，只測試功能是否正常。
很多時候，單元測試都可以通過，但是整體功能會失敗。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/functional-test.jpg)
## 前端的功能測試
功能測試必須在真正瀏覽器做，現在有四種方法。
* 使用本機安裝的瀏覽器
* 使用 Selenium Driver
* 使用 PhantomJS
* 使用 Electron
## Nightmare
* 使用 Electron 模擬真實瀏覽器環境
* 提供大量人性化、易用的 API
* 官網：nightmarejs.org
## 示例：Nightmare
打開`demos/nightmare-demo/`，按照[《操作說明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#nightmare)，完成操作。
## 移動平臺的自動化測試
目前，最常見的方案是使用 Appium。
* 基于 WebDriver
* 采用 客戶端/服務器架構
* 可以在模擬器運行，也可以在真機運行
## Appium 測試流程
1. WebDriver 客戶端發出測試請求和測試內容
2. Appium 服務器轉發到相應的測試運行器（Driver）
3. iOS 設備是 UIAutomation，安卓設備是 UiAutomator
4. 測試運行器將運行結果，返回給 Appium
## 持續集成服務平臺
代碼合并進主干以后，就可以進行自動構建和發布了。
網上有很多 PaaS 平臺，提供持續集成服務。
Travis CI 就是其中最著名的一個，它可以根據你提供的腳本，自動完成構建和發布。
[](https://github.com/ruanyf/jstraining/blob/master/docs/images/travis-ci.png)
## 課堂練習：Travis CI
按照[《操作說明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#travis-ci)，完成練習。
