OverlayPanel: Panel stays hidden and inaccessible in jest / testing-library setup

[angelo-v]

Describe the bug

We noticed this initially with the Dropdown component. In a jest test using testing library the options list does not show up when clicking in the Dropdown. We could reproduce it with a plain OverlayPanel, which has the same issue. When it should open it stays hidden with style "display:none" instead of showing up.

Test result:

Unable to find role="listbox"

But it is there:

<ul
  class="p-dropdown-items ng-star-inserted"
  id="pn_id_1_list"
  role="listbox"
>

The problem seems to be, that it is wrapped in a hidden overlay:

<div
  class="ng-tns-c3177733119-0 p-overlay p-component ng-star-inserted"
  [...]
  style="[...] display: none;[...]"
>

Environment

• angular 17.0.8
• primeng 17.3.1
• jest 29.4.1
• testing-library/angular 15.1.0
• testing-library/jest-dom 6.2.0

Reproducer

No response

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

jsdom

Steps to reproduce the behavior

1. Create a Cities component like in the basic example https://primeng.org/dropdown#basic
2. Add a label "City" to it
3. Write and execute a test like this

  it('can be opened', async () => {
    await render(CitiesComponent, {
      providers: [provideNoopAnimations()],
    });
    const select = screen.getByLabelText('City');
    await userEvent.click(select);
    expect(await screen.findByRole('listbox', {hidden: true})).toBeInTheDocument(); // this works
    expect(await screen.findByRole('listbox')).toBeInTheDocument(); // this fails
  });

Expected behavior

The overlay should be visible and the test should find the listbox

[mertsincan]

Thanks a lot for the detail description! I set a milestone and we'll check this issue before the milestone is released.

[cetincakiroglu]

Hi,

Could you please create a repo or stackblitz example so we can replicate and easily isolate the issue? By default, we're using karma and configuring a new test environment to replicate the issue is time-consuming since we're currently focused on passthrough and unstyled. Please tag me when the example is ready to investigate. Thanks a lot for reporting the issue.

Moving to 17.6.0 milestone until the example arrives.

[angelo-v]

Hi @cetincakiroglu here is the stackblitz example:

https://stackblitz.com/edit/stackblitz-starters-tvtf2l?file=README.md

It should be easily reproducable with that, but let me know if you have further questions.

[cetincakiroglu]

Hi @angelo-v ,

Thank you for the example, we are trying to identify the source of the problem, and this requires some more time since it doesn't happen with karma. To better understand the issue and to continue investigating, I am moving it to the 17.7.0 milestone.

[cetincakiroglu]

Hi,

We're investigating the issue, we've downloaded your example and it throws many unrelated errors with the test case. I've tried to reproduce the test in Karma with similar steps to yours. Interestingly, it works with Karma. It's a long shot but you can add a slight delay of a few milliseconds to the place where you are trying to find an element with the "option" role in the test environment you are using. You may be trying to find the option at the exact moment you click, and the overlay is not visible at that moment.

    it('all options should be visible', () => {
        fixture.componentInstance.options = [
            { label: 'New York', value: 'NY' },
            { label: 'Rome', value: 'RM' },
            { label: 'London', value: 'LDN' },
            { label: 'Istanbul', value: 'IST' },
            { label: 'Paris', value: 'PRS' }
        ];
        fixture.detectChanges();

        const containerEl = fixture.debugElement.query(By.css('.p-dropdown')).nativeElement;
        containerEl.click();
        const items = fixture.debugElement.query(By.css('.p-dropdown-items'));
        expect(items.nativeElement.children.length).toEqual(5);
    });

Moving it to the next milestone while investigating the issue.

[angelo-v]

Thanks for investigating! What unrelated errors are you speaking of? Running the example in stackblitz does not give me any unrelated errors.

It's a long shot but you can add a slight delay of a few milliseconds to the place where you are trying to find an element with the "option" role

This is implicitly done by using testing-libray findBy* method. The last test waits for a full second for the element to appear, but it never does.

containerEl.click();
const items = fixture.debugElement.query(By.css('.p-dropdown-items'));
expect(items.nativeElement.children.length).toEqual(5);

Your test only checks wether the items can be found in the dom, it does not test, whether they are actually accessible (visible). The latter is not the case. As you can see in my second test case (expect(await screen.findByRole('option', { hidden: true })).toBeVisible()), the options can be found, but they are not visible.

As you can see in the DOM output, they are placed inside a hidden (display: none) overlay:

<div
          aria-modal="true"
          class="ng-trigger ng-trigger-animation ng-tns-c2474639176-0 p-overlaypanel p-component ng-star-inserted"
          ng-reflect-ng-class="p-overlaypanel p-component"
          role="dialog"
          style="z-index: 1002; visibility: visible; display: none; transform-origin: top; top: 0px; left: 0px; --overlayArrowLeft: 0px; transform: translateY(0); opacity: 1;"
        >

[cetincakiroglu]

Hi,

Thanks for the feedback, we'll check this in the 17.10.0 again.

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,