AngularJS Unit Test Directive with Input

Question

I am using Angular v1.6 with Jasmine and I'm trying to unit test a working directive in our angular application by entering an input value but I cannot get the directive to fire properly.

Directive

.directive('percentage', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attr, ngModel) {

                function fromUser(value) {
                    return value / 100;
                }

                function toUser(value) {
                    return Math.round(value * 100);
                }
                ngModel.$parsers.push(fromUser);
                ngModel.$formatters.push(toUser);
            }
        };
    })

Unit Test

describe('percentageDirective', function() {
  beforeEach(module('app'));

      // Inject $rootScope and $compile
      var scope, element;
      beforeEach(inject(function($rootScope, $compile) {
        // Set up the scope with test data
        scope = $rootScope.$new();

        scope.value = 0;

        // Create an element
        element = angular.element('<input type="number" percentage ng-model="value"></input>');

        // Compile that element with your scope
        element = $compile(element)(scope);

        // Run the digest cycle to compile the element
        $rootScope.$digest();

        // Find the input control: 
        var dirElementInput = element.find('input');

        // Set some text
        angular.element(dirElementInput).val('25').triggerHandler('input');

        scope.$apply();
      }));

      it("should display the decimal value", function() {
        expect(scope.value).toEqual('0.25');
      });
});

The scope value never changes and remains at 0. Can someone help on how to trigger the input change?

felixmosh · Accepted Answer · 2018-04-18 12:49:07Z

3

Looks like you have an issue with element.find('input'), find searches at the children of the given element, it won't return as a result the element itself. Therefore, all your operations are made on an empty angular element wrapper.

If you will try to console.log(dirElementInput.length) you will see that this wrapper is empty.

You can change that to var dirElementInput = element[0]; and the test will pass.

Working example: https://embed.plnkr.co/DVUoMAUcDXcMl6tp521D/

answered Apr 18, 2018 at 12:49

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Unit Test Directive with Input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest