前端單元測(cè)試探索
雖然很多公司有自己的測(cè)試部門(mén)，而且前端開(kāi)發(fā)大多不涉及測(cè)試環(huán)節(jié)，但鑒于目前前端領(lǐng)域的快速發(fā)展，其涉及面越來(lái)越廣，前端開(kāi)發(fā)者們必然不能止步于目前的狀態(tài)。我覺(jué)得學(xué)會(huì)編寫(xiě)良好的測(cè)試，不僅僅有利于自己整理需求、檢查代碼，更是一個(gè)優(yōu)秀開(kāi)發(fā)者的體現(xiàn)。
首先不得不推薦兩篇文章：
Intro
單元測(cè)試到底是什么?
需要訪問(wèn)數(shù)據(jù)庫(kù)的測(cè)試不是單元測(cè)試
需要訪問(wèn)網(wǎng)絡(luò)的測(cè)試不是單元測(cè)試
需要訪問(wèn)文件系統(tǒng)的測(cè)試不是單元測(cè)試
--- 修改代碼的藝術(shù)
我們?cè)趩卧獪y(cè)試中應(yīng)該避免什么?
- 太多的條件邏輯
- 構(gòu)造函數(shù)中做了太多事情
- too many全局變量
- too many靜態(tài)方法
- 無(wú)關(guān)邏輯
- 過(guò)多外部依賴(lài)
TDD(Test-driven development)
測(cè)試驅(qū)動(dòng)開(kāi)發(fā)(TDD)，其基本思路是通過(guò)測(cè)試來(lái)推動(dòng)整個(gè)開(kāi)發(fā)的進(jìn)行。
- 單元測(cè)試的首要目的不是為了能夠編寫(xiě)出大覆蓋率的全部通過(guò)的測(cè)試代碼，而是需要從使用者(調(diào)用者)的角度出發(fā)，嘗試函數(shù)邏輯的各種可能性，進(jìn)而輔助性增強(qiáng)代碼質(zhì)量
- 測(cè)試是手段而不是目的。測(cè)試的主要目的不是證明代碼正確，而是幫助發(fā)現(xiàn)錯(cuò)誤，包括低級(jí)的錯(cuò)誤
- 測(cè)試要快?？焖龠\(yùn)行、快速編寫(xiě)
- 測(cè)試代碼保持簡(jiǎn)潔
- 不會(huì)忽略失敗的測(cè)試。一旦團(tuán)隊(duì)開(kāi)始接受1個(gè)測(cè)試的構(gòu)建失敗，那么他們漸漸地適應(yīng)2、3、4或者更多的失敗。在這種情況下，測(cè)試集就不再起作用
IMPORTANT
- 一定不能誤解了TDD的核心目的!
- 測(cè)試不是為了覆蓋率和正確率
- 而是作為實(shí)例，告訴開(kāi)發(fā)人員要編寫(xiě)什么代碼
- 紅燈(代碼還不完善，測(cè)試掛)-> 綠燈(編寫(xiě)代碼，測(cè)試通過(guò))-> 重構(gòu)(優(yōu)化代碼并保證測(cè)試通過(guò))
大致過(guò)程
- 需求分析，思考實(shí)現(xiàn)?？紤]如何“使用”產(chǎn)品代碼，是一個(gè)實(shí)例方法還是一個(gè)類(lèi)方法，是從構(gòu)造函數(shù)傳參還是從方法調(diào)用傳參，方法的命名，返回值等。這時(shí)其實(shí)就是在做設(shè)計(jì)，而且設(shè)計(jì)以代碼來(lái)體現(xiàn)。此時(shí)測(cè)試為紅
- 實(shí)現(xiàn)代碼讓測(cè)試為綠
- 重構(gòu)，然后重復(fù)測(cè)試
- 最終符合所有要求：
* 每個(gè)概念都被清晰的表達(dá)
* Not Repeat Self
* 沒(méi)有多余的東西
* 通過(guò)測(cè)試
BDD(Behavior-driven development)
行為驅(qū)動(dòng)開(kāi)發(fā)(BDD)，重點(diǎn)是通過(guò)與利益相關(guān)者的討論，取得對(duì)預(yù)期的軟件行為的清醒認(rèn)識(shí)，其重點(diǎn)在于溝通
大致過(guò)程
- 從業(yè)務(wù)的角度定義具體的，以及可衡量的目標(biāo)
- 找到一種可以達(dá)到設(shè)定目標(biāo)的、對(duì)業(yè)務(wù)最重要的那些功能的方法
- 然后像故事一樣描述出一個(gè)個(gè)具體可執(zhí)行的行為。其描述方法基于一些通用詞匯，這些詞匯具有準(zhǔn)確無(wú)誤的表達(dá)能力和一致的含義。例如，expect, should, assert
- 尋找合適語(yǔ)言及方法，對(duì)行為進(jìn)行實(shí)現(xiàn)
- 測(cè)試人員檢驗(yàn)產(chǎn)品運(yùn)行結(jié)果是否符合預(yù)期行為。最大程度的交付出符合用戶(hù)期望的產(chǎn)品，避免表達(dá)不一致帶來(lái)的問(wèn)題
測(cè)試的分類(lèi) & 測(cè)試工具
分類(lèi)
- API/Func UnitTest
* 測(cè)試不常變化的函數(shù)邏輯
* 測(cè)試前后端API接口
- UI UnitTest
* 頁(yè)面自動(dòng)截圖
* 頁(yè)面DOM元素檢查
* 跑通交互流程
工具
- Mocha + Chai
- PhantomJS or CasperJS or Nightwatch.js
- selenium
* with python
* with js
mocha + chai的API/Func UnitTest
mocha是一套前端測(cè)試工具，我們可以拿它和其他測(cè)試工具搭配。
而chai則是BDD/TDD測(cè)試斷言庫(kù)，提供諸如expect這樣的測(cè)試語(yǔ)法
initial
下面兩篇文章值得一看：
- Testing in ES6 with Mocha and Babel 6
- Using Babel
setup
- $ npm i mocha --save-dev
- $ npm i chai --save-dev
Use with es6
babel 6+
- $ npm install --save-dev babel-register
- $ npm install babel-preset-es2015 --save-dev
- // package.json
- {
- "scripts": {
- "test": "./node_modules/mocha/bin/mocha --compilers js:babel-register"
- },
- "babel": {
- "presets": [
- "es2015"
- ]
- }
- }
babel 5+
- $ npm install --save-dev babel-core
- // package.json
- {
- "scripts": {
- "test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register"
- }
- }
Use with coffeescript
- $ npm install --save coffee-script
- {
- "scripts": {
- "test": "./node_modules/mocha/bin/mocha --compilers coffee:coffee-script/register"
- }
- }
Use with es6+coffeescript
After done both...
- {
- "scripts": {
- "test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register,coffee:coffee-script/register"
- }
- }
- # $ mocha
- $ npm t
- $ npm test
chai
- import chai from 'chai';
- const assert = chai.assert;
- const expect = chai.expect;
- const should = chai.should();
- foo.should.be.a('string');
- foo.should.equal('bar');
- list.should.have.length(3);
- obj.should.have.property('name');
- expect(foo).to.be.a('string');
- expect(foo).to.equal('bar');
- expect(list).to.have.length(3);
- expect(obj).to.have.property('flavors');
- assert.typeOf(foo, 'string');
- assert.equal(foo, 'bar');
- assert.lengthOf(list, 3);
- assert.property(obj, 'flavors');
Test
測(cè)試的一個(gè)基本思路是，自身從函數(shù)的調(diào)用者出發(fā)，對(duì)函數(shù)進(jìn)行各種情況的調(diào)用，查看其容錯(cuò)程度、返回結(jié)果是否符合預(yù)期。
- import chai from 'chai';
- const assert = chai.assert;
- const expect = chai.expect;
- const should = chai.should();
- describe('describe a test', () => {
- it('should return true', () => {
- let example = true;
- // expect
- expect(example).not.to.equal(false);
- expect(example).to.equal(true);
- // should
- example.should.equal(true);
- example.should.be.a(boolen);
- [1, 2].should.have.length(2);
- });
- it('should check an object', () => {
- // 對(duì)于多層嵌套的Object而言..
- let nestedObj = {
- a: {
- b: 1
- }
- };
- let nestedObjCopy = Object.assign({}, nestedObj);
- nestedObj.a.b = 2;
- // do a function to change nestedObjCopy.a.b
- expect(nestedObjCopy).to.deep.equal(nestedObj);
- expect(nestedObjCopy).to.have.property('a');
- });
- });
AsynTest
Testing Asynchronous Code with MochaJS and ES7 async/await
mocha無(wú)法自動(dòng)監(jiān)聽(tīng)異步方法的完成，需要我們?cè)谕瓿芍笫謩?dòng)調(diào)用done()方法
而如果要在回調(diào)之后使用異步測(cè)試語(yǔ)句，則需要使用try/catch進(jìn)行捕獲。成功則done()，失敗則done(error)
- // 普通的測(cè)試方法
- it("should work", () =>{
- console.log("Synchronous test");
- });
- // 異步的測(cè)試方法
- it("should work", (done) =>{
- setTimeout(() => {
- try {
- expect(1).not.to.equal(0);
- done(); // 成功
- } catch (err) {
- done(err); // 失敗
- }
- }, 200);
- });
異步測(cè)試有兩種方法完結(jié)：done或者返回Promise。而通過(guò)返回Promise，則不再需要編寫(xiě)笨重的try/catch語(yǔ)句
- it("Using a Promise that resolves successfully with wrong expectation!", function() {
- var testPromise = new Promise(function(resolve, reject) {
- setTimeout(function() {
- resolve("Hello World!");
- }, 200);
- });
- return testPromise.then(function(result){
- expect(result).to.equal("Hello!");
- });
- });
mock
mock是一個(gè)接口模擬庫(kù)，我們可以通過(guò)它來(lái)模擬代碼中的一些異步操作
React單元測(cè)試
Test React Component
React組件無(wú)法直接通過(guò)上述方法進(jìn)行測(cè)試，需要安裝enzyme依賴(lài)。
- $ npm i --save-dev enzyme
- #
- $ npm i --save-dev react-addons-test-utils
假設(shè)有這樣一個(gè)組件：
- // ...省略部分import代碼
- class TestComponent extends React.Component {
- constructor(props) {
- super(props);
- let {num} = props;
- this.state = {
- clickNum: num
- }
- this.handleClick = this.handleClick.bind(this)
- }
- handleClick() {
- let {clickNum} = this.state;
- this.setState({
- clickNum: clickNum + 1
- });
- }
- render() {
- let {clickNum} = this.state;
- return (
- <div className="test_component">
- {clickNum}
- <span onClick={this.handleClick}>點(diǎn)我加1</span>
- </div>
- )
- }
- }
使用樣例：
- import React from 'react';
- import {expect} from 'chai';
- import {shallow} from 'enzyme';
- import TestComponent from '../components/TestComponent';
- describe('Test TestComponent', () => {
- // 創(chuàng)建一個(gè)虛擬的組件
- const wrapper = shallow(
- <TestComponent num={10} />/
- );
- /*
- * 之后，我們可以:
- * 通過(guò)wrapper.state()拿到組件的state
- * 通過(guò)wrapper.instance()拿到組件實(shí)例，以此調(diào)用組件內(nèi)的方法
- * 通過(guò)wrapper.find()找到組件內(nèi)的子組件
- * 但是，無(wú)法通過(guò)wrapper.props()拿到組件的props
- */
- // 測(cè)試該組件組外層的class
- it('should render with currect wrapper', () => {
- expect(wrapper.is('.test_component')).to.equal(true);
- });
- // 測(cè)試該組件初始化的state
- it('should render with currect state', () => {
- expect(wrapper.state()).to.deep.equal({
- clickNum: 10
- });
- });
- // 測(cè)試組件的方法
- it('should add one', () => {
- wrapper.instance().handleClick();
- expect(wrapper.state()).to.deep.equal({
- clickNum: 11
- });
- });
- });
Test Redux
redux身為純函數(shù)，非常便于mocha進(jìn)行測(cè)試
- // 測(cè)試actions
- import * as ACTIONS from '../redux/actions';
- describe('test actions', () => {
- it('should return an action to create a todo', () => {
- let expectedAction = {
- type: ACTIONS.NEW_TODO,
- todo: 'this is a new todo'
- };
- expect(ACTIONS.addNewTodo('this is a new todo')).to.deep.equal(expectedAction);
- });
- });
- // 測(cè)試reducer
- import * as REDUCERS from '../redux/reducers';
- import * as ACTIONS from '../redux/actions';
- describe('todos', () => {
- let todos = [];
- it('should add a new todo', () => {
- todos.push({
- todo: 'new todo',
- complete: false
- });
- expect(REDUCERS.todos(todos, {
- type: ACTIONS.NEW_TODO,
- todo: 'new todo'
- })).to.deep.equal([
- {
- todo: 'new todo',
- complete: false
- }
- ]);
- });
- });
- // 還可以和store混用
- import { createStore, applyMiddleware, combineReducers } from 'redux';
- import thunk from 'redux-thunk';
- import chai from 'chai';
- import thunkMiddleware from 'redux-thunk';
- import * as REDUCERS from '../redux/reducers';
- import defaultState from '../redux/ConstValues';
- import * as ACTIONS from '../redux/actions'
- const appReducers = combineReducers(REDUCERS);
- const AppStore = createStore(appReducers, defaultState， applyMiddleware(thunk));
- let state = Object.assign({}, AppStore.getState());
- // 一旦注冊(cè)就會(huì)時(shí)刻監(jiān)聽(tīng)state變化
- const subscribeListener = (result, done) => {
- return AppStore.subscribe(() => {
- expect(AppStore.getState()).to.deep.equal(result);
- done();
- });
- };
- describe('use store in unittest'， () => {
- it('should create a todo', (done) => {
- // 首先取得我們的期望值
- state.todos.append({
- todo: 'new todo',
- complete: false
- });
- // 注冊(cè)state監(jiān)聽(tīng)
- let unsubscribe = subscribeListener(state, done);
- AppStore.dispatch(ACTIONS.addNewTodo('new todo'));
- // 結(jié)束之后取消監(jiān)聽(tīng)
- unsubscribe();
- });
- });
基于phantomjs和selenium的UI UnitTest
PhantomJS是一個(gè)基于webkit的服務(wù)器端JavaScript API，即相當(dāng)于在內(nèi)存中跑了個(gè)無(wú)界面的webkit內(nèi)核的瀏覽器。通過(guò)它我們可以模擬頁(yè)面加載，并獲取到頁(yè)面上的DOM元素，進(jìn)行一系列的操作，以此來(lái)模擬UI測(cè)試。但缺點(diǎn)是無(wú)法實(shí)時(shí)看見(jiàn)頁(yè)面上的情況(不過(guò)可以截圖)。
而Selenium是專(zhuān)門(mén)為Web應(yīng)用程序編寫(xiě)的一個(gè)驗(yàn)收測(cè)試工具，它直接運(yùn)行在瀏覽器中。Selenium測(cè)試通常會(huì)調(diào)起一個(gè)可見(jiàn)的界面，但也可以通過(guò)設(shè)置，讓它以PhantomJS的形式進(jìn)行無(wú)界面的測(cè)試。
- open 某個(gè) url
- 監(jiān)聽(tīng) onload 事件
- 事件完成后調(diào)用 sendEvent 之類(lèi)的 api 去點(diǎn)擊某個(gè) DOM 元素所在 point
- 觸發(fā)交互
- 根據(jù) UI 交互情況 延時(shí) setTimeout (規(guī)避惰加載組件點(diǎn)不到的情況)繼續(xù) sendEvent 之類(lèi)的交互
