使用Jasmine和Karma对AngularJS页面程序进行测试


Posted in Javascript onMarch 05, 2016

AngularJS是继jQuery之后发生在JavaScript上最好的东西。这也是JavaScript开发一直以来想要的方式。Angular主要的优点之一就是它的依赖注入(Dependency Injection),它非常利于代码的单元测试。但有点小怪异的是,我在无论如何都没能找到一个介绍如何做单元测试的教程。

当然有很多不错的推荐:使用Jasmine测试框架和Karma测试执行器(Test Runner);但是并没有一篇完整的从无到有指导如何测试的教程。所以我写了这篇文章。我在网上找了很多资源才知道如何去做,而你现在不需要去做这些(如果一开始就看到这篇文章的话)。

请告诉我你看到的任何错误,直到我能说这是基于Karma和Jasmine测试Angular应用的最佳实践。

介绍

这篇文章会引导你安装使用Karma和Jasmine做自动化测试所需要的所有工具。我不在乎你实在使用TDD(测试驱动开发)还是TAD(测试辅助开发),在这篇文章中,我假设你已经有一个文件需要测试。

安装Karma

如果你没有安装 Node.js,那么请自行下载和安装。安装之后,打开终端或命令行输入一下命令:

npm install -g karma

文件结构

文件结构是跟我们的议题关联不大,但是在接下来的测试中,我使用的文件结构如下:

Application
| angular.js
| angular-resource.js
| Home
 | home.js
| Tests
 | Home
 | home.tests.js
 | karma.config.js (will be created in the next step)
 | angular-mocks.js

*我并不主张这种文档结构,我展示它只是为了测试举例。

配置Karma

切换到你想要放置配置文件的目录,然后在终端中输入下面的命令来创建配置文件:

karma init karma.config.js

你会被询问一些问题,包括你想使用那个测试框架,你是否需要自动监测文件,包含哪些测试和被测试文件等。在我们的教程中,我们保留‘Jasmine'作为我们默认的框架,开启文件自动监测,并包含下面的文件:

../*.js
../**.*.js
angular-mocks.js
**/*.tests.js

这些都是相对路径,包含了1)父目录下的所有.js文件,2)父目录下的所有子目录下的所有.js文件,3)当前目录下的angular-mock.js,4)以及当前目录(包含子目录)下所有的.tests.js文件(我喜欢以这样的方式来区分测试文件和其他的文件)。

不管你选择了什么文件,请确保你引入了 angular.js,angular-mock.js,以及其他你需要使用的文件。

启动Karma

现在已经可以启动Karma了,依然在终端中输入:

karma start karma.config.js

这个命令会在你的电脑上启动你在配置文件中列出的浏览器。这些浏览器都会以socket的方式连接到Karma的实例上,你会看到一组活动的浏览器并被告知她们是否在执行测试。我但愿Karma已经告诉你在每个浏览器上的最终测试结果总结(比如16个中的15个通过,1个失败),遗憾的是你只能通过终端窗口看到这些信息。

Karma的一个很突出的特色是你可以在网络中使用任何设备连接并测试你的代码。试一下将你的手机浏览器指向Karma服务,你可以在电脑上任何一个运行的浏览器上找到这个测试的URL地址。它应该类似于:http://localhost:9876/?id=5359192。你可以将你的手机,虚拟机,或其他任何设备的浏览器指向 [你在网络上的IP地址]:9876/?id=5359192. 因为Karma是在运行一个 Node.js 实例,你的测试机器就像一个web服务器一样,会将测试发送到任何指向它的浏览器。

基本的测试

我们假设你已经有一个文件需要测试。我们要使用到的 home.js 文件如下:

home.js

'use strict';
 
var app = angular.module('Application', ['ngResource']);
 
app.factory('UserFactory', function($resource){
 return $resource('Users/users.json')
});
 
app.controller('MainCtrl', function($scope, UserFactory) {
 $scope.text = 'Hello World!';
 $scope.users = UserFactory.get();
});

