@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/store/content-settings-store.test.ts

@@ -5,15 +5,23 @@ import {
   useUiContentSettingsStore,
 } from './index';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
+import { VIEWPORTS } from '@brand-page';
 import { useUiColorPaletteStore } from '@shared/color-palette/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { roleVarRef } from '@brand-page/utils/text-role-css.util';
+import { CLEARED_TYPOGRAPHY } from '@shared/text-role-typography.util';
 
-const { mergeNextMutationMock } = vi.hoisted(() => ({
+const { mergeNextMutationMock, markRteResyncMock } = vi.hoisted(() => ({
   mergeNextMutationMock: vi.fn(),
+  markRteResyncMock: vi.fn(),
 }));
 
 vi.mock('@brand-page-maker/stores/history/history-store', () => ({
   useHistoryStore: vi.fn(() => ({
     mergeNextMutation: mergeNextMutationMock,
+    markRteResync: markRteResyncMock,
   })),
 }));
 
@@ -185,6 +193,141 @@ describe('content settings store — hydration writes arm the history merge', ()
     expect(mergeNextMutationMock).not.toHaveBeenCalled();
   });
 
+  // BP-5969: a text-style write drops overrides equal to the block's role so the role
+  // CSS class drives them and a later role edit repaints the block. Colour is untouched.
+  const seedRole = () => {
+    useUiStyleSettingsStore()._setTextStyles({
+      textStyleOptions: {
+        heading1: { style: { fontFamily: 'Lato', fontSize: '2.5em' } },
+      },
+    } as never);
+  };
+
+  const titleStyleOf = (store: ReturnType<typeof useUiContentSettingsStore>) =>
+    (
+      store.items[0].settings.content as {
+        titleStyle?: Record<string, unknown>;
+      }
+    ).titleStyle ?? {};
+
+  test('updateTextStyles drops a typography override equal to the role', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: {
+        textStyleType: 'heading1',
+        fontSize: '2.5em',
+        fontFamily: 'Lato',
+        color: 'red',
+      },
+    });
+
+    const titleStyle = titleStyleOf(store);
+
+    expect(titleStyle.textStyleType).toBe('heading1');
+    expect(titleStyle.fontSize).toBeUndefined(); // equals role → class supplies it
+    expect(titleStyle.fontFamily).toBeUndefined(); // equals role → dropped
+    expect(titleStyle.color).toBe('red'); // colour is never normalized
+  });
+
+  test('updateTextStyles keeps a typography override that differs from the role', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: { textStyleType: 'heading1', fontSize: '3em' },
+    });
+
+    expect(titleStyleOf(store).fontSize).toBe('3em'); // real override → kept
+  });
+
+  test('updateItemValue leaves a legacy/unlinked style untouched (no class)', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'titleStyle',
+      value: { textStyleType: 'headings', fontSize: '2.5em' }, // legacy → no class
+    });
+
+    // legacy role has no class supplier, so the inline typography must survive
+    expect(titleStyleOf(store).fontSize).toBe('2.5em');
+  });
+
+  test('renormalizeTextStylesForRole drops a sibling override that now equals the role', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    // A sibling block whose stored override coincides with the (newly-saved) role value.
+    (store.items[0].settings.content as Record<string, unknown>).titleStyle = {
+      textStyleType: 'heading1',
+      fontSize: '2.5em', // == role → should be stripped
+      fontFamily: 'Times', // != role → should survive
+    };
+
+    store.renormalizeTextStylesForRole('heading1');
+
+    const titleStyle = titleStyleOf(store);
+
+    expect(titleStyle.fontSize).toBeUndefined();
+    expect(titleStyle.fontFamily).toBe('Times');
+  });
+
+  test('renormalizeTextStylesForRole leaves blocks linked to a different role untouched', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    (store.items[0].settings.content as Record<string, unknown>).titleStyle = {
+      textStyleType: 'heading2',
+      fontSize: '2.5em',
+    };
+
+    store.renormalizeTextStylesForRole('heading1');
+
+    expect(titleStyleOf(store).fontSize).toBe('2.5em'); // different role → not touched
+  });
+
+  test('renormalizeTextStylesForRole reaches the header and footer text on the role too', () => {
+    const store = setupStore();
+
+    seedRole();
+
+    const nav =
+      useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ];
+    const footer =
+      useUiPageSettingsStore().sections[PAGE_SECTIONS.footer][
+        VIEWPORTS.desktop
+      ];
+
+    nav.defaultButtonStyle = { textStyleType: 'heading1', fontSize: '2.5em' };
+    footer.copyrightStyle = {
+      textStyleType: 'heading1',
+      fontSize: '2.5em',
+      fontFamily: 'Times',
+    };
+
+    store.renormalizeTextStylesForRole('heading1');
+
+    expect(nav.defaultButtonStyle).toEqual({ textStyleType: 'heading1' });
+    expect(footer.copyrightStyle).toEqual({
+      textStyleType: 'heading1',
+      fontFamily: 'Times',
+    });
+  });
+
   test('updateMultipleItemValues honours the same contract', () => {
     const store = setupStore();
 
@@ -447,11 +590,11 @@ describe('deleteItem reclaims palette customs orphaned by the deletion', () => {
   });
 });
 
