在 Jasmine 中测试 Ionic Toast 按钮点击

Question

我在测试时无法查询内部的 Toast 按钮之一。它只是 returns null。 class 已设置，这就是用于查询的内容。

it('should make a call to retrieval method on retry', async () => {
      spyOn(component, 'retrieveEntry');

      await component.retryRetrieval();
      fixture.detectChanges();

      await fixture.whenStable();

      const retryButton = fixture.debugElement.query(By.css('.retry-button'));
      retryButton.nativeElement.click();
      fixture.detectChanges();

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

在测试结果中，我可以看到正在创建 toast，.retry-button 的 class 被设置为所需的按钮。

我很难过，我相信可能运行在创建 Toast 元素之前进行测试。

这是测试结果，您可以看到该按钮已添加了适当的 class:

Answer 1

这是一个很奇怪的问题。

难道 HTML 元素不在 fixture.debugElement 上，而是在文档上？

尝试以下操作（通过 nativeElement 查询）：

const retryButton = fixture.nativeElement.querySelector('.retry-button');
retryButton.click();

如果上述方法无效，请尝试以下方法（按文档查询）：

const retryButton = document.querySelector('.retry-button');
retryButton.click();

如果上述 none 有效，则可能是元素在稍后的某个时间点被异步绘制。

您可以使用此来帮助您可以做的事情：

await waitUntil(() => !!document.querySelector('.retry-button'));

应该等到 .retry-button 在 DOM 中才能继续。

Answer 2

问题是 Toast 按钮实际上是阴影的一部分 DOM。我能够通过访问正确的影子 DOM:

来找到一个可行的解决方案

it('should make a call to retrieval method on retry', async () => {
      spyOn(component, 'retrieveEntry');

      await component.retryRetrieval();
      fixture.detectChanges();

      const host = document.getElementById('retry-toast');
      const root = host.shadowRoot;
      const retryButton = root.querySelector('.retry-button') as HTMLElement;

      retryButton.click();
      fixture.detectChanges();

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

我在ToastController中htmlAttributes属性也设置了id，保证一致性：

const toast = await this.toastController.create({
      message: 'An error occurred retrieving entry.',
      htmlAttributes: {
        id: 'retry-toast'
      },
      color: 'danger',

在 Jasmine 中测试 Ionic Toast 按钮点击

Testing Ionic Toast button click in Jasmine

testing

jasmine

karma-runner

ionic-framework

angular