test: add unit, API, component and end-to-end test suites

The repo had no automated tests. Every change was verified by hand. Adds four layers, 2023 tests in total, runnable with one command: - 1191 unit tests over the pure logic in lib/, including the full computeProjectAccess permission matrix and the billing gate - 167 component and hook tests in jsdom, covering the hooks that hold real logic rather than presentational wrappers - 647 API integration tests against a real Postgres, with only auth() mocked, including a data-driven sweep asserting that none of the 60 route modules answers 2xx to an unauthenticated caller - 18 Playwright specs driving a real browser against a real build Infrastructure: vitest.config.ts with three projects, a disposable Postgres and MinIO in docker-compose.test.yml, factories and helpers under tests/, scripts/test.sh as the single entry point, a pre-push hook running bun run verify, and CI split into check, test and e2e jobs. The test database is built with prisma db push plus a replay of the hand-written SQL, because prisma migrate deploy cannot build this schema from empty: the migration history has no captured baseline. This mirrors what scripts/docker-db-bootstrap.ts already does in production, and tests/setup/db-global.ts carries a drift guard so a new migration fails the run until someone reviews it. Production code is unchanged apart from one pure-function extraction out of use-video-player.ts, which was too large to test in jsdom. Several tests pin behaviour that looks wrong, each marked KNOWN BUG in place. TESTING.md section 12 records where the plan turned out to be wrong, and AGENTS.md now states which layer a change needs a test in.
2026-09-11 09:36:08 +00:00 · 2026-07-26 11:17:26 +07:00
parent 52b2c8d2a9
commit 1d099c68f2
101 changed files with 27625 additions and 122 deletions
@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest';
+import {
+  EMAIL_COLORS,
+  brandedEmailTemplate,
+  emailButton,
+  emailHeading,
+  emailHighlight,
+  emailRow,
+  escapeAttr,
+  escapeHtml,
+} from '@/lib/email-brand';
+
+describe('escapeHtml', () => {
+  it.each([
+    ['&', '&amp;'],
+    ['<', '&lt;'],
+    ['>', '&gt;'],
+    ['"', '&quot;'],
+  ])('escapes %s as %s', (input, expected) => {
+    expect(escapeHtml(input)).toBe(expected);
+  });
+
+  it('neutralises a script tag', () => {
+    expect(escapeHtml('<script>alert("xss")</script>')).toBe(
+      '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
+    );
+  });
+
+  it('escapes the ampersand first so an existing entity is not double-decoded', () => {
+    expect(escapeHtml('&lt;')).toBe('&amp;lt;');
+  });
+
+  it('leaves a single quote unescaped', () => {
+    // Documents the current behaviour: values interpolated into single-quoted
+    // attributes are not protected by this helper.
+    expect(escapeHtml("it's")).toBe("it's");
+  });
+
+  it('leaves plain text untouched', () => {
+    expect(escapeHtml('Alice reviewed your video')).toBe('Alice reviewed your video');
+  });
+
+  it('returns an empty string unchanged', () => {
+    expect(escapeHtml('')).toBe('');
+  });
+});
+
+describe('escapeAttr', () => {
+  it('escapes the same four characters as escapeHtml', () => {
+    expect(escapeAttr('&<>"')).toBe('&amp;&lt;&gt;&quot;');
+  });
+
+  it('breaks an attribute injection attempt', () => {
+    const escaped = escapeAttr('https://x.com" onmouseover="alert(1)');
+
+    expect(escaped).not.toContain('" onmouseover');
+    expect(escaped).toContain('&quot; onmouseover=&quot;');
+  });
+
+  it('agrees with escapeHtml on every input despite the different replacement order', () => {
+    for (const input of ['&', '<', '>', '"', '&lt;', 'a&b<c>d"e']) {
+      expect(escapeAttr(input)).toBe(escapeHtml(input));
+    }
+  });
+});
+
+describe('brandedEmailTemplate', () => {
+  it('produces a full HTML document carrying the brand colours', () => {
+    const html = brandedEmailTemplate('<td>Body</td>');
+
+    expect(html.startsWith('<!DOCTYPE html>')).toBe(true);
+    expect(html.trimEnd().endsWith('</html>')).toBe(true);
+    expect(html).toContain(EMAIL_COLORS.bg);
+    expect(html).toContain('OpenFrame');
+  });
+
+  it('inserts the body markup verbatim', () => {
+    expect(brandedEmailTemplate('<td>Hello &amp; welcome</td>')).toContain(
+      '<td>Hello &amp; welcome</td>'
+    );
+  });
+
+  it('omits the footer block when no footer options are given', () => {
+    expect(brandedEmailTemplate('<td>Body</td>')).not.toContain(
+      'padding:20px 0 0;text-align:center'
+    );
+  });
+
+  it('renders footer text on its own', () => {
+    const html = brandedEmailTemplate('<td>Body</td>', { footerText: 'Sent by OpenFrame' });
+
+    expect(html).toContain('Sent by OpenFrame');
+    expect(html).not.toContain('<a href=');
+  });
+
+  it('renders the footer link only when both the text and the url are present', () => {
+    const withTextOnly = brandedEmailTemplate('<td>Body</td>', { footerLinkText: 'Unsubscribe' });
+    const withBoth = brandedEmailTemplate('<td>Body</td>', {
+      footerLinkText: 'Unsubscribe',
+      footerLinkUrl: 'https://open-frame.net/settings',
+    });
+
+    expect(withTextOnly).not.toContain('Unsubscribe');
+    expect(withBoth).toContain('href="https://open-frame.net/settings"');
+    expect(withBoth).toContain('>Unsubscribe<');
+  });
+
+  it('escapes the footer link url as an attribute', () => {
+    const html = brandedEmailTemplate('<td>Body</td>', {
+      footerLinkText: 'Unsubscribe',
+      footerLinkUrl: 'https://x.com" onmouseover="alert(1)',
+    });
+
+    expect(html).not.toContain('" onmouseover="alert(1)"');
+    expect(html).toContain('&quot; onmouseover=&quot;alert(1)');
+  });
+
+  it('escapes the footer link text as HTML', () => {
+    const html = brandedEmailTemplate('<td>Body</td>', {
+      footerLinkText: '<script>alert(1)</script>',
+      footerLinkUrl: 'https://open-frame.net',
+    });
+
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+  });
+});
+
+describe('email fragment builders', () => {
+  it('emailHeading renders the icon and title in the accent colour', () => {
+    const html = emailHeading('🎬', 'New comment');
+
+    expect(html).toContain('🎬');
+    expect(html).toContain('New comment');
+    expect(html).toContain(EMAIL_COLORS.accent);
+  });
+
+  it('emailRow renders the label and value in a table row', () => {
+    const html = emailRow('Project', 'Launch video');
+
+    expect(html.startsWith('<tr>')).toBe(true);
+    expect(html).toContain('Project');
+    expect(html).toContain('Launch video');
+  });
+
+  it('emailRow switches to the highlight style when asked', () => {
+    const plain = emailRow('Project', 'Launch video');
+    const highlighted = emailRow('Project', 'Launch video', true);
+
+    expect(plain).toContain(EMAIL_COLORS.textSecondary);
+    expect(highlighted).toContain('font-weight:600');
+    expect(highlighted).not.toContain(EMAIL_COLORS.textSecondary);
+  });
+
+  it('emailButton escapes the href but not the label', () => {
+    const html = emailButton('<b>Open</b>', 'https://x.com" onclick="alert(1)');
+
+    expect(html).toContain('&quot; onclick=&quot;alert(1)');
+    // Documents that the label is inserted raw, so callers must escape it.
+    expect(html).toContain('<b>Open</b>');
+  });
+
+  it('emailHighlight wraps the text in a bordered block', () => {
+    const html = emailHighlight('Your trial ends in 2 days');
+
+    expect(html.startsWith('<div')).toBe(true);
+    expect(html).toContain('Your trial ends in 2 days');
+    expect(html).toContain(EMAIL_COLORS.cardInner);
+  });
+
+  it('every brand colour is a six digit hex value', () => {
+    for (const value of Object.values(EMAIL_COLORS)) {
+      expect(value).toMatch(/^#[0-9a-f]{6}$/i);
+    }
+  });
+});