@designcrowd/library.brand-page 6.1.1-json-prereq-4 → 6.1.1

package/src/brand-page-maker/utils/rte-features.test.ts

@@ -1,378 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from '../composables/rich-text-editor/getRteExtensions';
-import { toRteJson, renderRteToHtml } from './rte-render.util';
-import { sanitizeRteJson } from './rte-sanitize.util';
-
-/**
- * BP-5787 — feature-by-feature coverage of the whole RTE JSON pipeline.
- *
- * Each case runs a piece of authored HTML through the exact production path:
- *   HTML → toRteJson (headless editor parse) → sanitizeRteJson → renderRteToHtml
- *          (DOM-less serialiser)
- * and asserts the feature survives end-to-end. One combined golden-master lives
- * in rte-render-parity.test.ts; this file isolates every feature so a
- * regression in any single one (a mark, a textStyle attr, a link, alignment, a
- * block node) fails on its own line instead of inside one opaque snapshot.
- */
-const pipe = (html: string): string => {
-  const json = toRteJson(html);
-
-  return renderRteToHtml(sanitizeRteJson(json));
-};
-
-describe('RTE features — inline marks', () => {
-  it('bold → <strong>', () => {
-    expect(pipe('<p><strong>x</strong></p>')).toContain('<strong>x</strong>');
-  });
-  it('italic → <em>', () => {
-    expect(pipe('<p><em>x</em></p>')).toContain('<em>x</em>');
-  });
-  it('underline → <u>', () => {
-    expect(pipe('<p><u>x</u></p>')).toContain('<u>x</u>');
-  });
-  it('strikethrough → <s>', () => {
-    expect(pipe('<p><s>x</s></p>')).toContain('<s>x</s>');
-  });
-  it('inline code → <code>', () => {
-    expect(pipe('<p><code>x</code></p>')).toContain('<code>x</code>');
-  });
-});
-
-describe('RTE features — mark nesting (decoration must inherit font-size)', () => {
-  // BP-5787 regression: the textStyle <span> that carries font-size must render
-  // OUTSIDE <u>/<s>, so the decoration marks inherit the applied size. Otherwise
-  // text-decoration thickness AND vertical position are computed from the base
-  // paragraph font, giving thin, mis-centred lines on large text (v3 default
-  // priority regression vs v2). Guarded by TextStyle priority: 99.
-  it('font-size <span> wraps <u> (not the reverse)', () => {
-    const out = pipe('<p><span style="font-size: 40px"><u>x</u></span></p>');
-
-    expect(out).toContain('<span style="font-size: 40px"><u>x</u></span>');
-    expect(out).not.toMatch(/<u><span/);
-  });
-
-  it('font-size <span> wraps <s> (not the reverse)', () => {
-    const out = pipe('<p><span style="font-size: 40px"><s>x</s></span></p>');
-
-    expect(out).toContain('<span style="font-size: 40px"><s>x</s></span>');
-    expect(out).not.toMatch(/<s><span/);
-  });
-});
-
-describe('RTE features — textStyle attrs (colour/font/spacing)', () => {
-  it('rgb colour is preserved', () => {
-    expect(
-      pipe('<p><span style="color: rgb(255, 0, 0)">x</span></p>'),
-    ).toContain('color: rgb(255, 0, 0)');
-  });
-
-  it('hex colour is preserved verbatim (Tiptap v3 no longer normalises to rgb)', () => {
-    expect(pipe('<p><span style="color: #00ff00">x</span></p>')).toContain(
-      'color: #00ff00',
-    );
-  });
-
-  it('theme token var(--…) colour survives verbatim (NOT flattened to rgb)', () => {
-    const out = pipe(
-      '<p><span style="color: var(--logo-text-color)">x</span></p>',
-    );
-
-    expect(out).toContain('color: var(--logo-text-color)');
-    expect(out).not.toContain('rgb(');
-  });
-
-  it('single-word font-family is preserved', () => {
-    expect(
-      pipe('<p><span style="font-family: Montserrat">x</span></p>'),
-    ).toContain('font-family: Montserrat');
-  });
-
-  it('multi-word font-family is preserved UNQUOTED (BP-5787 quote-strip)', () => {
-    const out = pipe('<p><span style="font-family: Open Sans">x</span></p>');
-
-    expect(out).toContain('font-family: Open Sans');
-    // must not carry the CSS quotes that the sanitiser would otherwise drop
-    expect(out).not.toContain('font-family: "Open Sans"');
-    expect(out).not.toContain('&quot;');
-  });
-
-  it('font-size / letter-spacing / line-height are preserved', () => {
-    expect(pipe('<p><span style="font-size: 2em">x</span></p>')).toContain(
-      'font-size: 2em',
-    );
-    expect(
-      pipe('<p><span style="letter-spacing: 0.1em">x</span></p>'),
-    ).toContain('letter-spacing: 0.1em');
-    expect(pipe('<p><span style="line-height: 1.5">x</span></p>')).toContain(
-      'line-height: 1.5',
-    );
-  });
-});
-
-describe('RTE features — background colour (highlight)', () => {
-  it('highlight → <mark> with data-color + background-color + color:inherit', () => {
-    const out = pipe(
-      '<p><mark data-color="#ffe08a" style="background-color: #ffe08a">x</mark></p>',
-    );
-
-    expect(out).toContain(
-      '<mark data-color="#ffe08a" style="background-color: #ffe08a; color: inherit">x</mark>',
-    );
-  });
-
-  it('theme token background colour survives verbatim', () => {
-    const out = pipe(
-      '<p><mark data-color="var(--logo-primary-color)" style="background-color: var(--logo-primary-color)">x</mark></p>',
-    );
-
-    expect(out).toContain('background-color: var(--logo-primary-color)');
-  });
-});
-
-describe('RTE features — hyperlinks', () => {
-  it('external link keeps href + target + rel', () => {
-    const out = pipe(
-      '<p><a target="_blank" rel="noopener noreferrer" href="https://example.com">x</a></p>',
-    );
-
-    expect(out).toContain('href="https://example.com"');
-    expect(out).toContain('target="_blank"');
-    expect(out).toContain('rel="noopener noreferrer"');
-  });
-
-  it('freshly authored external link (no target/rel in source) still renders target + rel', () => {
-    // Regression: target/rel are derived at render time from the href, so a link
-    // authored as a bare <a href> — the normal editor case — must still open in a
-    // new tab with noopener. Before the render-time policy, these were injected by
-    // the HTML DOMPurify sanitiser and were lost when storage moved to JSON.
-    const out = pipe('<p><a href="https://example.com">x</a></p>');
-
-    expect(out).toContain('href="https://example.com"');
-    expect(out).toContain('target="_blank"');
-    expect(out).toContain('rel="noopener noreferrer"');
-  });
-
-  it('external link with a stale target is normalised to _blank', () => {
-    const out = pipe(
-      '<p><a target="_self" href="https://example.com">x</a></p>',
-    );
-
-    expect(out).toContain('target="_blank"');
-    expect(out).not.toContain('target="_self"');
-  });
-
-  it('internal relative link keeps its href and gets no target/rel', () => {
-    const out = pipe('<p><a href="/about">x</a></p>');
-
-    expect(out).toContain('href="/about"');
-    expect(out).not.toContain('target=');
-    expect(out).not.toContain('rel=');
-  });
-
-  it('internal page reference (pageid:) survives the sanitiser with no target/rel', () => {
-    // pageid: hrefs are resolved to real routes later in the view-model
-    // transform; the sanitiser must not strip them, and they are not external so
-    // they get no target/rel.
-    const out = pipe('<p><a href="pageid:abc-123">x</a></p>');
-
-    expect(out).toContain('href="pageid:abc-123"');
-    expect(out).not.toContain('target=');
-  });
-
-  it('javascript: link is dropped (mark removed, text kept)', () => {
-    const out = pipe('<p><a href="javascript:alert(1)">x</a></p>');
-
-    expect(out).not.toContain('<a');
-    expect(out).not.toContain('javascript:');
-    expect(out).toContain('x');
-  });
-
-  it('data: link is dropped', () => {
-    const out = pipe(
-      '<p><a href="data:text/html,<script>1</script>">x</a></p>',
-    );
-
-    expect(out).not.toContain('<a');
-    expect(out).not.toContain('data:');
-  });
-});
-
-describe('RTE features — text alignment', () => {
-  for (const align of ['center', 'right', 'justify', 'left'] as const) {
-    it(`paragraph text-align: ${align}`, () => {
-      expect(pipe(`<p style="text-align: ${align}">x</p>`)).toContain(
-        `<p style="text-align: ${align}">`,
-      );
-    });
-  }
-
-  it('heading carries its alignment', () => {
-    expect(pipe('<h2 style="text-align: center">x</h2>')).toContain(
-      '<h2 style="text-align: center">',
-    );
-  });
-});
-
-describe('RTE features — block nodes', () => {
-  it('headings h1–h6', () => {
-    for (const level of [1, 2, 3, 4, 5, 6]) {
-      expect(pipe(`<h${level}>x</h${level}>`)).toContain(`<h${level}`);
-      expect(pipe(`<h${level}>x</h${level}>`)).toContain(`</h${level}>`);
-    }
-  });
-
-  it('bullet list → <ul><li>', () => {
-    const out = pipe('<ul><li>a</li><li>b</li></ul>');
-
-    expect(out).toContain('<ul>');
-    expect(out).toContain('<li>');
-    expect(out).toContain('a');
-    expect(out).toContain('b');
-  });
-
-  it('ordered list → <ol><li>', () => {
-    expect(pipe('<ol><li>a</li></ol>')).toContain('<ol>');
-  });
-
-  it('blockquote → <blockquote>', () => {
-    expect(pipe('<blockquote><p>q</p></blockquote>')).toContain('<blockquote>');
-  });
-
-  it('code block → <pre><code>', () => {
-    expect(pipe('<pre><code>c</code></pre>')).toContain('<pre><code>');
-  });
-
-  it('hard break → <br/>', () => {
-    expect(pipe('<p>a<br>b</p>')).toContain('<br/>');
-  });
-
-  it('horizontal rule → <hr/>', () => {
-    expect(pipe('<p>a</p><hr><p>b</p>')).toContain('<hr/>');
-  });
-});
-
-describe('RTE features — combinations & escaping', () => {
-  it('nested marks (colour + bold + italic) all survive on the same run', () => {
-    const out = pipe(
-      '<p><span style="color: rgb(1, 2, 3)"><strong><em>x</em></strong></span></p>',
-    );
-
-    expect(out).toContain('color: rgb(1, 2, 3)');
-    expect(out).toContain('<strong>');
-    expect(out).toContain('<em>');
-  });
-
-  it('a styled hyperlink keeps both the colour and the link', () => {
-    const out = pipe(
-      '<p><a href="https://x.com"><span style="color: rgb(0, 151, 215)">x</span></a></p>',
-    );
-
-    expect(out).toContain('href="https://x.com"');
-    expect(out).toContain('color: rgb(0, 151, 215)');
-  });
-
-  it('HTML-special characters in text are escaped', () => {
-    const out = pipe('<p>a &lt;b&gt; &amp; "c"</p>');
-
-    expect(out).toContain('&lt;b&gt;');
-    expect(out).toContain('&amp;');
-    expect(out).not.toContain('<b>');
-  });
-
-  it('serialisation is idempotent (serialize(json) === serialize(reparse))', () => {
-    const html =
-      '<h2 style="text-align: center"><span style="color: var(--logo-text-color); font-family: Open Sans; font-size: 1.5em">Heading</span></h2>' +
-      '<p><strong>bold</strong> <em>italic</em> <u>u</u> <s>s</s> ' +
-      '<mark data-color="#ffe08a" style="background-color: #ffe08a">hl</mark> ' +
-      '<a target="_blank" rel="noopener noreferrer" href="https://x.com">link</a></p>';
-    const once = pipe(html);
-    const twice = renderRteToHtml(sanitizeRteJson(toRteJson(once)));
-
-    expect(twice).toEqual(once);
-  });
-});
-
-describe('RTE features — maker toolbar commands (emit path)', () => {
-  let editors: Editor[] = [];
-
-  afterEach(() => {
-    editors.forEach((e) => e.destroy());
-    editors = [];
-  });
-
-  // Apply a real editor command to a full selection (as the toolbar does),
-  // then run the emitted JSON through sanitise + serialise.
-  const applied = (fn: (e: Editor) => void): string => {
-    const editor = new Editor({
-      extensions: getRteExtensions({ restrictStarterKit: true }),
-    });
-
-    editors.push(editor);
-    editor.commands.setContent('<p>styled text</p>');
-    editor.commands.selectAll();
-    fn(editor);
-
-    return renderRteToHtml(sanitizeRteJson(editor.getJSON()));
-  };
-
-  it('setColor', () => {
-    expect(applied((e) => e.commands.setColor('rgb(255, 0, 0)'))).toContain(
-      'color: rgb(255, 0, 0)',
-    );
-  });
-
-  it('setHighlight (background colour)', () => {
-    const out = applied((e) => e.commands.setHighlight({ color: '#ffe08a' }));
-
-    expect(out).toContain('background-color: #ffe08a');
-    expect(out).toContain('<mark');
-  });
-
-  it('toggleBold / toggleItalic / toggleUnderline / toggleStrike', () => {
-    expect(applied((e) => e.commands.toggleBold())).toContain('<strong>');
-    expect(applied((e) => e.commands.toggleItalic())).toContain('<em>');
-    expect(applied((e) => e.commands.toggleUnderline())).toContain('<u>');
-    expect(applied((e) => e.commands.toggleStrike())).toContain('<s>');
-  });
-
-  it('setFontFamily (multi-word, unquoted)', () => {
-    const out = applied((e) =>
-      (e.commands as { setFontFamily: (f: string) => boolean }).setFontFamily(
-        'Open Sans',
-      ),
-    );
-
-    expect(out).toContain('font-family: Open Sans');
-    expect(out).not.toContain('&quot;');
-  });
-
-  it('setFontSize / setLetterSpacing', () => {
-    expect(
-      applied((e) =>
-        (e.commands as { setFontSize: (v: string) => boolean }).setFontSize(
-          '2em',
-        ),
-      ),
-    ).toContain('font-size: 2em');
-    expect(
-      applied((e) =>
-        (
-          e.commands as { setLetterSpacing: (v: string) => boolean }
-        ).setLetterSpacing('0.1em'),
-      ),
-    ).toContain('letter-spacing: 0.1em');
-  });
-
-  it('setTextAlign', () => {
-    expect(applied((e) => e.commands.setTextAlign('center'))).toContain(
-      'text-align: center',
-    );
-  });
-
-  it('setLink keeps the href through the pipeline', () => {
-    expect(
-      applied((e) => e.commands.setLink({ href: 'https://x.com' })),
-    ).toContain('href="https://x.com"');
-  });
-});

