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

package/src/sections/__tests__/posts-slider-arrows.test.tsx

@@ -0,0 +1,470 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock so a slide is one countable marker.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="slide" data-id={block.id} />
+  )
+}));
+
+/**
+ * Stand in for react-multi-carousel, which measures its container and renders
+ * an empty track at a jsdom width of zero — so neither a slide nor an arrow
+ * reaches the DOM through the real one. The stub renders exactly what the
+ * section hands it, which is the thing under test: which blocks became slides,
+ * and which arrows were passed in.
+ */
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({
+    children,
+    customLeftArrow,
+    customRightArrow,
+    arrows
+  }: {
+    children?: React.ReactNode;
+    customLeftArrow?: React.ReactNode;
+    customRightArrow?: React.ReactNode;
+    arrows?: boolean;
+  }) => (
+    <div data-testid="carousel" data-arrows={String(arrows)}>
+      {customLeftArrow}
+      {customRightArrow}
+      {children}
+    </div>
+  )
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+import {
+  isSliderArrowIconBlock,
+  LEFT_ARROW_ICON_LABEL,
+  RIGHT_ARROW_ICON_LABEL
+} from '../../utils/slider-arrows';
+
+/**
+ * The slider sections used to hand `arrows` straight to react-multi-carousel and
+ * let the library draw its own buttons, so an arrow was a thing a brand could
+ * switch off and nothing else. It is now drawn from two icon blocks the section
+ * carries — the same layers the `slider` BLOCK has always had, which is what
+ * makes a Featured Brand Collection's arrows selectable.
+ *
+ * What these protect, in order: that the arrow blocks never appear as slides,
+ * that the whole authored style map lands (the block's version reads a
+ * hand-picked ten keys and drops the rest), and that a section with no arrow
+ * blocks still behaves exactly as it did.
+ */
+
+const slide = (id: string) => ({
+  id,
+  type: 'group',
+  label: id,
+  styles: {},
+  order: 0,
+  blocks: []
+});
+
+const arrow = (label: string, styles: Record<string, unknown> = {}) => ({
+  id: `arrow-${label === LEFT_ARROW_ICON_LABEL ? 'left' : 'right'}`,
+  type: 'icon',
+  label,
+  value: { url: '', alt: label },
+  properties: {},
+  styles,
+  order: 9
+});
+
+const renderSection = (blocks: any[], over: Record<string, unknown> = {}) =>
+  render(
+    <PostsSliderSection
+      {...({
+        section: {
+          id: 'sec',
+          type: 'flash-deals-slider',
+          label: 'sec',
+          // Two visible slides against one item per view, so the arrows are
+          // shown at all: `showArrows` also requires something to scroll to.
+          properties: { 'items-per-slide': 1, 'show-arrows': true },
+          styles: {},
+          blocks
+        },
+        currentBreakpoint: 'desktop',
+        placeholderId: 'ph',
+        isDesigner: false,
+        selectedBlockId: null,
+        ...over
+      } as any)}
+    />
+  );
+
+const renderSectionWithStyles = (styles: Record<string, unknown>) =>
+  render(
+    <PostsSliderSection
+      {...({
+        section: {
+          id: 'sec',
+          type: 'flash-deals-slider',
+          label: 'sec',
+          properties: { 'items-per-slide': 1, 'show-arrows': true },
+          styles,
+          blocks: [slide('a'), slide('b')]
+        },
+        currentBreakpoint: 'desktop',
+        placeholderId: 'ph',
+        isDesigner: false,
+        selectedBlockId: null
+      } as any)}
+    />
+  );
+
+const arrowButtons = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll('button[data-block-id^="arrow-"]')
+  ) as HTMLButtonElement[];
+
+describe('identifying an arrow block', () => {
+  it('matches an icon block carrying either arrow label', () => {
+    expect(isSliderArrowIconBlock(arrow(LEFT_ARROW_ICON_LABEL))).toBe(true);
+    expect(isSliderArrowIconBlock(arrow(RIGHT_ARROW_ICON_LABEL))).toBe(true);
+  });
+
+  it('leaves an icon block a designer added as a real slide alone', () => {
+    // The section now allows `icon` blocks, so type alone cannot mean "arrow".
+    expect(
+      isSliderArrowIconBlock({ type: 'icon', label: 'Payment Badge' })
+    ).toBe(false);
+  });
+
+  it('does not match a non-icon block that happens to share the label', () => {
+    expect(
+      isSliderArrowIconBlock({ type: 'text', label: LEFT_ARROW_ICON_LABEL })
+    ).toBe(false);
+  });
+});
+
+describe('the arrow blocks are chrome, not slides', () => {
+  it('renders only the real slides', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL),
+      arrow(RIGHT_ARROW_ICON_LABEL)
+    ]);
+
+    const ids = Array.from(
+      container.querySelectorAll('[data-testid="slide"]')
+    ).map((node) => node.getAttribute('data-id'));
+
+    expect(ids).not.toContain('arrow-left');
+    expect(ids).not.toContain('arrow-right');
+    expect(ids).toContain('a');
+  });
+
+  it('still renders an icon block that is not an arrow as a slide', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      { ...slide('badge'), type: 'icon', label: 'Payment Badge' }
+    ]);
+
+    const ids = Array.from(
+      container.querySelectorAll('[data-testid="slide"]')
+    ).map((node) => node.getAttribute('data-id'));
+
+    expect(ids).toContain('badge');
+  });
+});
+
+describe('the arrow wears everything the designer authored', () => {
+  it('applies style keys the block renderer used to drop', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL, {
+        // None of these three are in the `slider` block's allowlist, which is
+        // the gap this closes.
+        'box-shadow': { desktop: '0 2px 8px rgba(0,0,0,0.4)' },
+        border: { desktop: '2px solid #ff0000' },
+        transition: { desktop: 'all 0.3s ease' }
+      })
+    ]);
+
+    const [button] = arrowButtons(container);
+
+    expect(button).toBeTruthy();
+    expect(button.style.boxShadow).toBe('0 2px 8px rgba(0,0,0,0.4)');
+    expect(button.style.border).toBe('2px solid #ff0000');
+    expect(button.style.transition).toBe('all 0.3s ease');
+  });
+
+  it('lets an authored value replace the plate default rather than lose to it', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL, {
+        'border-radius': { desktop: '4px' },
+        'background-color': { desktop: '#ffffff' },
+        width: { desktop: '64px' }
+      })
+    ]);
+
+    const [button] = arrowButtons(container);
+
+    // The circle was the one thing the library button never let go of.
+    expect(button.style.borderRadius).toBe('4px');
+    // jsdom normalises the authored hex; what matters is that it replaced the
+    // default translucent black rather than losing to it.
+    expect(button.style.backgroundColor).toBe('rgb(255, 255, 255)');
+    expect(button.style.width).toBe('64px');
+  });
+
+  it('keeps the defaults for everything left unauthored', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL)
+    ]);
+
+    const [button] = arrowButtons(container);
+
+    expect(button.style.borderRadius).toBe('50%');
+    expect(button.style.width).toBe('40px');
+  });
+
+  it('carries data-block-id, which is how the generated stylesheet reaches it', () => {
+    // States, part keys and the custom-CSS hatch are all emitted against
+    // `[data-block-id="…"]`, so without the attribute half the editor's
+    // controls would write CSS that matched nothing.
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(RIGHT_ARROW_ICON_LABEL)
+    ]);
+
+    expect(
+      container.querySelector('button[data-block-id="arrow-right"]')
+    ).toBeTruthy();
+  });
+
+  it('reads the size control onto the glyph, not the plate', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL, { size: { desktop: 32 } })
+    ]);
+
+    const [button] = arrowButtons(container);
+    const glyph = button.querySelector('img') as HTMLImageElement;
+
+    expect(glyph.style.width).toBe('32px');
+    // `size` is not a CSS property; it must not reach the button.
+    expect(button.getAttribute('style')).not.toContain('size:');
+  });
+});
+
+/**
+ * The section's own declarations belong to the `<section>` element.
+ *
+ * `generateThemeCSS` emits them against `[data-section-id="…"]`, and this
+ * component used to apply the very same map inline to the box it renders inside
+ * that section — so each of them landed on two nested elements. The compounding
+ * ones are what a designer actually saw: 68px of side padding came out as 136,
+ * and the band's background was painted full-width and then again inside itself.
+ */
+describe('the section is dressed once, by the section element', () => {
+  it('puts no section declaration on the box inside it', () => {
+    const { container } = renderSectionWithStyles({
+      'padding-left': { desktop: '68px' },
+      'background-color': { desktop: '#f8f9fb' },
+      border: { desktop: '2px solid #000000' }
+    });
+
+    const box = container.firstElementChild as HTMLElement;
+
+    // Not "the right subset" — none of it. The section element carries all of
+    // it, and anything here would be a second copy.
+    expect(box.getAttribute('style')).toBeNull();
+  });
+
+  it('leaves padding to the stylesheet rather than adding a second copy', () => {
+    const { container } = renderSectionWithStyles({
+      'padding-left': { desktop: '68px' },
+      'padding-right': { desktop: '68px' }
+    });
+
+    const box = container.firstElementChild as HTMLElement;
+
+    expect(box.style.paddingLeft).toBe('');
+    expect(box.style.paddingRight).toBe('');
+  });
+
+  it('does not repaint the band background inside the band', () => {
+    const { container } = renderSectionWithStyles({
+      'background-color': { desktop: '#f8f9fb' }
+    });
+
+    const box = container.firstElementChild as HTMLElement;
+
+    expect(box.style.backgroundColor).toBe('');
+  });
+
+  it('keeps its own centring and content width, which are the box\'s to own', () => {
+    const { container } = renderSectionWithStyles({});
+
+    const box = container.firstElementChild as HTMLElement;
+
+    expect(box.className).toContain('mx-auto');
+    expect(box.className).toContain('max-w-7xl');
+  });
+});
+
+/**
+ * Where the arrow is in the DOM decides what a designer can ask of it.
+ *
+ * react-multi-carousel renders a `customArrow` inside
+ * `.react-multi-carousel-list`, which carries `overflow: hidden` — that is what
+ * hides the off-screen slides, so it cannot be opened. An arrow in there is
+ * clipped the moment it is offset past the container, which is exactly the
+ * design that asks for the arrow flush to the page edge while the cards stay
+ * inset. So the arrows are siblings of the carousel instead, in the box that
+ * positions it and clips nothing.
+ */
+describe('the arrow sits outside the carousel, not inside its clipped list', () => {
+  it('is not a descendant of the carousel', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL)
+    ]);
+
+    const carousel = container.querySelector('[data-testid="carousel"]')!;
+    const [button] = arrowButtons(container);
+
+    expect(carousel.contains(button)).toBe(false);
+  });
+
+  it('turns the library arrows off, so there is only one pair', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL)
+    ]);
+
+    expect(
+      container
+        .querySelector('[data-testid="carousel"]')
+        ?.getAttribute('data-arrows')
+    ).toBe('false');
+  });
+
+  it('keeps the library arrows when the section brought none of its own', () => {
+    const { container } = renderSection([slide('a'), slide('b')]);
+
+    expect(
+      container
+        .querySelector('[data-testid="carousel"]')
+        ?.getAttribute('data-arrows')
+    ).toBe('true');
+  });
+
+  it('carries a negative offset through instead of falling back to the default', () => {
+    // The whole point: -124px is how the arrow reaches past the band's padding.
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL, { left: { desktop: '-124px' } })
+    ]);
+
+    const [button] = arrowButtons(container);
+
+    expect(button.style.left).toBe('-124px');
+    // The `left-4` class default must step aside, or the two would fight.
+    expect(button.className).not.toContain('left-4');
+  });
+});
+
+/**
+ * The band and the slides are two boxes now.
+ *
+ * They used to be one, so there was nowhere to say "inset the cards from the
+ * left, leave the arrows at the edge". Padding the section moved the arrows with
+ * the cards — they are positioned inside it — and the only way out was a
+ * negative offset on each arrow kept equal to that padding by hand, at every
+ * breakpoint.
+ */
+describe('the slides have their own box, which the arrows are not in', () => {
+  it('wraps the carousel in the slides part', () => {
+    const { container } = renderSection([slide('a'), slide('b')]);
+
+    const slides = container.querySelector('[data-part="slides"]');
+
+    expect(slides).toBeTruthy();
+    expect(slides!.querySelector('[data-testid="carousel"]')).toBeTruthy();
+  });
+
+  it('leaves the arrows outside it, so insetting the cards cannot move them', () => {
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL),
+      arrow(RIGHT_ARROW_ICON_LABEL)
+    ]);
+
+    const slides = container.querySelector('[data-part="slides"]')!;
+
+    arrowButtons(container).forEach((button) => {
+      expect(slides.contains(button)).toBe(false);
+    });
+    expect(arrowButtons(container)).toHaveLength(2);
+  });
+
+  it('keeps the arrows in the box that positions them', () => {
+    // Siblings of the slides box, children of the box that is `relative` — that
+    // is what makes an authored offset resolve against the band.
+    const { container } = renderSection([
+      slide('a'),
+      slide('b'),
+      arrow(LEFT_ARROW_ICON_LABEL)
+    ]);
+
+    const box = container.firstElementChild as HTMLElement;
+    const [button] = arrowButtons(container);
+
+    expect(button.parentElement).toBe(box);
+    expect(box.className).toContain('relative');
+  });
+});
+
+describe('a section without arrow blocks', () => {
+  it('draws no custom arrow at all', () => {
+    const { container } = renderSection([slide('a'), slide('b')]);
+
+    expect(arrowButtons(container)).toHaveLength(0);
+  });
+});
+
+describe('the arrow in the designer', () => {
+  it('is marked when its own layer is the selected one', () => {
+    const { container } = renderSection(
+      [slide('a'), slide('b'), arrow(LEFT_ARROW_ICON_LABEL)],
+      { isDesigner: true, selectedBlockId: 'arrow-left' }
+    );
+
+    const [button] = arrowButtons(container);
+
+    expect(button.className).toContain('ring-2');
+  });
+
+  it('is not marked when something else is selected', () => {
+    const { container } = renderSection(
+      [slide('a'), slide('b'), arrow(LEFT_ARROW_ICON_LABEL)],
+      { isDesigner: true, selectedBlockId: 'a' }
+    );
+
+    const [button] = arrowButtons(container);
+
+    expect(button.className).not.toContain('ring-2');
+  });
+});