70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { render, screen, waitFor } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { useState } from "react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
Toast,
|
|
ToastAction,
|
|
ToastClose,
|
|
ToastDescription,
|
|
ToastProvider,
|
|
ToastTitle,
|
|
ToastViewport
|
|
} from "./toast";
|
|
|
|
function StatefulToast() {
|
|
const [open, setOpen] = useState(true);
|
|
|
|
return (
|
|
<ToastProvider>
|
|
<Toast open={open} onOpenChange={setOpen}>
|
|
<ToastTitle>Saved</ToastTitle>
|
|
<ToastDescription>Launch details were updated.</ToastDescription>
|
|
<ToastAction altText="Undo changes">Undo</ToastAction>
|
|
<ToastClose />
|
|
</Toast>
|
|
<ToastViewport />
|
|
</ToastProvider>
|
|
);
|
|
}
|
|
|
|
describe("Toast", () => {
|
|
it("renders viewport, title, description, action, and variant hooks", () => {
|
|
render(
|
|
<ToastProvider>
|
|
<Toast open variant="destructive">
|
|
<ToastTitle>Delete failed</ToastTitle>
|
|
<ToastDescription>Try again in a moment.</ToastDescription>
|
|
<ToastAction altText="Retry delete">Retry</ToastAction>
|
|
<ToastClose />
|
|
</Toast>
|
|
<ToastViewport />
|
|
</ToastProvider>
|
|
);
|
|
|
|
expect(screen.getByText("Delete failed").closest('[data-slot="label"]')).toBeInTheDocument();
|
|
expect(screen.getByText("Try again in a moment.").closest('[data-slot="description"]')).toBeInTheDocument();
|
|
expect(screen.getByRole("button", { name: "Retry" })).toHaveAttribute("data-slot", "action");
|
|
expect(document.querySelector('[data-slot="root"]')).toHaveAttribute("data-variant", "destructive");
|
|
expect(document.querySelector('[data-slot="viewport"]')).toBeInTheDocument();
|
|
});
|
|
|
|
it("closes through the close control", async () => {
|
|
const user = userEvent.setup();
|
|
|
|
render(<StatefulToast />);
|
|
|
|
expect(screen.getByText("Saved")).toBeInTheDocument();
|
|
|
|
const closeButton = document.querySelector('[data-slot="close"]');
|
|
|
|
expect(closeButton).toBeInstanceOf(HTMLButtonElement);
|
|
await user.click(closeButton as HTMLButtonElement);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.queryByText("Saved")).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|