audits.test.ts

import { describe, it, expect } from 'vitest';
import {
  Audit,
  serverAudits,
  AuditResult,
  renderAuditResultsToHTML,
  AuditFail,
} from '../src/audits';
import htmlValidator from 'html-validator';

it('should have globally unique audit ids', () => {
  const ids: string[] = [];

  for (const audit of serverAudits({
    url: 'http://localhost',
    fetchFn: () => {
      // noop
    },
  })) {
    expect(ids).not.toContain(audit.id);
    ids.push(audit.id);
  }
});

it('should not change globally unique audit ids', () => {
  const audits: Omit<Audit, 'fn'>[] = [];

  serverAudits({
    url: 'http://localhost',
    fetchFn: () => {
      // noop
    },
  }).forEach(({ fn, ...audit }) => audits.push(audit));

  // update snapshot if new audits are added or deleted,
  // but existing ones SHOULD NOT CHANGE semantically
  expect(audits).toMatchSnapshot();
});

it('should allow re-reading the response body in results', async () => {
  const body = '{ "errors": [{ "message": "hello" }] }';
  const audit = serverAudits({
    url: 'http://localhost',
    fetchFn: () => new Response(body),
  }).find(
    ({ id }) =>
      // test itself is not important - we just need one that reads the body
      id === '13EE',
  );
  if (!audit) {
    throw new Error('Expected audit not found');
  }
  const result = await audit.fn();
  expect(result.status).toBe('error');
  await expect((result as AuditFail).response.text()).resolves.toBe(body);
});

describe('Render audit results to HTML', () => {
  const results: AuditResult[] = [
    {
      id: 'ok1',
      name: 'MUST ok1',
      status: 'ok',
    },
    {
      id: 'ok2',
      name: 'MUST ok2',
      status: 'ok',
    },
    {
      id: 'warn1',
      name: 'SHOULD warn1',
      status: 'warn',
      reason: 'bad warn1',
      response: new Response('Warning!', {
        status: 400,
        headers: { 'x-id': 'warn1' },
      }),
    },
    {
      id: 'warn2',
      name: 'SHOULD warn2',
      status: 'warn',
      reason: 'bad warn2',
      response: new Response('Warning!', {
        status: 400,
        headers: { 'x-id': 'warn2' },
      }),
    },
    {
      id: 'error1',
      name: 'MUST error1',
      status: 'error',
      reason: 'bad error1',
      response: new Response('Error!', {
        status: 500,
        headers: { 'x-id': 'error1' },
      }),
    },
    {
      id: 'error2',
      name: 'MUST error2',
      status: 'error',
      reason: 'bad error2',
      response: new Response('Error!', {
        status: 500,
        headers: { 'x-id': 'error2' },
      }),
    },
  ];

  it('should render HTML', async () => {
    await expect(renderAuditResultsToHTML(results)).resolves
      .toMatchInlineSnapshot(`
      "<i>* This report was auto-generated by graphql-http</i>

      <h1>GraphQL over HTTP audit report</h1>

      <ul>
      <li><b>6</b> audits in total</li>
      <li><span style=\\"font-family: monospace\\">✅</span> <b>2</b> pass</li>
      <li><span style=\\"font-family: monospace\\">⚠️</span> <b>2</b> warnings (optional)</li>
      <li><span style=\\"font-family: monospace\\">❌</span> <b>2</b> errors (required)</li>
      </ul>

      <h2>Passing</h2>
      <ol>
      <li><code>ok1</code> MUST ok1</li>
      <li><code>ok2</code> MUST ok2</li>
      </ol>

      <h2>Warnings</h2>
      The server <i>SHOULD</i> support these, but is not required.
      <ol>
      <li><code>warn1</code> SHOULD warn1
      <details>
      <summary>bad warn1</summary>
      <pre><code class=\\"lang-json\\">{
        \\"statusText\\": \\"\\",
        \\"status\\": 400,
        \\"headers\\": {
          \\"x-id\\": \\"warn1\\",
          \\"content-type\\": \\"text/plain;charset=UTF-8\\"
        },
        \\"body\\": \\"Warning!\\"
      }
      </code></pre>
      </details>
      </li>
      <li><code>warn2</code> SHOULD warn2
      <details>
      <summary>bad warn2</summary>
      <pre><code class=\\"lang-json\\">{
        \\"statusText\\": \\"\\",
        \\"status\\": 400,
        \\"headers\\": {
          \\"x-id\\": \\"warn2\\",
          \\"content-type\\": \\"text/plain;charset=UTF-8\\"
        },
        \\"body\\": \\"Warning!\\"
      }
      </code></pre>
      </details>
      </li>
      </ol>

      <h2>Errors</h2>
      The server <b>MUST</b> support these.
      <ol>
      <li><code>error1</code> MUST error1
      <details>
      <summary>bad error1</summary>
      <pre><code class=\\"lang-json\\">{
        \\"statusText\\": \\"\\",
        \\"status\\": 500,
        \\"headers\\": {
          \\"x-id\\": \\"error1\\",
          \\"content-type\\": \\"text/plain;charset=UTF-8\\"
        },
        \\"body\\": \\"Error!\\"
      }
      </code></pre>
      </details>
      </li>
      <li><code>error2</code> MUST error2
      <details>
      <summary>bad error2</summary>
      <pre><code class=\\"lang-json\\">{
        \\"statusText\\": \\"\\",
        \\"status\\": 500,
        \\"headers\\": {
          \\"x-id\\": \\"error2\\",
          \\"content-type\\": \\"text/plain;charset=UTF-8\\"
        },
        \\"body\\": \\"Error!\\"
      }
      </code></pre>
      </details>
      </li>
      </ol>
      "
    `);
  });

  it('should render well-formatted and valid HTML', async () => {
    const rendered = await renderAuditResultsToHTML(results);

    const document = `<!DOCTYPE html>
      <html lang="en">
        <head>
          <title>graphql-http</title>
        </head>
        <body>${rendered}</body>
      </html>
    `;

    await expect(
      htmlValidator({
        data: document,
      }),
    ).resolves.toMatchInlineSnapshot(`
      {
        "messages": [],
      }
    `);
  });
});