前端测试

需要先准备好项目，新建一个文件夹，然后在目录下面执行

环境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