Testing Toast button click in Jasmine not working

I am unable to query for one of the Toast buttons inside while testing. It simply returns null . The class is set, and that is what is being used to query.

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();
});

In the test results I can see the toast being created, with the class of .retry-button being set to the desired button.

I am stumped, I believe that maybe the tests are being run before the Toast elements are being created.

Here’s the test result, as you can see the button is being added with the appropriate class:

So the button you’re trying to reach is actually within the shadowDOM for the toast component. So you would need your test to pierce the shadow dom to get the inner button.

I see - is there an example of how one might do that using the normal testing tools? Jasmine, etc.

Thank you @mhartington for leading me in the right direction, I was able to come to a solution:

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();
    });

I set the id in the ToastController:

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