[TOC]

一、搭建環(huán)境

1.創(chuàng)建NodeJS工程

mkdir project1
cd project1
npm init
mkdir tests
mkdir js

2.安裝Karma、初始化phantomjs

npm install -g karma-cli
karma init
node ./node_modules/phantomjs-prebuilt/install

3.修改karma.conf.js

• 修改singleRun為true
• files里添加"./js/*.js"和"./tests/unit/*.spec.js"

cd tests
mkdir unit
cd ..

二、單元測(cè)試

1.創(chuàng)建庫(kù)文件與測(cè)試文件

在./js/index.js中添加如下函數(shù):

function add(a,b){
  if( a==0 ){
    return b;
  }
  if( b==0 ){
    return a;
  }
  return a+b;
}

在./test/unit/index.spec.js中，添加如下代碼:

describe("unit test start",function(){
    it("test add function",function(){
        expect(add(1,2)).toBe(3);
    });
});

2. 執(zhí)行單元測(cè)試

karma start

運(yùn)行結(jié)果:

27 03 2021 17:51:40.864:INFO [karma-server]: Karma v6.3.1 server started at http://localhost:9876/
27 03 2021 17:51:40.866:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
27 03 2021 17:51:40.871:INFO [launcher]: Starting browser PhantomJS
27 03 2021 17:51:41.474:INFO [PhantomJS 2.1.1 (Mac OS 0.0.0)]: Connected on socket NOJ6aNW_85iLrV8iAAAB with id 95525832
PhantomJS 2.1.1 (Mac OS 0.0.0): Executed 1 of 1 SUCCESS (0.006 secs / 0.001 secs)
TOTAL: 1 SUCCESS

三、生成測(cè)試覆蓋率報(bào)告

1.安裝karma-coverage

npm install karma-coverage --save

2.配置

在karma.conf.js文件中

• preprocessors里添加'./js/*.js': ['coverage']

    preprocessors: {
      './js/*.js': ['coverage']
    },

• 添加coverageReporter，其值設(shè)置為{ type : 'html', dir : 'docs/' }

    coverageReporter: {
      type : 'html',
      dir : 'docs/'
    },

• reporters中添加coverage

reporters: ['progress', 'coverage'],

3.執(zhí)行，查看結(jié)果

karma start

結(jié)果保存在./docs/PhantomJS 2.1.1 (Mac OS 0.0.0)/index.html里，發(fā)現(xiàn)測(cè)試覆蓋只有60%

60% Statements 3/5
50% Branches 2/4
100% Functions 1/1
60% Lines 3/5

4.添加測(cè)試用例，將測(cè)試覆蓋率達(dá)到100%。

在./tests/unit/index.spec.js中，添加如下測(cè)試用例：

expect(add(0,2)).toBe(2);
expect(add(2,0)).toBe(2);

5.執(zhí)行，查看結(jié)果

karma start

最終結(jié)果

100% Statements 5/5
100% Branches 4/4
100% Functions 1/1
100% Lines 5/5

四、E2E測(cè)試:Selenium

1.安裝selenium-webdriver

npm install selenium-webdriver

2.安裝chromedriver

brew install chromedriver

3.編寫測(cè)試用例

在./tests/e2e/index.spec.js文件中，代碼如下:

const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('http://www.google.com/ncr');
    await driver.findElement(By.name('q')).sendKeys('webdriver', Key.RETURN);
    await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
})();

4.運(yùn)行

node ./tests/e2e/index.spec.js

五、UI測(cè)試:Backtop

1.安裝backtop

npm install -g backstopjs

2.初始化

backstop init

六、Server測(cè)試: Mocha

1.安裝express

npm install express --save
npm install supertest --save
npm install mocha mochawesome

2.Mock Server

在js/app.js中，代碼如下:

const express = require('express');

var app = express();

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

const server = app.listen(3000,()=>{
    console.log('server start');
});

3.編寫測(cè)試代碼

tests/service/app.spec.js中，代碼如下:

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

function request(){
    return superagent(app.listen());
}

describe('interface test',function(done){
    it('test the test',function(done){
        request()
        .get('/test')
        .expect(200)
        .expect('Content-Type',/json/)
        .end(function(err,res){
            if( err ){
                done(err);
            }
            if( res.body.data == "Hello World!" ){
                done();
            }else{
                done(new Error('get data failed'));
            }
            
        })
    })
});

在./mochaRunner.js中，代碼如下:

const Mocha = require('mocha');
var mocha = new Mocha({
    reporter: "mochawesome",
    reporterOptions: {
        reportDir: './docs/mochawesome/'
        // quiet: true
    }
});
mocha.addFile("./tests/service/app.spec.js");
mocha.run(function(){
    process.exit(0);
})

4.執(zhí)行測(cè)試

node ./mochaRunner.js