详解karma & jasmine自动化测试
前端包管理工具
代码重用和复用是快捷开发的一种重要方式,但是原始的代码模块散布于各个平台上,不好寻找,程序员对其进行有效管理也成为了一大难题。此时,依赖(包、插件、工具都可以称呼,本质是他人写好封装后的代码模块)管理工具应需而生。依赖管理工具使用简单的命令即可提供 依赖的查找、安装、卸载等操作,深受广大程序员喜爱。 前端 Node.js 最为常用的依赖管理工具 是npm,npm 之于Node.js,就如 pip 之于 Python,gem 之于 Ruby,pear 之于 PHP , maven 之于Java 。
Karma 环境的搭建
安装 karma (karma用于run自动化测试脚本)
npm install karma --save-dev
安装karma-jasmine (jasmine用于编写单元测试用例)
npm install karma-jasmine --save-dev
npm install jasmine-core --save-dev
安装karma-chrome-launcher(用于启动chrome浏览器;如果是firefox可以使用karma-firefox-launcher;同理可得其他)
npm install karma-chrome-launcher --save-dev
npm install karma-firefox-launcher --save-dev
安装coverage(测试代码覆盖率)
npm install karma-coverage --save-dev
Jasmine
jasmine有四种类型的函数:
1. 分组 describe
// 声明一类测试用例
describe('add algorithm',function(){
// 在里面可以定义一些变量,如
var a=1,b=2;
});
2. 用例 it
// 声明一类测试用例
describe('add algorithm',function(){
// 在里面可以定义一些变量,如
var a=1,b=2;
// 声明一种测试用例
it('test add one',function(){
});
it('test add two',function(){
});
});
3. 期望 expect
4. 匹配to****
// 声明一类测试用例
describe('add algorithm',function(){
// 可以定义一些变量,如
var a=1,b=2;
// 声明一种测试用例
it('test add one',function(){
// 期望 自定义的函数 addOne(1) 结果为 2, 反向读代码
expect(2).toEqual(addOne(a));
expect(3).toEqual(addOne(b));
});
it('test add two',function(){
expect(3).toEqual(addTwo(a));
expect(5).toEqual(addTwo(b));
});
});
你可以在 github 或者 入门指导网站 了解到 jasmine 的详细信息
github地址: https://github.com/jasmine/jasmine
guide地址: https://jasmine.github.io/2.0/introduction.html
Karma 配置文件
读到这里,可能会有疑问:被测试函数 和 测试脚本应该放在哪里?
下面来看 karma 配置文件
在 karma.exe 所在目录下 或者 已将 karma 安装至 global
命令行输入(当然你也可以 命名为 **.conf.js)
karma init karma.conf.js
然后根据提示配置文件
配置 被测试代码路径 和 测试脚本路径 ( ** / * 通配 文件路径/名称)
省略省略省略…………
出现以下提示表示配置完成
如果想做一些个性化的处理,可以打开文件并 添加/修改 配置项
/**
* Created by lonelydawn on 2017-03-04.
*/
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: [
'public/bower_components/angular/angular.js',
'app/javascripts/**/*.js',
'test/**/*.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
//代码覆盖率测试 ,使用 karma-coverage
preprocessors: {
'app/javascripts/**/*.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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
};
之后 命令行执行 ,即可开始测试 ( 在配置和启动的时候一定要注意路径问题 )
karma start karma.conf.js
Gulp下 karma 的使用
gulp 是一款非常简单好用的自动化构建工具,中文文档很详细。
gulp 中文文档地址 : http://www.gulpjs.com.cn/
在 gulp 中使用karma 不再需要安装 gulp-karma组件
github原文:
Karma integration into Gulp.js-based build.
将 Karma 配置到项目 node_modules中并将配置文件建好之后
在 gulpfile.js 中写入
var gulp=require('gulp');
var Karma=require('karma').Server;
// 前端自动化测试
gulp.task('test', function (done) {
new Karma({
// 配置文件所在路径
configFile: __dirname + '/karma.conf.js',
// 执行测试结束后退出
singleRun:true
}, done).start();
});
gulp.task('tdd', function (done) {
new Karma({
configFile: __dirname + '/karma.conf.js'
}, done).start();
});
之后在命令行键入
gulp test
或
gulp tdd
执行测试即可.
- 【死磕Java并发】—–深入分析volatile的实现原理
- phalcon-入门篇3(优美的URL与Config)
- 数据库中间件 Sharding-JDBC 源码分析 —— 事务(一)之BED
- 熔断器 Hystrix 源码解析 —— 命令执行(二)之执行隔离策略
- phalapi-入门篇4(国际化高可用和自动生成文档)
- 用JavaScript动态输出的JS脚本不能执行
- Dubbo源码解析 —— 服务暴露原理
- [Golang软件推荐] RSA公私钥加解密(解决Golang私钥加密公钥解密问题)
- [喵咪大数据]Hive+Hbase关联
- 再战子域共享Cookie问题
- [喵咪大数据]Presto查询引擎
- 如何在5分钟内做出你的第一个开源贡献
- [喵咪大数据]HUE大数据管理工具
- Dubbo源码解析 —— Zookeeper 订阅
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac App推荐
- 美团面试问ThreadLocal,学妹一口气给他说了四种!
- BFE.dev前端刷题#108. 用队列(Queue)实现栈(Stack)
- Kafka消费过程关键源码解析
- leetcode链表之两个链表的第一个公共节点
- 测试开发基础 mvn test | 利用 Maven Surefire Plugin 做测试用例基础执行管理
- 腾讯云Elasticsearch集群规划及性能优化实践
- 【赵渝强老师】在MongoDB中使用MapReduce方式计算聚合
- 2020-09-13:判断一个正整数是a的b次方,a和b是整数,并且大于等于2,如何求解?
- ASP.NET Core 性能优化最佳实践
- 如何在Vue中使用云开发的云函数,实现邮件发送
- 乐观锁与悲观锁
- 为什么配置文件加密了数据库配置信息,Spring Boot仍能成功连接数据库
- SpringBoot开发微信公众号
- 猿实战10——动态表单之实现类目属性绑定