vendredi 9 juin 2017

What's wrong with the unit test of my AngularJS directive?

I'm trying to test this simple directive (picked from here) but the variable 'fileModel' in the test's scope never change.

What I'm I doing wrong ?

Directive source code:

'use strict';

angular
  .module('app')
  .directive('csoFileModel', csoFileModel);

function csoFileModel() {
  var directive = {
    link: link,
    restrict: 'A',
    scope: {
      csoFileModel: '='
    }
  };

  return directive;

  ////////////

  function link(scope, element, attributes) {
    element.bind('change', function(changeEvent) {
      var reader = new FileReader();
      reader.onload = function(loadEvent) {
        scope.$apply(function() {
          scope.csoFileModel = loadEvent.target.result;
        });
      }

      reader.readAsText(changeEvent.target.files[0]);
    });
  }
}

Test source code:

'use strict';

describe('csoFileModel', csoFileModelTestFixture);

function csoFileModelTestFixture() {

  beforeEach(angular.mock.module('app'));

  var $compile;
  var $scope;

  var element;

  beforeEach(inject($compileAnd$rootScope));
  beforeEach(init$Scope);
  beforeEach(initElement);
  beforeEach(performDigestCycle);

  it('should set the model to the expected value', shouldSetTheModelToTheExpectedValue);

  ////////////

  function $compileAnd$rootScope(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
  }

  function init$Scope() {
    $scope.fileModel = 'not expected';
  }

  function initElement() {
    element = angular.element('<input accept=".csv" ' +
      'type="file"' +
      'cso-file-model="fileModel" />');

    $compile(element)($scope);
  }

  function performDigestCycle() {
    $scope.$digest();
  }

  function shouldSetTheModelToTheExpectedValue() {
    // Given
    var event = {
      type: 'change',
      target: {
        files: [new Blob(['expected'], { type: 'text/csv' })]
      }
    };

    // When
    element.triggerHandler(event);
    $scope.$digest();

    // Then
    expect($scope.fileModel).toEqual('expected');
  }
}

I'm 100% sure that this directive works because when I test it in my app I get the expected result. When testing, when I inspect the content of the directive's scope.csoFileModel variable I see that the content change but the test's $scope.fileModel variable never change her value.

I always get the test failing with the following message:

Expected 'not expected' to equal 'expected'.

Why is that ?

Any help would be appreciated ! Thanks !

Aucun commentaire:

Enregistrer un commentaire