title: Verify that a component with data binding is created | Angular | Jasmine | Unit Test
body: <p>Consider the following code segment...</p>
  
  <p>Unit Test:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { HttpClientTestingModule } from '@angular/common/http/testing';
  import { AppComponent } from './search.component';
  ...
  
  describe('AppComponent', () =&gt; {
     let component: AppComponent;
     let fixture: ComponentFixture&lt;AppComponent&gt;;
  
     beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
           imports: [
              HttpClientTestingModule,
              ...
           ],
           declarations: [
             AppComponent
           ]
        }).compileComponents();
     }));
  
     beforeEach(() =&gt; {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
       fixture.detectChanges();
     });
  
     it('should create app component', () =&gt; {
         expect(component).toBeTruthy();
     });
  });
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Person } from '../../models/person';
  import { PersonService } from '../../services/person.service';
  ...
  
  @Component({
     selector: 'app-root',
     template: `Hello {{person.name}}`
  })
  
  export class AppComponent {
     person: Person;
  
     constructor(private personService: PersonService) { }
  
     ngOnit() {
        this.getPerson();
     }
  
     public getPerson(): void {
        this.personService.getPerson()
           .subscribe(response =&gt; this.person = response)
     }
  }
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code>export class Person {
    id: number;
    name: string;
    ...
  }
  </code></pre>
  
  <p>When I run the 'should create app component' unit test I get the following error:
  TypeError: Cannot read property 'name' of undefined</p>
  
  <p>Have tried spying and setting field as follows:</p>
  
  <pre><code>it('should create app component', () =&gt; {
     spyOn(component, 'person').and.returnValue(returnDummyPerson());
     expect(component).toBeTruthy();
  });;
  
  function returnDummyPerson(): Person {
     let dummyPerson = new Person();
     dummyPerson .Id = 1;
     dummyPerson .CatalogueName = 'John Doe';
     return dummyPerson;
  };
  </code></pre>
  
  <p>That did not work. Please advise on how to tackle this problem.</p>