@akinon/pz-theme 2.0.37-beta.0 → 2.0.37

package/src/__tests__/designer-chrome-clipping.test.tsx

@@ -0,0 +1,497 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { WithDesignerFeatures } from '../components/with-designer-features';
+import SectionWrapper from '../sections/section-wrapper';
+import { generateThemeCSS } from '../utils';
+
+/**
+ * Every declaration a composition can put on `[data-block-id]` /
+ * `[data-section-id]` that establishes a clipping context for the element's
+ * descendants. The action toolbar is drawn *above* that box, so before the fix
+ * each one of these erased rename / duplicate / delete for the block or
+ * section it was set on, with no way back except undo.
+ */
+const CLIPPING_DECLARATIONS: Array<[string, string]> = [
+  ['overflow', 'hidden'],
+  ['overflow', 'clip'],
+  ['overflow', 'auto'],
+  ['overflow', 'scroll'],
+  ['overflow-x', 'hidden'],
+  ['overflow-y', 'hidden'],
+  ['clip-path', 'inset(0)'],
+  ['contain', 'paint'],
+  ['contain', 'strict'],
+  ['contain', 'content'],
+  ['contain', 'layout paint']
+];
+
+const ancestorsOf = (element: Element): Element[] => {
+  const chain: Element[] = [];
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    chain.push(node);
+  }
+  return chain;
+};
+
+const stylableAncestorsOf = (element: Element): Element[] =>
+  ancestorsOf(element).filter(
+    (node) =>
+      node.hasAttribute('data-block-id') || node.hasAttribute('data-section-id')
+  );
+
+const block = (over: Record<string, unknown> = {}) => ({
+  id: 'b1',
+  type: 'group',
+  label: 'Promo Card',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  ...over
+});
+
+const section = (over: Record<string, unknown> = {}) =>
+  ({
+    id: 's1',
+    type: 'generic-section',
+    name: 'promo',
+    label: 'Promo Section',
+    properties: {},
+    styles: {},
+    blocks: [],
+    order: 0,
+    hidden: false,
+    ...over
+  }) as any;
+
+const handlers = () => ({
+  onMoveUp: jest.fn(),
+  onMoveDown: jest.fn(),
+  onDuplicate: jest.fn(),
+  onToggleVisibility: jest.fn(),
+  onDelete: jest.fn(),
+  onRename: jest.fn()
+});
+
+const renderBlock = (
+  clip: Array<[string, string]> = [],
+  actions = handlers(),
+  over: Record<string, unknown> = {}
+) => {
+  const view = render(
+    <WithDesignerFeatures
+      block={block(over)}
+      placeholderId="ph"
+      sectionId="s1"
+      isDesigner
+      isSelected
+      {...actions}
+    >
+      <span>block content</span>
+    </WithDesignerFeatures>
+  );
+
+  const host = view.container.querySelector(
+    '[data-block-id="b1"]'
+  ) as HTMLElement;
+  clip.forEach(([property, value]) => host.style.setProperty(property, value));
+
+  return { ...view, host, actions };
+};
+
+const renderSection = (
+  clip: Array<[string, string]> = [],
+  actions = handlers(),
+  over: Record<string, unknown> = {}
+) => {
+  const view = render(
+    <SectionWrapper
+      section={section(over)}
+      placeholderId="ph"
+      isDesigner
+      isSelected
+      {...actions}
+    >
+      <span>section content</span>
+    </SectionWrapper>
+  );
+
+  const host = view.container.querySelector(
+    '[data-section-id="s1"]'
+  ) as HTMLElement;
+  clip.forEach(([property, value]) => host.style.setProperty(property, value));
+
+  return { ...view, host, actions };
+};
+
+describe('designer chrome survives a clipping composition', () => {
+  describe.each(CLIPPING_DECLARATIONS)('%s: %s', (property, value) => {
+    it('keeps the block toolbar outside every element the composition styles', () => {
+      const { host } = renderBlock([[property, value]]);
+
+      const rename = screen.getByTitle('Click to rename');
+      const duplicate = screen.getByTitle('Duplicate');
+      const remove = screen.getByTitle('Delete');
+
+      [rename, duplicate, remove].forEach((control) => {
+        expect(host.contains(control)).toBe(false);
+        expect(stylableAncestorsOf(control)).toEqual([]);
+      });
+    });
+
+    it('keeps the section toolbar outside every element the composition styles', () => {
+      const { host } = renderSection([[property, value]]);
+
+      const rename = screen.getByTitle('Click to rename');
+      const duplicate = screen.getByTitle('Duplicate');
+      const remove = screen.getByTitle('Delete');
+
+      [rename, duplicate, remove].forEach((control) => {
+        expect(host.contains(control)).toBe(false);
+        expect(stylableAncestorsOf(control)).toEqual([]);
+      });
+    });
+
+    it('leaves rename, duplicate and delete working on the block', () => {
+      const { actions } = renderBlock([[property, value]]);
+
+      fireEvent.click(screen.getByTitle('Duplicate'));
+      expect(actions.onDuplicate).toHaveBeenCalledTimes(1);
+
+      fireEvent.click(screen.getByTitle('Delete'));
+      expect(actions.onDelete).toHaveBeenCalledTimes(1);
+
+      fireEvent.click(screen.getByTitle('Click to rename'));
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: { value: 'Renamed Card' }
+      });
+      fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+      expect(actions.onRename).toHaveBeenCalledWith('Renamed Card');
+    });
+
+    it('still emits the declaration onto the storefront element', () => {
+      const css = generateThemeCSS([
+        {
+          id: 's1',
+          styles: { [property]: value },
+          blocks: [{ id: 'b1', styles: { [property]: value } }]
+        }
+      ] as any);
+
+      expect(css).toContain(`[data-section-id="s1"] {`);
+      expect(css).toContain(`[data-block-id="b1"] {`);
+      // Once for the section rule, once for the block rule.
+      expect(css.split(`${property}: ${value};`)).toHaveLength(3);
+    });
+  });
+});
+
+describe('designer chrome placement is unchanged', () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it('pins the toolbar to the host box it was drawn against before', () => {
+    const hostRect = {
+      top: 120,
+      left: 40,
+      right: 340,
+      bottom: 320,
+      width: 300,
+      height: 200,
+      x: 40,
+      y: 120
+    };
+
+    jest
+      .spyOn(Element.prototype, 'getBoundingClientRect')
+      .mockImplementation(function (this: Element) {
+        const rect = this.hasAttribute('data-block-id')
+          ? hostRect
+          : {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: 0,
+              height: 0,
+              x: 0,
+              y: 0
+            };
+        return { ...rect, toJSON: () => rect } as DOMRect;
+      });
+
+    renderBlock();
+
+    const toolbar = document.querySelector(
+      '[data-action-toolbar]'
+    ) as HTMLElement;
+    expect(toolbar).not.toBeNull();
+
+    // Same offsets as before: above the host's top edge, flush with its left.
+    expect(toolbar.className).toContain('absolute');
+    expect(toolbar.className).toContain('-top-0.5');
+    expect(toolbar.className).toContain('left-0');
+    expect(toolbar.className).toContain('-translate-y-full');
+
+    const frame = toolbar.parentElement as HTMLElement;
+    expect(frame.style.position).toBe('fixed');
+    expect(frame.style.top).toBe('120px');
+    expect(frame.style.left).toBe('40px');
+  });
+
+  it('leaves nothing in the host that takes layout space', () => {
+    const { host } = renderBlock();
+
+    const anchor = host.querySelector(
+      '[data-action-toolbar-anchor]'
+    ) as HTMLElement;
+
+    // Anything with a box here is a flex item or grid cell the storefront does
+    // not have, i.e. a canvas/storefront parity break.
+    expect(anchor.style.display).toBe('none');
+  });
+
+  it('draws no toolbar for a hidden block, which has no box to sit above', () => {
+    renderBlock([], handlers(), { hidden: true });
+
+    expect(document.querySelector('[data-action-toolbar]')).toBeNull();
+  });
+
+  /**
+   * "Move Up" is a button on this toolbar. It reorders the block: the host
+   * moves to a different y, but it is not resized, it is not scrolled, and
+   * none of its own attributes change — so no scroll, resize, ResizeObserver
+   * or MutationObserver record is produced. Drawn in-tree the toolbar came
+   * along for free; measured once on mount it is left behind, floating over an
+   * unrelated part of the page until something else happens to fire a
+   * listener. The canvas re-renders for every one of these, so a re-render has
+   * to be a measuring point too.
+   */
+  it('follows the host when a re-render moves it with no scroll, resize or attribute change', () => {
+    let hostTop = 300;
+
+    jest
+      .spyOn(Element.prototype, 'getBoundingClientRect')
+      .mockImplementation(function (this: Element) {
+        const rect = this.hasAttribute('data-block-id')
+          ? {
+              top: hostTop,
+              left: 40,
+              right: 340,
+              bottom: hostTop + 200,
+              width: 300,
+              height: 200,
+              x: 40,
+              y: hostTop
+            }
+          : {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: 0,
+              height: 0,
+              x: 0,
+              y: 0
+            };
+        return { ...rect, toJSON: () => rect } as DOMRect;
+      });
+
+    const actions = handlers();
+    const { rerender } = renderBlock([], actions);
+
+    const frameOf = () =>
+      (document.querySelector('[data-action-toolbar]') as HTMLElement)
+        .parentElement as HTMLElement;
+
+    expect(frameOf().style.top).toBe('300px');
+
+    // The reorder the toolbar's own button triggers.
+    hostTop = 100;
+    rerender(
+      <WithDesignerFeatures
+        block={block()}
+        placeholderId="ph"
+        sectionId="s1"
+        isDesigner
+        isSelected
+        {...actions}
+      >
+        <span>block content</span>
+      </WithDesignerFeatures>
+    );
+
+    expect(frameOf().style.top).toBe('100px');
+  });
+
+  /**
+   * The shape the canvas actually renders: a block inside the section that
+   * owns it, both able to draw chrome. Once the toolbar is resolved by walking
+   * up from an anchor instead of being handed its host, picking the *nearest*
+   * styled ancestor is the whole contract — a block toolbar pinned to its
+   * section would sit at the wrong end of a tall section.
+   */
+  it('pins a nested block toolbar to the block, not to the section around it', () => {
+    const sectionRect = {
+      top: 0,
+      left: 0,
+      right: 1440,
+      bottom: 900,
+      width: 1440,
+      height: 900,
+      x: 0,
+      y: 0
+    };
+    const blockRect = {
+      top: 640,
+      left: 220,
+      right: 520,
+      bottom: 840,
+      width: 300,
+      height: 200,
+      x: 220,
+      y: 640
+    };
+
+    jest
+      .spyOn(Element.prototype, 'getBoundingClientRect')
+      .mockImplementation(function (this: Element) {
+        const rect = this.hasAttribute('data-block-id')
+          ? blockRect
+          : this.hasAttribute('data-section-id')
+            ? sectionRect
+            : {
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: 0,
+                height: 0,
+                x: 0,
+                y: 0
+              };
+        return { ...rect, toJSON: () => rect } as DOMRect;
+      });
+
+    render(
+      <SectionWrapper
+        section={section()}
+        placeholderId="ph"
+        isDesigner
+        isSelected
+        {...handlers()}
+      >
+        <WithDesignerFeatures
+          block={block()}
+          placeholderId="ph"
+          sectionId="s1"
+          isDesigner
+          isSelected
+          {...handlers()}
+        >
+          <span>block content</span>
+        </WithDesignerFeatures>
+      </SectionWrapper>
+    );
+
+    const anchors = Array.from(
+      document.querySelectorAll('[data-action-toolbar-anchor]')
+    );
+    expect(anchors).toHaveLength(2);
+
+    const frames = Array.from(
+      document.querySelectorAll('[data-action-toolbar]')
+    ).map((toolbar) => (toolbar.parentElement as HTMLElement).style);
+
+    const tops = frames.map((style) => style.top).sort();
+    const lefts = frames.map((style) => style.left).sort();
+
+    expect(tops).toEqual(['0px', '640px']);
+    expect(lefts).toEqual(['0px', '220px']);
+
+    // The two must be pinned to different boxes: one toolbar landing on both
+    // corners would mean `closest` resolved to the same host twice.
+    expect(new Set(frames.map((style) => `${style.top}/${style.left}`)).size)
+      .toBe(2);
+  });
+
+  it('follows the host when a re-render moves a section', () => {
+    let hostTop = 500;
+
+    jest
+      .spyOn(Element.prototype, 'getBoundingClientRect')
+      .mockImplementation(function (this: Element) {
+        const rect = this.hasAttribute('data-section-id')
+          ? {
+              top: hostTop,
+              left: 0,
+              right: 1440,
+              bottom: hostTop + 400,
+              width: 1440,
+              height: 400,
+              x: 0,
+              y: hostTop
+            }
+          : {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: 0,
+              height: 0,
+              x: 0,
+              y: 0
+            };
+        return { ...rect, toJSON: () => rect } as DOMRect;
+      });
+
+    const actions = handlers();
+    const { rerender } = renderSection([], actions);
+
+    const frameOf = () =>
+      (document.querySelector('[data-action-toolbar]') as HTMLElement)
+        .parentElement as HTMLElement;
+
+    expect(frameOf().style.top).toBe('500px');
+
+    hostTop = 60;
+    rerender(
+      <SectionWrapper
+        section={section()}
+        placeholderId="ph"
+        isDesigner
+        isSelected
+        {...actions}
+      >
+        <span>section content</span>
+      </SectionWrapper>
+    );
+
+    expect(frameOf().style.top).toBe('60px');
+  });
+});
+
+describe('storefront output is untouched', () => {
+  it('renders no designer chrome and adds nothing to the document', () => {
+    const { container } = render(
+      <WithDesignerFeatures
+        block={block()}
+        placeholderId="ph"
+        sectionId="s1"
+        isDesigner={false}
+        isSelected
+        {...handlers()}
+      >
+        <span>block content</span>
+      </WithDesignerFeatures>
+    );
+
+    const host = container.querySelector('[data-block-id="b1"]') as HTMLElement;
+    expect(host.children).toHaveLength(1);
+    expect(host.innerHTML).toBe('<span>block content</span>');
+    expect(document.querySelectorAll('[data-action-toolbar]')).toHaveLength(0);
+    expect(
+      document.querySelectorAll('[data-action-toolbar-anchor]')
+    ).toHaveLength(0);
+  });
+});