Blame · Line-by-line history

`u-polish.test.ts`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

u-polish.test.tsBlame142 lines · 2 contributors

Normal view Raw

dc26881CC LABS App	1	/**
	2	* Block U — Senior polish pass smoke tests.
	3	*
74a8784Claude	4	* 2026-06-10 update: `GET /` now serves the self-contained
	5	* `Landing2030Page` (src/views/landing-2030.tsx) — the legacy
	6	* `LandingPage` + master Layout CSS no longer render on the home route.
	7	* U1 assertions therefore target the 2030 hero contract; U2/U4 master-CSS
	8	* assertions target /help, a public Layout-rendered page that needs no DB.
	9	*
	10	* U1: hero — exactly two CTAs in the hero actions row, trust line
	11	* beneath, product-card mock below the CTAs.
dc26881CC LABS App	12	* U2: button CSS — hover lifts every .btn by translateY(-1px) with a
	13	* soft drop shadow; focus-visible uses box-shadow (not outline);
	14	* primary CTA shimmers via background-position; disabled buttons
	15	* never lift.
	16	* U4: master CSS contains the @view-transition block and the
	17	* prefers-reduced-motion guard.
	18	*
	19	* No DB stubs, no mock pollution — pure rendering checks against the
	20	* already-mounted Hono app.
	21	*/
	22	import { describe, it, expect } from "bun:test";
	23	import app from "../app";
	24
	25	const HOME = "/";
74a8784Claude	26	// Public, Layout-rendered, DB-free page that carries the master CSS.
	27	const LAYOUT_PAGE = "/help";
dc26881CC LABS App	28
	29	async function fetchHomeHtml(): Promise<string> {
	30	const res = await app.request(HOME);
	31	expect(res.status).toBe(200);
	32	return await res.text();
	33	}
	34
