Angular jasmine测试无法触发使用fromEvent rxjs运算符创建的Observable [英] Angular jasmine test not able to trigger Observable created with fromEvent rxjs operator

问题描述

我有一个简单的案例。 Angular应用程序的标准 AppComponent 包含 ChildComponent ，它在自己的模块中定义 ChildModule 。

I have a simple case. The standard AppComponent of an Angular app contains a ChildComponent which is defined in its own module ChildModule.

ChildComponent 的模板非常简单

<div class="child" (click)="testClick($event)"></div>

ChildComponent 甚至更简单 testClick（event）只在控制台上记录消息的方法。

ChildComponent has an even simpler testClick(event) method that just logs a message on the console.

testClick(event) {
    console.log(event);
}

现在我想在 AppComponent <上构建测试/ code>模拟点击 ChildComponent 。

这是测试的代码

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let app: AppComponent;
  let child: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ChildModule ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.debugElement.componentInstance;
    child = fixture.debugElement.query(By.css('.child'));
    fixture.detectChanges();
  });

  it(`should create the child'`, async(() => {
    expect(child).toBeTruthy();
  }));

  it(`clicks on the child and the relative Observable emits`, async(() => {
    setTimeout(() => {
      child.triggerEventHandler('click', 'clicked');
    }, 100);

  }));

});

测试工作，特别是第二次测试打印点击控制台上的消息，正如预期的那样。

The tests work and in particular the second test prints the clicked message on the console, as expected.

现在我复杂了一点 ChildComponent 。我想使用 fromEvent 运算符和 ViewChild在点击事件上创建一个Observable 。

Now I complicate a bit ChildComponent. I want to create an Observable on the click event using the fromEvent operator and ViewChild.

因此代码变为

export class ChildComponent implements AfterViewInit {
  @ViewChild('child') private childElement: ElementRef;

  ngAfterViewInit() {
    const testClick$ = fromEvent(this.childElement.nativeElement, 'click');
    testClick$.subscribe(d => console.log('test click in child', d));
  }
}

我用 ng serve 我看到控制台上打印了2条消息，一条是 testClick 方法，另一条是订阅 testClick $ Observable。

I launch the development server with ng serve and I see 2 messages printed on the console, one by the testClick method and one by the subscription of the testClick$ Observable.

如果我现在运行与以前相同的测试，我希望在控制台上也能看到相同的两条消息。相反，我只看到 testClick 方法打印的消息。订阅的消息，即'测试点击子'，不会出现，这意味着Observable testClick $ child.triggerEventHandler（'click'，'clicked'）; 被执行时，>不会发出。

If I run now the same tests as before, I expect to see also the same two messages printed on the console. On the contrary I see only the message printed by the testClick method. The message of the subscription, i.e. 'test click in child', does not appear, which means that the Observable testClick$ does not emit when child.triggerEventHandler('click', 'clicked'); is executed.

如何我可以使用 fromEvent 创建的Observable在 jasmine 测试中工作吗？我做错了什么？

How can I make Observables created with fromEvent work in jasmine tests? What am I doing wrong?

推荐答案

最终我找到了一种方法来触发可以在 fromEvent RxJs的功能。

Eventually I found a way to fire events that can be used within the fromEvent function of RxJs.

该解决方案的灵感来自于这篇文章。

The solution has been inspired by this post.

想法是为了成为能够从DOM事件创建事件流，您必须在DebugElement包装的本机元素上使用方法 dispatchEvent 。

The idea is that in order to be able to create an event stream from a DOM event you have to use the method dispatchEvent on the native element wrapped by the DebugElement.

所以，而不是做

child.triggerEventHandler('click', 'clicked');

你必须使用类似的东西

child.nativeElement.dispatchEvent(new MouseEvent('click', {...});

这篇关于Angular jasmine测试无法触发使用fromEvent rxjs运算符创建的Observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！