角度5业力单元测试：失败：无法读取未定义的属性子组件属性（itgroup）

Question

我正在尝试为在子组件中有一些依赖关系的父组件方法编写测试用例。

我收到以下错误。

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

下面是我的代码 sn-p。

子组件。

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