@rozenite/network-activity-plugin 1.9.0 → 1.10.0

package/src/ui/components/__tests__/HexView.test.tsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { getDefaultNormalizer, render, screen } from '@testing-library/react';
+import { HexView } from '../HexView';
+
+// Preserve the post-byte-8 double-space gap when matching hex rows —
+// RTL's default normalizer collapses it.
+const preserveWhitespace = {
+  normalizer: getDefaultNormalizer({ collapseWhitespace: false }),
+};
+
+describe('HexView', () => {
+  it('renders a "no bytes" placeholder for an empty buffer', () => {
+    render(<HexView bytes={new Uint8Array(0)} />);
+    expect(screen.getByText(/no bytes to display/i)).toBeInTheDocument();
+  });
+
+  it('renders a row for a single-byte buffer', () => {
+    render(<HexView bytes={new Uint8Array([0x41])} />);
+    // Offset + hex pair are present somewhere in the rendered output.
+    expect(screen.getByText('00000000')).toBeInTheDocument();
+    expect(screen.getByText('41')).toBeInTheDocument();
+    // ASCII column wraps the printable representation in pipes.
+    expect(screen.getByText('|A|')).toBeInTheDocument();
+  });
+
+  it('renders a fully-formatted row with the post-byte-8 gap and ASCII column', () => {
+    const bytes = new Uint8Array([
+      0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21,
+      0x0a, 0x0d, 0x09, 0xff,
+    ]);
+    render(<HexView bytes={bytes} />);
+    expect(
+      screen.getByText(
+        '48 65 6C 6C 6F 20 77 6F  72 6C 64 21 0A 0D 09 FF',
+        preserveWhitespace,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText('|Hello world!....|')).toBeInTheDocument();
+  });
+});

package/src/ui/components/__tests__/MetadataCard.test.tsx

@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MetadataCard } from '../MetadataCard';
+import type { RenderCtx } from '../../response-renderers/types';
+
+const baseCtx: RenderCtx = {
+  contentType: 'application/pdf',
+  url: 'https://example.com/api/files/report.pdf',
+};
+
+describe('MetadataCard', () => {
+  beforeEach(() => {
+    // jsdom doesn't implement URL.createObjectURL — stub it for the
+    // download click test.
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => 'blob:fake-url'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(),
+    });
+  });
+
+  it('shows the decoded byte size for a binary body', () => {
+    // "AQID" decodes to 3 bytes.
+    render(
+      <MetadataCard body={{ kind: 'binary', base64: 'AQID' }} ctx={baseCtx} />,
+    );
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('3 bytes')).toBeInTheDocument();
+  });
+
+  it('surfaces the Content-Length header when present', () => {
+    render(
+      <MetadataCard
+        body={{ kind: 'binary', base64: 'AQID' }}
+        ctx={{ ...baseCtx, headers: { 'Content-Length': '8192' } }}
+      />,
+    );
+    expect(screen.getByText('Content-Length')).toBeInTheDocument();
+    expect(screen.getByText('8192')).toBeInTheDocument();
+  });
+
+  it('uses the Content-Disposition filename when available', () => {
+    render(
+      <MetadataCard
+        body={{ kind: 'binary', base64: 'AQID' }}
+        ctx={{
+          ...baseCtx,
+          headers: {
+            'Content-Disposition': 'attachment; filename="custom.pdf"',
+          },
+        }}
+      />,
+    );
+    expect(screen.getByText('Filename')).toBeInTheDocument();
+    expect(screen.getByText('custom.pdf')).toBeInTheDocument();
+  });
+
+  it('falls back to the URL last path segment for the filename', () => {
+    render(
+      <MetadataCard body={{ kind: 'binary', base64: 'AQID' }} ctx={baseCtx} />,
+    );
+    expect(screen.getByText('report.pdf')).toBeInTheDocument();
+  });
+
+  it('shows an enabled Download button for a binary body', () => {
+    render(
+      <MetadataCard body={{ kind: 'binary', base64: 'AQID' }} ctx={baseCtx} />,
+    );
+    const button = screen.getByRole('button', { name: /download/i });
+    expect(button).not.toBeDisabled();
+  });
+
+  it('fires the download flow when the button is clicked', () => {
+    render(
+      <MetadataCard body={{ kind: 'binary', base64: 'AQID' }} ctx={baseCtx} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /download/i }));
+    expect(URL.createObjectURL).toHaveBeenCalled();
+  });
+
+  it('disables Download for the binary-too-large variant', () => {
+    render(
+      <MetadataCard
+        body={{ kind: 'binary-too-large', size: 9_999_999 }}
+        ctx={baseCtx}
+      />,
+    );
+    const button = screen.getByRole('button', { name: /download/i });
+    expect(button).toBeDisabled();
+  });
+
+  it('renders the body.size for binary-too-large entries', () => {
+    render(
+      <MetadataCard
+        body={{ kind: 'binary-too-large', size: 8 * 1024 * 1024 }}
+        ctx={baseCtx}
+      />,
+    );
+    expect(screen.getByText('8.0 MB')).toBeInTheDocument();
+  });
+});

