feat(me): show actionable personal tasks with unavailable states

2026-09-11 00:15:46 +02:00
parent d9ea93a2e7
commit a537c55793
9 changed files with 435 additions and 12 deletions
@@ -0,0 +1,108 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { createTranslator } from "next-intl";
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+const state = vi.hoisted(() => ({
+	data: {
+		support: 2 as number | null,
+		friendRequests: 3 as number | null,
+		registeredEvent: false as
+			| false
+			| null
+			| { id: number; title: string; startsAt: Date },
+	},
+}));
+vi.mock("@/lib/services/dashboard-tasks", () => ({
+	loadDashboardTasks: async () => state.data,
+}));
+vi.mock("@/components/link", () => ({
+	default: ({
+		href,
+		children,
+		...props
+	}: {
+		href: string;
+		children: ReactNode;
+	}) => (
+		<a href={href} {...props}>
+			{children}
+		</a>
+	),
+}));
+vi.mock("next-intl/server", () => ({
+	getTranslations: async () => {
+		const flat = JSON.parse(
+			readFileSync("docs/task-account-i18n.json", "utf8"),
+		).it;
+		const messages = Object.fromEntries(
+			Object.entries(flat).map(([key, value]) => [
+				key.replace("pages.myDashboard.tasks.", ""),
+				value,
+			]),
+		);
+		return createTranslator({ locale: "it", messages });
+	},
+	getFormatter: async () => ({
+		dateTime: (date: Date) =>
+			new Intl.DateTimeFormat("it", {
+				dateStyle: "medium",
+				timeStyle: "short",
+				timeZone: "UTC",
+			}).format(date),
+	}),
+}));
+
+import DashboardTasks from "./DashboardTasks";
+
+describe("dashboard task presentation", () => {
+	it("renders actionable links from real task data", async () => {
+		state.data = {
+			support: 2,
+			friendRequests: 3,
+			registeredEvent: {
+				id: 7,
+				title:
+					"Un evento con un titolo molto lungo per verificare la visualizzazione sullo schermo del telefono",
+				startsAt: new Date("2026-09-12T15:00:00Z"),
+			},
+		};
+		const html = renderToStaticMarkup(
+			await DashboardTasks({ userId: 42, rewardAvailable: true }),
+		);
+		expect(html).toContain('href="/help/tickets"');
+		expect(html).toContain('href="/friends"');
+		expect(html).toContain('href="#referral-reward"');
+		expect(html).toContain("-7");
+		if (process.env.ACCOUNT_VISUAL_FIXTURE) {
+			const css = readFileSync(
+				"src/app/(site)/me/dashboard.module.css",
+				"utf8",
+			).replaceAll(/\.([\w]+)(?=[\s.{:#>])/g, ".$1");
+			// Vitest CSS modules are scoped; reproduce those class names for the fixture.
+			const taskClass = html.match(/<ul class="([^"]+)"/)?.[1] ?? "tasks";
+			const output = join("storage", "account-fixtures");
+			mkdirSync(output, { recursive: true });
+			writeFileSync(
+				join(output, "tasks.html"),
+				`<!doctype html><html lang="it"><meta name="viewport" content="width=device-width, initial-scale=1"><style>:root{--color-border:#ddd;--color-primary:#a34023;--color-text-muted:#777;--color-surface:#fff}*{box-sizing:border-box}body{font:16px Arial;background:#f7f5f2;margin:0;padding:20px}main{max-width:1000px;margin:auto}a{color:#943712;text-decoration:none}.p-5{padding:20px}.surface-card{border:1px solid #ddd;border-radius:16px;padding:12px}h3{margin:12px}${css.replaceAll(".tasks", "." + taskClass)}</style><main>${html}<div id="referral-reward">Premio inviti</div></main></html>`,
+			);
+		}
+	});
+	it("shows an honest empty state only after successful queries", async () => {
+		state.data = { support: 0, friendRequests: 0, registeredEvent: false };
+		expect(
+			renderToStaticMarkup(
+				await DashboardTasks({ userId: 42, rewardAvailable: false }),
+			),
+		).toContain("Nessuna azione");
+		state.data = { support: null, friendRequests: null, registeredEvent: null };
+		const html = renderToStaticMarkup(
+			await DashboardTasks({ userId: 42, rewardAvailable: null }),
+		);
+		expect(html).toContain('role="status"');
+		expect(html).not.toContain("Nessuna azione");
+	});
+});