成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

前端單元測試探索

作者：ecmadao
開發 測試
雖然很多公司有自己的測試部門，而且前端開發大多不涉及測試環節，但鑒于目前前端領域的快速發展，其涉及面越來越廣，前端開發者們必然不能止步于目前的狀態。我覺得學會編寫良好的測試，不僅僅有利于自己整理需求、檢查代碼，更是一個優秀開發者的體現。

[[171841]]

雖然很多公司有自己的測試部門，而且前端開發大多不涉及測試環節，但鑒于目前前端領域的快速發展，其涉及面越來越廣，前端開發者們必然不能止步于目前的狀態。我覺得學會編寫良好的測試，不僅僅有利于自己整理需求、檢查代碼，更是一個優秀開發者的體現。

首先不得不推薦兩篇文章：

  1. 前端自動化測試探索
  2. 測試驅動開發(TDD)介紹中的誤區

Intro

單元測試到底是什么?

需要訪問數據庫的測試不是單元測試

需要訪問網絡的測試不是單元測試

需要訪問文件系統的測試不是單元測試

--- 修改代碼的藝術

我們在單元測試中應該避免什么?

  • 太多的條件邏輯
  • 構造函數中做了太多事情
  • too many全局變量
  • too many靜態方法
  • 無關邏輯
  • 過多外部依賴

TDD(Test-driven development)

測試驅動開發(TDD)，其基本思路是通過測試來推動整個開發的進行。

  • 單元測試的首要目的不是為了能夠編寫出大覆蓋率的全部通過的測試代碼，而是需要從使用者(調用者)的角度出發，嘗試函數邏輯的各種可能性，進而輔助性增強代碼質量
  • 測試是手段而不是目的。測試的主要目的不是證明代碼正確，而是幫助發現錯誤，包括低級的錯誤
  • 測試要快。快速運行、快速編寫
  • 測試代碼保持簡潔
  • 不會忽略失敗的測試。一旦團隊開始接受1個測試的構建失敗，那么他們漸漸地適應2、3、4或者更多的失敗。在這種情況下，測試集就不再起作用

IMPORTANT

  • 一定不能誤解了TDD的核心目的!
  • 測試不是為了覆蓋率和正確率
  • 而是作為實例，告訴開發人員要編寫什么代碼
  • 紅燈(代碼還不完善，測試掛)-> 綠燈(編寫代碼，測試通過)-> 重構(優化代碼并保證測試通過)

大致過程

  1. 需求分析，思考實現。考慮如何“使用”產品代碼，是一個實例方法還是一個類方法，是從構造函數傳參還是從方法調用傳參，方法的命名，返回值等。這時其實就是在做設計，而且設計以代碼來體現。此時測試為紅
  2. 實現代碼讓測試為綠
  3. 重構，然后重復測試
  4. 最終符合所有要求：

* 每個概念都被清晰的表達

* Not Repeat Self

* 沒有多余的東西

* 通過測試

BDD(Behavior-driven development)

行為驅動開發(BDD)，重點是通過與利益相關者的討論，取得對預期的軟件行為的清醒認識，其重點在于溝通

大致過程

  • 從業務的角度定義具體的，以及可衡量的目標
  • 找到一種可以達到設定目標的、對業務最重要的那些功能的方法
  • 然后像故事一樣描述出一個個具體可執行的行為。其描述方法基于一些通用詞匯，這些詞匯具有準確無誤的表達能力和一致的含義。例如，expect, should, assert
  • 尋找合適語言及方法，對行為進行實現
  • 測試人員檢驗產品運行結果是否符合預期行為。最大程度的交付出符合用戶期望的產品，避免表達不一致帶來的問題

測試的分類 & 測試工具

分類

  • API/Func UnitTest

* 測試不常變化的函數邏輯

* 測試前后端API接口

  • UI UnitTest

* 頁面自動截圖

* 頁面DOM元素檢查

* 跑通交互流程

工具

  • Mocha + Chai
  • PhantomJS or CasperJS or Nightwatch.js
  • selenium

* with python

* with js

mocha + chai的API/Func UnitTest

mocha是一套前端測試工具，我們可以拿它和其他測試工具搭配。

而chai則是BDD/TDD測試斷言庫，提供諸如expect這樣的測試語法

initial

下面兩篇文章值得一看：

  1. Testing in ES6 with Mocha and Babel 6
  2. Using Babel

setup 

  1. $ npm i mocha --save-dev 
  2. $ npm i chai --save-dev  

Use with es6

