如何测试子组件@output

Question

我想在 angular2 中测试一个子组件@output。我想使用这个模拟子组件@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 示例