搭建Karma+Jasmine的自动化单元测试
最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istanbul代码覆盖率。
据我了解,Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理。
Karma的介绍
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。
Karma的安装
我的开发环境:
- win7 64bit,
- node v8.11.2
- npm 5.6.0
1、全局安装karma、Jasmine-core、Karma-Jasmine
npm install -g karma
npm install -g Jasime-core
npm install -g karma-Jasmine
2、局部局安装karma、Jasmine-core、Karma-Jasmine
npm install --save-dev karma
npm install --save-dev Jasime-core
npm install --save-dev karma-Jasmine
3、测试是否安装成功
karma start
4、Karma + Jasmine配置
karma init
自动化单元测试
1). 创建源文件:用于实现某种业务逻辑的文件,就是我们平时写的js脚本
有一个需求,要实现单词倒写的功能。如:”ABCD” ==> “DCBA”
//src/index.js
function reverse(word){
return word.split("").reverse().join("");
}
2). 创建测试文件:符合jasmineAPI的测试js脚本
//test/test.js
describe("A suite of basic functions", function() {
it("reverse word",function(){
expect("DCBA").toEqual(reverse("ABCD"));
});
});
3). 修改karma.conf.js配置文件
我们这里需要修改:files和exclude变量
files: ['./src/*.js'],
exclude: ['karma.conf.js'],
4). 启动karma
单元测试全自动执行
karma start karma.conf.js
Karma和istanbul代码覆盖率
1、全局安装istanbul依赖karma-coverage
npm install -g karma-coverage
2、局部安装istanbul依赖karma-coverage
npm install --save-dev karma-coverage
3、修改karma.conf.js配置文件
reporters: ['progress','coverage'],
preprocessors : {'src.js': 'coverage'},
coverageReporter: {
type : 'html',
dir : 'coverage/'
}
4、启动karma start
在工程目录下面找到index.html文件,coverage/chrome/index.html
接下来,我们修改src.js,增加一个if分支
function reverse(word){
if(word=='AAA') return "BBB";
return word.split("").reverse().join("");
}
再看覆盖率报告,下降得有点恐怖
出现的坑
千万记住要先全局安装再局部安装,不然老是报错:jasmine-core模块未找到
原文:搭建Karma+Jasmine的自动化单元测试,欢迎star,欢迎交流。
项目地址KarmaDemo
参考:
Error: Cannot find module 'jasmine-core'
搭建Karma+Jasmine的自动化单元测试的更多相关文章
- Karma+Jasmine实现自动化单元测试
1.Karma介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字 ...
- 在WebStorm中集成Karma+jasmine进行前端单元测试
在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...
- 前端单元测试环境搭建 Karma Jasmine
Karma 官网On the AngularJS team, we rely on testing and we always seek better tools to make our life e ...
- Karma和Jasmine自动化单元测试
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- Karma和Jasmine 自动化单元测试环境搭建
最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...
- 学习Karma+Jasmine+istanbul+webpack自动化单元测试
学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma? Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...
- Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...
- karma、jasmine做angularjs单元测试
引用文:karma.jasmine做angularjs单元测试 karma和jasmine介绍 <1>技术介绍 karma karma是Testacular的新名字 karma是用来自动化 ...
- 使用karma+jasmine做单元测试
目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...
随机推荐
- ant gradle curl等工具原理以及使用记录
1.ant是早一些的java 项目配置管理工具. 2.gradle是比maven还新的项目配置管理工具. 3.curl可以方便进行网络测试.curl可以方便用来http请求测试,支持各种命令,从这个角 ...
- 一道dfs和dp结合的好题 --- Longest Run on a SnowboardUVA-10285
题目链接: https://vjudge.net/problem/19213/origin 大致题意: 一个滑雪者想知道自己在固定高度的山坡中最多能滑的距离是多少. 思路: 首先想到的就是dfs,但是 ...
- CSS(三)
CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式.盒子模型示意图如下: 把元素叫做盒子,设置对应的样式分别为 ...
- java jdbc操作数据库通用代码
1.准备工作 1> 新建一个配置文件,名为jdbc.properties将其放入src中 2>在项目中导入jdbc驱动,注意连接不同的数据库,所用到的驱动是不一样的,这些在网上都能找到 具 ...
- 19.3.25 sql查询语句
1.单表查询:select * from 表名 where id = 111 2.查询表内数据并以id排序:select * from 表名 order by id (降序:desc/升序:asc) ...
- Kruskal || BZOJ 1601: [Usaco2008 Oct]灌水 || Luogu P1550 [USACO08OCT]打井Watering Hole
题面:P1550 [USACO08OCT]打井Watering Hole 题解:无 代码: #include<cstdio> #include<cstring> #includ ...
- css学习_css3伸缩布局 flex布局
1.flex布局 案例一: 案例二: 保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
- es7 async/await使用
先创建一个promise对象,里面执行一个异步函数 function fetchUser() { return new Promise((resolve, reject) => { fetch( ...
- task CancellationTokenSource
使用CancellationTokenSource对象需要与Task对象进行配合使用,Task会对当前运行的状态进行控制(这个不用我们关心是如何控制的).而CancellationTokenSourc ...
- easyui技术积累
1.easyui-textbox与easyui-combobox的onChange事件 //在页面载入后执行下面函数$('#xxx_id').textbox({ onChange: function( ...