如何使用Jasmine测试AngularJS服务中window绑定的message事件监听

安全阿岳

2026-9-25

解决方案

核心思路

你需要通过Mock WindowService实现测试，单元测试需要隔离外部依赖，不需要调用真实浏览器window对象，通过spy捕获事件绑定回调、手动触发回调即可完成验证。

具体实现步骤

1. 构造Mock依赖

// 存储绑定的message事件回调
const mockMessageListeners: Function[] = [];
// Mock window及chrome.webview对象
const mockWindow = {
  chrome: {
    webview: {
      addEventListener: jasmine.createSpy('addEventListener').and.callFake((eventName, cb) => {
        if (eventName === 'message') mockMessageListeners.push(cb);
      })
    }
  }
};
// Mock WindowService，让getWindow返回上面的模拟对象
const mockWindowService = jasmine.createSpyObj('WindowService', ['getWindow']);
mockWindowService.getWindow.and.returnValue(mockWindow);

2. 配置测试环境并验证事件绑定

// 替换为你实际的服务类名
let targetService: YourService;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      YourService,
      { provide: WindowService, useValue: mockWindowService }
    ]
  });
  targetService = TestBed.inject(YourService);
});

it('should bind message event listener to webview after initialization', () => {
  expect(mockWindow.chrome.webview.addEventListener).toHaveBeenCalledWith('message', jasmine.any(Function));
});

3. 模拟触发事件验证Subject输出

it('should push event data to webViewMessage when message event triggers', (done) => {
  const mockEventData = { action: 'test', content: '测试数据' };
  // 订阅Subject接收结果
  targetService.webViewMessage.subscribe(res => {
    expect(res).toEqual(mockEventData);
    done();
  });
  // 手动触发所有绑定的message事件回调
  mockMessageListeners.forEach(cb => cb({ data: mockEventData }));
});