@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/components/ViewToggle.tsx

@@ -0,0 +1,44 @@
+import type { ResponseView } from '../response-renderers';
+import { cn } from '../utils/cn';
+
+const VIEW_LABELS: Record<ResponseView, string> = {
+  preview: 'Preview',
+  raw: 'Raw',
+};
+
+export type ViewToggleProps = {
+  views: ResponseView[];
+  value: ResponseView;
+  onChange: (view: ResponseView) => void;
+};
+
+export const ViewToggle = ({ views, value, onChange }: ViewToggleProps) => {
+  if (views.length <= 1) return null;
+  return (
+    <div
+      role="tablist"
+      className="flex items-center rounded-md border border-gray-700 overflow-hidden ms-2"
+    >
+      {views.map((v) => (
+        <button
+          key={v}
+          type="button"
+          role="tab"
+          aria-selected={value === v}
+          onClick={(e) => {
+            e.stopPropagation();
+            onChange(v);
+          }}
+          className={cn(
+            'px-2 py-0.5 text-xs transition-colors',
+            value === v
+              ? 'bg-blue-600 text-white'
+              : 'text-gray-300 hover:bg-gray-700',
+          )}
+        >
+          {VIEW_LABELS[v]}
+        </button>
+      ))}
+    </div>
+  );
+};

