angularjs - directivas - ng click angular 6

Evento de clic de activación en una directiva AngularJS en el conjunto de pruebas Mocha

Question

Tengo una aplicación angular regular con una directiva. Esta directiva contiene un elemento con una llamada ng-click="clickFunction()" . Todo funciona bien cuando hago clic en ese elemento. Ahora necesito escribir una prueba para este clic, asegurándome de que esta función realmente se ejecutó cuando se hizo clic en el elemento, esto es con lo que estoy teniendo problemas.

Aquí hay un jsfiddle para ilustrar mi problema: http://jsfiddle.net/miphe/v0ged3vb/

El controlador contiene una función clickFunction() que debe clickFunction() al hacer clic. La prueba unitaria debe imitar un clic en el elemento de la directiva y, por lo tanto, desencadenar la llamada a esa función.

El clickFunction se burla con sinonjs para que pueda verificar si fue llamado o no. Esa prueba falla, lo que significa que no hubo clic.

¿Qué estoy haciendo mal aquí?

He visto la respuesta a preguntas similares, como Testing JavaScript Click Event con Sinon pero no quiero usar jQuery completo, y creo que me estoy burlando (espiando) de la función correcta.

Aquí está el js del violín arriba (para aquellos que prefieren verlo aquí):

angular.js , angular-mocks.js se carga.

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

Answer 1

Resulta que el problema estaba bastante oculto.

En primer lugar, las funciones $scope.$digest y $scope.$apply beforeEach rompieron la función beforeEach , que finalmente dio lugar a la solución completa.

Solución

No mezcle versiones angulares.

• En el primer violín
  • angular.js versión 1.3.0
  • angular-mocks.js versión 1.1.5
• En el violín resuelto
  • angular.js versión 1.3.0
  • angular-mocks.js versión 1.3.0

Ese fue todo el problema, y ​​me dio errores bastante oscuros.

Gracias a Foxandxss del canal de IRC #AngularJS en freenode.

La forma de activar eventos en la directiva con jQlite fue simplemente:

someElement.triggerHandler(''click'');