如何用 Karma，Jasmine，Webpack 测试 UI 组件系列（二）Angular测试用例篇

本章介绍如何对Angular中的 Controller,Service,Filter,Directive编写unit test。

详细代码请点击 https://github.com/sunyue1992/KaramJasmineWebpack

Test Controller

Test Service

这里写了两种类型的service生成方式，以及一个返回Promise的方法的测试用例

（用到了Angular内置的 $httpBackend模拟数据的返回）

Test Filter

Filter本质上是一个把输入的数据转换成可读的数据的Function

类似与Service的测试，需要注意的是自定义filter调用如下

$filter('myFilter')(input, [arguments]).

Test Directive

本章只介绍基础指令的测试,基本测试过程是提供element和context进行编译，判断最后得到的

dom是不是预期的

Test Event ($broadcast/$on)

我们创建一个getBroadcasr方法 broadcast 一个 event,同时监听这个事件是否被 trigger,

在事件的回调中我们修改$scope上的一个值。为了判断函数是否被执行，我们使用了Jasmine中的Spies

相关的方法。具体的使用方法详见https://jasmine.github.io/

后面还会介绍高级指令，以及 Routes,Events 的测试用例的编写

关联

angular-unit-testing-with-jasmine

(https://coderwall.com/p/u720zq/angular-unit-testing-with-jasmine)

如果文章对你有帮助，欢迎关注，谢谢！