File size: 3,129 Bytes
3201ca6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { ImagePreview } from "#/components/features/images/image-preview";
import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
const SRC = "https://example.com/image.jpg";
describe("ImagePreview", () => {
it("should render an image", () => {
render(<ImagePreview src={SRC} onRemove={vi.fn} />);
expect(screen.getByTestId("image-preview")).toBeInTheDocument();
expect(screen.getByRole("img")).toHaveAttribute("src", SRC);
});
it("should call onRemove when the close button is clicked", async () => {
const user = userEvent.setup();
const onRemoveMock = vi.fn();
render(<ImagePreview src={SRC} onRemove={onRemoveMock} />);
await user.click(
screen.getByRole("button", { name: "BUTTON$REMOVE_IMAGE" }),
);
expect(onRemoveMock).toHaveBeenCalledOnce();
});
it("should not display the close button when onRemove is not provided", () => {
render(<ImagePreview src={SRC} />);
expect(
screen.queryByRole("button", { name: "BUTTON$REMOVE_IMAGE" }),
).not.toBeInTheDocument();
});
it("should not open the lightbox until the thumbnail is clicked", () => {
render(<ImagePreview src={SRC} />);
expect(screen.getByTestId("expand-image-button")).toBeInTheDocument();
expect(screen.queryByTestId("image-lightbox")).not.toBeInTheDocument();
});
it("should open a full-size lightbox when the thumbnail is clicked", async () => {
const user = userEvent.setup();
render(<ImagePreview src={SRC} />);
await user.click(screen.getByTestId("expand-image-button"));
const lightbox = screen.getByTestId("image-lightbox");
expect(lightbox).toBeInTheDocument();
// The full-size image renders the same source as the thumbnail — the
// thumbnail is only a CSS downscale, so no refetch is needed.
expect(within(lightbox).getByRole("img")).toHaveAttribute("src", SRC);
});
it("should keep the lightbox out of the remove flow", async () => {
const user = userEvent.setup();
const onRemoveMock = vi.fn();
render(<ImagePreview src={SRC} onRemove={onRemoveMock} />);
await user.click(
screen.getByRole("button", { name: "BUTTON$REMOVE_IMAGE" }),
);
expect(onRemoveMock).toHaveBeenCalledOnce();
expect(screen.queryByTestId("image-lightbox")).not.toBeInTheDocument();
});
it("should close the lightbox via its close button", async () => {
const user = userEvent.setup();
render(<ImagePreview src={SRC} />);
await user.click(screen.getByTestId("expand-image-button"));
await user.click(screen.getByTestId("image-lightbox-close"));
expect(screen.queryByTestId("image-lightbox")).not.toBeInTheDocument();
});
it("should close the lightbox when Escape is pressed", async () => {
const user = userEvent.setup();
render(<ImagePreview src={SRC} />);
await user.click(screen.getByTestId("expand-image-button"));
await user.keyboard("{Escape}");
expect(screen.queryByTestId("image-lightbox")).not.toBeInTheDocument();
});
});
|