Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
3.1 kB · 69 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970import { renderToStaticMarkup } from 'react-dom/server';import { afterEach, expect, test } from 'vite-plus/test';import shapeScript from '../../generated/editor-skeleton-script.iife.js?raw';import { encodeDocsPlaygroundHash } from '../../lib/docs-playground-hash.js';import { toSkeletonLines } from '../../lib/playground-editor-shape.js';import { EditorSkeleton } from './editor-skeleton';
let container: HTMLElement | undefined;
afterEach(() => { container?.remove(); container = undefined; // The script writes `location.hash` directly; clear it so it doesn't leak // into other tests that read `location.hash`. history.replaceState(null, '', location.pathname + location.search);});
const MULTI_LINE_CODE = 'function greet(name) {\n\treturn `Hi, ${name}`;\n}\n';
// Deliberately a different shape (one row, non-empty) than `MULTI_LINE_CODE`,// mirroring the real page: the server only ever renders the skeleton for the// default code, never for the shared hash. If the script silently bailed and// left the server markup alone, asserting against `MULTI_LINE_CODE`'s shape// below would fail, proving the rewrite actually ran.const SERVER_SIDE_CODE = 'const placeholder = true;';
/** * Puts server-rendered skeleton markup (for `code`) in a detached container, * followed by the compiled pre-hydration script as a real `<script>` element * — the script relies on `document.currentScript.previousElementSibling`, and * script elements assigned via `innerHTML` never execute, so the script is * built with `createElement` and run via `textContent`, matching how * `EditorSkeletonShapeScript` inlines it after the skeleton root. */function renderSkeletonThenRunScript(code: string, hash: string): HTMLElement { container = document.body.appendChild(document.createElement('div')); container.innerHTML = renderToStaticMarkup(<EditorSkeleton code={code} showPill={false} />); location.hash = hash;
const script = document.createElement('script'); script.textContent = shapeScript; container.appendChild(script);
return container;}
test('rewrites the skeleton to the decoded shape for a shared link with URL-encoded commas', () => { const hash = encodeDocsPlaygroundHash(MULTI_LINE_CODE); // `encodeDocsPlaygroundHash` percent-encodes the `shape` param's commas via // `URLSearchParams` — assert that assumption stays true, since the whole // point of this test is exercising that encoded form. expect(hash).toContain('%2C');
const root = renderSkeletonThenRunScript(SERVER_SIDE_CODE, hash);
const expectedLines = toSkeletonLines(MULTI_LINE_CODE); const rows = root.querySelectorAll('[data-line]'); expect(rows).toHaveLength(expectedLines.length);
for (const [index, line] of expectedLines.entries()) { const row = rows[index]; expect(row?.querySelector('[data-line-number]')?.textContent).toBe(String(index + 1));
const bar = row?.querySelector('[data-line-bar]'); const expectedStyle = line.length > 0 ? `--indent:${line.indent}ch;--length:${line.length}ch` : null; expect(bar?.getAttribute('style') ?? null).toBe(expectedStyle); }});