测试 Jasmine 中的 Ionic Toast 按钮单击

Question

在测试时，我无法查询里面的 Toast 按钮之一。 它只是返回null 。 该类已设置，这就是用于查询的内容。

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类被设置为所需的按钮。

我很难过，我相信也许测试是在创建 Toast 元素之前运行的。

这是测试结果，您可以看到按钮正在添加适当的类：

Answer 1

这是一个非常奇怪的问题。

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

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

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

如果上述方法不起作用，请尝试以下方法（按文档查询）：

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

如果上述方法均无效，则可能是元素在稍后的时间点异步绘制。

您可以使用此答案来帮助您执行以下操作：

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

这应该等到.retry-button在 DOM 中，然后再继续。

Answer 2

问题是 Toast 按钮实际上是 shadow 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',