@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/utils/text-role-css.util.test.ts

@@ -0,0 +1,525 @@
+import { describe, it, expect } from 'vitest';
+import {
+  buildTextRoleRootCss,
+  buildTextRoleRootCssText,
+  buildTextRoleScopedCss,
+  buildTextRoleScopedCssText,
+  textRoleClassName,
+  cssFontFamilyValue,
+  fillRteRunTypography,
+  roleTypographyStyle,
+  TEXT_ROLE_STYLE_ATTRIBUTE,
+  TEXT_ROLE_SCOPED_ATTRIBUTE,
+} from './text-role-css.util';
+import { TextStyles, CANONICAL_TEXT_STYLE_TYPES } from '../models/styles.model';
+
+// Minimal Tiptap doc with one paragraph of runs; each run's marks are passed through.
+const docWith = (
+  ...runs: { text: string; marks?: { type: string; attrs?: object }[] }[]
+) => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: runs.map((r) => ({
+        type: 'text',
+        text: r.text,
+        marks: r.marks,
+      })),
+    },
+  ],
+});
+
+const firstRunMark = (doc: ReturnType<typeof docWith>) =>
+  (doc.content[0].content[0].marks ?? []).find(
+    (m) => m.type === 'textStyle',
+  ) as { type: string; attrs: Record<string, string> } | undefined;
+
+const defaultOptions = () => TextStyles.GetDefaultTextStyle().textStyleOptions;
+
+describe('text-role-css.util', () => {
+  describe('buildTextRoleRootCss', () => {
+    it('emits one class rule per canonical role, typography only, at :root scope', () => {
+      const css = buildTextRoleRootCss(defaultOptions());
+
+      expect(css).toContain(`<style ${TEXT_ROLE_STYLE_ATTRIBUTE}>`);
+      // every canonical role gets a global (unscoped) class rule
+      CANONICAL_TEXT_STYLE_TYPES.forEach((type) => {
+        expect(css).toContain(`.${textRoleClassName(type)} {`);
+      });
+      // BP-5969: the class emits var DEFINITIONS ONLY — it applies nothing (application is per-run
+      // in RTE, or on the plain-text element). weight is now var-backed too (--role-font-weight), so a
+      // role weight edit repaints linked RTE via the cascade. Weight/style/decoration/letter-spacing
+      // fall back to their CSS-neutral default (normal/none) when the role omits them, so a linked
+      // run's `var(--role-<x>)` always resolves instead of inheriting.
+      expect(css).toContain(
+        `.bp-text-role-heading1 { --role-font-family: Lato; --role-font-size: 6.875em; --role-font-weight: bold; --role-font-style: normal; --role-line-height: 1.2; --role-letter-spacing: normal; --role-text-decoration: none; }`,
+      );
+      expect(css).toContain(
+        `.bp-text-role-button { --role-font-family: Lato; --role-font-size: 1em; --role-font-weight: normal; --role-font-style: normal; --role-line-height: 1.2; --role-letter-spacing: normal; --role-text-decoration: none; }`,
+      );
+      // the class must APPLY nothing — no `prop: value` / `prop: var(...)`, only `--role-*:` decls
+      expect(css).not.toMatch(/[^-]font-family:/);
+      expect(css).not.toMatch(/[^-]font-size:/);
+      expect(css).not.toMatch(/[^-]font-weight:/);
+    });
+
+    it('provides the CSS text Page keeps in its native style node', () => {
+      const css = buildTextRoleRootCssText(defaultOptions());
+
+      expect(css).toContain('.bp-text-role-heading1 {');
+      expect(css).not.toContain('<style');
+    });
+
+    it('emits the CSS-neutral default for weight/style/decoration/spacing a role omits', () => {
+      const css = buildTextRoleRootCss(defaultOptions());
+
+      // The default roles set none of style/decoration/letter-spacing, so every rule must still
+      // define those vars at their neutral default — otherwise a linked run's `var(--role-<x>)`
+      // resolves to the inherited value, not the CSS default the role intends.
+      CANONICAL_TEXT_STYLE_TYPES.forEach((type) => {
+        const rule = css
+          .split('\n')
+          .find((line) => line.includes(`.${textRoleClassName(type)} {`));
+
+        expect(rule).toContain('--role-font-style: normal;');
+        expect(rule).toContain('--role-text-decoration: none;');
+        expect(rule).toContain('--role-letter-spacing: normal;');
+      });
+    });
+
+    it('keeps an explicit role value over the neutral default', () => {
+      const css = buildTextRoleRootCss(defaultOptions());
+      const heading1 = css
+        .split('\n')
+        .find((line) => line.includes('.bp-text-role-heading1 {'));
+
+      // heading1 sets weight bold explicitly — the neutral 'normal' must not clobber it.
+      expect(heading1).toContain('--role-font-weight: bold;');
+    });
+
+    it('emits role-aware RTE decoration classes instead of relying on inline precedence', () => {
+      const options = defaultOptions();
+
+      options.heading2.style.textDecoration = 'underline';
+
+      const css = buildTextRoleRootCss(options);
+
+      expect(css).toContain(
+        '.bp-text-role-heading2 .bp-rte-text-decoration-linethrough { text-decoration: underline line-through; }',
+      );
+      expect(css).toContain(
+        '.bp-text-role-heading2 .bp-rte-text-decoration-none { text-decoration: none; }',
+      );
+      expect(css).toContain(
+        '.bp-text-role-heading2 .bp-rte-text-decoration-inherit { text-decoration: underline; }',
+      );
+    });
+
+    it('strips characters that could close the SSR style element from a role value, even if validation is bypassed (defence in depth, N5)', () => {
+      const options = defaultOptions();
+      const tampered = {
+        ...options,
+        heading1: {
+          ...options.heading1,
+          style: {
+            ...options.heading1.style,
+            fontWeight: '700}</style><script>alert(1)</script>',
+          },
+        },
+      };
+
+      const css = buildTextRoleRootCss(tampered as typeof options);
+      const rule = css
+        .split('\n')
+        .find((line) => line.includes('.bp-text-role-heading1 {'));
+
+      expect(rule).not.toContain('<script>');
+      expect(rule).not.toContain('</style>');
+      expect(rule).not.toMatch(/[<>]/);
+      expect(rule).toMatch(/--role-font-weight: 700\w*;/);
+    });
+
+    it('allows only family-name characters in SSR CSS declarations', () => {
+      const options = defaultOptions();
+      const tampered = {
+        ...options,
+        heading1: {
+          ...options.heading1,
+          style: {
+            ...options.heading1.style,
+            fontFamily: 'A/* font\\name',
+          },
+        },
+      };
+
+      const css = buildTextRoleRootCss(tampered as typeof options);
+      const rule = css
+        .split('\n')
+        .find((line) => line.includes('.bp-text-role-heading1 {'));
+
+      expect(rule).toContain('--role-font-family: A fontname;');
+      expect(rule).not.toMatch(/[/*"\\]/);
+    });
+
+    it('never emits colour (colour flows through the existing cascade)', () => {
+      const css = buildTextRoleRootCss(defaultOptions());
+
+      expect(css).not.toMatch(/colou?r\s*:/i);
+    });
+
+    it('does not emit rules for the legacy roles', () => {
+      const css = buildTextRoleRootCss(defaultOptions());
+
+      ['titles', 'headings', 'paragraphs', 'buttons'].forEach((legacy) => {
+        expect(css).not.toContain(`bp-text-role-${legacy} {`);
+      });
+    });
+  });
+
+  describe('buildTextRoleScopedCss', () => {
+    it('prefixes every rule with the page-scope selector', () => {
+      const css = buildTextRoleScopedCss(defaultOptions(), 'bp-page-scope-7');
+
+      expect(css).toContain(`<style ${TEXT_ROLE_SCOPED_ATTRIBUTE}>`);
+      expect(css).toContain(
+        `[data-page-scope="bp-page-scope-7"] .bp-text-role-heading1 {`,
+      );
+      expect(css).toContain(
+        '[data-page-scope="bp-page-scope-7"] .bp-text-role-heading1 .bp-rte-text-decoration-linethrough {',
+      );
+      expect(
+        buildTextRoleScopedCssText(defaultOptions(), 'bp-page-scope-7'),
+      ).not.toContain('<style');
+    });
+
+    it('returns empty string when no scope id is given', () => {
+      expect(buildTextRoleScopedCss(defaultOptions(), '')).toBe('');
+    });
+  });
+
+  describe('cssFontFamilyValue', () => {
+    it('leaves valid-identifier families unquoted (single and multi-word)', () => {
+      expect(cssFontFamilyValue('Lato')).toBe('Lato');
+      expect(cssFontFamilyValue('Playwrite AT')).toBe('Playwrite AT');
+      expect(cssFontFamilyValue('sans-serif')).toBe('sans-serif');
+    });
+
+    it('quotes a family with a number token (invalid unquoted)', () => {
+      // `Exo 2` unquoted is `Exo` + number `2` → CSS drops the whole declaration → falls back.
+      expect(cssFontFamilyValue('Exo 2')).toBe('"Exo 2"');
+      expect(cssFontFamilyValue('M PLUS 1')).toBe('"M PLUS 1"');
+    });
+
+    it('passes through already-quoted values and var refs', () => {
+      expect(cssFontFamilyValue('"Exo 2"')).toBe('"Exo 2"');
+      expect(cssFontFamilyValue('var(--role-font-family)')).toBe(
+        'var(--role-font-family)',
+      );
+    });
+
+    it('quotes per-family in a comma-separated stack', () => {
+      expect(cssFontFamilyValue('Exo 2, Lato, sans-serif')).toBe(
+        '"Exo 2", Lato, sans-serif',
+      );
+    });
+  });
+
+  describe('fillRteRunTypography', () => {
+    const role = {
+      fontFamily: 'Lato',
+      fontSize: '5.25em',
+      lineHeight: '1.2',
+    };
+
+    it('fills a bare run with a role ref for every var-backed attr (the default is the role var)', () => {
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        role,
+        undefined,
+      ) as ReturnType<typeof docWith>;
+
+      // Every attr defaults to its role var — including weight/style/decoration/letter-spacing the
+      // role leaves unset (their var is undefined → CSS default now, but a later role edit repaints).
+      expect(firstRunMark(filled)?.attrs).toEqual({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: 'var(--role-font-size)',
+        lineHeight: 'var(--role-line-height)',
+        letterSpacing: 'var(--role-letter-spacing)',
+        fontWeight: 'var(--role-font-weight)',
+        fontStyle: 'var(--role-font-style)',
+        textDecoration: 'var(--role-text-decoration)',
+      });
+    });
+
+    it('follows the role for weight/decoration when the block value is the inert neutral', () => {
+      // Block carries the default `font-weight: normal` / `text-decoration: none` (every style object
+      // does). These are NOT overrides, so the run references the role → a role edit reaches it.
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        role,
+        {
+          fontWeight: 'normal',
+          textDecoration: 'none',
+        },
+      ) as ReturnType<typeof docWith>;
+
+      const attrs = firstRunMark(filled)?.attrs;
+
+      expect(attrs?.fontWeight).toBe('var(--role-font-weight)');
+      expect(attrs?.textDecoration).toBe('var(--role-text-decoration)');
+    });
+
+    it('pins a non-neutral block override for weight/decoration as a literal', () => {
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        role,
+        {
+          fontWeight: 'bold',
+          textDecoration: 'underline',
+        },
+      ) as ReturnType<typeof docWith>;
+
+      const attrs = firstRunMark(filled)?.attrs;
+
+      expect(attrs?.fontWeight).toBe('bold'); // deliberate, differs from role + neutral → literal
+      expect(attrs?.textDecoration).toBe('underline');
+    });
+
+    it('drops a stale reset marker when it fills the decoration from the block', () => {
+      const filled = fillRteRunTypography(
+        docWith({
+          text: 'x',
+          marks: [
+            {
+              type: 'textStyle',
+              attrs: {
+                textDecoration: 'var(--role-text-decoration)',
+                textDecorationReset: true,
+              },
+            },
+          ],
+        }) as never,
+        { ...role, textDecoration: 'underline' },
+        { textDecoration: 'line-through' },
+      ) as ReturnType<typeof docWith>;
+
+      const attrs = firstRunMark(filled)?.attrs;
+
+      expect(attrs?.textDecoration).toBe('line-through');
+      expect(attrs).not.toHaveProperty('textDecorationReset');
+    });
+
+    it('bakes a block-level override as a literal, quoting a digit font-family', () => {
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        role,
+        { fontFamily: 'Exo 2', fontSize: '1.5em', lineHeight: '1.2' },
+      ) as ReturnType<typeof docWith>;
+
+      const attrs = firstRunMark(filled)?.attrs;
+
+      // block override differs from role → literal (font-family quoted so `Exo 2` stays valid)
+      expect(attrs?.fontFamily).toBe('"Exo 2"');
+      expect(attrs?.fontSize).toBe('1.5em');
+      // block value equals role → a re-linkable ref, so a role edit still flows
+      expect(attrs?.lineHeight).toBe('var(--role-line-height)');
+    });
+
+    it('keeps an existing per-run override (ref or literal) untouched', () => {
+      const filled = fillRteRunTypography(
+        docWith({
+          text: 'x',
+          marks: [
+            { type: 'textStyle', attrs: { fontSize: '9em', color: 'red' } },
+          ],
+        }) as never,
+        role,
+        { fontSize: '1.5em' },
+      ) as ReturnType<typeof docWith>;
+
+      const attrs = firstRunMark(filled)?.attrs;
+
+      expect(attrs?.fontSize).toBe('9em'); // per-run override wins over block + role
+      expect(attrs?.color).toBe('red'); // colour untouched
+      expect(attrs?.fontFamily).toBe('var(--role-font-family)'); // absent attr still filled
+    });
+
+    it('bakes literals (not refs) when no role is in scope', () => {
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        undefined,
+        {
+          fontFamily: 'Exo 2',
+          fontSize: '1.5em',
+        },
+      ) as ReturnType<typeof docWith>;
+
+      expect(firstRunMark(filled)?.attrs).toEqual({
+        fontFamily: '"Exo 2"',
+        fontSize: '1.5em',
+      });
+    });
+
+    it('does not mutate the input doc', () => {
+      const doc = docWith({ text: 'x' });
+      const snapshot = JSON.stringify(doc);
+
+      fillRteRunTypography(doc as never, role, undefined);
+      expect(JSON.stringify(doc)).toBe(snapshot);
+    });
+
+    it('returns the original document when every run already has its filled attrs', () => {
+      const doc = docWith({
+        text: 'x',
+        marks: [
+          {
+            type: 'textStyle',
+            attrs: {
+              fontFamily: 'var(--role-font-family)',
+              fontSize: 'var(--role-font-size)',
+              lineHeight: 'var(--role-line-height)',
+              letterSpacing: 'var(--role-letter-spacing)',
+              fontWeight: 'var(--role-font-weight)',
+              fontStyle: 'var(--role-font-style)',
+              textDecoration: 'var(--role-text-decoration)',
+            },
+          },
+        ],
+      });
+
+      expect(fillRteRunTypography(doc as never, role, undefined)).toBe(doc);
+    });
+
+    it('copies only the path containing a run it fills', () => {
+      const doc = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'needs fill' }],
+          },
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'already filled',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontFamily: 'var(--role-font-family)',
+                      fontSize: 'var(--role-font-size)',
+                      lineHeight: 'var(--role-line-height)',
+                      letterSpacing: 'var(--role-letter-spacing)',
+                      fontWeight: 'var(--role-font-weight)',
+                      fontStyle: 'var(--role-font-style)',
+                      textDecoration: 'var(--role-text-decoration)',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const filled = fillRteRunTypography(
+        doc as never,
+        role,
+        undefined,
+      ) as typeof doc;
+
+      expect(filled).not.toBe(doc);
+      expect(filled.content[0]).not.toBe(doc.content[0]);
+      expect(filled.content[1]).toBe(doc.content[1]);
+    });
+
+    it('honours a stored off value under a role that sets it', () => {
+      // D3: HEAD compares the block value only against the CSS-neutral, so a role that sets
+      // bold sees the block's stored `normal` as equal-to-neutral (not an override) and still
+      // refs the role — losing the deliberate "not bold". The fix compares against what the
+      // role actually resolves to (its own value, else the neutral).
+      const boldRole = { ...role, fontWeight: 'bold' };
+      const filled = fillRteRunTypography(
+        docWith({ text: 'x' }) as never,
+        boldRole,
+        { fontWeight: 'normal' },
+      ) as ReturnType<typeof docWith>;
+
+      expect(firstRunMark(filled)?.attrs?.fontWeight).toBe('normal');
+    });
+  });
+
+  describe('roleTypographyStyle', () => {
+    const role = {
+      fontFamily: 'Lato',
+      fontSize: '5.25em',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+    };
+
+    it('refs every role-defined property the block does not override', () => {
+      expect(roleTypographyStyle({ fontSize: '2em' }, role)).toEqual({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: '2em',
+        fontWeight: 'var(--role-font-weight)',
+        lineHeight: 'var(--role-line-height)',
+      });
+    });
+
+    it('refs a property whose own value equals the role', () => {
+      expect(roleTypographyStyle({ fontFamily: 'Lato' }, role).fontFamily).toBe(
+        'var(--role-font-family)',
+      );
+    });
+
+    it('drops an omitted property even when the role defines it', () => {
+      expect(
+        roleTypographyStyle({ fontSize: '2em' }, role, {
+          omit: ['fontSize'],
+        }),
+      ).toEqual({
+        fontFamily: 'var(--role-font-family)',
+        fontWeight: 'var(--role-font-weight)',
+        lineHeight: 'var(--role-line-height)',
+      });
+    });
+
+    it('bakes own values literally with no role, quoting a digit font-family', () => {
+      expect(
+        roleTypographyStyle(
+          { fontFamily: 'Exo 2', fontSize: '2em' },
+          undefined,
+        ),
+      ).toEqual({ fontFamily: '"Exo 2"', fontSize: '2em' });
+    });
+
+    it('quotes a digit font-family override against a role', () => {
+      expect(
+        roleTypographyStyle({ fontFamily: 'Exo 2' }, role).fontFamily,
+      ).toBe('"Exo 2"');
+    });
+
+    // R5: the old `overrideTypographyStyle` always inlined a SET own value, unconditionally.
+    // When the role leaves a property unset, nothing else supplies it — so an own value equal
+    // to the CSS-neutral default must still bake as a literal, or an ancestor utility class
+    // (e.g. `tw-font-semibold` on a shop product name) could leak through where nothing pins it.
+    it('inlines an own value equal to the CSS-neutral default when the role leaves it unset', () => {
+      expect(
+        roleTypographyStyle(
+          { fontStyle: 'normal', letterSpacing: 'normal' },
+          role,
+        ),
+      ).toEqual({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: 'var(--role-font-size)',
+        fontWeight: 'var(--role-font-weight)',
+        lineHeight: 'var(--role-line-height)',
+        fontStyle: 'normal',
+        letterSpacing: 'normal',
+      });
+    });
+  });
+});