Форма не заполняется свойствами компонента в модульном тесте

Question

У меня есть компонент с office объектом, который передается из контейнера. Свойства этого объекта заполняют форму, которая работает так, как и ожидалось в браузере, однако, если я назначу фиктивные данные этому объекту в моем модульном тесте и проверим значение одного из входных данных, он, очевидно, будет пустым. В моем тесте ниже первые два утверждения пройдены, но я получаю следующее сообщение об ошибке с 3-м:

Ожидается, что '' будет 'Имя теста'.

Я попытался добавить оболочку fakeAsync, а затем использовал tick() прямо перед тем, как сделал fixture.detectChanges(), но это тоже не сработало. Почему ввод не заполняется данными из office, как это происходит в браузере?

Вот версии некоторых из моих узловых модулей:

• угловой 7.2.8
• материал 7.3.3
• Карма 4.0.1
• жасмин-ядро 3.3.0
• Карма-Жасмин 2.0.1

component.ts:

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

  ...
} 

component.html:

<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.spec.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',
    );
  });
});

Answer 1

Вам нужно дождаться стабилизации прибора после вызова fixture.detectChanges().

 fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(el.query(By.css('input.company-name')).nativeElement.value).toBe(
        "Test Name",
      );
    });

Stackblitz

https://stackblitz.com/edit/directive-testing-yxuyuk?embed=1&file=app/app.component.spec.ts