babel 6+ 

  1. $ npm install --save-dev babel-register 
  2. $ npm install babel-preset-es2015 --save-dev  
  1. // package.json 
  2. { 
  3.   "scripts": { 
  4.     "test": "./node_modules/mocha/bin/mocha --compilers js:babel-register" 
  5.   }, 
  6.   "babel": { 
  7.     "presets": [ 
  8.       "es2015" 
  9.     ] 
  10.   } 
  11. }  

babel 5+ 

  1. $ npm install --save-dev babel-core  
  1. // package.json 
  2. { 
  3.   "scripts": { 
  4.     "test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register" 
  5.   } 
  6. }  

Use with coffeescript 

  1. $ npm install --save coffee-script  
  1. { 
  2.   "scripts": { 
  3.     "test": "./node_modules/mocha/bin/mocha --compilers coffee:coffee-script/register" 
  4.   } 
  5. }  

Use with es6+coffeescript

After done both... 

  1. { 
  2.   "scripts": { 
  3.     "test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register,coffee:coffee-script/register" 
  4.   } 
  5. }  
  1. # $ mocha 
  2. $ npm t 
  3. $ npm test  

chai 

  1. import chai from 'chai'; 
  2.  
  3. const assert = chai.assert; 
  4. const expect = chai.expect; 
  5. const should = chai.should();  
  1. foo.should.be.a('string'); 
  2. foo.should.equal('bar'); 
  3. list.should.have.length(3); 
  4. obj.should.have.property('name'); 
  5.  
  6. expect(foo).to.be.a('string'); 
  7. expect(foo).to.equal('bar'); 
  8. expect(list).to.have.length(3); 
  9. expect(obj).to.have.property('flavors'); 
  10.  
  11. assert.typeOf(foo, 'string'); 
  12. assert.equal(foo, 'bar'); 
  13. assert.lengthOf(list, 3); 
  14. assert.property(obj, 'flavors');  

Test

測試的一個基本思路是，自身從函數的調用者出發，對函數進行各種情況的調用，查看其容錯程度、返回結果是否符合預期。 

  1. import chai from 'chai'; 
  2. const assert = chai.assert; 
  3. const expect = chai.expect; 
  4. const should = chai.should(); 
  5.  
  6. describe('describe a test', () => { 
  7.  
  8.   it('should return true', () => { 
  9.       let example = true; 
  10.       // expect 
  11.       expect(example).not.to.equal(false); 
  12.       expect(example).to.equal(true); 
  13.       // should 
  14.       example.should.equal(true); 
  15.       example.should.be.a(boolen); 
  16.       [1, 2].should.have.length(2); 
  17.   }); 
  18.    
  19.   it('should check an object', () => { 
  20.     // 對于多層嵌套的Object而言.. 
  21.     let nestedObj = { 
  22.         a: { 
  23.           b: 1 
  24.       } 
  25.     }; 
  26.     let nestedObjCopy = Object.assign({}, nestedObj); 
  27.     nestedObj.a.b = 2; 
  28.      
  29.     // do a function to change nestedObjCopy.a.b  
  30.     expect(nestedObjCopy).to.deep.equal(nestedObj); 
  31.     expect(nestedObjCopy).to.have.property('a'); 
  32.   }); 
  33. });  

AsynTest

Testing Asynchronous Code with MochaJS and ES7 async/await

mocha無法自動監聽異步方法的完成，需要我們在完成之后手動調用done()方法

而如果要在回調之后使用異步測試語句，則需要使用try/catch進行捕獲。成功則done()，失敗則done(error) 

  1. // 普通的測試方法 
  2. it("should work", () =>{ 
  3.   console.log("Synchronous test"); 
  4. }); 
  5. // 異步的測試方法 
  6. it("should work", (done) =>{ 
  7.   setTimeout(() => { 
  8.     try { 
  9.         expect(1).not.to.equal(0); 
  10.         done(); // 成功 
  11.     } catch (err) { 
  12.         done(err); // 失敗 
  13.     } 
  14.   }, 200); 
  15. });  

異步測試有兩種方法完結：done或者返回Promise。而通過返回Promise，則不再需要編寫笨重的try/catch語句 

  1. it("Using a Promise that resolves successfully with wrong expectation!", function() { 
  2.     var testPromise = new Promise(function(resolve, reject) { 
  3.         setTimeout(function() { 
  4.             resolve("Hello World!"); 
  5.         }, 200); 
  6.     }); 
  7.  
  8.     return testPromise.then(function(result){ 
  9.         expect(result).to.equal("Hello!"); 
  10.     }); 
  11. });  

mock

