False positives handling

[laialopezz]

Hello everyone 😄 !

For some time now I have been wondering how I should asynchronously test elements affected by the shadowRoot.
For positive cases there is no problem but I wonder what would be the best way to test when an element, for example, has not been rendered in the DOM.

Here I attached is an example of the problem:

describe('False positives in tests', () => {
 it('should show the feature button', async () => {
  const featureItemButton = await shadowScreen.findByShadowRole('button', { name: featureItemSelector });

  expect(featureItemButton).toBeInTheDocument();
 });

 it('should NOT show any feature button', async () => {
  const buttons = await shadowScreen.findAllByShadowRole('button');
  const featureItemButton = buttons.find((button) => button.innerHTML.includes(featureItemSelector));

  expect(featureItemButton).toBeFalsy();
  });
}); 

The second test I would like to make it fail but I can't find the way because it only renders the <ShadowRoot> in the first button.
Debugging we also noticed that the <ShadowRoot> of the 'featureItemSelector' is not rendered.

If I query by test-id or aria-label (which in this case I can't do it because it wouldn't be correct and with the aria-labelledby I can't do the query) the first test works and the second one fails but that is not the way I want to learn how to test it because I would be adding extra things in my code to make it work...

We were able to query the button and make the second test fail properly this way but if we change our custom button selector in the future, this is not going to work:
deepQuerySelector(document, 'our-custom-button-selector[text="featureItemButton"]');

Has anyone had the same problem or have any idea?
Thank you very much in advance!

[KonnorRogers]

Woah! first off didn't even realize discussions existed on this repo!

Secondly, based on a quick reading of this: https://testing-library.com/docs/guide-disappearance/#waiting-for-disappearance

It appears there's two ways to handle this based on your first test.

it('should show the feature button', async () => {
  const featureItemButton = await shadowScreen.findByShadowRole('button', { name: featureItemSelector });

  expect(featureItemButton).toBeInTheDocument();
});

it('should NOT show any feature button', async () => {
  // Wait for the element to exist.
  await shadowScreen.findByShadowRole('button', { name: featureItemSelector });
  expect(featureItemButton).toBeInTheDocument();
  
  // do stuff to remove the element.
  
  // Wait for element to be removed
  // This uses a mutationObserver so may not work. See below for other option.
  await waitForElementToBeRemoved(() => shadowScreen.queryByShadowRole('button', { name: featureItemSelector }))
 
  // This one may be slightly less performant according to docs, but should be more accurate.
  await waitFor(() => {
    expect(shadowScreen.queryByShadowRole('button', { name: featureItemSelector })).not.toBeInTheDocument()
  })
});

Let me know if that helps get you unblocked!

[laialopezz]

Hello @KonnorRogers 😃 Thank you very much for the response.

What I wanted is to make fail the should NOT show any feature button test case. I tried also your suggestions but they passed well.
The thing is that the feature button is always visible in the DOM so the not.toBeInTheDocument should fail but for any reason the <ShadowRoot> is not rendered sometimes and that's why the tests work well.

Why does this happen? Is it some internal management of the library?

[KonnorRogers]

@laialopezz do you have a reproduction by chance?

As for the shadowRoot, this library doesn't do any management of shadowRoot rendering. It's purely based on the lifecycle of whatever element is rendering the shadowRoot so it may just be based on the current rendering phase of your web component.

[laialopezz]

Here's an example of how it looks the <ShadowRoot/> in multiple cases:

🔴 First example:

Test:

const featureItemButton = await shadowScreen.findByShadowRole('button', { name: featureItemSelector });

expect(featureItemButton).toBeInTheDocument(); <-- SUCCEED and should succeed

Debugged shadow DOM output:

   <custom-button text="Highlight">
    <ShadowRoot> <--- SHADOW ROOT IS RENDERED
     <button>
      <div>
       <span>
        Highlight
       </span>
       </div>
      </button>
    </ShadowRoot>
   </custom-button>

🔴 Second example:

Test:

const buttons = await shadowScreen.findAllByShadowRole('button');
const featureItemButton = buttons.find((button) => button.innerHTML.includes(featureItemSelector));

expect(featureItemButton).toBeFalsy(); <-- SUCCEED but it should fail

Debugged shadow DOM output:

   <custom-button text="Highlight">
    <ShadowRoot /> <-- SHADOW ROOT IS NOT FULL RENDERED
   </custom-button>

🔴 Third example:

Test:

 const button = deepQuerySelector(document, 'custom-button[text="Highlight"]');
 expect(button).toBeFalsy(); <--- FAILS as it should

Debugged shadow DOM output:

   <custom-button text="Highlight">
    <ShadowRoot /> <-- SHADOW ROOT IS NOT FULL RENDERED
   </custom-button>

Do you have any idea?

[KonnorRogers]

Okay yes I see now!

so the problem is that findAllBy won't wait for the rendering to complete I believe.

what you probably want to do is something like this:

let featureItemButton 

await waitFor(() => {
  const buttons = await shadowScreen.findAllByShadowRole('button');

  featureItemButton = buttons.find((button) => button.innerHTML.includes(featureItemSelector)))

  // this should wait for featureItemButton HTML to exist, so then the following test will fail.
  expect(featureItemButton).toBeTruthy()
})

expect(featureItemButton).toBeFalsy();

the truth is, it largely depends on the library of the webComponent.

for example, if your web component is using Lit, there's an away el.updateComplete you could wait for. Or usually a simple setTimeout is enough to wait for the shadow dom to render as long as the component isn't doing anything funky.

[laialopezz]

thank you very much for your help Konnor 🙇

I still have the question of and how would you ensure that the button is NEVER visible in the UI in this case? because the <ShadowRoot> is not always rendered.

I think that in order to avoid false negatives, I will end up using a data-testid.