Угловое модульное тестирование - Как исправить 'Не удается прочитать свойство "middle_name" из undefined "при инициализации компонента

Question

Я пытаюсь создать простой модульный тест «он должен создать» для одного из моих компонентов Angular (тест, сгенерированный Angular CLI при генерации компонента). Однако при запуске теста я получаю TypeError: Cannot read property 'middle_name' of undefined. Я не ожидал этой ошибки, потому что HTML заключен в * ngIf.

Я пытался ответить на этот вопрос в stackoverflow: Угловое тестирование Невозможно прочитать свойство 'имя' из неопределенного

Однако ОП решил проблему, заключив свой HTML в * ngIf, что и делает мой код в настоящее время. Я подозреваю, что проблема возникает, потому что это дочерний компонент, который отображается условно.

форма подать-индивидуальный неуспех-component.ts:

it('should create', () => {
    expect(component).toBeTruthy();
});

Надстройка entity.ts:

onIndividualSubmit(clonedIndividualValues: Individual): void {
  this.entityService.addIndividual(clonedIndividualValues)
.subscribe(individual => {
      this.formIsSubmitted = true;
      this.individualFormIsSubmitted = true;
      this.individualId = individual.id;
      this.individualFormData = individual;
    })
}

надстройка entity.html:

<app-add-individual-form *ngIf="selectedOption == 'Individual' && !individualFormIsSubmitted" (individualServiceEmitter)="onIndividualSubmit($event)" [individualId]="individualId"></app-add-individual-form>

надстройка Индивидуально-form.ts:

@Output() individualServiceEmitter = new EventEmitter();
onIndividualSubmit(value: any): void {

  value.eod_screening === 'Yes' ? value.eod_screnning = 1 : value.eod_screening = 0;

  const clonedIndividualValues = Object.assign({ type: 'Individual', screening_status: 'Awaiting Submission' }, value)

  this.individualServiceEmitter.emit(clonedIndividualValues);
}

надстройка Индивидуально-form.html:

<div class="form-group">
  <label for="middle_name">Middle Name(s)</label>
  <input type="text" class="form-control" id="middle_name" name="middle_name" formControlName="middle_name"
  #middle_name>
  <div *ngFor="let validation of validation_messages.middle_name">
    <div *ngIf="individualForm.middle_name.hasError(validation.type) && (individualForm.middle_name.dirty || individualForm.middle_name.touched)"
    class="alert alert-danger">
    {{validation.message}}
    </div>
  </div>
</div>

<div class="form-group">
  <label for="last_name">Last Name</label>
  <input type="text" class="form-control" id="last_name" name="last_name" formControlName="last_name" #last_name
  required>
  <div *ngFor="let validation of validation_messages.last_name">
    <div *ngIf="individualForm.last_name.hasError(validation.type) && (individualForm.last_name.dirty || individualForm.last_name.touched)"
    class="alert alert-danger">
    {{validation.message}}
    </div>
  </div>
</div>

<button type="submit" class="btn btn-success" [disabled]="!addIndividualForm.valid">Submit</button>

форма подать-Индивидуально-success.ts:

@Input() formData: Individual;
public individualFormData: Individual;
@Input() id: number;
public individualId: number;
public editIndividualBase = "/entity/edit";

constructor() { }

ngOnInit() {
  this.individualFormData = this.formData;
}

форма подать-Индивидуально-success.html:

 <p>First name: <span>{{individualFormData.first_name}}</span></p>
 <p *ngIf="individualFormData.middle_name">Middle name(s): <span>{{individualFormData.middle_name}}</span></p>
 <p>Last name: <span>{{individualFormData.last_name}}</span></p>

Как описано в кратком описании проблемы, я ожидаю, что component toBeTruthy (т.е. успешно создан).