69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { describe, expect, test } from "vitest";
|
|
import { fireEvent, screen } from "@testing-library/react";
|
|
import { Thumbnail } from "../../../components/shared/Thumbnail.tsx";
|
|
import { renderWithContexts } from "../../render.tsx";
|
|
|
|
describe("Thumbnail", () => {
|
|
const placeholder = { url: "https://site.test/page", siteName: "Site" };
|
|
|
|
test("direct, then proxied, then the placeholder", () => {
|
|
renderWithContexts(
|
|
<Thumbnail
|
|
src="https://img.test/a.png"
|
|
alt="art"
|
|
sizes={128}
|
|
placeholder={placeholder}
|
|
/>,
|
|
);
|
|
const img = screen.getByRole("img", { name: "art" });
|
|
expect(img).toHaveAttribute("src", "https://img.test/a.png");
|
|
expect(img).toHaveAttribute("referrerpolicy", "no-referrer");
|
|
// Another site's image comes as that site sends it.
|
|
expect(img).not.toHaveAttribute("srcset");
|
|
fireEvent.error(img);
|
|
const proxied = screen.getByRole("img", { name: "art" });
|
|
expect(proxied.getAttribute("src")).toContain("/api/remote/image?url=");
|
|
// Through the proxy, it is scaled as the site's own are.
|
|
expect(proxied.getAttribute("srcset")).toContain("a.png&w=128 128w");
|
|
fireEvent.error(screen.getByRole("img", { name: "art" }));
|
|
expect(screen.queryByRole("img", { name: "art" })).not.toBeInTheDocument();
|
|
expect(screen.getByText("S")).toBeInTheDocument();
|
|
});
|
|
|
|
test("our own images skip the proxy retry", () => {
|
|
renderWithContexts(
|
|
<Thumbnail
|
|
src="http://localhost:8000/api/dumps/d/thumbnail"
|
|
alt="t"
|
|
sizes="(max-width: 512px) 100vw, 180px"
|
|
placeholder={placeholder}
|
|
/>,
|
|
);
|
|
const img = screen.getByRole("img", { name: "t" });
|
|
expect(img).toHaveAttribute(
|
|
"src",
|
|
"http://localhost:8000/api/dumps/d/thumbnail?w=960",
|
|
);
|
|
expect(img.getAttribute("srcset")).toContain("thumbnail?w=320 320w");
|
|
expect(img).toHaveAttribute("sizes", "(max-width: 512px) 100vw, 180px");
|
|
fireEvent.error(img);
|
|
expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
|
|
});
|
|
|
|
test("no src: straight to the placeholder; a new src tries again", () => {
|
|
const { rerender } = renderWithContexts(
|
|
<Thumbnail placeholder={placeholder} alt="t" sizes={128} />,
|
|
);
|
|
expect(screen.queryByRole("img", { name: "t" })).not.toBeInTheDocument();
|
|
rerender(
|
|
<Thumbnail
|
|
src="https://img.test/b.png"
|
|
placeholder={placeholder}
|
|
alt="t"
|
|
sizes={128}
|
|
/>,
|
|
);
|
|
expect(screen.getByRole("img", { name: "t" })).toBeInTheDocument();
|
|
});
|
|
});
|