我们可以在 home.test.js 文件中创建我们的测试用例。我们从简单的那个测试开始:$scope.text 应该等于 ‘Hello World!'。 为了完成这个测试,我们需要模拟我们的 Application 模块以及 $scope 变量。我们会在Jasmine的 beforeEach 方法中做这个工作,这样的话我们在每个测试用例开始时可以有一个全新的(干净的)controler和scope对象。

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope;
//我们会在测试中使用这个scope
 
 
//模拟我们的Application模块并注入我们自己的依赖
 beforeEach(angular.mock.module('Application'));
 
//模拟Controller,并且包含 $rootScope 和 $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller){
  
//创建一个空的 scope
  scope = $rootScope.$new();
  
//声明 Controller并且注入已创建的空的 scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// 测试从这里开始
});

从代码中你可以看到我们注入了我们自己的 scope,因此我们可以在它的外部验证它的信息。同时,别忘了模拟模块本身(第7行代码)!我们现在已经为测试做好了准备:

home.tests.js

// 测试从这里开始
it('should have variable text = "Hello World!"', function(){
 expect(scope.text).toBe('Hello World!);
});

如果你运行这个测试,它可以在任何指向Karma的浏览器中执行,并且测试通过。

发送$resource请求

现在我们已经准备好测试 $resource 请求。要完成这个请求,我们需要使用到 $httpBackend, 它一个模拟版本的Angular $http。我们会创建另一个叫做 $httpBackend 的变量,在第二个 beforEach块中,注入 _$httpBackend_ 并将新创建的变量指向 _$httpBackend_。接下来我们会告诉 $httpBackend 如何对请求做出响应。

$httpBackend = _$httpBackend_; 
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);

我们的测试: home.tests.js

it('should fetch list of users', function(){
   $httpBackend.flush();
   expect(scope.users.length).toBe(2);
   expect(scope.users[0].name).toBe('Bob');
  });

都放到一起

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope, $httpBackend;
//we'll use these in our tests
 
 
//mock Application to allow us to inject our own dependencies
 beforeEach(angular.mock.module('Application'));
 
//mock the controller for the same reason and include $rootScope and $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
  $httpBackend = _$httpBackend_;
  $httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
 
  
//create an empty scope
  scope = $rootScope.$new();
  
//declare the controller and inject our empty scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// tests start here
 it('should have variable text = "Hello World!"', function(){
  expect(scope.text).toBe('Hello World!');
 });
 it('should fetch list of users', function(){
  $httpBackend.flush();
  expect(scope.users.length).toBe(2);
  expect(scope.users[0].name).toBe('Bob');
 });
});

技巧

Karma会运行所有文件中的所有测试用例,如果你只想运行所有测试的一个子集,修改 describe 或 it 为 ddescribe 或 iit 来运行个别的一些测试。如果有些测试你不想运行他们,那么修改 describe 或 it 为 xdescribe 或 xit 来忽略这些代码。

你也可以在html文件的页面上运行你的测试。举例的代码如下:
home.runner.html

<!DOCTYPE html>
<html>
<head>
 <title>Partner Settings Test Suite</title>
 
<!-- include your script files (notice that the jasmine source files have been added to the project) -->
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"></script>
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"></script>
 <script type="text/javascript" src="../angular-mocks.js"></script>
 <script type="text/javascript" src="home.tests.js"></script>
 <link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/>
</head>
<body>
 
<!-- use Jasmine to run and display test results -->
 <script type="text/javascript">
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.addReporter(new jasmine.HtmlReporter());
  jasmineEnv.execute();
 </script>
</body>
</html>
Javascript 相关文章推荐
javascript简易缓动插件(源码打包)
Feb 16 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 #Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 #Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 #Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 #Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 #Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 #Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 #Javascript
You might like
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php实现json编码的方法
2015/07/30 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP微商城开源代码实例
2019/03/27 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
prototype class详解
2006/09/07 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python实现PCA降维的示例详解
2020/02/24 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
安全标准化汇报材料
2014/02/03 职场文书
葬礼司仪主持词
2014/03/31 职场文书
施工安全承诺书
2014/05/22 职场文书
文明工地标语
2014/06/16 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
答谢酒会主持词
2015/07/02 职场文书
学习十八大的感悟
2015/08/11 职场文书