Quality, in the open

This site tests itself.

Every push runs the unit suite, a real-browser flow suite and a coverage gate before a build reaches production. What you see here is the actual output of the last run, plus a suite you can execute in your own browser right now.

HTML reports

Run it yourself

Fourteen checks execute against this very page: DOM, accessibility, i18n, network and timing. Nothing is mocked and nothing is cached.

Live In-Browser Test Runner

Executes client-side smoke, DOM structure, A11y, and performance tests directly in your browser.

14Total Tests
0Passed
0Failed
—Duration
Ready to execute

What CI reported

Numbers straight from GitHub Actions. Jest results ship with the build; the Puppeteer summary is fetched live from a Gist the pipeline updates on every run.

Jest Tests

E2E Tests

Code Coverage

How it's tested

Four layers, four tools. Each excerpt is taken straight from this repository.

  1. 01Unit & component

    The menu closes when you pick a destination

    Jest + Testing Library

    Components render into jsdom and are driven the way a visitor would drive them: by label, role and click. No implementation details, no snapshots.

    What it proves

    • Mobile navigation opens and closes through its accessible toggle
    • aria-expanded never drifts from the visible state
    • Choosing a route dismisses the menu instead of leaving it open
    src/components/Navbar.test.jsxjsx · excerpt
    test('closes mobile menu when a nav link is clicked', async () => {
  const { container } = render(
    <MemoryRouter>
      <Navbar />
    </MemoryRouter>
  );

  const toggle = screen.getByLabelText('Toggle navigation');
  const menu = container.querySelector('#mobileMenu');

  fireEvent.click(toggle);
  expect(toggle).toHaveAttribute('aria-expanded', 'true');
  expect(menu).toHaveClass('active');

  fireEvent.click(screen.getByText(/Personal Projects/i));

  await waitFor(() => {
    expect(toggle).toHaveAttribute('aria-expanded', 'false');
    expect(menu).not.toHaveClass('active');
  });
});

  2. 02Build artefact & security

    The deployed CSP is what the build promised

    Jest over the production build

    Some tests never touch a component. These read the generated dist folder and assert the security headers Cloudflare will serve.

    What it proves

    • script-src carries no unsafe-inline
    • The JSON-LD hash in the header matches the script byte for byte
    • A regression in the build pipeline fails before it ships
    tests/jest/csp-validation.test.jsjavascript · excerpt
    it('should NOT contain unsafe-inline in script-src', () => {
  const headers = fs.readFileSync(headersPath, 'utf-8');
  const cspLine = headers.match(/Content-Security-Policy:.*$/m);
  expect(cspLine).toBeTruthy();

  const scriptSrc = cspLine[0].match(/script-src ([^;]+)/)[1];
  expect(scriptSrc).not.toContain("'unsafe-inline'");
});

it('should generate correct SHA-256 hash for JSON-LD script', () => {
  const html = fs.readFileSync(htmlPath, 'utf-8');
  const [, scriptContent] = html.match(
    /<script type="application\/ld\+json">([\s\S]*?)<\/script>/
  );

  const calculatedHash = crypto
    .createHash('sha256')
    .update(scriptContent)
    .digest('base64');
  const hashes = JSON.parse(fs.readFileSync(hashesPath, 'utf-8'));

  expect(hashes.jsonLd).toBe(`'sha256-${calculatedHash}'`);
});

  3. 03End to end

    Accepting cookies hides the banner and persists

    Puppeteer + headless Chromium

    Each flow gets a fresh browser context and a list of named steps, so a failure points at the exact step and the report reads like a script.

    What it proves

    • The real production bundle behaves in a real browser
    • State that must survive a reload actually does
    • Every step is timed and lands in the E2E report above
    tests/e2e/run-e2e.jsjavascript · excerpt
    {
  name: 'Cookie consent accept hides banner and stores consent',
  run: async (page, step) => {
    await step('Navigate to home page', () =>
      page.goto(BASE_URL, { waitUntil: 'networkidle2', timeout: NAV_TIMEOUT })
    );
    await step('Cookie banner is shown', () =>
      page.waitForSelector('#cookieConsentBanner', { timeout: NAV_TIMEOUT })
    );
    await step('Click "Accept all cookies"', () => page.click('#acceptCookies'));
    await step('Banner is dismissed', () =>
      page.waitForSelector('#cookieConsentBanner', { hidden: true, timeout: NAV_TIMEOUT })
    );
    await step('Consent cookie is stored', async () => {
      const cookie = await page.evaluate(() => document.cookie);
      assert(/cookie_consent=accepted/.test(cookie), `Consent cookie not set: "${cookie}"`);
    });
  },
},

  4. 04In your browser

    Every outbound link is safe to open

    Hand-rolled runner, zero dependencies

    The runner at the top of this page is a small engine of async checks against the live DOM. This one is the reason you can trust the links on this site.

    What it proves

    • target="_blank" always travels with rel="noopener noreferrer"
    • The check runs on your device, against the page you are reading
    • Failures name the offending hrefs, not just a count
    src/utils/inBrowserTestRunner.jsjavascript · excerpt
    {
  id: 'dom-safe-links',
  nameKey: 'testDashboard.runner.tests.safeLinks.name',
  run: async () => {
    const externalLinks = Array.from(document.querySelectorAll('a[target="_blank"]'));
    const insecureLinks = externalLinks.filter((link) => {
      const rel = (link.getAttribute('rel') || '').toLowerCase();
      return !rel.includes('noopener') && !rel.includes('noreferrer');
    });

    if (insecureLinks.length > 0) {
      const hrefs = insecureLinks
        .slice(0, 3)
        .map((l) => l.getAttribute('href'))
        .join(', ');
      throw new Error(
        `Found ${insecureLinks.length} external link(s) without rel="noopener noreferrer": ${hrefs}`
      );
    }
    return {
      message: `Verified ${externalLinks.length} external link(s) have secure rel attributes.`,
    };
  },
},

Reports

Static HTML reports, regenerated on every deploy.