Angular 16中如何为每个测试用例修改组件@Input值？

针对你在不同测试用例中需要使用不同@Input值的场景，有几种实用的操作方式：

1. 在单个测试用例中直接覆盖并触发变更检测 #

你可以在it块内直接修改组件的@Input属性，然后调用fixture.detectChanges()让组件响应数据变化。这样不会影响其他测试用例的初始值。

示例代码：

it('should generate correct path and viewBox for large icon', () => {
  // 覆盖默认的Input值
  component.icon = 'big-icon';
  component.height = 50;
  component.width = 50;
  
  // 触发变更检测，让组件处理新的Input
  fixture.detectChanges();

  // 验证结果
  expect(component.iconPath).toBe('assets/svg/ic-big-icon.svg');
  expect(component.viewBox).toBe('0 0 50 50');
});

2. 用嵌套describe分组管理不同Input场景 #

如果有一组测试用例都需要相同的Input配置，可以嵌套一个describe块，在内部的beforeEach中设置专属的Input值，这样该组内的所有测试都会复用这个配置。

示例代码：

describe('with small icon size', () => {
  beforeEach(() => {
    // 覆盖父级beforeEach的Input设置
    component.icon = 'small-icon';
    component.height = 16;
    component.width = 16;
    fixture.detectChanges();
  });

  it('should have correct viewBox', () => {
    expect(component.viewBox).toBe('0 0 16 16');
  });

  it('should load correct icon path', () => {
    expect(component.iconPath).toBe('assets/svg/ic-small-icon.svg');
  });
});

3. 数据驱动测试（批量处理多组Input） #

如果需要测试多组不同的Input组合，可以用数组定义测试数据，然后循环生成对应的测试用例，避免重复代码。

示例代码：

const testCases = [
  { icon: 'user', height: 24, width: 24, expectedPath: 'assets/svg/ic-user.svg', expectedViewBox: '0 0 24 24' },
  { icon: 'settings', height: 32, width: 32, expectedPath: 'assets/svg/ic-settings.svg', expectedViewBox: '0 0 32 32' },
  { icon: 'delete', height: 20, width: 20, expectedPath: 'assets/svg/ic-delete.svg', expectedViewBox: '0 0 20 20' },
];

testCases.forEach(testCase => {
  it(`should handle ${testCase.icon} with size ${testCase.height}x${testCase.width}`, () => {
    component.icon = testCase.icon;
    component.height = testCase.height;
    component.width = testCase.width;
    fixture.detectChanges();

    expect(component.iconPath).toBe(testCase.expectedPath);
    expect(component.viewBox).toBe(testCase.expectedViewBox);
  });
});

注意：每次修改Input后必须调用fixture.detectChanges()，否则组件不会更新这些变化对应的计算属性（比如你的iconPath和viewBox）。

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