diff --git a/src/components/logOut/index.test.tsx b/src/components/logOut/index.test.tsx index 8c9451e2..e6b7b2c8 100644 --- a/src/components/logOut/index.test.tsx +++ b/src/components/logOut/index.test.tsx @@ -20,7 +20,7 @@ */ import * as React from "react"; -import { render, waitFor } from "@testing-library/react"; +import { render, act } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { @@ -37,40 +37,54 @@ jest.mock("@inrupt/solid-client-authn-browser"); const onLogout = jest.fn(); const onError = jest.fn(); -const session = { - info: { isLoggedIn: false }, - on: jest.fn(), -} as any; - +const sessionPromise = new Promise((resolve) => resolve(null)); beforeEach(() => { jest.resetAllMocks(); - (getDefaultSession as jest.Mock).mockReturnValue(session); - (handleIncomingRedirect as jest.Mock).mockResolvedValueOnce(null); + (getDefaultSession as jest.Mock).mockReturnValue({ + info: { isLoggedIn: false }, + on: jest.fn(), + }); + (handleIncomingRedirect as jest.Mock).mockReturnValue(sessionPromise); }); -describe(" component snapshot test", () => { - it("matches snapshot", () => { - const documentBody = render( - - - - ); +/** + * Used to render the component and wait for the subsequent SessionProvider + * async loading flow to finish. Used to prevent `act` warnings from occurring. + */ +const renderLogout = async ( + props: React.ComponentProps +) => { + const wrapper: React.FC = ({ children }) => ( + {children} + ); + const testingUtils = render( + , + { wrapper } + ); + + await act(async () => { await sessionPromise }); + + return testingUtils; +}; + +describe(" component snapshot test", () => { + it("matches snapshot", async () => { + const documentBody = await renderLogout({ onLogout, onError }); const { baseElement } = documentBody; + expect(baseElement).toMatchSnapshot(); }); }); describe(" component visual testing", () => { - it("Renders child element", () => { - const { getByText } = render( - - -
Custom child element
-
-
- ); + it("Renders child element", async () => { + const { getByText } = await renderLogout({ + onLogout, + onError, + children:
Custom child element
, + }); expect(getByText("Custom child element")).toBeTruthy(); }); @@ -79,12 +93,7 @@ describe(" component visual testing", () => { describe(" component functional testing", () => { it("fires the onClick function and calls onLogout", async () => { const user = userEvent.setup(); - - const { getByText } = render( - - - - ); + const { getByText } = await renderLogout({ onLogout, onError }); await user.click(getByText("Log Out")); @@ -94,16 +103,9 @@ describe(" component functional testing", () => { it("fires the onKeyPress function if enter is pressed", async () => { const user = userEvent.setup(); + const { getByText } = await renderLogout({ onLogout, onError }); - const { getByText } = render( - - - - ); - - // Focus the button getByText("Log Out").focus(); - await user.keyboard("{Enter}"); expect(logout).toHaveBeenCalledTimes(1); @@ -112,16 +114,9 @@ describe(" component functional testing", () => { it("does not fire the onKeyPress function if a non-enter button is pressed", async () => { const user = userEvent.setup(); + const { getByText } = await renderLogout({ onLogout, onError }); - const { getByText } = render( - - - - ); - - // First focus the button, then press enter: getByText("Log Out").focus(); - await user.keyboard("A"); expect(onLogout).not.toHaveBeenCalled(); @@ -130,12 +125,7 @@ describe(" component functional testing", () => { it("fires on click and doesn't pass onLogout", async () => { const user = userEvent.setup(); - - const { getByText } = render( - - - - ); + const { getByText } = await renderLogout({ onError }); await user.click(getByText("Log Out")); @@ -145,14 +135,8 @@ describe(" component functional testing", () => { it("fires the onClick function and calls OnError", async () => { (logout as jest.Mock).mockRejectedValue(null); - const user = userEvent.setup(); - - const { getByText } = render( - - - - ); + const { getByText } = await renderLogout({ onLogout, onError }); await user.click(getByText("Log Out")); @@ -162,14 +146,9 @@ describe(" component functional testing", () => { it("fires the onClick function and doesn't call OnError if it wasn't provided", async () => { (logout as jest.Mock).mockRejectedValue(null); - const user = userEvent.setup(); + const { getByText } = await renderLogout({ onLogout }); - const { getByText } = render( - - - - ); await user.click(getByText("Log Out")); expect(onError).toHaveBeenCalledTimes(0);