Angular component test cases getting error : Type Error : Cannot read property "contractno" of undefined

Question

While trying to inject default dependency required to run spec file error less getting an error like Type Error : Cannot read property "contractno" of undefined

/** Class userModel**/

export class UserModel {
  contractNo: string;
  firstName: string;
  lastName: string;
  phoneNo: string;
  emailAddress:string;
}

Here is the component file /**contactus component **/

    import {
      Component,
      OnInit,
      ViewChild,
      Pipe,
      PipeTransform
    } from "@angular/core;
    import { UserModel } from "../models/User-model.model";
    import { HttpClient } from "@angular/common/http";
    import { Router } from "@angular/router";
    import { ContactUsService } from "../service/contact-us.service";
    import { Subscription } from "rxjs";
  export class ContactUsComponent implements OnInit {
      public contactModel: UserModel; 
      constructor(
        private http: HttpClient,
        private router: Router,
        private contactusservice: ContactUsService
      ) {
      }
      ngOnInit() {
        this.loadDefaultUser();
      }
      loadDefaultUser() {
         this.charRemaining = 1000;
         this.contactusmodel = JSON.parse(sessionStorage.getItem("data"));       
      }
        }

Here is the component test case file /**contact-us-spec.ts **/

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { ContactUsComponent } from "./contact-us-component";
import { RouterTestingModule } from "@angular/router/testing";
import { DebugElement, Pipe, PipeTransform } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { NumberPipePipe } from "./number-pipe.pipe";
import { HttpClient } from "@angular/common/http";
import { HttpClientTestingModule } from "@angular/common/http/testing";
import { UserModel } from "../models/User-model.model";
import { ContactUsService } from "../service/contact-us.service:;

describe("ContactUsComponent", () => {
  let component: ContactUsComponent;
  let fixture: ComponentFixture<ContactUsComponent>;
  let debugElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactUsComponent, NumberPipePipe],
      imports: [RouterTestingModule, FormsModule, HttpClientTestingModule],
      providers: [ContactUsServices, UserModel ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PostLoginContactUsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthly();
  });
});

Answer 1

fixture.detectChanges(); trigger the rendering of the component. I bet in the HTML you use contactModel.contractno. Since the contactModel is never set, the test fails to render the component because of the described error.

The solution would be either setting the contactModel before fixture.detectChanges(); either adjusting the HTML in such a way, so that is called only if contactModel has value.