diff --git a/app/(routes)/movieForm/MovieFormClient.integration.test.tsx b/app/(routes)/movieForm/MovieFormClient.integration.test.tsx index 53de9a7..ad6bdc2 100644 --- a/app/(routes)/movieForm/MovieFormClient.integration.test.tsx +++ b/app/(routes)/movieForm/MovieFormClient.integration.test.tsx @@ -104,7 +104,7 @@ describe("MovieFormClient integration", () => { } ); - fireEvent.click(screen.getByRole("button", { name: "Get Movie" })); + fireEvent.click(screen.getByRole("button", { name: "Get Movies" })); await waitFor(() => { expect(mockPush).toHaveBeenCalledWith("/recommendations"); diff --git a/app/(routes)/movieForm/MovieFormClient.tsx b/app/(routes)/movieForm/MovieFormClient.tsx index f8d2252..5af7ac7 100644 --- a/app/(routes)/movieForm/MovieFormClient.tsx +++ b/app/(routes)/movieForm/MovieFormClient.tsx @@ -58,7 +58,7 @@ const MovieFormClient = () => { return ( <> -

Person #{currentParticipant}

+

Person #{currentParticipant}

{ handleTypeChange={handleTypeChange} /> - {error &&

{error}

} diff --git a/app/(routes)/movieForm/page.test.tsx b/app/(routes)/movieForm/page.test.tsx index 7a90400..33dfe8a 100644 --- a/app/(routes)/movieForm/page.test.tsx +++ b/app/(routes)/movieForm/page.test.tsx @@ -39,13 +39,13 @@ describe("MovieForm", () => { it("renders the form with initial state", () => { renderMovieForm(); expect(screen.getByText("Person #1")).toBeInTheDocument(); - expect(screen.getByRole("button", { name: /get movie/i })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: /get movies/i })).toBeInTheDocument(); }); it("returns a validation error message when required fields are empty", async () => { renderMovieForm(); - const submitBtn = screen.getByRole("button", { name: /get movie/i }); + const submitBtn = screen.getByRole("button", { name: /get movies/i }); fireEvent.click(submitBtn); expect(await screen.findByText("Please fill out all required fields")).toBeInTheDocument(); @@ -60,7 +60,7 @@ describe("MovieForm", () => { fireEvent.change(movieInput, { target: { value: "The Matrix" } }); fireEvent.change(personInput, { target: { value: "Keanu Reeves" } }); - const submitBtn = screen.getByRole("button", { name: /get movie/i }); + const submitBtn = screen.getByRole("button", { name: /get movies/i }); fireEvent.click(submitBtn); await waitFor(() => { diff --git a/app/favicon.ico b/app/favicon.ico index effb044..e4dc360 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/fonts.ts b/app/fonts.ts index dc51cab..2296720 100644 --- a/app/fonts.ts +++ b/app/fonts.ts @@ -1,22 +1,23 @@ -import { Carter_One, Roboto_Slab } from "next/font/google"; +import { Syne, Inter } from "next/font/google"; -const carterOneInit = Carter_One({ - weight: "400", +const syneInit = Syne({ + weight: ["800"], subsets: ["latin"], - variable: "--ff-serif", - fallback: ["serif"], + variable: "--ff-display", + display: "swap", + fallback: ["system-ui", "sans-serif"], preload: true, adjustFontFallback: false, }); -const robotoSlabInit = Roboto_Slab({ - weight: ["300", "400", "700"], - display: "swap", + +const interInit = Inter({ + weight: ["500"], subsets: ["latin"], variable: "--ff-sans-serif", - fallback: ["sans-serif"], + display: "swap", preload: true, adjustFontFallback: false, }); -export const carterOne = carterOneInit.variable; -export const robotoSlab = robotoSlabInit.variable; +export const syne = syneInit.variable; +export const inter = interInit.variable; diff --git a/app/globals.css b/app/globals.css index 6060afb..0fc24a5 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,8 +10,10 @@ body { color: var(--foreground, #ffffff); font-family: var(--ff-sans-serif, Arial, Helvetica, sans-serif); + line-height: 1.6; } h1 { - font-family: var(--ff-serif, Arial, Helvetica, sans-serif); + font-family: var(--ff-display, Arial, Helvetica, sans-serif); + letter-spacing: -0.02em; } diff --git a/app/layout.tsx b/app/layout.tsx index d9a1b54..d6c3df6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import "./globals.css"; -import { carterOne, robotoSlab } from "./fonts"; +import { syne, inter } from "./fonts"; import { MovieProvider } from "@/contexts/MovieContext"; import Header from "@/components/features/Header"; import { Globe, Mail } from "lucide-react"; @@ -68,7 +68,7 @@ export default function RootLayout({ return (
diff --git a/components/features/Logo.test.tsx b/components/features/Logo.test.tsx index d3caae3..c9bdc47 100644 --- a/components/features/Logo.test.tsx +++ b/components/features/Logo.test.tsx @@ -13,8 +13,8 @@ jest.mock("next/image", () => ({ })); // Mock the image import -jest.mock("@/public/popcorn.png", () => ({ - src: "/mocked-popcorn.png", +jest.mock("@/public/film.png", () => ({ + src: "/mocked-film.png", height: 100, width: 100, })); @@ -46,7 +46,7 @@ describe("Logo Component", () => { const { container } = render(); const image = container.querySelector("img"); - expect(image).toHaveAttribute("alt", "Popcorn"); + expect(image).toHaveAttribute("alt", "App logo representing a film"); }); // Test cleanup after each test diff --git a/components/features/Logo.tsx b/components/features/Logo.tsx index 89b23a4..e5ae988 100644 --- a/components/features/Logo.tsx +++ b/components/features/Logo.tsx @@ -1,13 +1,21 @@ "use client"; import Image from "next/image"; -import popcorn from "@/public/popcorn.png"; +import film from "@/public/film.png"; import { usePathname } from "next/navigation"; const Logo = () => { const pathname = usePathname(); if (pathname === "/recommendations") return null; - return Popcorn; + return ( + App logo representing a film + ); }; export default Logo; diff --git a/components/features/ParticipantsSetup.tsx b/components/features/ParticipantsSetup.tsx index 3228a61..01f5363 100644 --- a/components/features/ParticipantsSetup.tsx +++ b/components/features/ParticipantsSetup.tsx @@ -66,7 +66,10 @@ const ParticipantsSetup = () => { /> - diff --git a/public/film.png b/public/film.png new file mode 100644 index 0000000..f713a63 Binary files /dev/null and b/public/film.png differ diff --git a/public/popcorn.png b/public/popcorn.png deleted file mode 100644 index 439e259..0000000 Binary files a/public/popcorn.png and /dev/null differ diff --git a/tailwind.config.ts b/tailwind.config.ts index a4e3c9b..6942714 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -28,6 +28,9 @@ export default { background: "var(--background)", foreground: "var(--foreground)", }, + fontFamily: { + display: ["var(--ff-display)", "system-ui", "sans-serif"], + }, }, }, plugins: [daisyui], diff --git a/tests/e2e/guard-and-validation.spec.ts b/tests/e2e/guard-and-validation.spec.ts index 608e008..030070a 100644 --- a/tests/e2e/guard-and-validation.spec.ts +++ b/tests/e2e/guard-and-validation.spec.ts @@ -7,7 +7,7 @@ test.describe("Recommendation guardrails", () => { await expect(page).toHaveURL(/\/movieForm$/); - await page.getByRole("button", { name: "Get Movie" }).click(); + await page.getByRole("button", { name: "Get Movies" }).click(); await expect(page.getByText("Please fill out all required fields")).toBeVisible(); await expect(page.getByText("This field is required")).toHaveCount(2); diff --git a/tests/e2e/happy-path.spec.ts b/tests/e2e/happy-path.spec.ts index be1a04a..20e79ae 100644 --- a/tests/e2e/happy-path.spec.ts +++ b/tests/e2e/happy-path.spec.ts @@ -39,7 +39,7 @@ test.describe("Core recommendation journey", () => { const recommendationsRequest = page.waitForRequest("**/api/recommendations"); const recommendationsResponse = page.waitForResponse("**/api/recommendations"); - await page.getByRole("button", { name: "Get Movie" }).click(); + await page.getByRole("button", { name: "Get Movies" }).click(); await expect(page).toHaveURL(/\/recommendations$/); await recommendationsRequest;