如何测试Observable中的错误抛出？验证WebSocket错误时组件状态

我来帮你完成这个Angular组件的测试用例，确保当WebSocket抛出错误时，isOverlayVisible能被正确设置为true。结合你给出的测试准备代码，完整的测试实现如下：

完整测试代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Subject } from 'rxjs';
import { YourComponent } from './your-component.component'; // 替换成你的组件实际类名

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let websocketDataSubject: Subject<any>;
  let ws: jasmine.SpyObj<any>;

  beforeEach(async () => {
    websocketDataSubject = new Subject();
    ws = jasmine.createSpyObj('ws', ['getData']);
    ws.getData.and.returnValue(websocketDataSubject);

    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [{ provide: YourWsService, useValue: ws }] // 替换成你的WebSocket服务类名
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // 触发组件ngOnInit执行，完成WebSocket订阅
  });

  it('should set isOverlayVisible to true when WebSocket emits an error', () => {
    // 先断言初始状态
    expect(component.isOverlayVisible).toBeFalse();

    // 手动触发WebSocket错误
    const mockError = new Error('WebSocket connection lost');
    websocketDataSubject.error(mockError);

    // 验证错误处理逻辑生效
    expect(component.isOverlayVisible).toBeTrue();
  });
});

关键逻辑说明 #

• Mock服务准备：用jasmine.createSpyObj创建WebSocket服务的模拟对象，让getData方法返回我们可控的Subject，这样就能手动模拟数据流的正常、错误、完成状态。
• 组件初始化：通过fixture.detectChanges()触发组件的ngOnInit，此时组件会完成对WebSocket数据流的订阅。
• 错误触发与断言：调用websocketDataSubject.error()抛出错误后，直接检查component.isOverlayVisible的状态，验证错误回调里的赋值逻辑是否正常执行。

如果需要拓展测试，还可以添加测试用例验证WebSocket正常完成时的console.info输出，不过这属于可选的补充测试。

内容的提问来源于stack exchange，提问作者BlackHoleGalaxy