前端測試

須要先準備好項目，新建一個文件夾，而後在目錄下面執行

環境node 8，

npm init

1. unit單元測試

用到的工具karma

是一個簡單的工具，容許咱們在多個真實的瀏覽器上執行js代碼，目的是是咱們的測試驅動開發更簡單、快捷、有趣。karma至關於一個框架，裏面能夠添加不少庫

sudo cnpm install karma -g

sudo cnpm install karma-cli -g

而後生成項目配置文件

karma init

會選擇測試框架（實際就是斷言庫），jasmine，qunit，mocha, nodeunit, nunit等，這裏選擇的是jasmine

瀏覽器自動運行工具，chrome, chromeCanary, firefox, safari, phantomjs, opera, ie，選擇phantomjs，這個是無頭的瀏覽器

這樣項目中就會生成一個karma.conf.js的配置文件，須要修改配置文件，入口文件是files，在裏面指定目錄，若是是phantom的話singleRun須要設爲true。

karma運行的話有幾個命令

karma init是初始化項目，karma start是本身啓動一個server，而後測試，karma run 是驅動一個測試（這個尚未用，須要再看看）。

如今用的是karma start

如今還會少庫，須要安裝

cnpm install karma-jasmine --save

cnpm install jasmine-core --save

cnpm install phantomjs --save

cnpm install karma-phantomjs-launcher --save

這樣執行karma start就會經過了，斷言用jasmine

karma.conf.js

// list of files / patterns to load in the browser
    files: [
        './unit/*.js',
        './unit/*.spec.js'
    ],

 

index.js   須要測試的js文件

window.test = function(num){
    if(num == 1){
        return num;
    }else{
        return num +1;
    }
    
}

index.spec.js  寫斷言的測試文件

describe('測試基本的函數api', function(){
    it('+1函數的應用', function(){
        expect(window.test(1)).toBe(1);
        expect(window.test(2)).toBe(3);
    })
})

還能夠檢測測試的覆蓋率

使用coverage庫

cnpm install karma-coverage --save

karma.conf.js 中須要修改的地方

//指定對應的js文件去執行代碼的覆蓋率
    preprocessors: {
        './unit/*.js': ['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],
    //報告的目錄
　　 coverageReporter:{
        type: 'html',
        dir: 'coverage/'
    },

而後執行karma start

而後在coverage目錄下會有一個html文件，在裏面能夠查看報表

 

2. e2e測試，功能性測試，自動化測試

用的是 selenium-webdriver 也須要phontomjs？

cnpm install selenium-webdriver --save

須要下載對應的瀏覽器driver，我這裏下的是Firefox的，根據系統的版本下載，下完以後放到對應的根目錄下。系統須要有Firefox瀏覽器。

const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example(){
    let driver = await new Builder().forBrowser('firefox').build();
    try{
        await driver.get('https://www.baidu.com/');
        await driver.findElement(By.name('wd')).sendKeys('node',Key.RETURN);
        await driver.wait(until.titleIs('node_百度搜索'), 2000);
    }finally{
        await driver.quit();
    }
})();

這個就是官網上的例子。有點小錯誤，上面代碼作了修改。

須要運行 node ./e2e/baidu.spec.js

也能夠配置到package.json文件中

還能夠進行不少測試，事件，邏輯等，須要深刻學習

 

如今最新的是rize 和 puppeteer 

cnpm install rize puppeteer --save-dev

const Rize = require('rize');
const rize = new Rize()
rize
  .goto('https://github.com/')
  .type('input.header-search-input', 'node')
  .press('Enter')
  .waitForNavigation()
  .assertSee('other.js')
  .end()  // Don't forget to call `end` function to exit browser!
  

執行node ./e2e/node.spec.js

 

還有Nightwatch 是大型項目中用的端對端的測試

 

 

 

3. 測試ui，經過對比ui圖和網頁，來看那些地方不符合設計

使用的是backstopjs

sudo cnpm install backstopjs -g   //須要全局安裝，由於要用全局的命令

cnpm install backstopjs --save

而後執行backstop init，若是不成功就使用sudo backstop init，這時會生成一個backstop.json文件，這裏配置相關參數，而後執行

backstop test，一樣如上，若是沒有權限，就是用sudo。

 

4. 性能測試，頁面的性能（秒開率），node性能，代碼的性能

用的是benchmark.js

cnpm install benchmarkjs --save

"use stract"
var Benchmark = require('benchmark');

var suite = new Benchmark.Suite;

function fan1(n, f=1){
    if(n == 1){ return f; }
    return fan1(n-1, n + f);
}

function fan2(n){
    if(n == 1) return 1;
    return n + fan2(n-1);
}
// add tests 
suite.add('尾調用優化的代碼', function(){
    fan1(100,1);
})
.add('遞歸循環', function(){
    fan2(100);
})
// add listeners 
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async 
.run({ 'async': true });

 

5. 接口測試

使用的是supertest，這個是用來鏈接接口地址和寫斷言的，mocha是用來提供異步調用和生成測試報告的

cnpm install supertest --save-dev

cnpm install mocha --save-dev

cnpm install mochawesome --save-dev   //這個是用來生成測試報告的

須要用node寫一個服務，express框架

文件結構是server/app.js, router.spec.js

app.js

var express = require('express');
var app = express();

app.get('/test', function (req, res) {
  res.send({
      data: 'Hello World!'
  });
});

var server = app.listen(3000, function () {

  console.log('Example app listening');
});
module.exports = app;

router.spec.js

const supertest = require('supertest');
const app = require('./app.js');

function request(){
  return supertest(app.listen());
}
describe("node接口測試",function(){
    it("test 接口測試", function(done){
        request()
        .get('/test')
        .expect("Content-Type",/json/)
        .expect(200)
        .end(function(err, res){
            if(res.body.data == "Hello World!"){  //注意這裏是body裏面的，爲何老師那個能夠直接取
                done();
            }else{
                done(new Error(res))
            }
        })
    })
})

在根目錄下新建一個mochaRunner.js文件， 

const Mocha = require('mocha');
var mocha = new Mocha({
  reporter: 'mochawesome'
});
mocha.addFile("./service/router.spec.js");
mocha.run(function(){
    console.log("done");
    process.exit();
})

而後執行 node ./mochaRunner.js 

 

6. f2etest