Angular14+Jasmine如何测试自定义组件的数据获取方法？

我负责一个Angular 14项目，刚接触Jasmine单元测试，现在要测试自研的自定义自动完成组件能否正确获取所需的对象列表，不知道怎么写测试用例。以下是相关代码和我尝试的测试代码：

component.ts #

getFooList(): void {
    this.optionsFoo =
      this.foobar?.map((bar) => {
        return {
          label: bar.property ?? '',
          value: bar
        }
      }) ?? []
    this.optionsFooToDisplay = this.optionsFoo 
  }

其中optionsFooToDisplay的类型是Option<FOO>[]

Option接口 #

export interface Option<T> {
  label: string
  value: T
}

FOO接口 #

export interface FOO {
  foo1?: string
  foo2?: string
  foo3?: string
  foo4?: string
  foo5?: string
  foo6?: string
}

我尝试的测试代码（component.spec.ts） #

it('should retrieve list of foos', () => {
    const mockFoo: Option<FOO> =
      [
        {
          label: 'foooo',
          value: {
            foo1: '69420',
            foo2: 'baaaar',
            foo3: 'AA',
            foo4: 'BBBBB',
            foo5: 'CC',
            foo6: 'DDDDDD'
          }
        }
      ] ?? []
    expect(component.optionsFooToDisplay).toContain(mockFoo)
  })

VSCode报错信息 #

Type '{ label: string; value: { foo1: string; foo2: string; foo3: string; foo4: string; foo5: string; foo6: string; }; }[]' is missing the following properties from type 'Option<FOO>': label, value

问题分析与解决方法 #

1. 类型错误原因 #

你把mockFoo声明为Option<FOO>类型，但实际赋值的是一个数组Option<FOO>[]，类型不匹配导致报错。此外，测试用例没有调用getFooList()方法，也没有给依赖的foobar变量赋值，逻辑不完整。

2. 正确的测试用例编写 #

it('should retrieve list of foos', () => {
  // 1. 模拟foobar原始数据（注意要包含property字段，对应代码中的bar.property）
  const mockFoobar: FOO[] = [
    {
      foo1: '69420',
      foo2: 'baaaar',
      foo3: 'AA',
      foo4: 'BBBBB',
      foo5: 'CC',
      foo6: 'DDDDDD',
      property: 'foooo'
    }
  ];

  // 2. 给组件的foobar属性赋值
  component.foobar = mockFoobar;

  // 3. 调用要测试的方法
  component.getFooList();

  // 4. 定义预期生成的Option数组
  const expectedOptions: Option<FOO>[] = [
    {
      label: 'foooo',
      value: mockFoobar[0]
    }
  ];

  // 5. 断言结果是否符合预期
  expect(component.optionsFooToDisplay).toEqual(expectedOptions);
  
  // 如果只需断言包含单个元素，可改用：
  // expect(component.optionsFooToDisplay).toContain(expectedOptions[0]);
});

3. 额外注意事项 #

• 若foobar是通过异步服务获取的，需要用fakeAsync/tick或async/await处理异步逻辑
• 使用toEqual断言数组完全匹配，比toContain更适合验证列表生成的完整性
• 如果模拟数据中没有property字段，代码会生成空字符串的label，测试时要对应调整预期值

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