mock是一個接口模擬庫，我們可以通過它來模擬代碼中的一些異步操作

React單元測試

Test React Component

React組件無法直接通過上述方法進行測試，需要安裝enzyme依賴。 

  1. $ npm i --save-dev enzyme 
  2. # 
  3. $ npm i --save-dev react-addons-test-utils  

假設有這樣一個組件： 

  1. // ...省略部分import代碼 
  2. class TestComponent extends React.Component { 
  3.   constructor(props) { 
  4.     super(props); 
  5.     let {num} = props; 
  6.     this.state = { 
  7.       clickNum: num 
  8.     } 
  9.     this.handleClick = this.handleClick.bind(this) 
  10.   } 
  11.  
  12.   handleClick() { 
  13.     let {clickNum} = this.state; 
  14.     this.setState({ 
  15.       clickNum: clickNum + 1 
  16.     }); 
  17.   } 
  18.  
  19.   render() { 
  20.     let {clickNum} = this.state; 
  21.     return ( 
  22.       <div className="test_component"> 
  23.         {clickNum} 
  24.         <span onClick={this.handleClick}>點我加1</span> 
  25.       </div> 
  26.     ) 
  27.   } 
  28. }  

使用樣例： 

  1. import React from 'react'; 
  2. import {expect} from 'chai'; 
  3. import {shallow} from 'enzyme'; 
  4.  
  5. import TestComponent from '../components/TestComponent'; 
  6.  
  7. describe('Test TestComponent', () => { 
  8.   // 創建一個虛擬的組件 
  9.   const wrapper = shallow( 
  10.       <TestComponent num={10} />/ 
  11.   ); 
  12.  
  13.   /*  
  14.   * 之后，我們可以: 
  15.   * 通過wrapper.state()拿到組件的state 
  16.   * 通過wrapper.instance()拿到組件實例，以此調用組件內的方法 
  17.   * 通過wrapper.find()找到組件內的子組件 
  18.   * 但是，無法通過wrapper.props()拿到組件的props 
  19.   */ 
  20.  
  21.   // 測試該組件組外層的class 
  22.   it('should render with currect wrapper', () => { 
  23.     expect(wrapper.is('.test_component')).to.equal(true); 
  24.   }); 
  25.  
  26.   // 測試該組件初始化的state 
  27.   it('should render with currect state', () => { 
  28.     expect(wrapper.state()).to.deep.equal({ 
  29.       clickNum: 10 
  30.     }); 
  31.   }); 
  32.  
  33.   // 測試組件的方法 
  34.   it('should add one', () => { 
  35.     wrapper.instance().handleClick(); 
  36.     expect(wrapper.state()).to.deep.equal({ 
  37.       clickNum: 11 
  38.     }); 
  39.   }); 
  40. });  

Test Redux

redux身為純函數，非常便于mocha進行測試 

  1. // 測試actions 
  2. import * as ACTIONS from '../redux/actions'; 
  3.  
  4. describe('test actions', () => { 
  5.   it('should return an action to create a todo', () => { 
  6.     let expectedAction = { 
  7.         type: ACTIONS.NEW_TODO, 
  8.         todo: 'this is a new todo' 
  9.     }; 
  10.      expect(ACTIONS.addNewTodo('this is a new todo')).to.deep.equal(expectedAction); 
  11.   }); 
  12. });  
  1. // 測試reducer 
  2. import * as REDUCERS from '../redux/reducers'; 
  3. import * as ACTIONS from '../redux/actions'; 
  4.  
  5. describe('todos', () => { 
  6.   let todos = []; 
  7.   it('should add a new todo', () => { 
  8.       todos.push({ 
  9.         todo: 'new todo', 
  10.         complete: false 
  11.     }); 
  12.     expect(REDUCERS.todos(todos, { 
  13.         type: ACTIONS.NEW_TODO, 
  14.         todo: 'new todo' 
  15.     })).to.deep.equal([ 
  16.       { 
  17.           todo: 'new todo', 
  18.           complete: false 
  19.       } 
  20.     ]); 
  21.   }); 
  22. });  
  1. // 還可以和store混用 
  2. import { createStore, applyMiddleware, combineReducers } from 'redux'; 
  3. import thunk from 'redux-thunk'; 
  4. import chai from 'chai'; 
  5. import thunkMiddleware from 'redux-thunk'; 
  6. import * as REDUCERS from '../redux/reducers'; 
  7. import defaultState from '../redux/ConstValues'; 
  8. import * as ACTIONS from '../redux/actions' 
  9.  
  10. const appReducers = combineReducers(REDUCERS); 
  11. const AppStore = createStore(appReducers, defaultState， applyMiddleware(thunk)); 
  12. let state = Object.assign({}, AppStore.getState()); 
  13.  
  14. // 一旦注冊就會時刻監聽state變化 
  15. const subscribeListener = (result, done) => { 
  16.   return AppStore.subscribe(() => { 
  17.     expect(AppStore.getState()).to.deep.equal(result); 
  18.     done(); 
  19.   }); 
  20. }; 
  21.  
  22. describe('use store in unittest'， () => { 
  23.   it('should create a todo', (done) => { 
  24.     // 首先取得我們的期望值 
  25.       state.todos.append({ 
  26.         todo: 'new todo', 
  27.         complete: false 
  28.     }); 
  29.      
  30.     // 注冊state監聽 
  31.     let unsubscribe = subscribeListener(state, done); 
  32.     AppStore.dispatch(ACTIONS.addNewTodo('new todo')); 
  33.     // 結束之后取消監聽 
  34.     unsubscribe(); 
  35.   }); 
  36. });  

