angular 5 модульный тест кармы: Ошибка: не удается прочитать свойство childcomponent свойство (itgroup) из неопределенного - PullRequest
Новая
       4

angular 5 модульный тест кармы: Ошибка: не удается прочитать свойство childcomponent свойство (itgroup) из неопределенного

2 голосов
/ 11 марта 2020

Я пытаюсь написать тестовые случаи для метода родительского компонента, которые имеют некоторую зависимость от дочернего компонента.

Я получаю следующую ошибку.

Ошибка: не удается прочитать свойство 'itGroup' из undefined, который является моим дочерним компонентом.

ниже - мой фрагмент кода.

дочерний компонент. 

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>

1 Ответ

2 голосов
/ 11 марта 2020

Можете ли вы показать мне весь свой тест?

И чтобы получить указатель на свой дочерний компонент, убедитесь, что вы поместили свой дочерний компонент в свой массив 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
...