如何在Angular测试用例中设置@Input装饰器的station属性值？

编写表单提交测试用例时，组件通过@Input定义的station属性会在表单提交时被重新赋值，但在spec文件中尝试设置component.station时始终显示undefined，无法赋值。

component.ts 代码：

@Input station : Object;

spec.ts 测试代码片段：

it('should update form onsubmit', () => {
    spyOn(component.submitConfirmed, 'emit');
    jasmine.createSpy('onSubmit');
    const valueServiceSpy = jasmine.createSpyObj('OcppService', [
      'configureStation',
    ]);
    // 此处报错：component.station 为 undefined
    component.station.name = 'station 02';
    component.form = form;
    const formValue = component.form.getRawValue();
    component.onSubmit();
    expect(valueServiceSpy.getValue.calls.mostRecent().returnValue).toBe(
      formValue
    );
    expect(component.submitConfirmed.emit).toHaveBeenCalledWith({
      valid: true,
      station: component.station,
    });
  });

• 先初始化station对象再赋值
  直接给component.station.name赋值时，station本身是undefined，必须先创建对象：

  // 直接初始化带属性的对象
  component.station = { name: 'station 02' };
  // 或者分步初始化
  component.station = {};
  component.station.name = 'station 02';
  

• 规范设置输入属性（Angular测试推荐方式）
  如果是通过TestBed创建的组件，确保在组件实例上设置输入属性后触发变更检测：

  // 组件创建后设置输入属性
  fixture.componentInstance.station = { name: 'station 02' };
  fixture.detectChanges(); // 触发变更检测，确保输入属性生效
  

• 修正@Input的语法规范
  组件中@Input的标准写法应该带括号，同时建议明确类型定义，避免类型模糊：

  @Input() station: { name?: string } = {};
  

• 确保组件已完成初始化
  测试用例执行前，必须通过TestBed.createComponent创建组件实例，并调用fixture.detectChanges()触发初始渲染，这样组件的输入属性才能被正常识别和访问。

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