如何为给定的TypeScript函数编写正确的单元测试用例

原测试的核心问题 #

• 未接收checkSelectionFromDeletable方法返回的Observable，直接忽略了函数返回值，完全未校验目标逻辑
• mock的numbersFacade.selectedRows$数据结构不符合原函数预期：原函数接收的是包含selectedRows数组的包裹对象，原测试直接返回了单个行数据
• 断言对象不匹配：原函数最终返回的是匹配条件的行对象，不是Observable类型
• 未处理异步断言：rxjs流是异步执行的，未加done回调的情况下测试用例会提前结束，断言可能根本不会执行

修正后的基础测试用例 #

it('should return matched row from selected rows when owner exists', (done) => {
  // 1. 构造符合原函数入参结构的mock数据
  const mockRow = {
    phoneNumber: '12345678',
    extension: '',
    numberType: 'MAIN',
    state: 'US',
    location: '',
    locationId: '',
    mainNumberFlag: false,
    tollFreeFlag: false,
    owner: 'test'
  } as ICallNumberVM;
  // mock selectedRows$的结构为外层包裹selectedRows数组的对象，匹配原函数的取值逻辑
  numbersFacade.selectedRows$ = of({
    selectedRows: [mockRow]
  });

  // 2. 接收目标函数返回的Observable
  const result$ = component.checkSelectionFromDeletable();

  // 3. 订阅返回流做断言，用done标记异步测试结束
  result$.subscribe(matchedRow => {
    expect(matchedRow).toEqual(mockRow);
    done();
  });
});

补充边界场景测试用例 #

可补充以下测试覆盖所有分支逻辑，保证功能完整性：

• 选中行数组中存在mainNumberFlag = true的行，返回第一个匹配的行

it('should return matched row from selected rows when mainNumberFlag is true', (done) => {
  const mockRow = {
    phoneNumber: '87654321',
    mainNumberFlag: true,
    owner: ''
  } as ICallNumberVM;
  numbersFacade.selectedRows$ = of({
    selectedRows: [mockRow]
  });

  component.checkSelectionFromDeletable().subscribe(matchedRow => {
    expect(matchedRow).toEqual(mockRow);
    done();
  });
});

• 选中行数组中没有符合owner || mainNumberFlag条件的行，返回undefined

it('should return undefined when no matched row exists', (done) => {
  const mockRow = {
    phoneNumber: '11223344',
    mainNumberFlag: false,
    owner: ''
  } as ICallNumberVM;
  numbersFacade.selectedRows$ = of({
    selectedRows: [mockRow]
  });

  component.checkSelectionFromDeletable().subscribe(matchedRow => {
    expect(matchedRow).toBeUndefined();
    done();
  });
});

• selectedRowCapsule为null/undefined的场景，返回undefined

it('should return undefined when selectedRowCapsule is null', (done) => {
  numbersFacade.selectedRows$ = of(null);

  component.checkSelectionFromDeletable().subscribe(matchedRow => {
    expect(matchedRow).toBeUndefined();
    done();
  });
});

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