120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
import { useEffect, useLayoutEffect } from "react";
|
||
import { describe, expect, it, vi } from "vitest";
|
||
import { waitFor } from "@testing-library/react";
|
||
import { renderWithProviders as render, screen } from "../utils/test-utils";
|
||
import "@testing-library/jest-dom/vitest";
|
||
import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
|
||
import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
|
||
import {
|
||
dominantColorFromImageUrl,
|
||
randomPreviewSurfaceColor,
|
||
} from "../../lib/create/previewSurfaceColor";
|
||
import type { CreateFlowState } from "../../app/(app)/create/types";
|
||
|
||
vi.mock("../../lib/create/previewSurfaceColor", async (importOriginal) => {
|
||
const actual =
|
||
await importOriginal<
|
||
typeof import("../../lib/create/previewSurfaceColor")
|
||
>();
|
||
return {
|
||
...actual,
|
||
dominantColorFromImageUrl: vi.fn(async () => "rgb(12, 80, 40)"),
|
||
randomPreviewSurfaceColor: vi.fn(() => "hsl(12, 50%, 80%)"),
|
||
};
|
||
});
|
||
|
||
function FinalReviewWithAvatar() {
|
||
const { replaceState } = useCreateFlow();
|
||
useLayoutEffect(() => {
|
||
replaceState({
|
||
title: "Oak Park Commons",
|
||
communityContext: "Local mutual aid.",
|
||
communityAvatarUrl: "/api/uploads/avatar-1",
|
||
});
|
||
}, [replaceState]);
|
||
return <FinalReviewScreen />;
|
||
}
|
||
|
||
function FinalReviewWithStateProbe({
|
||
initial,
|
||
onState,
|
||
}: {
|
||
initial: CreateFlowState;
|
||
onState: (_state: CreateFlowState) => void;
|
||
}) {
|
||
const { state, replaceState } = useCreateFlow();
|
||
useLayoutEffect(() => {
|
||
replaceState(initial);
|
||
}, [replaceState, initial]);
|
||
useEffect(() => {
|
||
onState(state);
|
||
}, [onState, state]);
|
||
if (state.title !== initial.title) return null;
|
||
if (
|
||
initial.previewSurfaceColor &&
|
||
state.previewSurfaceColor !== initial.previewSurfaceColor
|
||
) {
|
||
return null;
|
||
}
|
||
return <FinalReviewScreen />;
|
||
}
|
||
|
||
describe("Final review preview surface", () => {
|
||
it("fills the card from the uploaded logo’s most common color", async () => {
|
||
render(<FinalReviewWithAvatar />);
|
||
|
||
await waitFor(() => {
|
||
const card = screen.getByRole("button", { name: /Oak Park Commons/i });
|
||
expect(card).toHaveStyle({ backgroundColor: "rgb(12, 80, 40)" });
|
||
});
|
||
expect(vi.mocked(dominantColorFromImageUrl)).toHaveBeenCalledWith(
|
||
"/api/uploads/avatar-1",
|
||
);
|
||
expect(
|
||
screen.getByRole("img", { name: "Oak Park Commons" }),
|
||
).toHaveAttribute("src", expect.stringContaining("avatar-1"));
|
||
});
|
||
|
||
it("writes a fallback fill onto the draft when no logo is uploaded", async () => {
|
||
let latest: CreateFlowState = {};
|
||
render(
|
||
<FinalReviewWithStateProbe
|
||
initial={{
|
||
title: "Oak Park Commons",
|
||
communityContext: "Local mutual aid.",
|
||
}}
|
||
onState={(state) => {
|
||
latest = state;
|
||
}}
|
||
/>,
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(latest.previewSurfaceColor).toBe("hsl(12, 50%, 80%)");
|
||
});
|
||
expect(vi.mocked(randomPreviewSurfaceColor)).toHaveBeenCalled();
|
||
});
|
||
|
||
it("reuses the stored fallback instead of picking a new color", async () => {
|
||
vi.mocked(randomPreviewSurfaceColor).mockClear();
|
||
render(
|
||
<FinalReviewWithStateProbe
|
||
initial={{
|
||
title: "Oak Park Commons",
|
||
communityContext: "Local mutual aid.",
|
||
previewSurfaceColor: "hsl(200, 60%, 80%)",
|
||
}}
|
||
onState={() => {}}
|
||
/>,
|
||
);
|
||
|
||
await waitFor(() => {
|
||
const card = screen.getByRole("button", { name: /Oak Park Commons/i });
|
||
expect(card.style.backgroundColor).not.toBe("");
|
||
});
|
||
expect(vi.mocked(randomPreviewSurfaceColor)).not.toHaveBeenCalled();
|
||
const card = screen.getByRole("button", { name: /Oak Park Commons/i });
|
||
expect(card.style.backgroundColor).not.toBe("rgb(12, 80, 40)");
|
||
});
|
||
});
|