测试window.postMessage指令(Testing window.postMessage

我无法测试我的指令，这使得跨文档消息通过注册一个消息处理程序：

.directive('messaging', function ($window, MyService) {
    return {
        link: function () {
            angular.element($window).on('message', MyService.handleMessage);
        }
    };
})

所有我想要的单元测试是，当该指令被编译，并window.postMessage('message','*')被调用时，我的消息处理程序应该被称为：

http://jsfiddle.net/mhu23/L27wqn14/ （包括茉莉试验）

我会感激你的帮助！ 迈克尔

Answer 1:

您正在使用原来的window API，你是不是嘲笑它，因此该方法postMessage将保持它的异步行为。 知道了，测试应该写在异步方式。 在的jsfiddle你有茉莉花1.3，所以测试应该看起来有点像这样：

it('should ....', function () {

    var done = false;

    spyOn(MyService,'handleMessage').andCallFake(function () {
        // set the flag, let Jasmine know when callback was called
        done = true; 
    });

    runs(function () {
        // trigger async call
        $window.postMessage('message','*');    
    });

    waitsFor(function () {
        // Jasmine waits until done becomes true i.e. when callback be called
        return done; 
    });

    runs(function () {
        expect(MyService.handleMessage).toHaveBeenCalled();
    });

});

检查有关与茉莉花1.3测试异步文档 。 这里是一个工作的jsfiddle 。

这将是一个更容易一点茉莉花2.X ：

it('should ....', function (done) {

    spyOn(MyService,'handleMessage').and.callFake(function () {
      expect(MyService.handleMessage).toHaveBeenCalled();
      done();
    });

    $window.postMessage('message','*');
});

此外，我不得不提，那你必须改变你如何从这个添加监听器

angular.element($window).on('message', MyService.handleMessage);

到

angular.element($window).on('message', function (e) {
    MyService.handleMessage(e);
});

因为.on注册了一个函数本身，它不会被用于连接到一个方法MyService ，所以你将无法窥探它。

文章来源: Testing window.postMessage directive