package/src/brand-page-maker/utils/rte-render-parity.test.ts

@@ -1,164 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import type { Editor } from '@tiptap/vue-3';
-import { useExternalRichTextEditor } from '../composables/rich-text-editor/useRichTextEditor';
-import {
-  renderRteToHtml,
-  toRteJson,
-  getRteJsonPlainText,
-} from './rte-render.util';
-import {
-  COMPLEX_RTE_HTML,
-  THEME_TOKEN_REF,
-} from '../__fixtures__/complex-rte.fixture';
-
-/**
- * BP-5787 — golden-master render-parity baseline.
- *
- * Captured on the CURRENT (HTML) pipeline. These committed snapshots are the
- * frozen reference for the HTML→JSON migration:
- *
- *   - `editor-normalized-html` is what the editor renders the fixture to today.
- *     After the migration, `htmlFromJson(getJSON())` MUST equal this snapshot —
- *     i.e. the JSON pipeline reproduces identical rendered output (no drift).
- *
- *   - `editor-json` freezes the RAW editor output (`getJSON()`), pre-sanitise. It
- *     is expected to change exactly once, intentionally, when storage flips to JSON
- *     (see "expected vs forbidden drift" in docs/plans/BP-5787-...html). NOTE: this
- *     is not the persisted form — the stored doc runs through `sanitizeRteJson`
- *     first, which (for links) keeps href only; target/rel are render-derived and
- *     stripped from storage. The persisted link shape is pinned in
- *     rte-sanitize-json.test.ts, not here.
- *
- * The headless editor uses the SAME extension set as the live editor
- * (useExternalRichTextEditor), so it is a faithful stand-in for the renderer.
- */
-describe('BP-5787 RTE render parity (golden master)', () => {
-  let editor: Editor;
-
-  const makeEditor = (): Editor => {
-    editor = useExternalRichTextEditor().externalEditor;
-
-    return editor;
-  };
-
-  afterEach(() => {
-    editor?.destroy();
-  });
-
-  it('T1 — editor renders the complex fixture to the frozen HTML baseline', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    // The golden master. The JSON pipeline must reproduce this exactly.
-    expect(ed.getHTML()).toMatchSnapshot('editor-normalized-html');
-  });
-
-  it('T1 — round-trip is idempotent (html → json → html === json → html)', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-    const pass1 = ed.getHTML();
-    const json = ed.getJSON();
-
-    // Re-seed from the JSON the migration will store, render again.
-    ed.commands.setContent(json);
-    const pass2 = ed.getHTML();
-
-    expect(pass2).toEqual(pass1);
-  });
-
-  it('T6 — freezes the RAW editor JSON (pre-sanitise; not the persisted form)', () => {
-    // getJSON() is the editor's raw output: link marks still carry the parsed
-    // target/rel/class/title. The persisted form runs through sanitizeRteJson
-    // (href-only links) — pinned in rte-sanitize-json.test.ts, not here.
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    expect(ed.getJSON()).toMatchSnapshot('editor-json');
-  });
-
-  it('T2 — theme token ref survives the round-trip (NOT flattened to rgb)', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-
-    // Today the editor preserves var(--…) in marks; the migration must keep it.
-    expect(ed.getHTML()).toContain(THEME_TOKEN_REF);
-    expect(JSON.stringify(ed.getJSON())).toContain(THEME_TOKEN_REF);
-  });
-
-  it('T1 — render-from-JSON (DOM-less renderer) produces equivalent HTML', () => {
-    // renderRteToHtml serialises JSON → HTML via @tiptap/static-renderer from the
-    // extension schema (no editor/DOM, so it works on the server). Output is
-    // semantically identical to the editor's — the Playwright visual golden-master
-    // is the authority on pixel parity; here we freeze the renderer output and
-    // assert structure.
-    const viaJson = renderRteToHtml(toRteJson(COMPLEX_RTE_HTML));
-
-    expect(viaJson).toMatchSnapshot('serializer-html');
-
-    // marks/nodes preserved
-    expect(viaJson).toContain('<strong>bold</strong>');
-    expect(viaJson).toContain('<em>italic</em>');
-    expect(viaJson).toContain('<u>underline</u>');
-    expect(viaJson).toContain('<s>strike</s>');
-    expect(viaJson).toContain('font-family: Montserrat');
-    expect(viaJson).toContain('font-size: 1.5em');
-    // theme token ref preserved (the crux of BP-5787)
-    expect(viaJson).toContain('color: var(--logo-text-color)');
-    // links + alignment
-    expect(viaJson).toContain('href="/about"');
-    expect(viaJson).toContain('href="https://example.com"');
-    expect(viaJson).toContain('text-align: center');
-    expect(viaJson).toContain('text-align: right');
-  });
-
-  it('T4 — legacy HTML strings render unchanged (back-compat passthrough)', () => {
-    expect(renderRteToHtml(COMPLEX_RTE_HTML)).toEqual(COMPLEX_RTE_HTML);
-  });
-
-  it('T8 — getRteJsonPlainText extracts visible text only (for fraud/translate)', () => {
-    const json = toRteJson(COMPLEX_RTE_HTML)!;
-    const text = getRteJsonPlainText(json);
-
-    expect(text).toContain('Themed heading');
-    expect(text).toContain('bold');
-    expect(text).toContain('external link');
-    // no markup or token refs leak into the extracted text
-    expect(text).not.toContain('<');
-    expect(text).not.toContain('var(--');
-    expect(text).not.toContain('font-size');
-  });
-
-  it('T1 — preserves every mark/node in the fixture', () => {
-    const ed = makeEditor();
-
-    ed.commands.setContent(COMPLEX_RTE_HTML);
-    const html = ed.getHTML();
-
-    // bold / italic / underline / strike
-    expect(html).toContain('<strong>');
-    expect(html).toContain('<em>');
-    expect(html).toContain('<u>');
-    expect(html).toContain('<s>');
-    // textStyle attrs
-    expect(html).toContain('font-family: Montserrat');
-    expect(html).toContain('font-size: 1.5em');
-    expect(html).toContain('letter-spacing: 0.05em');
-    expect(html).toContain('line-height: 1.4');
-    // highlight: data-color keeps the hex; the rendered style is normalised to rgb()
-    expect(html).toContain('data-color="#ffe08a"');
-    expect(html).toContain('background-color: rgb(255, 224, 138)');
-    // literal hex colour is normalised to rgb() by the editor...
-    expect(html).toContain('color: rgb(255, 0, 0)');
-    // ...but the THEME TOKEN ref is preserved verbatim (the crux of BP-5787)
-    expect(html).toContain('color: var(--logo-text-color)');
-    expect(html).toContain('text-align: center');
-    expect(html).toContain('text-align: right');
-    // links
-    expect(html).toContain('href="/about"');
-    expect(html).toContain('href="https://example.com"');
-  });
-});