+ )
+}
+
+test("loads content lazily and unmounts the component from the DOM", async () => {
+ const mock = jest.fn()
+ const utils = render()
// by default, content should not be visible
let content = screen.queryByTestId("content")
expect(content).not.toBeInTheDocument()
+ expect(mock).toHaveBeenCalledTimes(0)
// open the popover
fireEvent.click(utils.getByText(/open/i))
@@ -97,14 +144,61 @@ test("load content lazily", async () => {
const dialog = await utils.findByRole("dialog")
content = screen.queryByTestId("content")
- // content should now be visible
+ // content should now be in the DOM
expect(content).toBeInTheDocument()
+ expect(content).toBeVisible()
+ expect(mock).toHaveBeenCalledTimes(1)
+
+ // close the popover with escape
+ fireEvent.keyDown(dialog, { key: "Escape" })
+ expect(content).not.toBeInTheDocument()
+ expect(content).not.toBeVisible()
+
+ // ensure that when popover reopens, it also
+ // gets remounted
+ fireEvent.click(utils.getByText(/open/i))
+ await utils.findByRole("dialog")
+
+ content = screen.queryByTestId("content")
+ expect(content).toBeInTheDocument()
+ expect(content).toBeVisible()
+ expect(mock).toHaveBeenCalledTimes(2)
+})
+
+test("loads content lazily and persists the component in the DOM", async () => {
+ const mock = jest.fn()
+ const utils = render(
+ ,
+ )
+
+ // by default, content should not be visible
+ let content = screen.queryByTestId("content")
+ expect(content).not.toBeInTheDocument()
+ expect(mock).toHaveBeenCalledTimes(0)
+
+ // open the popover
+ fireEvent.click(utils.getByText(/open/i))
+
+ const dialog = await utils.findByRole("dialog")
+ content = screen.queryByTestId("content")
+
+ // content should now be in the DOM
+ expect(content).toBeInTheDocument()
+ expect(mock).toHaveBeenCalledTimes(1)
// close the popover with escape
fireEvent.keyDown(dialog, { key: "Escape" })
+ expect(content).toBeInTheDocument()
+ expect(content).not.toBeVisible()
+
+ // ensure that when popover reopens, it is
+ // not remounting
+ fireEvent.click(utils.getByText(/open/i))
+ await utils.findByRole("dialog")
- // content should still be visible
+ content = screen.queryByTestId("content")
expect(content).toBeInTheDocument()
+ expect(mock).toHaveBeenCalledTimes(1)
})
// For testing focus interaction, use another component with a focusable element inside.