Невозможно получить значение объекта / переменной компонента, обновленное после проверки форм в угловом модульном тесте

Question

Я хочу написать простой тестовый пример, чтобы проверить, что, когда я нажимаю кнопку отправки, а поле «Имя» пусто, оно должно показывать сообщение «Это поле обязательно» под полем ввода «FirstName».Для этого я использовал проверку формы, чтобы заполнить сообщения об ошибках, и она работает нормально, но я не могу написать правильный тестовый пример для его проверки.

HTML

...
..
.
<!--Input-->
 <div class="form-group row">
        <label class="col-lg-4 col-form-label" i18n="@@lblFirstName">First Name <span class="required">*</span> </label>
        <div class="col-lg-8">
          <div class="input-group">
            <input class="form-control" id="firstName" (keypress)="validateName($event)"
              [ngClass]="formErrors.firstName ? 'is-invalid' : ''" formControlName="firstName" maxlength="30"
              kendoTextBox>
            <div class="input-group-append">
              <input class="form-control middle" placeholder="Middle" maxlength="25" kendoTextBox>
            </div>
            <div [ngClass]="formErrors.firstName ? 'invalid-feedback': ''" class="invalid-feedback">
              {{ formErrors.firstName }}</div>
          </div>
        </div>
      </div>
...
....
...
<!--Save link-->
<div class="col-lg-6">
      <div class="form-group row">
        <div class="col-lg-12">
          <a style="cursor: pointer;" id="icn-setting" class="float-right" (click)="onClickSavePatient()">
            <img src="assets/images/load-btn.png" class="img-responsive" alt="">
          </a>
        </div>
      </div>
...
..
.

TEST CASE

it('should show "Required" warning when compulsory field is empty', ()=>{
    const fixture = TestBed.createComponent(PatientDemographicsComponent);
    const app = fixture.debugElement.componentInstance;
    fixture.detectChanges();
    let firstNameEl = fixture.debugElement.query(By.css('#firstName'));
    let savePatientEl = fixture.debugElement.query(By.css('#icn-setting'));
    fixture.detectChanges();

    firstNameEl.nativeElement.value= "";
    fixture.detectChanges();
    savePatientEl.triggerEventHandler("click",null);
    fixture.detectChanges();
    expect(app.formErrors.firstName).toEqual('This field is required');

  });

Я использовал модель formErrors для сохранения сообщений об ошибках

component.ts

//function on submit

public onClickSavePatient() {
    this.setPatientDemographics();
    console.log(this.patientDemographicsForm);
    if (this.patientDemographicsForm.valid) {
      this.patientDemographics.name.middleName = this.patientDemographics.name.title = 'Mr';
      if (this.patientDemographics.id === undefined || this.patientDemographics.id  < 0) {
        this.store.dispatch(new PatientAction.AddPatient(this.patientDemographics));
      } else {
        this.store.dispatch(new PatientAction.UpdatePatient(this.patientDemographics));
      }
    } else {
      this.showFixIssues();
      this.checkUntouchedFields = true;
      this.formErrors = this.formService.validateForm(this.patientDemographicsForm, this.formErrors, this.checkUntouchedFields);
    }
  }

Карма показывает следующее сообщение при запуске этого теста,

Ожидается, что 'равно' Это поле обязательно для заполнения.

Надеюсь, я предоставил все, что нужно для понимания потока.Я только начал изучать юнит-тестирование, поэтому мне не хватает небольшой детали.