基于phantomjs和selenium的UI UnitTest

PhantomJS是一個基于webkit的服務器端JavaScript API，即相當于在內存中跑了個無界面的webkit內核的瀏覽器。通過它我們可以模擬頁面加載，并獲取到頁面上的DOM元素，進行一系列的操作，以此來模擬UI測試。但缺點是無法實時看見頁面上的情況(不過可以截圖)。

而Selenium是專門為Web應用程序編寫的一個驗收測試工具，它直接運行在瀏覽器中。Selenium測試通常會調起一個可見的界面，但也可以通過設置，讓它以PhantomJS的形式進行無界面的測試。

  • open 某個 url
  • 監聽 onload 事件
  • 事件完成后調用 sendEvent 之類的 api 去點擊某個 DOM 元素所在 point
  • 觸發交互
  • 根據 UI 交互情況 延時 setTimeout (規避惰加載組件點不到的情況)繼續 sendEvent 之類的交互

Getting started with Selenium Webdriver for node.js

責任編輯：龐桂玉 來源： segmentfault
Javascript端單元測試
相關推薦

2022-03-15 11:55:24

前端單元測試

2017-01-14 23:42:49

單元測試框架軟件測試

2021-10-12 19:16:26

Jest單元測試

2016-09-14 21:55:33

前端測試Karma

2016-09-26 16:42:19

JavaScript前端單元測試

2017-09-13 15:05:10

React前端單元測試

2017-09-10 17:41:39

React全家桶單元測試前端測試

2017-03-30 07:56:30

測試前端代碼

2017-01-14 23:26:17

單元測試JUnit測試

2017-01-16 12:12:29

單元測試JUnit

2023-10-07 09:04:31

FastAPI單元測試

2020-08-18 08:10:02

單元測試Java

2023-07-26 08:58:45

Golang單元測試

2011-07-04 18:16:42

單元測試

2020-05-07 17:30:49

開發iOS技術

2017-01-16 13:38:05

前端開發自動化

2021-05-05 11:38:40

TestNGPowerMock單元測試

2017-03-23 16:02:10

Mock技術單元測試

2011-05-16 16:52:09

單元測試徹底測試

2024-10-16 16:09:32

點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 欧美成人h版在线观看 | 国产精品久久久久久中文字 | 亚洲欧美日韩精品久久亚洲区 | 久久精品一 | 国产成人在线视频免费观看 | 精品1区| 久久婷婷国产香蕉 | 亚洲成人精选 | 国产精品99久久久久久久久久久久 | 久久久久久国模大尺度人体 | 国产精品视频网 | 国产黄色在线观看 | 日韩无| 欧美精品一区二区三区在线 | 91av在线视频观看 | 国产精品国色综合久久 | 欧美精品久久 | 中文字幕亚洲一区二区三区 | av一二三区 | 欧美日韩亚洲视频 | 欧美日韩亚洲成人 | 夜夜草| 天堂综合网久久 | 欧美日本韩国一区二区 | 欧美aⅴ | 成人免费视频网站在线看 | 国产在线精品一区二区三区 | 亚洲一区二区三 | 一区二区三区四区国产精品 | 欧美 日韩 国产 一区 | 91成人在线 | 亚洲精品久久久久国产 | 91网站在线播放 | 91在线精品一区二区 | 中国一级毛片免费 | 色综合99 | 99久久婷婷国产综合精品电影 | 日本不卡一二三 | 蜜桃精品视频在线 | 日韩二| 精区3d动漫一品二品精区 |