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

问题描述

我有一个指令，一个普通的角应用程序。本指令包含有一个元素NG点击=clickFunction（）电话。一切运作良好，当我点击该元素。我现在需要写这个点击测试，确保被点击的元素时，这个功能实际上是运行 - 这是我遇到的麻烦是什么

。

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

控制器包含一个函数 clickFunction（）这应该点击调用。单元测试应该模仿指令的元素上点击，从而触发调用该函数。

的 clickFunction 与sinonjs嘲笑，这样我可以检查是否被称为与否。这种测试失败，意味着没有点击。

我在做什么错在这里？

我见过的答案，如测试JavaScript的类似问题的Click事件与兴农，但我不希望使用全jQuery的，我相信我嘲讽（上刺探）正确的函数。

---

下面是从上面的小提琴（对于那些谁preFER看到这里吧）JS：

angular.js ，角mocks.js 加载也是如此。

  //应用
VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'MyCtrl'，函数（$范围）{
    $ scope.person ='先生';
    $ scope.clickFunction =功能（）{
        //一些重要功能
    };
}）;myApp.directive（'个人'，函数（）{
    返回{
        限制：'E'，
        模板：'＆LT; H2 NG点击=clickFunction（）NG模型=人＆GT;与人LT; / H＆GT;，
    };
}）;//测试套件
描述（Pers的指令'，函数（）{
    变量$范围，$控制器，模板='＆LT;个人＆GT;＆LT; /人＆GT;'，编译;
    beforeEach（模块（'对myApp'））;    beforeEach（注（函数（$ rootScope，$控制器，$编译）{
        $范围= $ rootScope $新的（）。
        CTRL = $控制器（'MyCtrl'，{$范围：$范围}）;
        编译= $编译（模板）（$范围内）;        //我是否需要运行$范围。$适用（）在这里？
        的console.log（$ $范围适用）; //这是一个功能，显然。
        // $范围$适用（）; //但是运行它打破了这个功能。
    }））;    它（'应该呈现的指令'，函数（）{
        埃尔= compiled.find（'H2'）;
        期待（el.length）.to.equal（1）;
    }）;    它（'点击时应该运行clickFunction（）'，函数（）{
        埃尔= compiled.find（'H2'）;
        sinon.spy（$范围，'clickFunction'）;        //这里的问题！我怎样才能触发点击？
        //el.trigger('click'）;
        //el.triggerHandler('click'）;
        期待（$ scope.clickFunction.calledOnce）.to.be.true
    }）;
}）;//运行测试
mocha.run（）;
 

解决方案

原来，问题是相当隐蔽。

首先在 $范围。$摘要和 $范围。$适用功能打破了 beforeEach 功能，最终导致整体解决方案。

解决方案

的不的混合角版本。

• 在第一小提琴
  
  
  
  • angular.js 1.3.0
  
  
  • 角mocks.js 1.1.5版
  
  


• 在的解决小提琴
  
  
  
  • angular.js 1.3.0
  
  
  • 角mocks.js 1.3.0
  
  

这是整个的问题，并给了我相当隐蔽的错误。

从freenode上的#AngularJS IRC频道感谢Foxandxss。

---

触发与jQlite指令事件的方式很干脆：

someElement.triggerHandler（'点击'）;

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.

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

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.

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.

What am I doing wrong here?

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.

---

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

angular.js, angular-mocks.js is loaded as well.

// 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();

解决方案

Turns out the problem was quite hidden.

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

Solution

Do not mix angular versions.

• In the first fiddle
  • angular.js version 1.3.0
  • angular-mocks.js version 1.1.5
• In the solved fiddle
  • angular.js version 1.3.0
  • angular-mocks.js version 1.3.0

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

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

---

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

someElement.triggerHandler('click');

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