Question

我进行了以下测试

  it('should send message to window...', inject(
    [AppEventsService],
    (service: AppEventsService) => {
      spyOn(window.parent, 'postMessage').and.callThrough();
      service.sendMessage('MyTestEvent', 'empty');
      expect(window.parent.postMessage).toHaveBeenCalledWith(
        JSON.stringify({ e: 'MyTestEvent', v: 'empty' }),
        '*'
      );
    }
  ));

这在Chrome浏览器中有效，但在IE中我得到了

Error: <toHaveBeenCalledWith> : Expected a spy, but got Function.
Usage: expect(<spyObj>).toHaveBeenCalledWith(...arguments)

但是为什么呢？服务中的方法执行以下操作

 public sendMessage(event: string, param: string) {
    const message = {};
    message['e'] = event;
    if (StringUtils.isNullOrWhiteSpace(param)) {
      message['v'] = '';
    } else {
      message['v'] = param;
    }

    window.parent.postMessage(JSON.stringify(message), '*');
  }

Answer 1

问题在于，在IE 11中，postMessage方法的propertyDescriptor被标记为不可写且不可配置。因此，在IE 11上，您不能覆盖该属性。

这里最好的方法是将windows.parent.postMessage方法包装到自定义方法中，如下所示：

function postToParent(...args) {
  return window.parent.postMessage(...args);
}

，然后将所有对window.parent.postMessage的呼叫替换为postToParent。

最后，在您的测试中，执行以下操作：

spyOn(window, 'postToParent').and.callThrough();

茉莉花spyOn区别于Chrome和IE 11

1 个答案: