matsandClaude Sonnet 5.5
1af9ec3172
Injectable React editor that is side-loaded onto the statically rendered page and edits through the CMS HTTP API (POST /api/edit). - Shadow-root UI over server HTML; patches morphed in, undo/redo from server inverses (reuses @k6n/cms-editor EditClient/morph/markdown editor) - Sign-in via go-auth device grant as the CMS client (aud matches), token refresh + 401 retry; live preview swapped in on load and on tab focus - Schema-driven property form (arrays, maps, variants, $ref, validation) - Every string property editable where it is rendered (value-bound inline fields and attribute chips), markdown WYSIWYG for marked fields - Block palette + drag & drop with ghost drop targets, insertion slots, sort snapping between siblings (Alt to nest) - x-style annotations: on-page padding/margin/gap handles, Style panel, wrap-in-layout; x-graph label/group for titles and grouping - Dev workflow: Vite proxy to the live site (token injected server-side) or an offline in-memory mock CMS; jsdom test suite Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
// Test harness: boots the real editor against the mock CMS inside jsdom.
|
|
import { act } from 'react'
|
|
import { Api } from '../src/api'
|
|
import { AuthManager } from '../src/auth'
|
|
import { boot } from '../src/boot'
|
|
import type { EditorHandle } from '../src/boot'
|
|
import { createMockCms } from '../mock/server'
|
|
import { renderPage } from '../mock/fixtures'
|
|
|
|
export interface Harness {
|
|
cms: ReturnType<typeof createMockCms>
|
|
auth: AuthManager
|
|
editor: EditorHandle
|
|
/** Wait for async work (fetches, patch application, React). */
|
|
settle(): Promise<void>
|
|
shadow: ShadowRoot
|
|
/** Click something inside the editor UI by accessible label. */
|
|
press(label: string): Promise<void>
|
|
cleanup(): void
|
|
}
|
|
|
|
/** `stale`: the DOM is the *published* page, and the store has moved on since (the base-page problem). */
|
|
export async function setup(opts: { token?: string; auth?: boolean; stale?: boolean; noPreviewApi?: boolean } = {}): Promise<Harness> {
|
|
const cms = createMockCms({ token: opts.token, auth: opts.auth })
|
|
document.head.innerHTML = ''
|
|
window.open = () => null
|
|
document.body.innerHTML = renderPage(cms.graph).match(/<body>([\s\S]*)<\/body>/)![1]
|
|
if (opts.stale) cms.graph.edit([{ op: 'set', id: 'h1', data: { text: 'Latest from the store' } }])
|
|
if (opts.noPreviewApi) cms.disablePreviewApi()
|
|
const auth = new AuthManager({ fetch: cms.fetch, persistent: null, session: null, sleep: (ms) => new Promise((r) => setTimeout(r, Math.min(ms, 5))) })
|
|
const api = new Api({ fetch: cms.fetch, auth })
|
|
let editor!: EditorHandle
|
|
await act(async () => {
|
|
editor = boot({ api })
|
|
})
|
|
const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 25))))
|
|
const shadow = document.getElementById('cms-onpage-editor')!.shadowRoot!
|
|
return {
|
|
cms,
|
|
auth,
|
|
editor,
|
|
settle,
|
|
shadow,
|
|
async press(label) {
|
|
const el = shadow.querySelector<HTMLElement>(`[aria-label="${label}"], [title="${label}"]`)
|
|
if (!el) throw new Error(`no control "${label}" in editor UI`)
|
|
await act(async () => el.click())
|
|
await settle()
|
|
},
|
|
cleanup() {
|
|
editor.destroy()
|
|
document.body.innerHTML = ''
|
|
},
|
|
}
|
|
}
|
|
|
|
export const click = (el: Element) => el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true }))
|
|
export const byId = (id: string) => document.querySelector<HTMLElement>(`[data-cms="${id}"]`)!
|