使用构造函数参数测试 Angular 2 组件

Posted 2023-03-13

【中文标题】使用构造函数参数测试 Angular 2 组件

【英文标题】：Test Angular 2 Component with Constructor Parameter

【发布时间】：2017-07-27 08:16:21

【问题描述】：

假设我有一个带有两个输入参数的 Angular 2 组件：

@Component... (omitted for clarity)
export class SomeComponent 

@Input() a: number
@Input() b: number

当我想测试这个组件时，我有类似的东西：

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [
        SomeComponent,
      ],
    )
    .compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

createComponent 调用不带任何参数或允许我调用构造函数。如何实例化/测试组件的各种数值？

【问题讨论】：

component.a = 1; component.b = 2; ?

这会在实例化后改变值。这将导致 html 的模板使用当时（默认）为 0 的构造函数值。

这是设置这些值的唯一方法。如果不先构造对象，就无法更改对象的字段。你可以在调用 fixture.detectChanges() 之前这样做。

我之前的评论并不完全正确：模板确实以@JBNizet 建议的方式获取组件中设置的值。它使我的测试通过了。谢谢！您能否将其转换为答案以便我接受？

【参考方案1】：

正如 JB Nizet 指出的那样，当组件具有 @input 参数时，您需要在 beforeEach() 中初始化它们： ```

beforeEach(() => 
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    component.a = 1;
    component.b = 2;
    fixture.detectChanges();
);

```

【讨论】：

const injector = Injector.create(providers: [provide: SelfService, useClass: MockSelfService, deps: []]); component.selfService = injector.get(SelfService);例如，如果 SelfService 依赖于 http，则可以通过注入器创建它

所有这些动作都是在调用 createComponent() 之后发生的。所以它会在构造函数完成后工作。因此，您将无法设置只读属性。