package/src/ui/components/XmlTree.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { JsonTreeCopyableItem } from './JsonTreeCopyableItem';
+
+export type XmlTreeProps = {
+  root: Element;
+};
+
+export const XmlTree = ({ root }: XmlTreeProps) => {
+  return (
+    <div className="font-mono text-sm text-gray-200">
+      <XmlNode node={root} depth={0} />
+    </div>
+  );
+};
+
+type XmlNodeProps = {
+  node: Node;
+  depth: number;
+};
+
+// Whitespace-only text between sibling elements is DOM-pretty-print
+// noise. Filter it so a 10-element document doesn't render as 21 nodes.
+// Mixed content like `<p>Hello <b>world</b>!</p>` survives because its
+// fragments contain non-whitespace.
+const isWhitespaceOnlyText = (node: Node): boolean =>
+  node.nodeType === Node.TEXT_NODE && /^\s*$/.test(node.nodeValue ?? '');
+
+const renderableChildren = (node: Node): Node[] =>
+  Array.from(node.childNodes).filter((child) => !isWhitespaceOnlyText(child));
+
+const XmlNode = ({ node, depth }: XmlNodeProps) => {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    return <XmlElementNode element={node as Element} depth={depth} />;
+  }
+  if (node.nodeType === Node.CDATA_SECTION_NODE) {
+    return <XmlCDataNode cdata={node as CDATASection} depth={depth} />;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    return <XmlTextNode text={node as Text} depth={depth} />;
+  }
+  // Comments, processing instructions, DOCTYPE — intentionally not
+  // rendered in the tree. They're rare in API responses; the Raw view
+  // still shows them verbatim.
+  return null;
+};
+
+type XmlElementNodeProps = {
+  element: Element;
+  depth: number;
+};
+
+const XmlElementNode = ({ element, depth }: XmlElementNodeProps) => {
+  const [expanded, setExpanded] = useState(true);
+  const children = renderableChildren(element);
+  const hasChildren = children.length > 0;
+  const tagName = element.nodeName;
+  const attributes = Array.from(element.attributes);
+
+  // Self-closing if no renderable children.
+  const isSelfClosing = !hasChildren;
+
+  const serializeSubtree = () => new XMLSerializer().serializeToString(element);
+
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <div className="flex items-start">
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="mt-0.5 mr-1 -ml-5 text-gray-500 hover:text-gray-300 transition-colors"
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+          >
+            {expanded ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+          </button>
+        ) : null}
+        <JsonTreeCopyableItem getCopyableValue={serializeSubtree}>
+          <span>
+            <span className="text-gray-500">&lt;</span>
+            <span className="text-blue-400">{tagName}</span>
+            {attributes.map((attr) => (
+              <XmlAttribute key={attr.name} attr={attr} />
+            ))}
+            <span className="text-gray-500">{isSelfClosing ? ' />' : '>'}</span>
+          </span>
+        </JsonTreeCopyableItem>
+      </div>
+
+      {hasChildren ? (
+        <>
+          <div style={{ display: expanded ? 'block' : 'none' }}>
+            {children.map((child, idx) => (
+              <XmlNode key={idx} node={child} depth={depth + 1} />
+            ))}
+          </div>
+          {/* Collapsed inline closing tag preview — gives a visual hint
+              of what was collapsed. */}
+          {!expanded ? <span className="text-gray-500 ml-1">…</span> : null}
+          <div>
+            <span className="text-gray-500">&lt;/</span>
+            <span className="text-blue-400">{tagName}</span>
+            <span className="text-gray-500">&gt;</span>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+const XmlAttribute = ({ attr }: { attr: Attr }) => (
+  <>
+    <span> </span>
+    <span className="text-amber-400">{attr.name}</span>
+    <span className="text-gray-500">=</span>
+    <span className="text-gray-500">&quot;</span>
+    <span className="text-green-400">{attr.value}</span>
+    <span className="text-gray-500">&quot;</span>
+  </>
+);
+
+type XmlTextNodeProps = {
+  text: Text;
+  depth: number;
+};
+
+const XmlTextNode = ({ text, depth }: XmlTextNodeProps) => {
+  const value = text.nodeValue ?? '';
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <JsonTreeCopyableItem getCopyableValue={() => value}>
+        <span className="text-gray-200">{value}</span>
+      </JsonTreeCopyableItem>
+    </div>
+  );
+};
+
+type XmlCDataNodeProps = {
+  cdata: CDATASection;
+  depth: number;
+};
+
+const XmlCDataNode = ({ cdata, depth }: XmlCDataNodeProps) => {
+  const value = cdata.nodeValue ?? '';
+  return (
+    <div style={{ paddingLeft: depth === 0 ? 0 : `1rem` }}>
+      <JsonTreeCopyableItem getCopyableValue={() => value}>
+        <span>
+          <span className="text-purple-400">&lt;![CDATA[</span>
+          <span className="text-gray-200 whitespace-pre-wrap">{value}</span>
+          <span className="text-purple-400">]]&gt;</span>
+        </span>
+      </JsonTreeCopyableItem>
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { CodeBlock } from '../CodeBlock';
+
+describe('CodeBlock', () => {
+  it('renders small string content as a <pre> (no virtualization)', () => {
+    const { container } = render(<CodeBlock>{'a'.repeat(100)}</CodeBlock>);
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+  });
+
+  it('stays flat at exactly the 50_000-character boundary (inclusive)', () => {
+    // The branch condition is `> 50_000`, so length === 50_000 must
+    // still render as <pre>. Locks the inclusive-boundary semantics.
+    const { container } = render(<CodeBlock>{'a'.repeat(50_000)}</CodeBlock>);
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+  });
+
+  it('switches to virtualized rendering at 50_001 characters', () => {
+    const { container } = render(<CodeBlock>{'a'.repeat(50_001)}</CodeBlock>);
+    expect(screen.getByTestId('virtuoso-mock')).toBeInTheDocument();
+    // No <pre> emitted by CodeBlock when on the virtualized path.
+    expect(container.querySelector('pre')).toBeNull();
+  });
+
+  it('preserves the body content across the virtualization threshold', () => {
+    // Build a body whose head and tail are recognizable tokens. The
+    // vi.mock passthrough renders every row, so both ends should be
+    // visible in the DOM after virtualization kicks in.
+    const filler = 'x'.repeat(50_000);
+    const body = `START\n${filler}\nEND`;
+    render(<CodeBlock>{body}</CodeBlock>);
+    expect(screen.getByTestId('virtuoso-mock')).toBeInTheDocument();
+    expect(screen.getByText('START')).toBeInTheDocument();
+    expect(screen.getByText('END')).toBeInTheDocument();
+  });
+
+  it('splits virtualized content into one row per newline', () => {
+    const lines = ['line-a', 'line-b', 'line-c'];
+    // Pad with a single long line so total length crosses the threshold,
+    // keeping the lines themselves short and matchable.
+    const body = `${lines.join('\n')}\n${'y'.repeat(50_001)}`;
+    render(<CodeBlock>{body}</CodeBlock>);
+    expect(screen.getByText('line-a')).toBeInTheDocument();
+    expect(screen.getByText('line-b')).toBeInTheDocument();
+    expect(screen.getByText('line-c')).toBeInTheDocument();
+  });
+
+  it('renders React-element children unchanged regardless of nested content size', () => {
+    // typeof children !== 'string' MUST take precedence — even if the
+    // wrapped element contains an enormous string internally, CodeBlock
+    // should stay on the flat <pre> path because the children prop
+    // itself is a React element, not a string.
+    const huge = 'z'.repeat(50_001);
+    const { container } = render(
+      <CodeBlock>
+        <div data-testid="custom-child">{huge}</div>
+      </CodeBlock>,
+    );
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(screen.queryByTestId('virtuoso-mock')).toBeNull();
+    expect(screen.getByTestId('custom-child')).toBeInTheDocument();
+  });
+
+  it('forwards className to the flat <pre> branch', () => {
+    const { container } = render(
+      <CodeBlock className="extra-class">{'short'}</CodeBlock>,
+    );
+    const pre = container.querySelector('pre');
+    expect(pre).toBeInTheDocument();
+    expect(pre?.className).toContain('extra-class');
+  });
+
+  it('forwards className to the virtualized branch via Virtuoso', () => {
+    const { container } = render(
+      <CodeBlock className="extra-class">{'a'.repeat(50_001)}</CodeBlock>,
+    );
+    const mockRoot = container.querySelector('[data-testid="virtuoso-mock"]');
+    expect(mockRoot).toBeInTheDocument();
+    // The vi.mock passthrough forwards `className` onto the wrapper so
+    // we can assert the prop reached Virtuoso. The real Virtuoso applies
+    // it to its outer scroll container, giving the same dark-bg /
+    // monospace / border styling as the flat <pre> branch.
+    expect(mockRoot?.className).toContain('extra-class');
+  });
+});

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();
+  });
+});