Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Popover content not visible in DOM during tests #13035

Closed
TheSecurityDev opened this issue Jan 9, 2025 · 2 comments
Closed

Popover content not visible in DOM during tests #13035

TheSecurityDev opened this issue Jan 9, 2025 · 2 comments
Labels
Bug Something is broken and not working as intended in the system. untriaged

Comments

@TheSecurityDev
Copy link

TheSecurityDev commented Jan 9, 2025 •
edited
Loading

Summary

I upgraded from Polaris v11 to v13. After I did this, one of my main tests broke because it's trying to find some content in a Popover that shows when a button is clicked.

I'm using react-testing-library with jest to do the tests. I'm also wrapping my test components with AppProvider from Polaris.

In the test I click the button that activates the popup with await userEvent.click(button) and then try to get the listbox within the popup with screen.getByRole. Previously everything worked fine, but now it can't find the content. When I output the code with screen.debug() or console.log(document.body.innerHtml), I can see some portals, but none of them have any content, unlike when I check in the browser. Actually the one with the corresponding aria-controls` property for the activator isn't listed.

I don't really know what to do, but I would like to be able to test opening the popup. I checked the tests here, but I didn't see any tests that tested that the popover was actually visible when active.

I'm hoping someone can point me in the right direction.

Expected behavior

The popover should be visible during tests.

Actual behavior

The test DOM doesn't include the popover content after clicking the button to make it visible. It was working in Polaris v11.

The test fails. See the output below.

View the test output 
TestingLibraryElementError: Unable to find an element with the text: Content. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div>
          <button
            aria-controls=":r0:"
            aria-expanded="true"
            aria-owns=":r0:"
            class="Polaris-Button Polaris-Button--pressable Polaris-Button--variantSecondary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter"
            data-state="open"
            tabindex="0"
            type="button"
          >
            <span
              class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium"
            >
              Popover
            </span>
          </button>
        </div>
        <div
          id="PolarisPortalsContainer"
        />
      </div>
    </body>

      17 |     expect(button).toHaveAttribute("aria-expanded", "true");
      18 |     // Check that the popover is open
    > 19 |     expect(screen.getByText("Content")).toBeInTheDocument();
         |                   ^
      20 |   });
      21 | });
      22 |

      at Object.getElementError (node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
      at Object.<anonymous> (src/Popover.test.tsx:19:19)

Steps to reproduce

Link to sandbox (Run pnpm test in the console.)

Are you using React components?

Yes

Polaris version number

13.9.2

Browser

Edge: Chromium (127.0.2651.74)

Device

Windows 11 10.0.22631
@TheSecurityDev TheSecurityDev added Bug Something is broken and not working as intended in the system. untriaged labels Jan 9, 2025
@TheSecurityDev
Copy link
Author

I think it might have something to do with mocking ResizeObserver in the tests.

@TheSecurityDev
Copy link
Author

Yes, it was partly related to the ResizeObserver. I solved it with the help of AI. Basically, I needed to also mock the sizes of the elements and the screen:

Mock ResizeObserver (I was already doing this):

// Mock ResizeObserver with a polyfill
import ResizeObserver from "resize-observer-polyfill";
globalThis.ResizeObserver = ResizeObserver;

Mock element offsets and client width:

// Mock element dimensions and positioning
Object.defineProperty(HTMLElement.prototype, "offsetParent", {
  get() {
    return this.parentNode;
  },
});

Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
  get() {
    return 100;
  },
});

Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
  get() {
    return 100;
  },
});

Object.defineProperty(HTMLElement.prototype, "clientWidth", {
  get() {
    return 100;
  },
});

// Mock getBoundingClientRect
HTMLElement.prototype.getBoundingClientRect = function () {
  return {
    width: 100,
    height: 100,
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    x: 0,
    y: 0,
    toJSON: () => {},
  };
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something is broken and not working as intended in the system. untriaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TheSecurityDev