在 Mocha 测试套件中的 AngularJS 指令上触发点击事件 [英] Trigger click event on an AngularJS directive in Mocha test suite

问题描述

我有一个带有指令的常规 Angular 应用程序.该指令包含一个带有 ng-click="clickFunction()" 调用的元素.当我单击该元素时，一切正常.我现在需要为这个点击编写一个测试，确保这个函数在元素被点击时实际运行 - 这就是我遇到的问题.

I have a regular angular app with a directive. This directive contains an element with a ng-click="clickFunction()" call. All works well when I click that element. I now need to write a test for this click, making sure that this function was actually run when the element was clicked - this is what I'm having trouble with.

这是一个 jsfiddle 来说明我的问题:http://jsfiddle.net/miphe/v0ged3vb/

Here's a jsfiddle to illustrate my issue: http://jsfiddle.net/miphe/v0ged3vb/

控制器包含一个函数 clickFunction() 应该在点击时调用.单元测试应该模拟对指令元素的点击，从而触发对该函数的调用.

The controller contains a function clickFunction() which should be called on click. The unit test should imitate a click on the directive's element and thus trigger the call to that function.

clickFunction 用 sinonjs 模拟，以便我可以检查它是否被调用.该测试失败，意味着没有点击.

The clickFunction is mocked with sinonjs so that I can check whether it was called or not. That test fails, meaning there was no click.

我在这里做错了什么?

我看过类似问题的答案，例如使用 Sinon 测试 JavaScript 点击事件 但我不想使用完整的 jQuery，而且我相信我在嘲笑(监视)正确的功能.

I've seen the answer to similar questions like Testing JavaScript Click Event with Sinon but I do not want to use full jQuery, and I believe I'm mocking (spying on) the correct function.

这是上面小提琴中的 js(对于那些喜欢在这里看到它的人):

Here's the js from the fiddle above (for those who prefer to see it here):

angular.js，angular-mocks.js 也被加载.

// App
var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.person = 'Mr';
    $scope.clickFunction = function() {
        // Some important functionality
    };
});

myApp.directive('pers', function() {
    return {
        restrict: 'E',
        template: '<h2 ng-click="clickFunction()" ng-model="person">Person</h2>',
    };
});

// Test suite
describe('Pers directive', function() {
    var $scope, $controller, template = '<pers></pers>', compiled;
    beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $controller, $compile) {
        $scope = $rootScope.$new();
        ctrl = $controller('MyCtrl', {$scope: $scope});
        compiled = $compile(template)($scope);

        // Do I need to run a $scope.$apply() here?
        console.log($scope.$apply); // This is a function, apparently.
        //$scope.$apply();            // But running it breaks this function.
    })); 

    it('should render directive', function() {
        el = compiled.find('h2');
        expect(el.length).to.equal(1);
    });

    it('should run clickFunction() when clicked', function() {
        el = compiled.find('h2');
        sinon.spy($scope, 'clickFunction');

        // Here's the problem! How can I trigger a click?
        //el.trigger('click');
        //el.triggerHandler('click');
        expect($scope.clickFunction.calledOnce).to.be.true
    });
});

// Run tests
mocha.run();

推荐答案

原来问题很隐蔽.

首先，$scope.$digest 和 $scope.$apply 函数破坏了 beforeEach 函数，最终导致了整个解决方案.

Firstly the $scope.$digest and $scope.$apply functions broke the beforeEach function which ultimately led to the whole solution.

不要混合角度版本.

• 在第一把小提琴
  • angular.js 1.3.0 版
  • angular-mocks.js 1.1.5 版
  • In the first fiddle
    • angular.js version 1.3.0
    • angular-mocks.js version 1.1.5
    • angular.js 1.3.0 版
    • angular-mocks.js 1.3.0 版
    • angular.js version 1.3.0
    • angular-mocks.js version 1.3.0

    这就是整个问题，并且给了我相当模糊的错误.

    That was the whole problem, and gave me quite obscure errors.

    感谢来自 freenode 上 #AngularJS IRC 频道的 Foxandxss.

    Thanks to Foxandxss from the #AngularJS IRC channel on freenode.

    使用 jQlite 在指令上触发事件的方法很简单:

    The way to trigger events on the directive with jQlite was simply:

    someElement.triggerHandler('click');

    这篇关于在 Mocha 测试套件中的 AngularJS 指令上触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！