lundi 28 décembre 2015

Trigger ng-change on select in Angular directive unit test

I have a custom directive my-custom-select, that has an ng-change which calls the parent controller function executeParentFunction.

In my unit test, how do I test that executeParentFunction was called?

The directive

angular.module('myApp')
  .directive('myCustomSelect', [function() {
    return {
      restrict: 'E',
      replace: true,
      require: '^?myCustomForm',
      templateUrl: 'templates/my-custom-select-template.html',
      scope: {
        name: '@',
        ngModel: '=',
        required: '='
      },
      link: function(scope, el, attrs, parentCtrl) {
        scope.updateSelect = function() {
          parentCtrl.executeParentFunction();
        };
        //...
      }
    };
  }]);


<div class="select">
  <select ng-model="ngModel" name="{{name}}" ng-change="updateSelect()">
    <option value="" disabled>Select option</option>
    //...
  </select>
</div>

My unit test

describe('Directive: <my-custom-select>', function() {
  var compile;
  var $scope;

  beforeEach(module('myApp'));

  beforeEach(function() {
     inject(function($compile, $rootScope) {
      compile = $compile;
      $scope = $rootScope.$new();
    });
  });

  // Compile directive
  function getCompiledElement(attrs, template) {
    var validTemplate = '' +
      '<my-custom-select ' + (attrs || '') + '>' +
      '</my-custom-select>';

    var compiledElement = compile(template || validTemplate)($scope);
    $scope.$digest();

    return compiledElement;
  }

  describe('rendering the <select>', function() {
    var element;
    var select;

    beforeEach(function() {
      element = getCompiledElement('name="mySelect"');
      select = element.find('select');
    });

    it('should executeParentFunction when ng-change is triggered', function() {
      // ??
    });
  });

});

Aucun commentaire:

Enregistrer un commentaire