如何在Angular Jasmine框架中测试多次发射值的Observable

原服务代码 #

class ProductService {
  public product$: Observable<string> = from(['prod1','prod2','prod3','prod4']);
  // 其他方法...
}

需要验证的测试场景 #

• 确认 product$ Observable 会发射全部四个值
• 确认第三次发射的数据是 prod3

测试代码（基于 Jasmine 框架） #

import { TestBed } from '@angular/core/testing';
import { ProductService } from './product.service';
import { Observable } from 'rxjs';

describe('ProductService', () => {
  let service: ProductService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ProductService);
  });

  // 测试全部值是否正确发射
  it('should emit all four product values', (done) => {
    const expected = ['prod1', 'prod2', 'prod3', 'prod4'];
    const emittedValues: string[] = [];

    service.product$.subscribe({
      next: val => emittedValues.push(val),
      complete: () => {
        expect(emittedValues).toEqual(expected);
        done();
      }
    });
  });

  // 测试第三次发射的值是否为prod3
  it('should emit "prod3" on the third emission', (done) => {
    let count = 0;

    service.product$.subscribe(val => {
      count++;
      if (count === 3) {
        expect(val).toBe('prod3');
        done();
      }
    });
  });
});

说明 #

• 第一个测试用例通过收集Observable发射的所有值，在流完成后和预期数组做对比，确保没有遗漏或错误的值。
• 第二个测试用例通过计数发射次数，在第三次触发时直接断言对应的值，验证特定位置的发射内容。
• 使用done()回调是为了处理Observable的异步特性，确保测试在异步操作完成后才结束。

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