需要先准备好项目,新建一个文件夹,然后在目录下面执行
环境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