Example spec for elements which are added/removed from the DOM on button click (dialog modal window)

[RVledder]

I'm currently working on a project with a material dialog component.

What I find challenging is:

1. Dialog element is not rendered in the container exported from the testing library render method

Typically you'd use:

const { container } = render(Component, ...);

That container contains all the DOM elements you want to test against. But Angular places an empty div with the class 'cdk-overlay-container' at the bottom of the body tag. When triggering that element so that it opens that div gets the content you'd like to show, and the div itself get's a position fixed with a z-index of 1000.

This means that it does not pop up in the container element returned from the render method. How do you assert against it? For now I'm using document.querySelector('.cdk-overlay-container'). Also because it has no role or other attribute to use in a query method of testing library. And is it even correct to use document.querySelector?

2. Asserting on the DOM updates

Test cases:

• modal should show when a user clicks on the 'trigger' button.
• modal should return some function when the user clicks on the 'ok' button in the modal
• modal should hide when a user clicks on the 'ok' button in the modal
• modal should hide when the user clicks on the 'cancel' button in the modal
• modal should hide when the user clicks on the backdrop

I'd be interested to see a best in class example for such a component. Perhaps others as well?

[timdeschryver]

The best practices has changed over time, we don't encourage using the container of the component anymore.
Testing Library provides screen, which has all the functionality of container, but has better ergonomics, and it also contains the whole DOM.

The examples use screen, so you can take a look there for inspiration.

It would look as follows:

import { screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/angular'

test('opens and closes the dialog', () => {
  await render(MyComponent)

  fireEvent.click(screen.getByRole('button', { name: /open dialog/i })

  await screen.findByRole('dialog')

  fireEvent.click(screen.getByRole('button', { name: /close dialog/i })
  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
})

[RVledder]

Thank you for your reply. So you'd have to query each time?

I.e. this does not work:

  await render(MyComponent)

  fireEvent.click(screen.getByRole('button', { name: /open dialog/i })

  const modal = await screen.findByRole('dialog');
  expect(modal).toBeTruthy();

  fireEvent.click(screen.getByRole('button', { name: /close dialog/i })
  await waitForElementToBeRemoved(() => modal));

but this does:

  await render(MyComponent)

  fireEvent.click(screen.getByRole('button', { name: /open dialog/i })

  await screen.findByRole('dialog')

  fireEvent.click(screen.getByRole('button', { name: /close dialog/i })
  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));

That's interesting.

[RVledder]

@timdeschryver So how would you use 'querySelector' method without the container?

I guess that's just not recommended. It's just that for the material dialog component, I don't think it's possible to target the backdrop element differently without the 'querySelector' method.

[timdeschryver]

@StudioSpindle I added an example in #175 it also contains a test with the backdrop.
Can you take a look please?

[RVledder]

Great! Interesting approach.

On line 27 and 47 the render code is duplicated. Especially with imports/declarations this is quite cumbersome if it's a complexer component.

I've been using a setup() function (borrowed from mr Dodds).

Is that something you do also?
Or are there some caveats using such a function? I've been experiencing a flakey test where the modal is already opened sometimes but other times isn't.

[timdeschryver]

@StudioSpindle we're using setup functions on the project that I'm working on.
The tests in this repo don't follow pattern that because I find it easier to read/understand when there are no abstractions.

[github-actions]

🎉 This issue has been resolved in version 10.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