单元测试角指令单击处理程序 [英] Unit testing Angular directive click handler

问题描述

我有一个指令，增加了一个单击处理程序的元素：

I've got a directive that adds a click handler to an element:

module.directive('toggleSection', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function (event) {
                scope.$apply(function () {
                    var scopeProp = 'show' + attrs.toggleSection;

                    event.preventDefault();
                    event.stopPropagation();

                    scope[scopeProp] = !scope[scopeProp];

                    return false;
                });

            });
        }
    };
}]);

当被点击的元素，就会切换的范围，而另一个元素是绑定到另一个属性 NG-节目。它的工作，因为它应该在的应用程序。

When the element is clicked, it toggles another property on the scope, which another element is bound to with ng-show. It's working as it should in the app.

我添加了指令如下测试：

I've added the following test for the directive:

(function () {
    'use strict';

    // get the app module from Angular
    beforeEach(module('app'));

    describe('myCtrl', function () {

        var $scope, $rootScope;

        beforeEach(inject(function ($controller, _$rootScope_) {
            $scope = {};
            $controller('myCtrl', { $scope: $scope });
            $rootScope = _$rootScope_;
        }));

        describe('the toggleSection directive', function () {

            var testElement;

            beforeEach(function () {
                testElement = $compile('<a toggle-section="Test" href="#">Collapse section</a>')($rootScope);
                $rootScope.$digest();
            });

            it('inverts the value of the specified scope property', function () {
                $scope.showTest = false;
                testElement.click();

                expect($scope.showTest).toEqual(true);
            });

        });
    });

在实际code有喜欢的属性 $ scope.showSection1 = FALSE ，并通过添加控制台日志中的指令之前和之后点击我可以看到的属性绑定元素，他们有预期值（如物业开始为假并单击切换元素之后，一旦更改为真正）。

In the real code there are properties like $scope.showSection1 = false and by adding console logs in the directive I can see the properties before and after clicking the bound element and they have the expected values (e.g. the property starts as false and after you click the toggle element once it changes to true).

然而，测试总是失败，预计虚假等于真实。我认为这是与 $适用的方法做，因为没有显示属性似乎对存在的范围，当我运行测试。

However, the test always fails with 'Expected false to equal true'. I think it's to do with the $apply method, because none of the show properties seem to exist on the scope when I run the test.

其他测试中，我有（即使在同一规范文件），它不使用该指令可以看到在作用域属性就好了。

Other tests I have (even in the same spec file), which don't use the directive can see properties on the scope just fine.

我在做什么错了？

推荐答案

有几件事情在您的测试进行更改：

There are a few things to be changed in your test:

1 - 范围创作应该从 $更改范围= {} 到 $范围= $ rootScope $新（）;

1 - scope creation should be changed from $scope = {} into $scope = $rootScope.$new();

2 - 该指令应该不会被编译到rootScope，但进入范围

2 - the directive should be compiled not into rootScope, but into scope

3 - 该指令应首先通过angularjs.element被创建，然后编译：

3 - the directive should first be created via angularjs.element and then compiled:

element = angular.element('<my-directive/>');
compile(element)(scope);
scope.$digest(); 

这篇关于单元测试角指令单击处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！