在AngularJS单元测试示例
卡尔玛是什么
业力是单元测试的运行控制框架。它提供了单元测试在不同的环境中运行,如铬,Firfox、PhantomJS等等。测试框架支持茉莉,摩卡,量子系统,这是一个基于NodeJS NPM模块。
安装测试相关的NPM模块推荐----拯救dev参数的使用,因为这是发展有关,与业力的一般运行只需要以下两npm命令
复制代码代码如下所示:
NPM安装因果报应--节省开发
NPM安装业记者--节省开发JUnit
安装的业力时,一些常用的模块将自动安装,指的是在业力的package.json代码文件的peerdependencies性质
复制代码代码如下所示:
peerdependencies :{
业力茉莉花:~ 0.1.0
业力requirejs ~ 0.2.0
业力咖啡预处理器:~ 0.1.0
karma-html2js-preprocessor ~ 0.1.0
业力铬发射器:~ 0.1.0
业力火狐发射器:~ 0.1.0
业力PhantomJS发射器:~ 0.1.0
业力的剧本发射器:~ 0.1.0
}
然后,一个典型的运行框架通常需要一个配置文件,它可以在一个karma.conf.js因果报应。里面的代码是Nodejs风格。一个常见的例子如下:
复制代码代码如下所示:
module.exports =功能(config){
config.set({
基于文件目录
修改表情:'。,
测试环境JS加载信息
文件:{
应用程序 / / /角角bower_components JS,
应用程序 / / / bower_components角线角的路线。js,
应用程序 / / / bower_components角嘲笑嘲笑JS的角,
应用程序,
测试
},
上述文件是否自动监控/更改自动操作测试
AutoWatch:真的,
应用程序测试框架
框架:{ 'jasmine},
什么环境测试代码,这是Chrome
浏览器:{ 'chrome},
使用的插件,如带有茉莉插件的Chrome浏览器
插件:{
铬铬合金发射器,
行业火狐发射器,
因果报应茉莉,
业力的JUnit记者
},
测试输出和模块名称导出的内容
记者:{进步,'junit},
设置输出文件信息内容测试
JunitReporter:{
输出文件:'test_out / XML的单位,
套房:'unit
}
});
};
当我想注意这一点时,顶部的大部分插件不需要单独安装,因为安装时已经安装了业力。在这里,只有业力JUnit记者出口插件需要单独安装。如果您想了解更多关于配置文件的信息,可以点击这里。
业力在这里,并想知道更多关于它,并点击这里
贾斯敏是什么
贾斯敏是一个用于测试Javascript代码的行为驱动开发框架。它,Javascript,它也被称为以下三个方面。
以上是茉莉在官方文件中的解释。下面是一个简单的中文翻译
贾斯敏是一个行为驱动开发的测试框架,没有任何JS框架和DOM,是一个非常干净友好的API测试库。
下面是如何使用它的一个简单示例
定义一个测试文件的命令为test.js
复制代码代码如下所示:
描述(规范(设置和删除)
变量Foo;
每个(函数(){()
= 0;
= 1;
});
每个(函数(){()
= 0;
});
它()只是一个函数,因此它可以包含任何代码
期望(Foo)。ToEqual(1);
});
它()可以有不止一个期望
期望(Foo)。ToEqual(1);
期望(真正的)ToEqual(真的);
});
});
上面的例子来自官方网站。这里只有几个重要的API,更多的用法请点击这里
1、首先,任何测试用例都是由描述函数定义的。它有两个参数。第一个是描述测试的中心内容。第二个参数是一个函数,它包含一些真实的测试代码。
2.用来定义一个特定的测试任务,并有两个参数。第一个是描述测试内容。第二个参数是一个函数,其中包含一些测试方法。
3.expect计算变量或表达式的值,然后比较其与预期值或做一些其他的事情。
4.beforeeach和各主要用来做事情之前和执行测试任务后。上面的例子是在执行前更改变量的值,然后在执行后重置变量的值。
最后要说的事是,描述函数的范围可以在内部功能和普通的JS访问,就像它上面访问foo变量。
要运行上面的测试实例可以运行通过Karar。命令示例如下所示:
复制代码代码如下所示:
业力开始测试/ karma.conf.js
下面我们着重介绍NG中的服务模块的控制器、指令和单元测试。
NG单元测试
由于天然气本身的原因,模块的加载和实例化,通过DI,所以为了与茉莉写测试脚本合作,官方提供了一个测试工具类angular-mock.js提供模块定义、加载、注射等。
下面是NG模拟中的一些常用方法
1.angular.mock.module这种方法也叫窗口命名空间下很方便
模块是用于配置注入方法的注入的模块信息。这些参数可以是字符串、函数和对象,可以使用如下。
复制代码代码如下所示:
(每个模块('myapp。滤波器));
(每个模块(功能(提供){)
provide.value美元('version ','test_ver);
});
它通常在每个方法,因为这可以确保当测试执行任务,注入方法可以得到模块配置
1.angular.mock.inject这种方法也叫窗口命名空间下很方便
注入用于注入上述配置的NG模块,在它的测试函数中调用它,常见的调用示例如下所示:
复制代码代码如下所示:
Angular.module('myapplicationmodule,{ })
('mode。值,'app)
('version。值,'v1.0.1);
描述('myapp,函数(){(){
您需要加载要测试的模块,
默认情况下只加载该模块。NG
(每个模块('myapplicationmodule '));
注入(用于)注入所有给定函数的参数
它(提供版本,注入(模式,版){
期望(版本)。ToEqual('v1.0.1);
期望(模式),ToEqual('app);
});
注射方法与模块可以/也可以用在IT或每个
它(重写的版本,测试新版本的注入,){
模块(带函数)或字符串(模块别名)
模块(函数($){)
provide.value美元('version ','overridden '); / /重写的版本在这里
});
注入(函数(版本){)
期望(版本)。ToEqual('overridden);
});
});
});
以上是一些官方的注入例子。代码相当不错。事实上,将是一个内置的依赖注入的angular.inject方法创建实例。然后,模块注入与普通NG模块中的依赖处理相同。
在简单介绍NG模拟之后,我们用控制器、指令和过滤器编写一个简单的单元测试。
NG控制器的单元测试
定义一个简单控制器
复制代码代码如下所示:
VaR MyApp = angular.module('myapp,{ });
MyApp.controller('mycontroller功能(范围){
scope.spices美元{ { =名字:Pasilla
{名字:墨西哥
{名字:辣椒
scope.spice美元=你好·Feenan!;
});
然后我们编写一个测试脚本
复制代码代码如下所示:
描述('mycontroller函数,函数()){
描述('mycontroller,函数(){(){
var范围;
(每个模块('myapp '));
每个(注入(功能(rootscope美元,$控制器){)
美元美元美元rootscope范围=新的();
控制器('mycontroller美元,美元,美元范围范围:{ });
});
它(创造香料3香模型,函数(){
期望($范围,香料,长度)托布(3);
});
它集(香料,默认值函数(){
期望(美元范围。香料)。托布(你好·Feenan!;
});
});
});
它采用rootscope美元创建一个子域,然后在去控制器参数$施工方法,最终将执行上述方法的控制器,然后我们检查的值的数目相等的范围和预期的子数组字符串变量。
要获得更多关于控制器的信息,请点击这里
NG指令的单元测试
定义一个简单的指令
复制代码代码如下所示:
VaR的应用= angular.module('myapp,{ });
app.directive('agreateye,函数(){(){
返回{
限制:e,
替换:真的,
模板:'lidless,环绕着火焰,1次
};
});
然后我们编写一个简单的测试脚本
复制代码代码如下所示:
描述('unit测试大行情功能()){
var编译;
VaR rootscope美元;
MyApp / /负载模块包含指令
(每个模块('myapp '));
rootscope美元美元 / /存储引用编译
因此,它们可以在这个描述块中的所有测试中使用。
每个(注入(功能(_ compile_美元美元,_ rootscope_){)
喷油器打开下划线 / /全参数(_)名称匹配时
编译= _ compile_美元;
rootscope = _ rootscope_美元美元;
});
它('replaces元素的适当的内容,函数(){
编译一个包含该指令的HTML
VaR元=编译()($ rootscope);
所有的 /火手表,所以范围表达式1将被评估。
rootscope美元美元()消化;
检查编译单元包含 /模板内容
期望(element.html()),ToContain(无盖,环绕着火焰,2次);
});
});
上面的例子来自官方的供应,最后的指令将用在HTML中。
复制代码代码如下所示:
第一个测试脚本编译成美元美元rootscope两个服务,一个用来编写HTML,用于创建一个默认的范围,_,NG服务前和注射_后,终于将吴,这两个服务保存两变量在内部。可以调用测试用例来促进以下内容
美元进口原指令的编译方法的HTML,然后进口rootscope美元到返回的函数,从而完成范围和视图之间的结合。最后,调用rootscope美元。美元消化触发所有的听众,确保在视图模型的更新内容。
然后,将当前指令对应元素的HTML内容与预期值进行比较。
要了解更多关于NG指令的信息,请点击这里
过滤器单元测试
定义一个简单的过滤器
复制代码代码如下所示:
VaR的应用= angular.module('myapp,{ });
app.filter(插,{ 'version功能(版){)
返回函数(文本){
返回字符串(文本);
};
});
然后编写一个简单的测试脚本
复制代码代码如下所示:
描述('filter,函数(){(){
(每个模块('myapp '));
描述(插,函数(){(){
(每个模块(功能(提供){)
provide.value美元('version ','test_ver);
});
它(替代版,注入(功能(interpolatefilter){ {)
期望(interpolatefilter(以前的版本为后' %))。ToEqual(在test_ver后');
});
});
});
上面的代码配置了过滤模块,然后定义了一个版本值,因为插值依赖于服务,最后用注入注入的内插滤波器,把这里的过滤器与过滤器后缀联系起来,最后输入文本执行过滤功能,与预期值相比较。
总结
使用测试开发NG有很多优点,可以保证模块的稳定性,一方面是深入了解NG的内部运行机制。所以建议由NG开发的学生尽快填写考试。