使用 Jasmine 2 的 spyOn 测试 Angular 指令

Question

我有一个 AngularJS 指令，我正在尝试使用 Jasmine 2 进行测试。这是我在测试开始时定义的 Mock 服务。

var Note = {
    getNotes: function (type, id) {
        console.log('I have been called')
    },
    save: function () {}
};

这是我的测试：

beforeEach(function () {
    var html = "<notes id=\"productId\" type=\"'Product'\"></notes>";

    inject(function ($compile, $rootScope, $q, $injector, $templateCache) {
        $templateCache.put('tpl/blocks/notes.html', '<div>notes template</div>');

        $scope = $rootScope.$new();
        q = $q;
        $httpBackend = $injector.get('$httpBackend');
        $scope.productId = "123";

        elm = angular.element(html);
        $compile(elm)($scope);

        $scope.$apply();
        scope = angular.element(elm).isolateScope()
    });
});

it('should call service to get notes', function () {
    //GIVEN
    expect(scope.notes).toBe(undefined);
    spyOn(Note, 'getNotes').and.returnValue(new function () {
        var deferred = q.defer();
        scope.notes = [{'content': 'note1'}, {'content': 'note2'}];
        return deferred.promise;
    });

    //WHEN
    scope.$apply();

    //THEN
    expect(Note.getNotes).toHaveBeenCalled();
    expect(scope.notes.length).toBe(2);
});

如果我删除第一个期望（它期望 Note.getNotes 被调用的地方），测试通过。否则，它会失败。但是，我可以看到该服务正在被调用，因为它是使用 console.log 打印的。

INFO [karma]: Karma v0.12.35 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket pPpiC59pcRGYeZDkmHH1 with id 30185266
WARN [web-server]: 404: /js/controllers/signin.js
......
LOG: 'I have been called'
PhantomJS 1.9.8 (Mac OS X 0.0.0) Notes directive should call service to get notes FAILED
        Expected spy getNotes to have been called.
            at /Users/mraible/dev/myapp/tests/unit/directives/notes_test.js:68
LOG: 'I have been called'
...
DUMP: 'background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(153, 255, 0); background-position: initial initial; background-repeat: initial initial; '
.
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 11 of 11 (1 FAILED) (0.004 secs / 0.171 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

我的预感是我的 spyOn 必须更改以表明该方法有参数。

Answer 1

您需要使用 provide 覆盖模块中的 Notes 服务。

例子：

 var Note, notesStub = [{'content': 'note1'}, {'content': 'note2'}];

 beforeEach(module('myapp', function($provide){
     Note = jasmine.createSpyObj('Note',['getNotes', 'save']);
     //override the service
     $provide.value('Note', Note);
   }));

   beforeEach(inject(function($q){
     //Set up spy value
     Note.getNotes.and.returnValue($q.when(notesStub));
      //Other inject stuffs
   }));

it('should call service to get notes', function () {
    //GIVEN
    expect(scope.notes).toBe(undefined);
    scope.$apply();
    //Assuming your directive calls the service and chain though the promise and set its scope.
    expect(Note.getNotes).toHaveBeenCalled();
    expect(scope.notes.length).toBe(2);
});