title: Angular testing Cannot read property 'name' of undefined
body: <p>I've got a ModalComponent which accepts some properties from parent via @Input.</p>
  
  <p>That causes the problem with testing</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'name' of undefined</p>
  </blockquote>
  
  <p>Name is being used in ngOnInit and should come from <code>@Input displayeddata</code>.</p>
  
  <p>How do I pass it in my unit test?</p>
  
  <p>Currently my test looks so</p>
  
  <pre><code>beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [ModalComponent, FilterComponent],
              imports: [ReactiveFormsModule, TranslateModule]
          })
              .compileComponents();
      }));
  
      beforeEach(async () =&gt; {
      fixture = TestBed.createComponent(ModalComponent);
      component = fixture.componentInstance;
      component.displayeddata = {
          name: 'One component',
          caption: 'Caption',
          componentName: 'TextareaComponent'
      };
      fixture.detectChanges();
  });
  
  it('should create', async () =&gt; {
      fixture.detectChanges();
      fixture.whenStable().then(() =&gt; {
          expect(component).toBeTruthy();
      });
  });
  </code></pre>
  
  <p>That is the one test for my component and fails.</p>
  
  <h2>Update #1</h2>
  
  <p>Here is what I get on <code>console.log(this.displayeddata);</code></p>
  
  <pre><code>Object
  caption: "Caption"
  component: "TextareaComponent"
  name: "One component"
  </code></pre>
  
  <p>I also changed my code a bit (updated code) and now getting a new error <code>TypeError: Cannot read property 'caption' of undefined</code></p>
  
  <h2>Update #2</h2>
  
  <p>modal.component.ts</p>
  
  <pre><code>export class ModalComponent implements OnInit {
  @Input() showenpunctsnow;
  @Input() displayeddata;
  @Output() ComponentParametrsInputs: FormGroup = this.fb.group({
          name: ['', Validators.required],
          caption: ['', Validators.required],
          component: ['']
      });
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
  
          console.log(this.displayeddata);
  
          this.ComponentParametrsInputs = this.fb.group({
              name: [this.displayeddata.name, Validators.required],
              caption: [this.displayeddata.caption, Validators.required],
              component: [this.displayeddata.componentName]
          });
      }
  </code></pre>