Angular 未使用单元测试中组件的属性填充表单

我有一个带有

office

对象的组件，该对象是从容器传入的。此对象中的属性填充一个表单，该表单在浏览器中按预期工作，但是如果在单元测试中将模拟数据分配给此对象并检查其中一个输入的值，则该表单显然为空。在下面的测试中，前两个断言通过，但第三个断言出现以下错误消息：

预期“”为“测试名称”

我尝试添加一个

fakeAsync

包装器，然后在执行

fixture.detectChanges（）

之前使用了

tick（）

，但这也不起作用。为什么输入没有像在浏览器中那样使用来自

office

的数据填充

以下是我的一些节点模块的版本：

• 角度7.2.8
• 材料7.3.3
• 因果报应4.0.1
• 茉莉花芯3.3.0
• 噶玛茉莉2.0.1

组件。ts:

export class FormComponent {
  @Input() office: Office;
  @Input() officeLoading: boolean;

  ...
} 

<form *ngIf="!officeLoading" (ngSubmit)="saveForm(form)" #form="ngForm" novalidate>
  <mat-form-field>
    <input
      class="company-name"
      matInput 
      placeholder="Company Name" 
      type="text"
      name="companyName"
      required
      #companyName="ngModel"
      [ngModel]="office?.companyName">
    <mat-error *ngIf="companyName.errors?.required && companyName.dirty">
      Company name is required
    </mat-error>
  </mat-form-field>
 ...
</form>

component.html:

export class FormComponent {
  @Input() office: Office;
  @Input() officeLoading: boolean;

  ...
} 

<form *ngIf="!officeLoading" (ngSubmit)="saveForm(form)" #form="ngForm" novalidate>
  <mat-form-field>
    <input
      class="company-name"
      matInput 
      placeholder="Company Name" 
      type="text"
      name="companyName"
      required
      #companyName="ngModel"
      [ngModel]="office?.companyName">
    <mat-error *ngIf="companyName.errors?.required && companyName.dirty">
      Company name is required
    </mat-error>
  </mat-form-field>
 ...
</form>

公司名称是必需的
...

组件规格ts

describe('FormComponent', () => {
  let component: FormComponent;
  let fixture: ComponentFixture<FormComponent>;
  let el: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        MatInputModule,
        OverlayModule,
        StoreModule.forRoot({}),
      ],
      declarations: [FormComponent],
      providers: [Actions, MatSnackBar, Store],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    el = fixture.debugElement;
    component.office = null;
    component.officeLoading = false;
    fixture.detectChanges();
  });

  it('should fill out form based on what comes back from API', () => {
    expect(component.office).toBe(null);
    expect(el.query(By.css('input.company-name')).nativeElement.value).toBe('');
    component.office = {
      companyName: 'Test Name',
    };
    component.officeLoading = false;
    fixture.detectChanges();

    expect(el.query(By.css('input.company-name')).nativeElement.value).toBe(
      'Test Name',
    );
  });
});

description（'FormComponent'，（）=>{
let组件：FormComponent；
let夹具：组件夹具；
设el:DebugElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
进口：[
BrowserAnimationsModule，
FormsModule，
MatInputModule，
覆盖模块，
StoreModule.forRoot（{}），
],
声明：[FormComponent]，
提供者：[操作、Matsnakbar、存储]，
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（FormComponent）；
组件=fixture.componentInstance；
el=夹具。调试元件；
component.office=null；
component.officeLoading=false；
fixture.detectChanges（）；
});
它（'应该根据API返回的内容填写表格'，（）=>{
expect（component.office）.toBe（null）；
expect（el.query（By.css（'input.company name'））.nativeElement.value.toBe（“”）；
component.office={
companyName:“测试名称”，
};
component.officeLoading=false；
fixture.detectChanges（）；
expect（el.query（By.css（'input.company name'））.nativeElement.value）(
“测试名称”，
);
});
});

调用

fixture.detectChanges（）

后，需要等待fixture变得稳定

Stackblitz

---

调用

fixture.detectChanges（）

后，需要等待fixture变得稳定

Stackblitz

---

请参见下面的修订答案。请参见下面的修订答案。