title: Angular Unit Testing - How to fix 'Cannot read property "middle_name" of undefined' when initializing a component
body: <p>I am trying to create a simple 'it should create' unit test for one of my Angular components (the test generated by Angular CLI when generating the component). However, when running the test, I receive a <code>TypeError: Cannot read property 'middle_name' of undefined</code>. I didn't expect this error because the HTML is surrounded in an *ngIf.</p>
  
  <p>I tried to follow this question on stackoverflow: <a href="https://stackoverflow.com/questions/53086352/angular-testing-cannot-read-property-name-of-undefined">Angular testing Cannot read property &#39;name&#39; of undefined</a></p>
  
  <p>However the OP resolved the problem by surrounding his HTML in an *ngIf, which is what my code currently does. I suspect the problem is occurring because this is a child component and is conditionally rendered.</p>
  
  <p>form-submit-individual-success-component.ts:</p>
  
  <pre><code>it('should create', () =&gt; {
      expect(component).toBeTruthy();
  });
  </code></pre>
  
  <p>add-entity.ts:</p>
  
  <pre><code>onIndividualSubmit(clonedIndividualValues: Individual): void {
    this.entityService.addIndividual(clonedIndividualValues)
  .subscribe(individual =&gt; {
        this.formIsSubmitted = true;
        this.individualFormIsSubmitted = true;
        this.individualId = individual.id;
        this.individualFormData = individual;
      })
  }
  </code></pre>
  
  <p>add-entity.html:</p>
  
  <pre><code>&lt;app-add-individual-form *ngIf="selectedOption == 'Individual' &amp;&amp; !individualFormIsSubmitted" (individualServiceEmitter)="onIndividualSubmit($event)" [individualId]="individualId"&gt;&lt;/app-add-individual-form&gt;
  </code></pre>
  
  <p>add-individual-form.ts:</p>
  
  <pre><code>@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);
  }
  </code></pre>
  
  <p>add-individual-form.html:</p>
  
  <p></p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label for="middle_name"&gt;Middle Name(s)&lt;/label&gt;
    &lt;input type="text" class="form-control" id="middle_name" name="middle_name" formControlName="middle_name"
    #middle_name&gt;
    &lt;div *ngFor="let validation of validation_messages.middle_name"&gt;
      &lt;div *ngIf="individualForm.middle_name.hasError(validation.type) &amp;&amp; (individualForm.middle_name.dirty || individualForm.middle_name.touched)"
      class="alert alert-danger"&gt;
      {{validation.message}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label for="last_name"&gt;Last Name&lt;/label&gt;
    &lt;input type="text" class="form-control" id="last_name" name="last_name" formControlName="last_name" #last_name
    required&gt;
    &lt;div *ngFor="let validation of validation_messages.last_name"&gt;
      &lt;div *ngIf="individualForm.last_name.hasError(validation.type) &amp;&amp; (individualForm.last_name.dirty || individualForm.last_name.touched)"
      class="alert alert-danger"&gt;
      {{validation.message}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type="submit" class="btn btn-success" [disabled]="!addIndividualForm.valid"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>form-submit-individual-success.ts:</p>
  
  <pre><code>@Input() formData: Individual;
  public individualFormData: Individual;
  @Input() id: number;
  public individualId: number;
  public editIndividualBase = "/entity/edit";
  
  constructor() { }
  
  ngOnInit() {
    this.individualFormData = this.formData;
  }
  </code></pre>
  
  <p>form-submit-individual-success.html:</p>
  
  <pre><code> &lt;p&gt;First name: &lt;span&gt;{{individualFormData.first_name}}&lt;/span&gt;&lt;/p&gt;
   &lt;p *ngIf="individualFormData.middle_name"&gt;Middle name(s): &lt;span&gt;{{individualFormData.middle_name}}&lt;/span&gt;&lt;/p&gt;
   &lt;p&gt;Last name: &lt;span&gt;{{individualFormData.last_name}}&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>As described in the problem summary, I expect the <code>component</code> toBeTruthy (i.e. create successfully).</p>