javascript - Angular 5 karma 单元测试 : Failed: Cannot read property childcomponent property ( itgroup) of undefined

Question

我正在尝试为父组件方法编写测试用例，该方法对子组件有一定的依赖性。

我遇到以下错误。

失败:无法读取未定义的属性“itGroup”，这是我的子组件属性。

下面是我的代码片段。

子组件。

child component:

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

interventionGroup: FormGroup;

 constructor() { }

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

父组件。

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>

Answer 1

你能给我看看你的整个测试吗？

要获得子组件的句柄，请确保将子组件放入 declarations 数组中。

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