-// BP-5886: re-selecting a global text style must clear the element's own colour
-// override so the renderer's element-first cascade falls through to the style.
-// The RTE link path writes `color: undefined`; this pins that the merge-based
-// store actions actually drop a parked colour rather than preserving it.
-describe('re-linking a text style clears the element colour override', () => {
+// ADR-0020: re-linking a role no longer clears colour (colour is a separate axis) — but an
+// EXPLICIT clear still must drop a parked override: "reset to global" writes
+// `color: undefined`, and this pins that the merge-based store actions honour it rather than
+// preserving the parked colour.
+describe('an explicit colour clear (reset-to-global) drops the parked element colour', () => {
   const setupStore = (content: Record<string, unknown>) => {
     setActivePinia(createPinia());
 
@@ -529,3 +672,345 @@ describe('re-linking a text style clears the element colour override', () => {
     expect(textStyle.color).toBeUndefined();
   });
 });
+
+// ADR-0020: switching a role is a TYPOGRAPHY-only action — the RTE role dropdown writes just
+// `{ textStyleType }` and must NOT clear the element's own colour/background (a separate axis).
+// The merge-based store actions honour this by leaving keys absent from the payload untouched.
+describe('a role switch (textStyleType only) preserves the element colour', () => {
+  const setupStore = (content: Record<string, unknown>) => {
+    setActivePinia(createPinia());
+
+    const store = useUiContentSettingsStore();
+
+    store.items.push({
+      id: 'item-1',
+      type: 'text',
+      settings: { content },
+    } as never);
+    store.validateItem = vi.fn();
+    store.onContentChanged = vi.fn();
+
+    return store;
+  };
+
+  test('updateTextStyles with only a new textStyleType keeps colour + background', () => {
+    const store = setupStore({
+      title: '<p>hi</p>',
+      titleStyle: {
+        textStyleType: 'paragraphs',
+        color: '#ff0000',
+        backgroundColor: '#00ff00',
+      },
+    });
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: { textStyleType: 'titles' },
+    });
+
+    const titleStyle = (
+      store.items[0].settings.content as unknown as {
+        titleStyle: Record<string, unknown>;
+      }
+    ).titleStyle;
+
+    expect(titleStyle.textStyleType).toBe('titles');
+    expect(titleStyle.color).toBe('#ff0000');
+    expect(titleStyle.backgroundColor).toBe('#00ff00');
+  });
+
+  test('updateTextItemTextStyleTypeWithStyles with only a new textStyleType keeps colour', () => {
+    const store = setupStore({
+      textItems: [
+        {
+          value: '<p>a</p>',
+          textStyle: { textStyleType: 'paragraphs', color: '#ff0000' },
+        },
+      ],
+    });
+
+    store.updateTextItemTextStyleTypeWithStyles({
+      id: 'item-1',
+      name: 'textItems',
+      value: { textStyleType: 'titles' },
+      index: 0,
+    });
+
+    const textStyle = (
+      store.items[0].settings.content as unknown as {
+        textItems: { textStyle: Record<string, unknown> }[];
+      }
+    ).textItems[0].textStyle;
+
+    expect(textStyle.textStyleType).toBe('titles');
+    expect(textStyle.color).toBe('#ff0000');
+  });
+
+  // The RTE's role pick and Reset send CLEARED_TYPOGRAPHY so the block takes the role's look.
+  const seedHeading1 = () =>
+    useUiStyleSettingsStore()._setTextStyles({
+      textStyleOptions: {
+        heading1: { style: { fontFamily: 'Lato', fontSize: '2.5em' } },
+      },
+    } as never);
+
+  test('updateTextStyles with CLEARED_TYPOGRAPHY drops the block typography and keeps colour', () => {
+    const store = setupStore({
+      title: '<p>hi</p>',
+      titleStyle: {
+        textStyleType: 'paragraph1',
+        fontSize: '3em',
+        letterSpacing: '0.1em',
+        fontStyle: 'italic',
+        color: '#ff0000',
+        textAlign: 'center',
+      },
+    });
+
+    seedHeading1();
+
+    store.updateTextStyles({
+      id: 'item-1',
+      name: 'title',
+      value: { textStyleType: 'heading1', ...CLEARED_TYPOGRAPHY },
+    });
+
+    expect(
+      (
+        store.items[0].settings.content as unknown as {
+          titleStyle: Record<string, unknown>;
+        }
+      ).titleStyle,
+    ).toEqual({
+      textStyleType: 'heading1',
+      color: '#ff0000',
+      textAlign: 'center',
+    });
+  });
+
+  test('updateTextItemTextStyleTypeWithStyles with CLEARED_TYPOGRAPHY drops the item typography', () => {
+    const store = setupStore({
+      textItems: [
+        {
+          value: '<p>a</p>',
+          textStyle: {
+            textStyleType: 'heading1',
+            fontSize: '3em',
+            color: '#ff0000',
+          },
+        },
+      ],
+    });
+
+    seedHeading1();
+
+    store.updateTextItemTextStyleTypeWithStyles({
+      id: 'item-1',
+      name: 'textItems',
+      value: { ...CLEARED_TYPOGRAPHY },
+      index: 0,
+    });
+
+    expect(
+      (
+        store.items[0].settings.content as unknown as {
+          textItems: { textStyle: Record<string, unknown> }[];
+        }
+      ).textItems[0].textStyle,
+    ).toEqual({ textStyleType: 'heading1', color: '#ff0000' });
+  });
+});
+
+// "Apply changes to all" (R8, D1): every other block on the role takes the new values it doesn't
+// override. For an RTE sibling, a run literal equal to the old OR the new role was never an override
+// (its asterisk didn't show), so it relinks to the role; a literal that differs from both stays.
+describe('content settings store — renormalizeTextStylesForRole relinks sibling RTE runs', () => {
+  const OLD_H3 = {
+    fontFamily: 'Lato',
+    fontSize: '3.1875em',
+    fontWeight: 'bold',
+    lineHeight: '1.25',
+  };
+  const NEW_H3 = { ...OLD_H3, fontFamily: 'Oswald', fontSize: '3.5em' };
+
+  const run = (text: string, attrs: Record<string, unknown>) => ({
+    type: 'text',
+    text,
+    marks: [{ type: 'textStyle', attrs: { color: '#123456', ...attrs } }],
+  });
+  const docOf = (...runs: ReturnType<typeof run>[]) => ({
+    type: 'doc',
+    content: [{ type: 'paragraph', content: runs }],
+  });
+  const attrsOf = (doc: unknown, index: number): Record<string, unknown> =>
+    (
+      doc as {
+        content: {
+          content: { marks: { attrs: Record<string, unknown> }[] }[];
+        }[];
+      }
+    ).content[0].content[index].marks[0].attrs;
+
+  const setupStore = () => {
+    setActivePinia(createPinia());
+
+    useUiStyleSettingsStore()._setTextStyles({
+      textStyleOptions: {
+        heading3: { style: NEW_H3 },
+        heading4: { style: { fontSize: '2.1875em', fontWeight: 'bold' } },
+      },
+    } as never);
+
+    const store = useUiContentSettingsStore();
+
+    store.items.push(
+      {
+        id: 'item-1',
+        type: 'banner-section',
+        settings: {
+          content: {
+            type: 'banner-section',
+            titleStyle: { textStyleType: 'heading3' },
+            title: docOf(
+              run('a', { fontSize: roleVarRef('fontSize') }),
+              run('b', { fontSize: '3.5em' }),
+              run('c', { fontFamily: 'Lato' }),
+              run('d', { fontSize: '4em' }),
+              run('e', { fontSize: '2.25em' }),
+            ),
+          },
+        },
+      } as never,
+      {
+        id: 'item-2',
+        type: 'banner-section',
+        settings: {
+          content: {
+            type: 'banner-section',
+            titleStyle: { textStyleType: 'heading4' },
+            title: docOf(run('f', { fontSize: '3.5em' })),
+          },
+        },
+      } as never,
+    );
+
+    store.onContentChanged = vi.fn();
+
+    return store;
+  };
+
+  beforeEach(() => {
+    markRteResyncMock.mockClear();
+  });
+
+  test('renormalizeTextStylesForRole relinks role-equal sibling runs against the old and the new role', () => {
+    const store = setupStore();
+
+    store.renormalizeTextStylesForRole('heading3', OLD_H3);
+
+    const h3 = (
+      store.items[0].settings.content as unknown as { title: unknown }
+    ).title;
+    const h4 = (
+      store.items[1].settings.content as unknown as { title: unknown }
+    ).title;
+
+    expect(attrsOf(h3, 0).fontSize).toBe(roleVarRef('fontSize')); // (a) already linked
+    expect(attrsOf(h3, 1).fontSize).toBe(roleVarRef('fontSize')); // (b) = new role
+    expect(attrsOf(h3, 2).fontFamily).toBe(roleVarRef('fontFamily')); // (c) = old role
+    expect(attrsOf(h3, 3).fontSize).toBe('4em'); // (d) its own override, kept
+    expect(attrsOf(h3, 4).fontSize).toBe('2.25em'); // (e) a migrated override, kept
+    expect(attrsOf(h3, 1).color).toBe('#123456'); // colour untouched
+    expect(attrsOf(h4, 0).fontSize).toBe('3.5em'); // (f) another role, untouched
+    // a mounted sibling editor re-seeds from the relinked doc instead of writing its stale copy back
+    expect(markRteResyncMock).toHaveBeenCalledTimes(1);
+  });
+
+  // The block "Apply changes to all" ran on is open in an editor that has already relinked it
+  // (`relinkTypographyChain`) and holds its debounced write; that doc is written now instead, and
+  // its own editor isn't remounted, so neither its result nor its focus is lost.
+  test('renormalizeTextStylesForRole writes the active editor doc as given, and resyncs no editor when nothing else changed', () => {
+    const store = setupStore();
+    const activeDoc = docOf(run('mine', { fontSize: roleVarRef('fontSize') }));
+
+    (
+      store.items[1].settings.content as unknown as { titleStyle: object }
+    ).titleStyle = {
+      textStyleType: 'heading4',
+    };
+
+    store.renormalizeTextStylesForRole('heading3', OLD_H3, {
+      id: 'item-1',
+      name: 'title',
+      doc: activeDoc,
+    });
+
+    expect(
+      (store.items[0].settings.content as unknown as { title: unknown }).title,
+    ).toEqual(activeDoc);
+    expect(markRteResyncMock).not.toHaveBeenCalled();
+  });
+
+  test('renormalizeTextStylesForRole resyncs the other editors, not the active one, when a sibling changed', () => {
+    const store = setupStore();
+    const activeDoc = docOf(run('mine', { fontSize: roleVarRef('fontSize') }));
+
+    (
+      store.items[1].settings.content as unknown as { titleStyle: object }
+    ).titleStyle = {
+      textStyleType: 'heading3',
+    };
+
+    store.renormalizeTextStylesForRole('heading3', OLD_H3, {
+      id: 'item-1',
+      name: 'title',
+      doc: activeDoc,
+    });
+
+    const sibling = (
+      store.items[1].settings.content as unknown as { title: unknown }
+    ).title;
+
+    expect(attrsOf(sibling, 0).fontSize).toBe(roleVarRef('fontSize'));
+    expect(markRteResyncMock).toHaveBeenCalledWith({
+      except: { id: 'item-1', name: 'title' },
+    });
+  });
+
+  test('renormalizeTextStylesForRole does not resync editors when no RTE run changed', () => {
+    const store = setupStore();
+
+    (store.items[0].settings.content as unknown as { title: unknown }).title =
+      docOf(run('d', { fontSize: '4em' }));
+
+    store.renormalizeTextStylesForRole('heading3', OLD_H3);
+
+    expect(markRteResyncMock).not.toHaveBeenCalled();
+  });
+});
+
+// Brief 3 R6: a new text block saves no size. setItems backfills a missing field from its
+// config's defaultValue "for vue reactivity" — the textSize field must carry none, or a
+// block that never had one would gain it back on the next load.
+describe('setItems does not backfill a retired field default', () => {
+  test('does not backfill textSize on a text block that has none', () => {
+    setActivePinia(createPinia());
+
+    const store = useUiContentSettingsStore();
+
+    store.setItems({
+      items: [
+        {
+          id: 'item-1',
+          type: 'text',
+          settings: { content: { text: '<p>hi</p>' } },
+        } as never,
+      ],
+    });
+
+    expect(
+      (store.items[0].settings.content as { textSize?: unknown }).textSize,
+    ).toBeUndefined();
+  });
+});