Angular 6，如何在子组件上测试父发射器？答案

【问题标题】：Angular 6, How test parent emitter on child component?Angular 6，如何在子组件上测试父发射器？
【发布时间】：2018-12-19 22:29:56
【问题描述】：

我有一个标签组件作为其子组件的包装器，包装器组件发出状态（打开或关闭）和每个标签的索引，在每个子组件上我注入包装器组件以访问发射器。

所以基本上我正在尝试从我的子组件测试文件上的包装组件订阅发射器：

it(`it should have a 'toggle()' function that close/open the tab and then emits the tab status`, (emitted) => {

    fixture = TestBed.createComponent(AccordionTabComponent);
    const compiled = fixture.componentInstance;

    compiled.toggle(); // -> toggle function trigger the emit

    const data = {
      tabIndex: compiled.tabIndex,
      isOpen: compiled.isOpen
    }; // -> I get the current data from the child component to compare it with the emitted data.

    compiled.accordionRef.open.subscribe(tabEmmited => {
      console.log('tabEmmited: ', tabEmmited);
      expect(JSON.stringify(data)).toBe(JSON.stringify(tabEmmited));
      emitted();
    });

    fixture.detectChanges();    
});

但看起来订阅从未发生，因为“订阅”中的“日志”从不打印任何内容，这也会导致此错误：

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

这是我的组件中的一些代码，用于获取更多上下文：

包装组件：

 export class AccordionComponent implements OnInit {

  @ContentChildren(forwardRef(() => AccordionTabComponent)) public childrenTabs: QueryList<AccordionTabComponent>;
  @Output() open: EventEmitter<{}> = new EventEmitter(); // -> Parent emitter.
 }

标签组件：

    export class AccordionTabComponent implements OnInit {
        accordionRef: AccordionComponent; -> Wrapper Component Ref
        tabIndex: number;
        isOpen: boolean;

        constructor(
          @Inject(AccordionComponent) accordionContainer: AccordionComponent -> Wrapper component injected
      ) {
            this.accordionRef = accordionContainer;
          }

      // Show/Hide tab
        toggle(): void {
          this.isOpen = !this.isOpen;
          this.accordionRef.open.emit({tabIndex: this.tabIndex, isOpen: this.isOpen});
        }
     }

【问题讨论】：

您在订阅发射器之前发射。因此，当您订阅时，该事件已经发出。
谢谢，现在测试运行良好。
也许尝试先订阅，然后toggle？

标签： angular unit-testing jasmine subscription eventemitter

【解决方案1】：

您应该在代码实际发出事件发射器之前订阅它。以免错过活动。

it(`it should have a 'toggle()' function that close/open the tab and then emits the tab status`, (emitted) => {
    fixture = TestBed.createComponent(AccordionTabComponent);
    const compiled = fixture.componentInstance;

    //subscribe before emitting
    compiled.accordionRef.open.subscribe(tabEmmited => {
          expect(JSON.stringify(data)).toBe(JSON.stringify(tabEmmited));
    });

    compiled.toggle(); // -> Call the method that actually emits it

    ..........

    fixture.detectChanges();    
});

【讨论】：