feat(site-builder): page duplicate/reorder/set-landing + fix cross-page node copy/paste

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-14 07:36:00 -07:00
parent 204ea5e078
commit a698f014b0
9 changed files with 1040 additions and 108 deletions
@@ -0,0 +1,427 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { PageProvider, usePages, applyLandingInvariant } from './PageContext';
+import { PageData } from '../types';
+
+/**
+ * PKG-I: page duplicate / reorder / set-landing.
+ *
+ * The landing-page invariant is: `pages[0]` is the landing page, slug
+ * LOCKED to `'index'`; every other page gets a real, unique slug. This
+ * suite covers:
+ *  - `applyLandingInvariant` as a pure function (unit tests, no provider).
+ *  - `movePage`/`setLandingPage` re-establishing the invariant after
+ *    reordering, via `PageProvider`.
+ *  - `duplicatePage` inserting a copy right after the source with a copied
+ *    craftState + seo and a unique slug, and switching the canvas to it.
+ */
+
+function makePage(overrides: Partial<PageData> & { id: string }): PageData {
+  return { name: overrides.id, slug: overrides.id, craftState: null, ...overrides };
+}
+
+describe('applyLandingInvariant (pure)', () => {
+  test('page at index 0 gets slug "index" even if it held a different slug', () => {
+    const pages = [
+      makePage({ id: 'a', name: 'About', slug: 'about' }),
+      makePage({ id: 'b', name: 'Home', slug: 'index' }),
+    ];
+    const result = applyLandingInvariant(pages);
+    expect(result[0].slug).toBe('index');
+    expect(result[0].id).toBe('a');
+  });
+
+  test('demotes the old landing page (now at index > 0) to a unique real slug', () => {
+    const pages = [
+      makePage({ id: 'a', name: 'About', slug: 'about' }),
+      makePage({ id: 'b', name: 'Home', slug: 'index' }),
+    ];
+    const result = applyLandingInvariant(pages);
+    const demoted = result.find((p) => p.id === 'b')!;
+    expect(demoted.slug).not.toBe('index');
+    expect(demoted.slug).toBe('home');
+  });
+
+  test('never produces two pages with slug "index"', () => {
+    const pages = [
+      makePage({ id: 'a', name: 'About', slug: 'about' }),
+      makePage({ id: 'b', name: 'Home', slug: 'index' }),
+      makePage({ id: 'c', name: 'Contact', slug: 'contact' }),
+    ];
+    const result = applyLandingInvariant(pages);
+    const indexSlugs = result.filter((p) => p.slug === 'index');
+    expect(indexSlugs).toHaveLength(1);
+    expect(indexSlugs[0].id).toBe('a');
+  });
+
+  test('demoted page slug is deduped against a colliding existing slug elsewhere in the array', () => {
+    const pages = [
+      makePage({ id: 'a', name: 'About', slug: 'about' }),
+      makePage({ id: 'b', name: 'Home', slug: 'index' }), // demoted page, named "Home" -> slugifies to "home"
+      makePage({ id: 'c', name: 'HomePage', slug: 'home' }), // unrelated page already using slug "home"
+    ];
+    const result = applyLandingInvariant(pages);
+    expect(result[0].slug).toBe('index');
+    const demoted = result.find((p) => p.id === 'b')!;
+    expect(demoted.slug).toBe('home-2');
+    const untouched = result.find((p) => p.id === 'c')!;
+    expect(untouched.slug).toBe('home');
+
+    const slugs = result.map((p) => p.slug);
+    expect(new Set(slugs).size).toBe(slugs.length);
+  });
+
+  test('non-landing pages that already have a real slug are left untouched', () => {
+    const pages = [
+      makePage({ id: 'a', name: 'Home', slug: 'index' }),
+      makePage({ id: 'b', name: 'About', slug: 'about' }),
+      makePage({ id: 'c', name: 'Contact', slug: 'contact' }),
+    ];
+    const result = applyLandingInvariant(pages);
+    expect(result[1]).toEqual(pages[1]);
+    expect(result[2]).toEqual(pages[2]);
+  });
+
+  test('empty array is a no-op', () => {
+    expect(applyLandingInvariant([])).toEqual([]);
+  });
+});
+
+/* ---------- PageProvider-mounted coverage ---------- */
+
+let serializeReturn = '{}';
+const deserializeMock = vi.fn();
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: () => ({
+    query: { serialize: () => serializeReturn },
+    actions: { deserialize: deserializeMock },
+  }),
+}));
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+async function flushTimers() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  });
+}
+
+beforeEach(() => {
+  serializeReturn = '{}';
+  deserializeMock.mockClear();
+});
+
+describe('PageContext.movePage', () => {
+  test('moves a page up, swapping with its neighbor', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    act(() => ctx!.addPage('Contact', 'contact'));
+    // pages: [Home(index0), About, Contact]
+    const contactId = ctx!.pages[2].id;
+
+    act(() => ctx!.movePage(contactId, 'up'));
+
+    expect(ctx!.pages.map((p) => p.name)).toEqual(['Home', 'Contact', 'About']);
+    // Landing invariant still holds -- Home untouched at index 0.
+    expect(ctx!.pages[0].slug).toBe('index');
+
+    unmount();
+  });
+
+  test('is a no-op at the top boundary', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    const homeId = ctx!.pages[0].id;
+    const before = ctx!.pages.map((p) => p.id);
+
+    act(() => ctx!.movePage(homeId, 'up'));
+
+    expect(ctx!.pages.map((p) => p.id)).toEqual(before);
+
+    unmount();
+  });
+
+  test('is a no-op at the bottom boundary', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    const aboutId = ctx!.pages[1].id;
+    const before = ctx!.pages.map((p) => p.id);
+
+    act(() => ctx!.movePage(aboutId, 'down'));
+
+    expect(ctx!.pages.map((p) => p.id)).toEqual(before);
+
+    unmount();
+  });
+
+  test('moving a non-landing page into index 0 promotes it and demotes the old landing page to a real slug', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    // pages: [Home(index0, slug index), About]
+    const aboutId = ctx!.pages[1].id;
+    const homeId = ctx!.pages[0].id;
+
+    act(() => ctx!.movePage(aboutId, 'up'));
+    // pages: [About, Home]
+
+    expect(ctx!.pages.map((p) => p.id)).toEqual([aboutId, homeId]);
+    expect(ctx!.pages[0].slug).toBe('index'); // About is now the landing page
+    const demotedHome = ctx!.pages.find((p) => p.id === homeId)!;
+    expect(demotedHome.slug).not.toBe('index');
+    expect(demotedHome.slug).toBe('home');
+
+    // Exactly one 'index' slug, always at index 0.
+    const indexPages = ctx!.pages.filter((p) => p.slug === 'index');
+    expect(indexPages).toHaveLength(1);
+    expect(ctx!.pages.indexOf(indexPages[0])).toBe(0);
+
+    // movePage does not touch the canvas.
+    expect(deserializeMock).not.toHaveBeenCalled();
+
+    unmount();
+  });
+});
+
+describe('PageContext.setLandingPage', () => {
+  test('promotes an arbitrary page to index 0 and demotes the old landing page', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    act(() => ctx!.addPage('Contact', 'contact'));
+    const homeId = ctx!.pages[0].id;
+    const contactId = ctx!.pages[2].id;
+
+    act(() => ctx!.setLandingPage(contactId));
+
+    expect(ctx!.pages[0].id).toBe(contactId);
+    expect(ctx!.pages[0].slug).toBe('index');
+    const demotedHome = ctx!.pages.find((p) => p.id === homeId)!;
+    expect(demotedHome.slug).toBe('home');
+
+    const indexPages = ctx!.pages.filter((p) => p.slug === 'index');
+    expect(indexPages).toHaveLength(1);
+
+    // setLandingPage does not touch the canvas.
+    expect(deserializeMock).not.toHaveBeenCalled();
+
+    unmount();
+  });
+
+  test('is a no-op when the page is already the landing page', () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    const homeId = ctx!.pages[0].id;
+    const before = ctx!.pages.map((p) => ({ ...p }));
+
+    act(() => ctx!.setLandingPage(homeId));
+
+    expect(ctx!.pages).toEqual(before);
+
+    unmount();
+  });
+});
+
+describe('PageContext.duplicatePage', () => {
+  test('inserts a copy immediately after the source with a copied craftState, seo, and a unique slug', async () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    await flushTimers();
+    act(() => ctx!.addPage('Contact', 'contact'));
+    await flushTimers();
+    // pages: [Home, About, Contact]; Contact is currently active.
+
+    const aboutId = ctx!.pages[1].id;
+    act(() => ctx!.updatePageSeo(aboutId, { metaTitle: 'About Us' }));
+
+    act(() => ctx!.duplicatePage(aboutId));
+    await flushTimers();
+
+    const names = ctx!.pages.map((p) => p.name);
+    expect(names).toEqual(['Home', 'About', 'About copy', 'Contact']);
+
+    const copy = ctx!.pages[2];
+    expect(copy.name).toBe('About copy');
+    expect(copy.slug).toBe('about-copy');
+    expect(copy.seo).toEqual({ metaTitle: 'About Us' });
+
+    // Every slug in the array is unique.
+    const slugs = ctx!.pages.map((p) => p.slug);
+    expect(new Set(slugs).size).toBe(slugs.length);
+
+    // Landing invariant untouched -- copy is never index 0.
+    expect(ctx!.pages[0].slug).toBe('index');
+
+    unmount();
+  });
+
+  test('duplicating the ACTIVE page saves the live canvas into the copy (and the original)', async () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    // Home is active by default. Simulate the user having made live edits.
+    serializeReturn = '{"ROOT":{"live":"edit"}}';
+
+    act(() => ctx!.duplicatePage(ctx!.pages[0].id));
+    await flushTimers();
+
+    const copy = ctx!.pages[1];
+    expect(copy.name).toBe('Home copy');
+    expect(copy.craftState).toBe('{"ROOT":{"live":"edit"}}');
+
+    // Original page's stored state was also refreshed to the live canvas.
+    expect(ctx!.pages[0].craftState).toBe('{"ROOT":{"live":"edit"}}');
+
+    // The canvas switched to the new copy.
+    expect(ctx!.activePageId).toBe(copy.id);
+
+    unmount();
+  });
+
+  test('duplicating a non-active page copies its already-stored craftState (no live-canvas read)', async () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    act(() => ctx!.addPage('About', 'about'));
+    await flushTimers();
+    // Home is now inactive, stored with whatever it serialized to on switch.
+    const homeId = ctx!.pages[0].id;
+    const homeCraftState = ctx!.pages[0].craftState;
+
+    // Switch the live serialize() return to something else, to prove
+    // duplicating an inactive page does NOT read the live canvas.
+    serializeReturn = '{"ROOT":{"unrelated":"currently-active-page-content"}}';
+
+    act(() => ctx!.duplicatePage(homeId));
+    await flushTimers();
+
+    const copy = ctx!.pages.find((p) => p.name === 'Home copy')!;
+    expect(copy.craftState).toBe(homeCraftState);
+
+    unmount();
+  });
+
+  test('switches the canvas to the new copy (deserialize called with the copy craftState)', async () => {
+    let ctx: ReturnType<typeof usePages> | null = null;
+    const Consumer: React.FC = () => {
+      ctx = usePages();
+      return null;
+    };
+    render(
+      <PageProvider>
+        <Consumer />
+      </PageProvider>,
+    );
+
+    deserializeMock.mockClear();
+    act(() => ctx!.duplicatePage(ctx!.pages[0].id));
+    await flushTimers();
+
+    expect(deserializeMock).toHaveBeenCalled();
+
+    unmount();
+  });
+});