74a8784Claude	35	async function fetchLayoutHtml(): Promise<string> {
	36	const res = await app.request(LAYOUT_PAGE);
	37	expect(res.status).toBe(200);
	38	return await res.text();
	39	}
	40
	41	describe("Block U1 — landing hero (2030 reboot)", () => {
	42	it("renders exactly two CTAs in the hero actions row", async () => {
dc26881CC LABS App	43	const body = await fetchHomeHtml();
74a8784Claude	44	const start = body.indexOf('class="hero-actions');
dc26881CC LABS App	45	expect(start).toBeGreaterThan(-1);
74a8784Claude	46	// The actions row is a tight window of <a … class="btn …"> anchors.
	47	const tail = body.slice(start, start + 600);
dc26881CC LABS App	48	const anchorMatches = tail.match(/<a[^>]class="btn[^"]"/g) \|\| [];
74a8784Claude	49	expect(anchorMatches.length).toBe(2);
dc26881CC LABS App	50	expect(tail).toContain('href="/register"');
74a8784Claude	51	expect(tail).toContain('href="#loop"');
dc26881CC LABS App	52	});
	53
74a8784Claude	54	it("renders the trust line beneath the CTAs", async () => {
dc26881CC LABS App	55	const body = await fetchHomeHtml();
74a8784Claude	56	const ctas = body.indexOf('class="hero-actions');
	57	const trust = body.indexOf('class="hero-trust');
	58	expect(ctas).toBeGreaterThan(-1);
	59	expect(trust).toBeGreaterThan(ctas);
	60	expect(body).toContain("Self-hosted · Git-native · Claude-first");
dc26881CC LABS App	61	});
	62
74a8784Claude	63	it("places the product-card mock below the CTAs", async () => {
dc26881CC LABS App	64	const body = await fetchHomeHtml();
74a8784Claude	65	const ctas = body.indexOf('class="hero-actions');
	66	const card = body.indexOf('class="hero-card');
dc26881CC LABS App	67	expect(ctas).toBeGreaterThan(-1);
74a8784Claude	68	expect(card).toBeGreaterThan(ctas);
dc26881CC LABS App	69	});
	70	});
	71
	72	describe("Block U2 — button polish", () => {
	73	it("includes the universal hover-lift transform on .btn", async () => {
74a8784Claude	74	const body = await fetchLayoutHtml();
dc26881CC LABS App	75	// The master CSS is inlined in <style> by Layout. We assert on the
	76	// hover-rule shape: `.btn:hover { … transform: translateY(-1px); … }`.
	77	expect(body).toMatch(/\.btn:hover\b[\s\S]?transform:\stranslateY\(-1px\)/);
	78	});
	79
	80	it("uses a soft drop shadow on .btn:hover (not just border)", async () => {
74a8784Claude	81	const body = await fetchLayoutHtml();
dc26881CC LABS App	82	expect(body).toMatch(/\.btn:hover\b[\s\S]?box-shadow:\s0\s+4px\s+12px/);
	83	});
	84
	85	it("uses box-shadow (not outline) for the .btn focus ring", async () => {
74a8784Claude	86	const body = await fetchLayoutHtml();
dc26881CC LABS App	87	// Focus-visible rule must set box-shadow with the soft accent rgba.
	88	expect(body).toMatch(
	89	/\.btn:focus-visible\b[\s\S]?box-shadow:\s0\s+0\s+0\s+3px\s+rgba\(140,\s109,\s255,\s*0\.35\)/
	90	);
	91	// And must NOT fall back to outline:2px on .btn anywhere.
	92	expect(body).not.toMatch(/\.btn:focus-visible[^{]\{\soutline:\s*2px/);
	93	});
	94
	95	it("disables hover-lift on disabled buttons", async () => {
74a8784Claude	96	const body = await fetchLayoutHtml();
dc26881CC LABS App	97	// The disabled rule sets transform:none AND opacity:0.5.
	98	expect(body).toMatch(/\.btn:disabled[\s\S]?transform:\snone/);
	99	expect(body).toMatch(/\.btn:disabled[\s\S]?opacity:\s0\.5/);
	100	});
	101
	102	it("shimmers the primary CTA via background-position transition", async () => {
74a8784Claude	103	const body = await fetchLayoutHtml();
dc26881CC LABS App	104	// Primary button declares background-size 200% so the position
	105	// animation has somewhere to travel.
	106	expect(body).toMatch(/\.btn-primary\b[\s\S]?background-size:\s200%/);
	107	// The transition lists background-position with the 600ms duration.
	108	expect(body).toMatch(
	109	/\.btn-primary\b[\s\S]?transition:[\s\S]?background-position\s+600ms/
	110	);
	111	});
	112	});
	113
	114	describe("Block U4 — view transitions", () => {
	115	it("includes the @view-transition opt-in", async () => {
74a8784Claude	116	const body = await fetchLayoutHtml();
dc26881CC LABS App	117	expect(body).toContain("@view-transition");
	118	expect(body).toMatch(/@view-transition\s\{\snavigation:\sauto;?\s\}/);
	119	});
	120
	121	it("declares both fade-out and fade-in keyframes for ::view-transition-*", async () => {
74a8784Claude	122	const body = await fetchLayoutHtml();
dc26881CC LABS App	123	expect(body).toContain("::view-transition-old(root)");
	124	expect(body).toContain("::view-transition-new(root)");
	125	expect(body).toContain("@keyframes vt-fade-out");
	126	expect(body).toContain("@keyframes vt-fade-in");
	127	});
	128
	129	it("disables the transition under prefers-reduced-motion", async () => {
74a8784Claude	130	const body = await fetchLayoutHtml();
dc26881CC LABS App	131	// The reduced-motion block must mention the view-transition
	132	// pseudos and set animation-duration: 0s.
	133	expect(body).toMatch(
	134	/@media\s\(prefers-reduced-motion:\sreduce\)\s\{[\s\S]?::view-transition-(old\|new)\(root\)[\s\S]?animation-duration:\s0s/
	135	);
	136	});
	137
	138	it("attaches view-transition-name: root to body", async () => {
74a8784Claude	139	const body = await fetchLayoutHtml();
dc26881CC LABS App	140	expect(body).toMatch(/\bbody\b\s\{[^}]view-transition-name:\s*root/);
	141	});
	142	});