@designcrowd/library.brand-page 6.0.3 → 6.0.4

package/src/metadata-builder/builders/footer-builder.test.ts

@@ -14,6 +14,10 @@ import { FooterBuilder } from './footer-builder';
  * The fix routes copyright style writes through `applyDetachedStyleOverride`,
  * which resolves the preset in and clears `textStyleType` so the per-element
  * override sticks.
+ *
+ * BP-5603: social link mutations converted from index-based to id-based
+ * (item_id / move_before_item_id / _remove_social_link_ids), mirroring the
+ * section-level move_before_content_id contract one level deeper.
  */
 
 const textStyleOptions = {
@@ -42,6 +46,37 @@ const makeModel = (copyrightStyle: Record<string, unknown>): BrandPageModel =>
     pageFooterMobile: { copyrightStyle: { ...copyrightStyle } },
   }) as unknown as BrandPageModel;
 
+const makeModelWithLinks = (
+  links: { id?: string; imageUrl: string; url: string }[],
+): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageFooterDesktop: {
+      copyrightStyle: {},
+      socialLinks: links.map((l) => ({
+        id: l.id,
+        imageUrl: l.imageUrl,
+        url: l.url,
+        imageTitle: '',
+        width: 0,
+        height: 0,
+        imageLink: '',
+      })),
+    },
+    pageFooterMobile: {
+      copyrightStyle: {},
+      socialLinks: links.map((l) => ({
+        id: l.id,
+        imageUrl: l.imageUrl,
+        url: l.url,
+        imageTitle: '',
+        width: 0,
+        height: 0,
+        imageLink: '',
+      })),
+    },
+  }) as unknown as BrandPageModel;
+
 const run = (args: UpdateFooterArguments, model: BrandPageModel) =>
   new FooterBuilder({
     id: 'f1',
@@ -49,6 +84,10 @@ const run = (args: UpdateFooterArguments, model: BrandPageModel) =>
     payload: args,
   }).buildAsync(model);
 