package/src/ui/components/__tests__/ViewToggle.test.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { ViewToggle } from '../ViewToggle';
+
+describe('ViewToggle', () => {
+  it('renders nothing when only one view is available (adaptive)', () => {
+    const { container } = render(
+      <ViewToggle views={['raw']} value="raw" onChange={() => {}} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when the renderer offers no views', () => {
+    const { container } = render(
+      <ViewToggle views={[]} value="raw" onChange={() => {}} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders both labels when preview and raw are available', () => {
+    render(
+      <ViewToggle
+        views={['preview', 'raw']}
+        value="preview"
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('tab', { name: 'Preview' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Raw' })).toBeInTheDocument();
+  });
+
+  it('marks the active view as aria-selected', () => {
+    render(
+      <ViewToggle views={['preview', 'raw']} value="raw" onChange={() => {}} />,
+    );
+    expect(screen.getByRole('tab', { name: 'Raw' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+    expect(screen.getByRole('tab', { name: 'Preview' })).toHaveAttribute(
+      'aria-selected',
+      'false',
+    );
+  });
+
+  it('fires onChange with the clicked view', () => {
+    const onChange = vi.fn();
+    render(
+      <ViewToggle
+        views={['preview', 'raw']}
+        value="preview"
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Raw' }));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith('raw');
+  });
+
+  it('stops click propagation so toggle clicks do not collapse the parent Section', () => {
+    // The toggle lives inside the Section header, which is itself a
+    // <button> that collapses on click — without stopPropagation, every
+    // toggle click would also collapse the section.
+    const onChange = vi.fn();
+    const onParentClick = vi.fn();
+    render(
+      <div onClick={onParentClick}>
+        <ViewToggle
+          views={['preview', 'raw']}
+          value="preview"
+          onChange={onChange}
+        />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Raw' }));
+    expect(onChange).toHaveBeenCalled();
+    expect(onParentClick).not.toHaveBeenCalled();
+  });
+});

package/src/ui/components/__tests__/XmlTree.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { XmlTree } from '../XmlTree';
+
+const parseXml = (source: string): Element => {
+  const doc = new DOMParser().parseFromString(source, 'application/xml');
+  return doc.documentElement;
+};
+
+describe('XmlTree', () => {
+  it('renders the root tag name', () => {
+    render(<XmlTree root={parseXml('<feed/>')} />);
+    // Self-closing — no closing tag, so a single occurrence is expected.
+    expect(screen.getAllByText('feed')).toHaveLength(1);
+  });
+
+  it('renders attributes inline with the open tag', () => {
+    render(<XmlTree root={parseXml('<entry id="42" lang="en"/>')} />);
+    expect(screen.getByText('id')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+    expect(screen.getByText('lang')).toBeInTheDocument();
+    expect(screen.getByText('en')).toBeInTheDocument();
+  });
+
+  it('renders non-whitespace text content', () => {
+    render(<XmlTree root={parseXml('<title>Hello world</title>')} />);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it('filters whitespace-only text nodes between sibling elements', () => {
+    // Pretty-printed XML has whitespace text nodes between every sibling
+    // element. After filtering, only the two <item> elements survive —
+    // no stray text nodes containing the source's `\n  ` indentation.
+    const { container } = render(
+      <XmlTree
+        root={parseXml('<list>\n  <item>a</item>\n  <item>b</item>\n</list>')}
+      />,
+    );
+    // Each <item> renders as open + close tag, so 2 items × 2 = 4
+    // occurrences of "item" text.
+    expect(screen.getAllByText('item')).toHaveLength(4);
+    // The leaf text values are present.
+    expect(screen.getByText('a')).toBeInTheDocument();
+    expect(screen.getByText('b')).toBeInTheDocument();
+    // The original source's whitespace indentation between <item>
+    // siblings should not appear as a standalone text node. The exact
+    // pattern "\n  " (newline + two spaces) was between siblings; if
+    // we'd rendered it, the textContent would contain that fragment
+    // outside of the element tags.
+    const allText = container.textContent ?? '';
+    expect(allText).not.toMatch(/<\/item>\s*\n\s+<item>/);
+  });
+
+  it('renders CDATA content wrapped in <![CDATA[ ... ]]> markers', () => {
+    render(
+      <XmlTree root={parseXml('<content><![CDATA[<p>html</p>]]></content>')} />,
+    );
+    expect(screen.getByText('<![CDATA[')).toBeInTheDocument();
+    expect(screen.getByText(']]>')).toBeInTheDocument();
+    expect(screen.getByText('<p>html</p>')).toBeInTheDocument();
+  });
+
+  it('recursively renders nested elements', () => {
+    render(
+      <XmlTree
+        root={parseXml('<feed><entry><title>T</title></entry></feed>')}
+      />,
+    );
+    // Each non-self-closing element renders open + close, hence 2x.
+    expect(screen.getAllByText('feed')).toHaveLength(2);
+    expect(screen.getAllByText('entry')).toHaveLength(2);
+    expect(screen.getAllByText('title')).toHaveLength(2);
+    expect(screen.getByText('T')).toBeInTheDocument();
+  });
+
+  it('hides children via display:none on collapse (does not unmount)', () => {
+    // The whole point of using display:none rather than `{!collapsed
+    // && <Children/>}` is that nested collapse state survives a parent
+    // collapse/expand cycle. Verify the mechanism directly at the DOM
+    // level: after collapsing, the inner element's tag name STILL
+    // appears in the rendered tree (it's in the DOM, just hidden).
+    const { container } = render(
+      <XmlTree root={parseXml('<outer><inner>v</inner></outer>')} />,
+    );
+
+    // Both elements visible initially.
+    expect(container.textContent).toContain('inner');
+
+    // Collapse outer. There is one chevron button on outer (since
+    // outer has a renderable child); click it.
+    const chevronButtons = container.querySelectorAll('button');
+    fireEvent.click(chevronButtons[0]);
+
+    // Inner's tag name MUST still be in the DOM textContent — that's
+    // the unmount-vs-display-none assertion. If we used unmount, the
+    // string "inner" would have vanished entirely.
+    expect(container.textContent).toContain('inner');
+
+    // The children container should have display:none applied so the
+    // inner element is visually hidden.
+    const hiddenContainers = container.querySelectorAll(
+      'div[style*="display: none"]',
+    );
+    expect(hiddenContainers.length).toBeGreaterThan(0);
+  });
+
+  it('toggles the chevron icon aria-label between Collapse and Expand', () => {
+    const { container } = render(
+      <XmlTree root={parseXml('<outer><inner/></outer>')} />,
+    );
+    const button = container.querySelector('button');
+    if (!button) throw new Error('expected a chevron button');
+    expect(button.getAttribute('aria-label')).toBe('Collapse');
+    fireEvent.click(button);
+    expect(button.getAttribute('aria-label')).toBe('Expand');
+    fireEvent.click(button);
+    expect(button.getAttribute('aria-label')).toBe('Collapse');
+  });
+
+  it('renders a self-closing form when the element has no renderable children', () => {
+    const { container } = render(<XmlTree root={parseXml('<empty/>')} />);
+    // Self-closing should render as `<empty />` — i.e. there should be
+    // no separate closing tag span. Look for the inline " />" marker.
+    expect(container.textContent).toContain('/>');
+    // No closing-tag line — i.e. no `</empty>` rendered.
+    expect(container.textContent ?? '').not.toContain('</empty>');
+  });
+
+  it('renders a closing tag for elements with children', () => {
+    const { container } = render(
+      <XmlTree root={parseXml('<wrap><child/></wrap>')} />,
+    );
+    // wrap should have `</wrap>` closing tag visible.
+    expect(container.textContent ?? '').toContain('</');
+  });
+
+  it('preserves namespace prefixes in element names', () => {
+    render(
+      <XmlTree
+        root={parseXml(
+          '<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><media:thumbnail/></feed>',
+        )}
+      />,
+    );
+    expect(screen.getByText('media:thumbnail')).toBeInTheDocument();
+  });
+});

package/src/ui/response-renderers/__tests__/binary-too-large.test.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import type { ReactElement } from 'react';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { binaryTooLargeRenderer } from '../binary-too-large';
+
+const ctx = {
+  contentType: 'image/jpeg',
+  url: 'https://example.com/huge.jpg',
+};
+
+describe('binaryTooLargeRenderer', () => {
+  it('declares only the raw view — no toggle should appear', () => {
+    expect(binaryTooLargeRenderer.views).toEqual(['raw']);
+  });
+
+  it('does not support override', () => {
+    expect(binaryTooLargeRenderer.supportsOverride).toBe(false);
+  });
+
+  it('formats sub-1MB sizes in KB', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 800 * 1024 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(screen.getByText(/800\.0 KB/)).toBeInTheDocument();
+  });
+
+  it('formats multi-megabyte sizes in MB', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 12_500_000 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(screen.getByText(/11\.9 MB/)).toBeInTheDocument();
+  });
+
+  it('surfaces the size inside the "Response too large for preview" message', () => {
+    render(
+      binaryTooLargeRenderer.render({
+        view: 'raw',
+        body: { kind: 'binary-too-large', size: 6_000_000 },
+        ctx,
+      }) as ReactElement,
+    );
+    expect(
+      screen.getByText(/Response too large for preview/),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/response-renderers/__tests__/binary.test.tsx

@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+import type { ReactElement } from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { binaryRenderer } from '../binary';
+import type { RenderCtx } from '../types';
+
+const ctx: RenderCtx = {
+  contentType: 'application/pdf',
+  url: 'https://example.com/files/report.pdf',
+};
+
+const renderBinary = (base64 = 'AQID', override: Partial<RenderCtx> = {}) =>
+  render(
+    binaryRenderer.render({
+      view: 'raw',
+      body: { kind: 'binary', base64 },
+      ctx: { ...ctx, ...override },
+    }) as ReactElement,
+  );
+
+describe('binaryRenderer', () => {
+  beforeEach(() => {
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => 'blob:fake-url'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(),
+    });
+  });
+
+  it('declares only a raw view — no toggle should appear', () => {
+    expect(binaryRenderer.views).toEqual(['raw']);
+    expect(binaryRenderer.defaultView).toBe('raw');
+  });
+
+  it('does not support override', () => {
+    expect(binaryRenderer.supportsOverride).toBe(false);
+  });
+
+  it('matches binary bodies whose content-type is not an image', () => {
+    expect(
+      binaryRenderer.matches('application/pdf', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+    expect(
+      binaryRenderer.matches('application/octet-stream', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+    expect(
+      binaryRenderer.matches('audio/mpeg', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(true);
+  });
+
+  it('declines image binary bodies (those belong to imageRenderer)', () => {
+    expect(
+      binaryRenderer.matches('image/png', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(false);
+    expect(
+      binaryRenderer.matches('image/jpeg', {
+        kind: 'binary',
+        base64: 'AQID',
+      }),
+    ).toBe(false);
+  });
+
+  it('declines text bodies', () => {
+    expect(binaryRenderer.matches('text/plain', 'hello')).toBe(false);
+  });
+
+  it('renders the metadata card + hex view together', () => {
+    renderBinary('AQID');
+    // Metadata card: size + filename from URL.
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('3 bytes')).toBeInTheDocument();
+    expect(screen.getByText('report.pdf')).toBeInTheDocument();
+    // Hex view: offset, hex pair, ASCII column.
+    expect(screen.getByText('00000000')).toBeInTheDocument();
+    expect(screen.getByText('01 02 03')).toBeInTheDocument();
+    expect(screen.getByText('|...|')).toBeInTheDocument();
+  });
+});

package/src/ui/response-renderers/__tests__/dispatch.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { findRenderer, renderers } from '../index';
+import type { ResponseBody } from '../../../shared/client';
+
+describe('findRenderer', () => {
+  it('routes null body to the empty renderer', () => {
+    expect(findRenderer('text/plain', null).id).toBe('empty');
+  });
+
+  it('routes binary-too-large bodies to the binary-too-large renderer', () => {
+    const body: ResponseBody = { kind: 'binary-too-large', size: 9_999_999 };
+    expect(findRenderer('image/png', body).id).toBe('binary-too-large');
+  });
+
+  it('routes image/svg+xml strings to the svg renderer (not the image renderer)', () => {
+    expect(findRenderer('image/svg+xml', '<svg/>').id).toBe('svg');
+  });
+
+  it('routes image/png binary bodies to the image renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('image/png', body).id).toBe('image');
+  });
+
+  it('routes image/jpeg binary bodies to the image renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('image/jpeg', body).id).toBe('image');
+  });
+
+  it('routes non-image binary bodies to the binary renderer', () => {
+    const body: ResponseBody = { kind: 'binary', base64: 'AQID' };
+    expect(findRenderer('application/pdf', body).id).toBe('binary');
+    expect(findRenderer('application/octet-stream', body).id).toBe('binary');
+    expect(findRenderer('font/woff2', body).id).toBe('binary');
+    expect(findRenderer('audio/mpeg', body).id).toBe('binary');
+    expect(findRenderer('video/mp4', body).id).toBe('binary');
+    expect(findRenderer('application/zip', body).id).toBe('binary');
+  });
+
+  it('routes JSON content-types to the json renderer', () => {
+    expect(findRenderer('application/json', '{}').id).toBe('json');
+    expect(findRenderer('application/json; charset=utf-8', '{}').id).toBe(
+      'json',
+    );
+    expect(findRenderer('application/ld+json', '{}').id).toBe('json');
+  });
+
+  it('routes text/html (and its charset/case variants) to the html renderer', () => {
+    expect(findRenderer('text/html', '<p/>').id).toBe('html');
+    expect(findRenderer('text/html; charset=utf-8', '<p/>').id).toBe('html');
+    // Case-insensitive — proves we use normalizeContentType, not startsWith.
+    expect(findRenderer('text/HTML', '<p/>').id).toBe('html');
+    // Empty-string HTML body is still claimed by html (matcher is
+    // content-type-driven; the renderer happily produces a blank iframe).
+    expect(findRenderer('text/html', '').id).toBe('html');
+  });
+
+  it('routes XML content-types (and RFC 7303 +xml variants) to the xml renderer', () => {
+    expect(findRenderer('application/xml', '<x/>').id).toBe('xml');
+    expect(findRenderer('text/xml', '<x/>').id).toBe('xml');
+    expect(findRenderer('application/atom+xml', '<feed/>').id).toBe('xml');
+    expect(findRenderer('application/rss+xml', '<rss/>').id).toBe('xml');
+    expect(findRenderer('application/soap+xml; charset=utf-8', '<e/>').id).toBe(
+      'xml',
+    );
+    expect(findRenderer('application/xhtml+xml', '<html/>').id).toBe('xml');
+  });
+
+  it('keeps image/svg+xml routed to svg even though it would match the +xml suffix', () => {
+    // SVG matches isXmlContentType (it ends with +xml), but the registry
+    // order places svgRenderer earlier — first hit wins.
+    expect(findRenderer('image/svg+xml', '<svg/>').id).toBe('svg');
+  });
+
+  it('routes text/plain, application/javascript to the text fallback', () => {
+    expect(findRenderer('text/plain', 'hi').id).toBe('text-fallback');
+    expect(findRenderer('application/javascript', 'var a;').id).toBe(
+      'text-fallback',
+    );
+  });
+
+  it('routes string bodies with unknown content-types to the text fallback', () => {
+    expect(findRenderer('application/x-weird', 'hello').id).toBe(
+      'text-fallback',
+    );
+    expect(findRenderer('', 'hello').id).toBe('text-fallback');
+  });
+
+  it('falls through to the unknown renderer for unhandled non-null object bodies', () => {
+    // Build an off-union body shape to confirm the defensive last
+    // resort fires — should never happen in practice.
+    const offUnion = { kind: 'something-else' } as unknown as ResponseBody;
+    expect(findRenderer('application/octet-stream', offUnion).id).toBe(
+      'unknown',
+    );
+  });
+
+  it('places more specific matchers ahead of more general ones in the array', () => {
+    const ids = renderers.map((r) => r.id);
+    // svg must precede image; binary-too-large must precede image;
+    // image must precede binary (both claim body.kind === 'binary');
+    // empty must precede everything; unknown is the last entry.
+    expect(ids.indexOf('svg')).toBeLessThan(ids.indexOf('image'));
+    expect(ids.indexOf('binary-too-large')).toBeLessThan(ids.indexOf('image'));
+    expect(ids.indexOf('image')).toBeLessThan(ids.indexOf('binary'));
+    // html must precede text-fallback, otherwise text-fallback would
+    // claim every text/html body before html ever ran.
+    expect(ids.indexOf('html')).toBeLessThan(ids.indexOf('text-fallback'));
+    // svg must precede xml because image/svg+xml matches both
+    // predicates — registry order is the tiebreaker.
+    expect(ids.indexOf('svg')).toBeLessThan(ids.indexOf('xml'));
+    // xml must precede text-fallback, otherwise text-fallback would
+    // claim every XML-ish body before xml ever ran.
+    expect(ids.indexOf('xml')).toBeLessThan(ids.indexOf('text-fallback'));
+    expect(ids.indexOf('empty')).toBe(0);
+    expect(ids.indexOf('unknown')).toBe(ids.length - 1);
+  });
+
+  it('every renderer advertises a defaultView that appears in its views (or has empty views)', () => {
+    for (const renderer of renderers) {
+      if (renderer.views.length === 0) continue;
+      expect(renderer.views).toContain(renderer.defaultView);
+    }
+  });
+});