feat: add ArticleCard component with card layout, hover/active/focus states, and design tokens

- ArticleCard.astro: Props {title, date, type, summary?, slug, readingTime?} - HTML: article.card > a.card-link wrapping badge-row, h2.title, p.summary, time - Uses BASE_URL for link construction: {base}posts/{slug}/ - Hover: shadow-md, title accent-primary; Active: translateY(1px); Focus-visible: focus-ring - All styles reference design tokens (fonts, sizes, colors, spacing, shadows, motion) - 32 tests covering props, structure, date formatting, and styles
2026-05-26 23:18:15 +00:00
parent 62fe16623b
commit 6b754d1646
2 changed files with 335 additions and 0 deletions
@@ -0,0 +1,213 @@
+import { describe, it } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const componentPath = resolve('src/components/ArticleCard.astro');
+
+function readComponent() {
+  return readFileSync(componentPath, 'utf-8');
+}
+
+describe('ArticleCard component', () => {
+  it('should exist at src/components/ArticleCard.astro', () => {
+    const content = readComponent();
+    assert.ok(content.length > 0, 'Component file should not be empty');
+  });
+
+  // --- Props ---
+  describe('Props interface', () => {
+    it('should define title as string', () => {
+      const content = readComponent();
+      assert.match(content, /title:\s*string/, 'should have title: string prop');
+    });
+
+    it('should define date as Date', () => {
+      const content = readComponent();
+      assert.match(content, /date:\s*Date/, 'should have date: Date prop');
+    });
+
+    it('should define type as string', () => {
+      const content = readComponent();
+      assert.match(content, /type:\s*string/, 'should have type: string prop');
+    });
+
+    it('should define summary as optional string', () => {
+      const content = readComponent();
+      assert.match(content, /summary\?:\s*string/, 'should have summary?: string prop');
+    });
+
+    it('should define slug as string', () => {
+      const content = readComponent();
+      assert.match(content, /slug:\s*string/, 'should have slug: string prop');
+    });
+
+    it('should define readingTime as optional number', () => {
+      const content = readComponent();
+      assert.match(content, /readingTime\?:\s*number/, 'should have readingTime?: number prop');
+    });
+  });
+
+  // --- BASE_URL ---
+  describe('BASE_URL usage', () => {
+    it('should read BASE_URL from import.meta.env', () => {
+      const content = readComponent();
+      assert.match(content, /import\.meta\.env\.BASE_URL/, 'should read BASE_URL');
+    });
+  });
+
+  // --- Date formatting ---
+  describe('Date formatting', () => {
+    it('should format date with toLocaleDateString en-US', () => {
+      const content = readComponent();
+      assert.match(content, /toLocaleDateString\s*\(\s*'en-US'/, 'should use en-US locale');
+    });
+
+    it('should use numeric year/month/day options', () => {
+      const content = readComponent();
+      assert.match(content, /year:\s*'numeric'/, 'should have year: numeric');
+      assert.match(content, /month:\s*'numeric'/, 'should have month: numeric');
+      assert.match(content, /day:\s*'numeric'/, 'should have day: numeric');
+    });
+
+    it('should generate ISO date string', () => {
+      const content = readComponent();
+      assert.match(content, /toISOString/, 'should generate ISO date for datetime attr');
+    });
+  });
+
+  // --- HTML structure ---
+  describe('HTML structure', () => {
+    it('should have article element with class card and aria-label', () => {
+      const content = readComponent();
+      assert.match(content, /<article\s+class="card"/, 'should have <article class="card">');
+      assert.match(content, /aria-label=/, 'should have aria-label on article');
+    });
+
+    it('should have aria-label combining type and title', () => {
+      const content = readComponent();
+      assert.match(content, /aria-label=\{`\$\{type\}:\s*\$\{title\}`\}/, 'aria-label should be {type}: {title}');
+    });
+
+    it('should have anchor with card-link class wrapping content', () => {
+      const content = readComponent();
+      assert.match(content, /<a\s+href=/, 'should have anchor element');
+      assert.match(content, /class="card-link"/, 'anchor should have card-link class');
+    });
+
+    it('should link to base + posts/slug/', () => {
+      const content = readComponent();
+      assert.match(content, /posts\/.*slug/, 'link should point to posts/{slug}');
+    });
+
+    it('should have badge-row div with badge span', () => {
+      const content = readComponent();
+      assert.match(content, /class="badge-row"/, 'should have badge-row class');
+      assert.match(content, /class="badge"/, 'should have badge class');
+    });
+
+    it('should conditionally render reading time', () => {
+      const content = readComponent();
+      assert.match(content, /readingTime/, 'should reference readingTime');
+      assert.match(content, /class="reading-time"/, 'should have reading-time class');
+    });
+
+    it('should have h2 with title class', () => {
+      const content = readComponent();
+      assert.match(content, /<h2\s+class="title"/, 'should have <h2 class="title">');
+    });
+
+    it('should conditionally render summary paragraph', () => {
+      const content = readComponent();
+      assert.match(content, /summary/, 'should reference summary');
+      assert.match(content, /<p\s+class="summary"/, 'should have <p class="summary">');
+    });
+
+    it('should have time element with datetime attribute', () => {
+      const content = readComponent();
+      assert.match(content, /<time\s+datetime=/, 'should have <time datetime=...>');
+    });
+  });
+
+  // --- Styles ---
+  describe('Styles', () => {
+    it('should have .card with prose max-width', () => {
+      const content = readComponent();
+      assert.match(content, /\.card\s*\{/, 'should have .card selector');
+      assert.match(content, /--width-prose/, 'should use --width-prose for max-width');
+    });
+
+    it('should style .card-link with card bg, border, rounded-lg, shadow-sm, padding', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link\s*\{/, 'should have .card-link selector');
+      assert.match(content, /--surface-card/, 'should use --surface-card bg');
+      assert.match(content, /--border-subtle/, 'should use --border-subtle border');
+      assert.match(content, /--rounded-lg/, 'should use --rounded-lg radius');
+      assert.match(content, /--shadow-sm/, 'should use --shadow-sm shadow');
+      assert.match(content, /--space-3/, 'should use --space-3 padding');
+    });
+
+    it('should have .card-link block display, no underline, inherit color, fast transition', () => {
+      const content = readComponent();
+      assert.match(content, /display:\s*block/, 'should be display block');
+      assert.match(content, /text-decoration:\s*none/, 'should have no text-decoration');
+      assert.match(content, /color:\s*inherit/, 'should inherit color');
+      assert.match(content, /--duration-fast/, 'should use --duration-fast transition');
+    });
+
+    it('should have hover state with shadow-md and no underline', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:hover/, 'should have .card-link:hover');
+      assert.match(content, /--shadow-md/, 'should use --shadow-md on hover');
+    });
+
+    it('should change title color on hover to accent-primary', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:hover\s+\.title/, 'should have .card-link:hover .title');
+    });
+
+    it('should have active state with shadow-sm and translateY(1px)', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:active/, 'should have .card-link:active');
+      assert.match(content, /translateY\(1px\)/, 'should translateY(1px) on active');
+    });
+
+    it('should have focus-visible with focus-ring outline', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:focus-visible/, 'should have .card-link:focus-visible');
+      assert.match(content, /--focus-ring/, 'should use --focus-ring for outline');
+    });
+
+    it('should style .badge with structure font, type-xs, weight 600, accent-primary, uppercase, 0.05em tracking', () => {
+      const content = readComponent();
+      assert.match(content, /\.badge\s*\{/, 'should have .badge selector');
+    });
+
+    it('should style .reading-time with structure font, type-xs, weight 400, tertiary', () => {
+      const content = readComponent();
+      assert.match(content, /\.reading-time\s*\{/, 'should have .reading-time selector');
+      assert.match(content, /--text-tertiary/, 'reading-time should use --text-tertiary');
+    });
+
+    it('should style .title with structure font, type-xl, weight 600, primary, leading-snug, space-1 bottom, fast color transition', () => {
+      const content = readComponent();
+      assert.match(content, /\.title\s*\{/, 'should have .title selector');
+      assert.match(content, /--font-structure/, 'title should use --font-structure');
+      assert.match(content, /--type-xl/, 'title should use --type-xl');
+      assert.match(content, /--leading-snug/, 'title should use --leading-snug');
+    });
+
+    it('should style .summary with prose font, type-base, weight 400, secondary, leading-prose, space-2 bottom', () => {
+      const content = readComponent();
+      assert.match(content, /\.summary\s*\{/, 'should have .summary selector');
+      assert.match(content, /--font-prose/, 'summary should use --font-prose');
+      assert.match(content, /--text-secondary/, 'summary should use --text-secondary');
+      assert.match(content, /--leading-prose/, 'summary should use --leading-prose');
+    });
+
+    it('should style time with structure font, type-sm, weight 400, tertiary', () => {
+      const content = readComponent();
+      assert.match(content, /--type-sm/, 'time should use --type-sm');
+    });
+  });
+});