在AngularJS单元测试示例

在AngularJS单元测试示例
当NG项目越来越大时,单元测试就要提上议事日程了。有时团队会先进行测试,有些首先实现功能,然后测试功能模块。这有它的优点和缺点。今天,我们主要讨论使用业力和茉莉来进行NG模块的单元测试。

卡尔玛是什么

业力是单元测试的运行控制框架。它提供了单元测试在不同的环境中运行,如铬,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开发的学生尽快填写考试。

tag:单元测试示例电脑软件angularjs

相关内容