angular 5 karma unit test: Failed: Cannot read property childcomponent property ( itgroup) of undefined

user_12935259 0
Viewed 1195

I am trying to write test cases for the parent component method which have some dependency in the child component.

I am getting following error.

Failed: Cannot read property 'itGroup' of undefined which is my child component property.

below are my code snippet.

child component.

child component:

---------------
----------------

interventionGroup: FormGroup;

 constructor() { }

  ngOnInit() {
    this.itGroup = new FormGroup({
      test1: new FormControl(''),
      test2: new FormControl(''),
    });
    }

parent component.

Parent Component mehod where i use the child component instance using view child
----------------------------
changeVal= false;
submitted() {
        this.isValidTemplate = this.dynamicTemplateComponent.itGroup.invalid;
        if (this.isValidTemplate) {
            //logic
        } else {
            //logic
        }
onChange(event){
this.changeval = true;
}        
        
test case for method which have the child component instance which is showing undefined:
---------------------------------------
  it('on submit hit service', async () => {
   

      component.onChange(event);
      component.changeval = true;
      component.submitted();
     const spy= spyOn(component, 'submitted');
      let button = fixture.debugElement.nativeElement.querySelector('#submitbutton');
      button.click();
      fixture.detectChanges();
      expect(component.submitted).toBeTruthy();

  });
<form [formGroup]="TemplateGroup" class="edjustMargin" style="margin-top:20px; width:700px">
      <div class="row">
        <div>
    <div class="col-sm-6">
      <label class="labelStyle ">dropdown:</label>
        <p-dropdown placeholder="Select val"  class="" [options]="Options" formControlName="dropdown" (onChange)="change($event)"></p-dropdown>
    </div>

<div *ngIf="changeVal">
<app-dynamic-template ></app-dynamic-template>
</div>
  
    <div  *ngIf="changeVal">          
    <button class="floating" id="submitbutton" type="submit" pButton  (click)="submitted()" label="Submit"></button>
    <button class="floating" *ngIf="fromPDialog" type="submit" pButton  (click)="cancelled()" label="Cancel"></button>
    <button class="floating" type="submit" pButton  (click)="resetClicked()" label="Clear"></button>
    </div>
  </form>

karma-jasmine angular asynchronous unit-testing javascript
1 Answers

Can you show me your whole test?

And to get a handle on your child component, make sure you put your child component in your declarations array.

import { ChildComponent } from 'childComponent';

...
let component: ThisComponet;
let childComponent: ChildComponent;
.....
declarations: [ChildComponent],
.....
component = fixture.componentInstance;
// to get a handle on the child component, you can select it By.directive
childComponent = fixture.debugElement.query(By.directive(ChildComponent)).componentInstance; 
// should have access to your childComponent public properties and methods now
user_73654610
Related