+// ---------------------------------------------------------------------------
+// Copyright font (BP-5420)
+// ---------------------------------------------------------------------------
+
 describe('FooterBuilder — copyright font vs global style', () => {
   it('detaches from the global preset: applies the font, clears textStyleType, retains preset values', async () => {
     const model = makeModel({
@@ -57,7 +96,7 @@ describe('FooterBuilder — copyright font vs global style', () => {
     });
 
     const { model: out } = await run(
-      { copyright_text_style: { fontFamily: 'Anton' } },
+      { copyright_text_font_family: 'Anton' },
       model,
     );
 
@@ -73,203 +112,263 @@ describe('FooterBuilder — copyright font vs global style', () => {
     expect(style.color).toBe('#2d0b3f');
     expect(style.textAlign).toBe('center');
   });
+});
 
-  it('applies copyright font size + weight via the style object, detaches, preserves the text', async () => {
-    const model = makeModel({
-      textStyleType: 'paragraphs',
-      textAlign: 'center',
-      fontWeight: 'bold',
-    });
+// ---------------------------------------------------------------------------
+// Social links — id-based mutations (BP-5603)
+// ---------------------------------------------------------------------------
+
+describe('FooterBuilder — social links id-based mutations', () => {
+  it('backfills ids on legacy links that have none', async () => {
+    // Links without ids (legacy persisted data)
+    const model = makeModelWithLinks([
+      { imageUrl: 'facebook', url: 'https://fb.com' },
+      { imageUrl: 'instagram', url: 'https://ig.com' },
+    ]);
+
+    const { model: out } = await run({}, model);
+
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links[0].id).toBeTruthy();
+    expect(links[1].id).toBeTruthy();
+    expect(links[0].id).not.toBe(links[1].id);
+  });
+
+  it('updates an existing link in place by item_id', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+      { id: 'link-2', imageUrl: 'instagram', url: 'https://ig.com' },
+    ]);
 
     const { model: out } = await run(
-      { copyright_text_style: { fontSize: '0.875em', fontWeight: 'normal' } },
+      {
+        social_links: [
+          { item_id: 'link-1', url: 'https://facebook.com/mybrand' },
+        ],
+      },
       model,
     );
 
-    const desktop = out.pageFooterDesktop!;
-    const style = desktop.copyrightStyle as Record<string, unknown>;
+    const links = out.pageFooterDesktop!.socialLinks;
 
-    expect(style.fontSize).toBe('0.875em');
-    expect(style.fontWeight).toBe('normal');
-    expect(style.textStyleType).toBeUndefined();
-    // preset values resolved in, not lost
-    expect(style.fontFamily).toBe('Inter');
-    expect(style.textAlign).toBe('center');
-    // style-only change must NOT touch the copyright text itself
-    expect(desktop.copyrightText).toBeUndefined();
+    expect(links).toHaveLength(2);
+    expect(links[0].url).toBe('https://facebook.com/mybrand');
+    expect(links[0].id).toBe('link-1');
+    // untouched link unchanged
+    expect(links[1].id).toBe('link-2');
+    expect(links[1].url).toBe('https://ig.com');
   });
 
-  it('applies copyright style to both viewports', async () => {
-    const model = makeModel({ textStyleType: 'paragraphs' });
+  it('updates social_link_icon on an existing link', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+    ]);
 
     const { model: out } = await run(
-      { copyright_text_style: { fontSize: '0.75em', fontWeight: 'normal' } },
+      {
+        social_links: [{ item_id: 'link-1', social_link_icon: 'facebook-v2' }],
+      },
       model,
     );
 
-    for (const vp of [out.pageFooterDesktop!, out.pageFooterMobile!]) {
-      const style = vp.copyrightStyle as Record<string, unknown>;
-
-      expect(style.fontSize).toBe('0.75em');
-      expect(style.fontWeight).toBe('normal');
-      expect(style.textStyleType).toBeUndefined();
-    }
+    expect(out.pageFooterDesktop!.socialLinks[0].imageUrl).toBe('facebook-v2');
   });
 
-  it('applies copyright colour and normalises letterSpacing (int→em) via the style object', async () => {
-    const model = makeModel({ textStyleType: 'paragraphs' });
+  it('skips unknown item_id silently', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+    ]);
 
     const { model: out } = await run(
-      { copyright_text_style: { color: '#f5f5f5', letterSpacing: 50 } },
+      {
+        social_links: [{ item_id: 'no-such-id', url: 'https://nowhere.com' }],
+      },
       model,
     );
 
-    const style = out.pageFooterDesktop!.copyrightStyle as Record<
-      string,
-      unknown
-    >;
+    const links = out.pageFooterDesktop!.socialLinks;
 
-    expect(style.color).toBe('#f5f5f5');
-    // letterSpacing int 0–100 is normalised to an em string (50 → '0.5em'),
-    // exactly as section *_style values are.
-    expect(style.letterSpacing).toBe('0.5em');
-    expect(style.textStyleType).toBeUndefined();
+    expect(links).toHaveLength(1);
+    expect(links[0].url).toBe('https://fb.com');
   });
-});
 
-type Link = { imageUrl: string; url: string };
-
-const link = (imageUrl: string): Link => ({
-  imageUrl,
-  url: `https://${imageUrl}.com`,
-});
+  it('inserts a new link (no item_id) appended by default', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+    ]);
 
-/**
- * Footers migrated from the legacy single `footerStyles` model
- * (migration-01) split into desktop + mobile via a shallow spread, leaving
- * both viewports' `socialLinks` pointing at ONE shared array. `cloneDeep`
- * preserves that shared reference. This factory reproduces that shape.
- */
-const makeSharedSocialModel = (links: Link[]): BrandPageModel => {
-  const shared = links.map((l) => ({ ...l }));
+    const { model: out } = await run(
+      {
+        social_links: [
+          { social_link_icon: 'instagram', url: 'https://ig.com' },
+        ],
+      },
+      model,
+    );
 
-  return {
-    styles: { textStyles: { textStyleOptions } },
-    pageFooterDesktop: { socialLinks: shared },
-    pageFooterMobile: { socialLinks: shared },
-  } as unknown as BrandPageModel;
-};
+    const links = out.pageFooterDesktop!.socialLinks;
 
