diff --git a/src/Toast.test.tsx b/src/Toast.test.tsx index e35e135c..b88fbee5 100644 --- a/src/Toast.test.tsx +++ b/src/Toast.test.tsx @@ -16,6 +16,7 @@ limitations under the License. import { describe, expect, test, vi } from "vitest"; import { render, configure } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { Toast } from "../src/Toast"; import { withFakeTimers } from "./utils/test"; @@ -24,6 +25,9 @@ configure({ defaultHidden: true, }); +// Test Explanation: +// This test the toast. We need to use { document: window.document } because the toast listens +// for user input on `window`. describe("Toast", () => { test("renders", () => { const { queryByRole } = render( @@ -40,6 +44,33 @@ describe("Toast", () => { expect(getByRole("dialog")).toMatchSnapshot(); }); + test("dismisses when Esc is pressed", async () => { + const user = userEvent.setup({ document: window.document }); + const onDismiss = vi.fn(); + const { debug } = render( + + Hello world! + , + ); + debug(); + await user.keyboard("[Escape]"); + expect(onDismiss).toHaveBeenCalled(); + }); + + test("dismisses when background is clicked", async () => { + const user = userEvent.setup(); + const onDismiss = vi.fn(); + const { getByRole, unmount } = render( + + Hello world! + , + ); + const background = getByRole("dialog").previousSibling! as Element; + await user.click(background); + expect(onDismiss).toHaveBeenCalled(); + unmount(); + }); + test("dismisses itself after the specified timeout", () => { withFakeTimers(() => { const onDismiss = vi.fn();