当前位置:首页 > 日记 > 正文

在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开发的学生尽快填写考试。

相关文章

PS图象处理软件合成一个美丽的520

PS图象处理软件合成一个美丽的520

促销,情人节,图象,一个美丽,处理软件,五月份一个月到20个月。很多企业都要做促销活动。如何制作时尚情人节产品促销海报今天萧边带你做一个漂亮的520情人节促销海报。 五月份一个月到20个月。很多企业都要做促销活动。如何制作时尚情人节…

如何用名片制作名片

如何用名片制作名片

名片,如何用,电脑软件,制作单卡方法: 创建一个新文档,单击菜单插入对象,弹出对象对话框,选择,微软的话,图像,和类型,然后单击文件页面设置;,在弹出的页面设置对话框;选项卡中的矩阵;论文集;自定义大小,然后输入纸张大小为宽度8.8cm ;5.5cm高度;(5cm即可),在右…

PS合成夜间在墓地哭泣的久坐美人

PS合成夜间在墓地哭泣的久坐美人

墓地,夜间,久坐,美人,电脑软件,本教程是向朋友们介绍使用PS合成久坐不动的美人,在黑暗中在墓地哭泣。合成的效果真的很棒,有点阴郁的感觉。推荐并一起学习。 本教程介绍如何使用PS的朋友在夜晚哭泣在综合美冥想的墓地,本教程适合有一定基础,如P…

幽默搞笑经典搞笑个性签名

幽默搞笑经典搞笑个性签名

个性签名,幽默搞笑,搞笑,经典,电脑软件,别人都喝得醉醺醺的,我生气地买饮料填肚子。 父亲生气时骂我是个死孩子。 当你变胖时,你会生气,当你生气的时候你想去吃,结果是很胖。 昨天我梦见我死了,看起来很高兴。 The new year is coming, in addit…

Implementationofbanktransferbyph

Implementationofbanktransferbyph

电脑软件,Implementationofbanktransferbyphp,mysqlitransactioncontrol,本文介绍了PHP + mysqli事务控制的方法来实现银行转账。分享给你供你参考。具体分析如下: 事务控制,这意味着所有的语句都执行成功,将提交。否则,如果前面的语句执行成…

CDR产生美丽的镀金字体

CDR产生美丽的镀金字体

字体,美丽,电脑软件,CDR,本教程是用镀金字体法制作漂亮的CDR朋友,教程出来的字体效果很漂亮,推荐给朋友,爱一看。 说到制作,大多数人首先想到的是黄金可以做成PS,黄金的效果。其实,CDR也可以帮助黄金,而且也方便。 先看看效果图: 以上是本教程的…

jQuery实现了将特定内容按指定长度

jQuery实现了将特定内容按指定长度

方法,长度,实现了,内容,电脑软件,本文演示了jQuery实现字符串以在指定长度添加特定内容的方式: 最近的一个项目需要使用手机号码按一定长度分隔分隔符,便于阅读,网上找了一段时间没有找到合适的代码,而你自己的笔迹是一个功能,可以通过指定字符…

PS绘制街道机械摇杆和按钮

PS绘制街道机械摇杆和按钮

摇杆,绘制,按钮,街道,电脑软件,本教程介绍朋友如何使用PS画的拱廊和按钮。这个教程比较简单,效果也很好。建议像你这样的朋友一起学习这个教程。 本教程是介绍一个朋友到PS绘制街机,摇杆和按钮的方式。这个教程很好。我推荐给喜欢一起学习教…

PHP将日期格式转换为xx日的格式。

PHP将日期格式转换为xx日的格式。

日期格式,转换为,格式,电脑软件,PHP,本文演示了PHP如何将日期格式转换为xx格式: 这段代码可以格式化3天以前的时间,2年前的5秒。 将日期转换为字符串表示多长时间 日期…Eg:天。2 A,3分钟A。 函数A($ d){ $c = getdate(); P =阵列('year ','mon '…

超级搬家爱好者签名

超级搬家爱好者签名

爱好者,电脑软件,如果你永远不离开我,我会陪着你直到死亡将我们分开u3002 如果你不离开,我就死了。 你好,你是我的,我只能是我的一个。 好吧,我是你的,只有你。 那些爱的岁月,如流水,流走了。 那些年是甜的,像风,飘走。 你对我来说很特别,很不一样。 …

PS为自己的明信片制作了一个示例课

PS为自己的明信片制作了一个示例课

自己的,明信片,示例,课程,电脑软件,本教程是介绍一个朋友到PS,使他的照片成为明信片。教程的效果很好,难度也不是很大。非常适合初学者学习。推荐朋友一起学习。 本教程是向大家介绍PS,把自己的照片做成明信片的方法。这个教程很好。推荐并一…

有趣的个性签名与独家取笑

有趣的个性签名与独家取笑

个性签名,有趣,电脑软件,吃这么多的话你就饱了。 说我很矮,我在跟我说话。 给我一瓶矿泉水,让我喝得醉醺醺的。 你真是个大人物,怎么会因为你又好笑呢。 另一种方法叫盖伊,我只能称之为骚扰。 只有失恋的人才是诗人。 当您想要接收一个红色包时…