Как проверить дочерний компонент @output

Question

Я хотел бы проверить дочерний компонент @output в angular2.Я хочу использовать этот фиктивный дочерний компонент @output, чтобы активировать функцию родительского компонента и проверить ее.

Выполнить макет компонента и протестировать весь асинхронный метод.

<wizard-quick-search-page *ngIf="initSearchPanel" [createUserAttributes]="createUserAttributes" [existingUserAttributes]="existingUserAttributes" (edit)="showEditUserPanel($event)"
  (create)="showCreateUserPanel($event)">
</wizard-quick-search-page>

@Component({
  selector: 'wizard-quick-search-page',
  template: '<button class="quick-search-page-submit" (click)="onClick()">Create</button>'
})
class MockQuickSearchPageComponent {
  @Output() public create: EventEmitter<any> = new EventEmitter<any>();
  public onClick(): void {
    console.log('call create');
    this.create.emit(true);
  }
}

fdescribe('AddUserComponent', () => {
  let component: AddUserComponent;
  let fixture: ComponentFixture<AddUserComponent>;
  let mockQuickSearchComponent: MockQuickSearchPageComponent;
  let mockQuickSearchComponentFixture: ComponentFixture<MockQuickSearchPageComponent>;
  let createButton: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: Language, useClass: MockLanguage }
      ],
      declarations: [
        AddUserComponent,
        MockQuickSearchPageComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AddUserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('quickSearchComponent', () => {
    beforeEach(() => {
      mockQuickSearchComponentFixture = TestBed.createComponent(MockQuickSearchPageComponent);
      mockQuickSearchComponent = mockQuickSearchComponentFixture.componentInstance;
      mockQuickSearchComponentFixture.detectChanges();

      createButton = mockQuickSearchComponentFixture.debugElement.query(By.css('button.quick-search-page-submit'));
    });

    it('should create', () => {
      expect(mockQuickSearchComponent).toBeTruthy();
    });

    it('should open create a new user panel', fakeAsync(() => {
      spyOn(component, 'showCreateUserPanel');
      createButton.triggerEventHandler('click', null);
      tick();
      mockQuickSearchComponentFixture.detectChanges();
      expect(component.showCreateUserPanel).toHaveBeenCalled();
    }));
  });
});

Родительский компонентФункция component.showCreateUserPanel не была вызвана

Answer 1

Если вы хотите проверить, как родитель и потомок общаются друг с другом, вам не следует создавать изолированный экземпляр MockQuickSearchPageComponent, а использовать экземпляр, инициализированный в родительском компоненте.

Текущий тест

AddUserComponent  MockQuickSearchPageComponent

В вашей реализации они ничего не знают друг о друге.

TestBed.createComponent (MockQuickSearchPageComponent); создает новое дерево компонентов с MockQuickSearchPageComponent в качестве корневого компонента

Как это должно быть сделано

 AddUserComponent  
       ||
       \/
MockQuickSearchPageComponent

Теперь MockQuickSearchPageComponent является дочерним элементом AddUserComponent и может прослушивать любые события, исходящие от этого дочернего компонента.

Это можно сделать с помощью fixture.debugElement.query(By.directive(MockQuickSearchPageComponent):

describe('quickSearchComponent', () => {
  beforeEach(() => {
    fixture.componentInstance.initSearchPanel = true;
    fixture.detectChanges();

    const childDirQueryResult = 
             fixture.debugElement.query(By.directive(MockQuickSearchPageComponent));

    mockQuickSearchComponent = childDirQueryResult.componentInstance;

    createButton = childDirQueryResult.query(By.css('button.quick-search-page-submit'));
  });

  it('should create', () => {
    expect(mockQuickSearchComponent).toBeTruthy();
  });

  it('should open create a new user panel', () => {
    spyOn(component, 'showCreateUserPanel');
    createButton.triggerEventHandler('click', null);

    expect(component.showCreateUserPanel).toHaveBeenCalled();
  });
});

Пример Plunker

Answer 2

Я создал два компонента и обработал событие вывода из дочернего компонента. Вы можете сослаться на рабочий пример здесь

app.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
itemValue:number;
  name = 'Angular';
  ngOnInit(){
    this.itemValue=123;
  }
  showCreateUserPanel(value){
   console.log('showCreateUserPanel executed value',value);
  }
  showEditUserPanel(value){
   console.log('showEditUserPanel executed value',value);
  }
}

app.component.html

<p>
  parent component.
</p>
<app-child-component *ngIf="itemValue" [item]="itemValue" (createItem)="showCreateUserPanel($event)" (editItem)="showEditUserPanel($event)"></app-child-component>

ребенок-component.ts

import { Component, OnInit,Input ,Output,EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent implements OnInit {
  @Input() item: any;
    @Output() createItem = new EventEmitter();
    @Output() editItem = new EventEmitter();
  constructor() { }

  ngOnInit() {
   console.log('item received',this.item);
  }
  create(){
      this.createItem.emit('123');
  }
   edit(){
      this.editItem.emit('123');
  }

}

ребенок-component.html

<p>
  {{item}} received in child component.
  <button class="quick-search-page-submit" (click)="create()">Create</button>
   <button class="quick-search-page-submit" (click)="edit()">Edit</button>
</p>