AngularJS如何进行单元测试以确保指令像ng-click指向有效代码

时间:2013-08-15 19:10:26

标签: angularjs jasmine

我使用Jasmine为我们的控制器编写单元测试,但希望得到社区对如何处理这种情况的反馈...

我有一个控制器 - InvoiceController,如下所示:

angular.module('myModule').controller('myController', ['$scope',
    function($scope) {
        $scope.doSomething = function() {
            $scope.something = 'bar';
        };
    }
]});

在我的单元测试中,我验证我的控制器是否具有预期的方法:

it('should be able to do some work', function() {

    // initialize scope properties
    scope.someProperty = 'foo';

    // load controller using those properties
    injectController();

    // do I have all of the functions necessary to do this work?
    expect(typeof (scope.doSomething)).toBe('function');

    // now execute test
    scope.doSomething();
    expect(scope.something).toBe('bar');       

}

最后,在我的html中,我有一个带有ng-click的元素,如下所示:

<button ng-click="doSomehing()">Do Something</button>

看起来不错吧?但是,有没有人抓住我做错了什么?

我的ng-click方法拼写错误,但所有测试都是绿色的,生活看起来很美好......直到我尝试点击那个人并且没有任何反应。没有渲染时错误,点击没有错误。 HMM。

现在好几次,因为我重构了代码,这让我感到满意。我在单元测试和控制器中重命名doSomething toDoomeCooler但在html中错过了一个地方。经过一分钟的刮擦后,我发现错过了什么。

我喜欢确保标记有效的方法。 E2E测试似乎是一个明显的解决方案,但那些容易出现脆弱性,所以我们希望有一些替代方案。

如果这是ASP.Net,我会附加代码后面的click事件,这样我就会得到编译时错误和运行时错误。

思想??

萨德

1 个答案:

答案 0 :(得分:2)

您可以做的一件事是获取模板文本并在其上运行$compile。然后将其链接到控制器的范围。然后你可以做dom.find('[ng-click]').click();之类的事情,如果你的控制器范围中没有定义它们,它们应该抛出。这与您通常测试指令的方式类似。