Jasmine 测试 AngularJS $on

Question

I want to test my typescript angular code with jasmine, but I get this error when I'm running it.

TypeError: 'undefined' is not an object (evaluating 'scope.LessonCtrl.statistic')

I'm trying to test this code:

export class LessonCtrl {
  scope: angular.IScope;
  statistic: Statistic;

  constructor($scope) {
    this.scope = $scope;
    this.statistic = new Statistic();
    this.scope.$on("timer-stopped", function(event, data) {
      var scope: any = event.currentScope;
      scope.LessonCtrl.statistic.calculateTypingSpeed(data.millis);
      scope.LessonCtrl.statistic.setTime(data.millis);
    });
  }
}

With this:

var scope, rootScope, lessonCtrl;

beforeEach(() => inject(($rootScope) => {
  scope = $rootScope.$new();
  rootScope = $rootScope;
  lessonCtrl = new Controllers.LessonCtrl(scope);
}));

it('on test', () => {
  rootScope.$broadcast('timer-stopped', [{millis: 1000}]);   
  expect(true).toBe(true); // i will expect something else but i have errors
});

Can anyone help me with this?

Answer 1

You assign statistic to the context ( this ), not scope.LessonCtrl . By using an arrow function the context will be preserved inside the .$on callback

Arrow functions capture the this value of the enclosing context...

export class LessonCtrl {
  scope: angular.IScope;
  statistic: Statistic;

  constructor($scope) {
    this.scope = $scope;
    this.statistic = new Statistic();
    this.scope.$on("timer-stopped", (event, data) => {
      var scope: any = event.currentScope;
      this.statistic.calculateTypingSpeed(data.millis);
      this.statistic.setTime(data.millis);
    });
  }
}