-const makeIndependentSocialModel = (links: Link[]): BrandPageModel =>
-  ({
-    styles: { textStyles: { textStyleOptions } },
-    pageFooterDesktop: { socialLinks: links.map((l) => ({ ...l })) },
-    pageFooterMobile: { socialLinks: links.map((l) => ({ ...l })) },
-  }) as unknown as BrandPageModel;
+    expect(links).toHaveLength(2);
+    expect(links[1].imageUrl).toBe('instagram');
+    expect(links[1].id).toBeTruthy();
+  });
 
-const socialIcons = (footer: { socialLinks?: Link[] } | undefined) =>
-  (footer?.socialLinks ?? []).map((l) => l.imageUrl);
-
-describe('FooterBuilder — social link removal (shared-array regression)', () => {
-  // Reproduces the bug: a single requested removal index dropped TWO links
-  // because both viewports shared one array and the builder spliced it twice.
-  it('removes exactly one link per requested index even when viewports share the array', async () => {
-    const model = makeSharedSocialModel([
-      link('facebook'),
-      link('instagram'),
-      link('x'),
-      link('youtube'),
+  it('inserts a new link before an anchor via move_before_item_id', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+      { id: 'link-2', imageUrl: 'instagram', url: 'https://ig.com' },
     ]);
 
     const { model: out } = await run(
-      { _remove_social_link_indices: [2] },
+      {
+        social_links: [
+          {
+            social_link_icon: 'x',
+            url: 'https://x.com',
+            move_before_item_id: 'link-2',
+          },
+        ],
+      },
       model,
     );
 
-    expect(socialIcons(out.pageFooterDesktop)).toEqual([
-      'facebook',
-      'instagram',
-      'youtube',
-    ]);
-    expect(socialIcons(out.pageFooterMobile)).toEqual([
-      'facebook',
-      'instagram',
-      'youtube',
-    ]);
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links).toHaveLength(3);
+    expect(links[0].id).toBe('link-1');
+    expect(links[1].imageUrl).toBe('x');
+    expect(links[2].id).toBe('link-2');
   });
 
-  it('un-shares the viewport arrays so later in-place edits cannot cross-corrupt', async () => {
-    const model = makeSharedSocialModel([
-      link('facebook'),
-      link('instagram'),
-      link('x'),
+  it('inserts a new link at end via move_before_item_id "__end__"', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+      { id: 'link-2', imageUrl: 'instagram', url: 'https://ig.com' },
     ]);
 
     const { model: out } = await run(
-      { _remove_social_link_indices: [0] },
+      {
+        social_links: [
+          {
+            social_link_icon: 'x',
+            url: 'https://x.com',
+            move_before_item_id: '__end__',
+          },
+        ],
+      },
       model,
     );
 
-    expect(out.pageFooterDesktop!.socialLinks).not.toBe(
-      out.pageFooterMobile!.socialLinks,
-    );
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links).toHaveLength(3);
+    expect(links[2].imageUrl).toBe('x');
   });
 
-  it('handles multiple removal indices on a shared array (descending splice)', async () => {
-    const model = makeSharedSocialModel([
-      link('facebook'),
-      link('instagram'),
-      link('x'),
-      link('youtube'),
+  it('moves an existing link before an anchor via move_before_item_id', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+      { id: 'link-2', imageUrl: 'instagram', url: 'https://ig.com' },
+      { id: 'link-3', imageUrl: 'x', url: 'https://x.com' },
     ]);
 
     const { model: out } = await run(
-      { _remove_social_link_indices: [0, 2] },
+      {
+        social_links: [{ item_id: 'link-3', move_before_item_id: 'link-1' }],
+      },
       model,
     );
 
-    expect(socialIcons(out.pageFooterDesktop)).toEqual([
-      'instagram',
-      'youtube',
-    ]);
-    expect(socialIcons(out.pageFooterMobile)).toEqual(['instagram', 'youtube']);
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links.map((l) => l.id)).toEqual(['link-3', 'link-1', 'link-2']);
   });
 
-  it('removes one link per index for independent viewport arrays (no regression)', async () => {
-    const model = makeIndependentSocialModel([
-      link('facebook'),
-      link('instagram'),
-      link('x'),
+  it('removes links by id', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
+      { id: 'link-2', imageUrl: 'instagram', url: 'https://ig.com' },
+      { id: 'link-3', imageUrl: 'x', url: 'https://x.com' },
     ]);
 
     const { model: out } = await run(
-      { _remove_social_link_indices: [1] },
+      { _remove_social_link_ids: ['link-1', 'link-3'] },
       model,
     );
 
-    expect(socialIcons(out.pageFooterDesktop)).toEqual(['facebook', 'x']);
-    expect(socialIcons(out.pageFooterMobile)).toEqual(['facebook', 'x']);
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links).toHaveLength(1);
+    expect(links[0].id).toBe('link-2');
   });
 
-  it('inserts exactly one link on a shared array (symmetric add guard)', async () => {
-    const model = makeSharedSocialModel([link('facebook'), link('instagram')]);
+  it('_replace_social_links rebuilds the entire list and assigns fresh ids', async () => {
+    const model = makeModelWithLinks([
+      { id: 'old-1', imageUrl: 'facebook', url: 'https://fb.com' },
+    ]);
 
     const { model: out } = await run(
       {
-        social_links: [{ insert_at: 1, social_link_icon: 'x', url: 'x.com' }],
+        _replace_social_links: true,
+        social_links: [
+          { social_link_icon: 'instagram', url: 'https://ig.com' },
+          { social_link_icon: 'x', url: 'https://x.com' },
+        ],
       },
       model,
     );
 
-    expect(socialIcons(out.pageFooterDesktop)).toEqual([
-      'facebook',
-      'x',
-      'instagram',
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links).toHaveLength(2);
+    expect(links[0].imageUrl).toBe('instagram');
+    expect(links[1].imageUrl).toBe('x');
+    // fresh ids assigned, not the old one
+    expect(links[0].id).toBeTruthy();
+    expect(links[0].id).not.toBe('old-1');
+  });
+
+  it('_replace_social_links with empty social_links clears all', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
     ]);
-    expect(socialIcons(out.pageFooterMobile)).toEqual([
-      'facebook',
-      'x',
-      'instagram',
+
+    const { model: out } = await run({ _replace_social_links: true }, model);
+
+    expect(out.pageFooterDesktop!.socialLinks).toHaveLength(0);
+  });
+
+  it('normalises mailto: and tel: prefixes on new links', async () => {
+    const model = makeModelWithLinks([]);
+
+    const { model: out } = await run(
+      {
+        social_links: [
+          { social_link_icon: 'email', url: 'mailto:me@example.com' },
+          { social_link_icon: 'phone', url: 'tel:+1234567890' },
+        ],
+      },
+      model,
+    );
+
+    const links = out.pageFooterDesktop!.socialLinks;
+
+    expect(links[0].url).toBe('me@example.com');
+    expect(links[1].url).toBe('+1234567890');
+  });
+
+  it('applies mutations to both desktop and mobile footers', async () => {
+    const model = makeModelWithLinks([
+      { id: 'link-1', imageUrl: 'facebook', url: 'https://fb.com' },
     ]);
+
+    const { model: out } = await run(
+      { _remove_social_link_ids: ['link-1'] },
+      model,
+    );
+
+    expect(out.pageFooterDesktop!.socialLinks).toHaveLength(0);
+    expect(out.pageFooterMobile!.socialLinks).toHaveLength(0);
   });
 });