使用CI、headless Browser、mocha對前端代碼進行測試

時間 2019-11-09

標籤使用 headless browser mocha 前端代碼進行測試简体版

原文原文鏈接

什麼是CI

CI 提供的是持續集成服務（Continuous Integration，簡稱 CI）。持續集成指的是隻要代碼有變動，就自動運行構建和測試，反饋運行結果。

什麼是headless Browser

headless Browser 中文翻譯，無頭瀏覽器。是一種沒有界面的瀏覽器，能夠在命令窗口中被運行。

什麼是mocha

☕️ Simple, flexible, fun JavaScript test framework for Node.js & The Browser ☕️
是一種能夠運行在瀏覽器以及nodejs 環境的前端測試框架

爲何要編寫測試代碼

對於迭代需求，咱們人類編寫的代碼，只能保證在當前事件節點的正確性，隨着事件的推移，代碼的變更，以及人爲關係。咱們沒法保證以前的邏輯徹底符合曾經的要求，這時候咱們就須要編寫測試代碼對功能點進行測試。
測試不是一次性的，而是持續的，永久的。javascript

對於開源框架而言，測試的覆蓋面積更表明了框架的可靠性；也能使用自動化測試更好的約束貢獻者提交的PRcss

開始使用mocha 對代碼進行測試

首先呢，我要開始編寫一個add.js含有一個方法add，這個方法我但願獲取 a+b 的值是一個Numberhtml

function return(a,b){
    reutnr a+b
}

好的如今我能夠對這個方法進行測試了前端

增長一個用於測試index.html(爲何要新增一個html呢，由於有些js只能運行在瀏覽器中，若是你的代碼徹底可使用node進行測試，就不須要使用無頭瀏覽器直接使用node 測試就能夠了)java

<!DOCTYPE html>
<html>
<head>
    <title>Mocha Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引用mocha css -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mocha/5.2.0/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- 引用chai.js chai.js是一個斷言工具庫 -->
<script src="http://www.chaijs.com/chai.js"></script>
<!-- 引用mocha.js -->
<script src="https://cdn.bootcss.com/mocha/5.2.0/mocha.js"></script>
<!-- 引用咱們的功能代碼add.js -->
<script src="../add.js"></script>
<!-- 開啓bdd  這段代碼能夠看這裏 https://github.com/mochajs/mocha/issues/2719 -->
<script>mocha.setup('bdd');</script>
<!-- 引用咱們的測試代碼test.js -->
<script src="test.js"></script>
<script>
  mocha.run();
</script>
</body>
</html>

編寫 test.jsnode

chai.expect是一個chai.js的斷言方法，若是出現問題，則會拋出一個異常文檔地址 http://www.chaijs.com/
describe 是mocha的測試取款，每個it都會執行一個測試用例git

var expect = chai.expect;

describe('ADD.JS TEST', function() {
  it('add(1,1)', function() {
    expect(add(1,1)).to.equal(2)
  });
})

如今咱們就能夠直接運行index.html查看效果了，固然能夠開啓一個http服務器查看，可使用http-server快速開啓一個http服務。github

在瀏覽器運行會出現如下提示，表示測試經過chrome

若是想要添加更多測試用例能夠繼續添加更多的測試代碼。shell

接下來

很顯然，咱們在持續編寫add.js的時候，並不肯意每次都打開網頁去運行並查看代碼測試狀況。

這時候，headless要開始大展拳腳了。

使用mocha-chrome 直接在命令行運行mocha測試用例。mocha-chrome是一個能夠在命令行對mocha頁面進行測試的框架。它能夠將測試結果展示在控制檯。

npm init 
...
npm i mocha-chrome --save-dev

修改package.json增長

"scripts":{
    "test": "mocha-chrome ./test-some/index.html"
  }

調用命令

npm test

這時候，正確的提示會出如今控制檯中

項目地址https://github.com/channg/ci-...

這時候，當咱們測試項目的時候就沒必要須打開瀏覽器去檢查代碼是否經過驗證了，只要輸入npm test就能夠在控制檯看到效果，是否是變得很輕鬆了呢。

繼續

當咱們測試用例過長，佔用時間過多，或者須要其餘前置操做，或者須要測試多個版本，多個系統的兼容性。咱們應該如何作呢。很明顯，要使用CI。

因此，咱們並不想每次在本地進行測試，這裏咱們將要使用travis ci。

關於travos ci咱們能夠閱讀阮一峯的博文

在項目根目錄建立.travis.yml
內容以下。

sudo: required
language: node_js
node_js:
  - "8"
  - "9"

當你在travos ci開啓了repository you want to build按鈕的時候。每次項目的提交就會觸發ci的構建。

並且你能夠生成github小圖標放在項目的readme中，好比說這個是否是很酷。

點擊這個小徽章，你就能夠查看個人項目在ci構建的過程。

查看travis ci 的文檔，去獲取更多的資料 https://docs.travis-ci.com/

結束

基本的測試方法你已經掌握了，如今能夠去了解更多了，若是有問題，能夠查看個人項目進行對比
https://github.com/channg/ci-...

更多資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。