karma
(大型集成化开发.)
npm install karma –save-dev (集成化测试环境 集成浏览器 & 断言库)
npm install -g karma-cli
karma init 上下键选择 选择断言库, 建议选择jasmine 这个断言库
能做什么,首先是一个js 就要有一个浏览器,和一个断言库 所以是大型集成化环境
初始化步骤:
- no 不选择 require插件
- PhantomJS 选择无头浏览器然后回车
- 最后一项选择no 不需要检测文件变化看到文件karma.conf.js 文件说明 初始化成功
接下来配置karma.conf.js 的文件
//karma.conf.js
// Karma configuration
// Generated on Thu Mar 22 2018 20:30:24 GMT+0800 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./unit/**/*.js',
'./unit/**/*.spec.js'
],
// list of files / patterns to exclude
exclude: [
],
//指定对应的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/'
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
//黑窗小独立的运行环境
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
//目标文件index.js
window.test = function (num) {
if(num == 1){
return 1
}else{
return num + 1;
}
}
//index.spec.js 对index.js 的test函数进行测试
describe("测试基本的函数API",function(){
it("+1函数的应用",function(){
expect(window.test(1)).toBe(1);
});
});
如果不是第一次karma start执行可能会少包,可以以下命令行补充安装
npm install karma-jasmine –save
npm i jasmine-core –save,
npm install karma-jasmine –save,
npm install karma-phantomjs-launcher –save,
npm install phantomjs –save,
npm install karma-coverage –save-dev(代码覆盖率的问题)
配置文件:
// karma.conf.js
module.exports = function(config) {
config.set({
files: [
'src/**/*.js',
'test/**/*.js'
],
// coverage reporter generates the coverage
reporters: ['progress', 'coverage'],
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'src/**/*.js': ['coverage']
},
// optionally, configure the reporter
coverageReporter: {
type : 'html',
dir : 'coverage/'
}
});
};
//然后执行 karma 会生产可视化的html页面.而且会自动生成文件./coverage 文件 查看里面index.html 既可以查阅代码使用情况
e2e
功能测试 自动化测试 端对端 也可使用新出来的 rize;nightwatchjs虽然功能强大,但是配置复杂,vue就是用这个的e2e工具 的;还有一个就是阿里巴巴家的端对端测试工具f2etest 有条件可以自学起来,这里使用这个selenium ,地位能相当于e2e中的jquery
npm install selenium-webdriver –save
然后下载对应的 浏览器内核选择系统匹配的, 我这里选择的是fireFox
//usage: //baidu.spec.js
const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
let driver = await new Builder().forBrowser('firefox').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();
}
})();
//执行可以写进npm 启动项里.
"scripts": {
"e2e": "node ./e2e/*.js",
"permance": "node ./permance/code.js",
"ui": "backstop test"
},
9.性能测试 页面性能 秒开率 node性能 代码的性能
ui测试
npm install -g backstopjs
然后backstop init 会多出两个文件 /backstop_data 一个是backstop.json
文件上不需要什么配的的地方
但有要说明的地方.
//backstop.js
{//测试的设备以及宽高
"label": "phone",
"width": 375,
"height": 667
},
"cookiePath": "backstop_data/engine_sc" //要保存的cookie
"url": "http://map.qq.com/m/" //上线的要测试的目标url
"bitmaps_reference": "backstop_data/bitmaps_reference",//放ui 设计图.
"bitmaps_test": "backstop_data/bitmaps_test",//目标网站生产的网址 图片
"engine_scripts": "backstop_data/engine_scripts", //引擎
"html_report": "backstop_data/html_report",//生产报告文件的目录
js性能测试
npm i –save benchmark 用测试js运行速度,以及代码的健壮性
//code.js js性能测试
var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
suite.add('使用正则匹配字符串', function() {
/o/.test('Hello World!');
})
.add('使用字符串查找', function() {
'Hello World!'.indexOf('o') > -1;
})
//添加监听
.on('cycle', function(event) {
console.log(String(event.target));
})
//执行结果
.on('complete', function() {
console.log('更快的是-》 ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });
//执行 node code.js
接口测试
需要的npm包:
express 构建简单node服务;
npm install supertest –save-dev把node环境集成;
npm install –save-dev mocha 异步执行接口,比如断言等
npm install –save-dev mochawesome用于生产mocha报表
// app.js 先用express.启动服务,简单的接口
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 superagent = require('supertest');//接口测试的 应用node环境, 把node 那个环境集成进来
// mocha异步接口测试 比如说断言,
const app = require('./app');
function request(){
return superagent(app.listen());
}
describe("node接口测试",function(){
it("test 接口测试",function(done){
request()
.get('/test')
.expect('Content-Type', /json/)
.expect(200)
.end(function(err, res) {
if(res.data == "Hello World!"){
done();
}else{
done(err);
}
// if (err) throw err;
});
});
});
// mochaRunner.js //配置mochawesome可视化界面
const Mocha = require("mocha");
const mocha = new Mocha({
reporter: 'mochawesome',
reporterOptions:{//生产的报表
reporteDir:"./reports/mochawesome-reporter"
}
});
mocha.addFile('./service/router.spec.js');
mocha.run(function(){
console.log("done");
process.exit();
})
