test(frontend): add specs for Tabs, AlertBanner, BackLink, useHashTab

4 new spec files adding 21 tests (7+6+4+4). Each component spec
includes brutalism invariant assertions (no rounded-md, no transition-*,
no shadow-*).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/tests/components/AlertBanner.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AlertBanner } from '@/components/AlertBanner';
+
+describe('AlertBanner', () => {
+  it('renders error variant with alert role and alert-error class', () => {
+    const { container } = render(<AlertBanner variant="error">Error message</AlertBanner>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute('role', 'alert');
+    expect(el).toHaveClass('alert-error');
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+  });
+
+  it('renders warn variant with alert role and alert-warn class', () => {
+    const { container } = render(<AlertBanner variant="warn">Warning message</AlertBanner>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute('role', 'alert');
+    expect(el).toHaveClass('alert-warn');
+  });
+
+  it('renders success variant with status role and alert-success class', () => {
+    const { container } = render(<AlertBanner variant="success">Done!</AlertBanner>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute('role', 'status');
+    expect(el).toHaveClass('alert-success');
+  });
+
+  it('renders info variant with status role and alert-info class', () => {
+    const { container } = render(<AlertBanner variant="info">FYI</AlertBanner>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveAttribute('role', 'status');
+    expect(el).toHaveClass('alert-info');
+  });
+
+  it('renders optional title when provided', () => {
+    render(<AlertBanner variant="info" title="Heads up">Detail text</AlertBanner>);
+    expect(screen.getByText('Heads up')).toBeInTheDocument();
+    expect(screen.getByText('Detail text')).toBeInTheDocument();
+  });
+
+  it('has no rounded-md, transition-*, or shadow-* (brutalism)', () => {
+    const { container } = render(<AlertBanner variant="error">Test</AlertBanner>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).not.toHaveClass('rounded-md');
+    expect(el.className).not.toMatch(/transition-/);
+    expect(el.className).not.toMatch(/shadow-/);
+  });
+});