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

package/src/sections/__tests__/posts-slider-quick-view.test.tsx

@@ -0,0 +1,660 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * Stub the recursive ThemeBlock as the thing a deal card actually is: one
+ * anchor to the product page, with a control inside it. The card being a link
+ * is the whole point — quick view has to swallow that navigation, and only
+ * for a plain left click. The inner button is there because a designer may
+ * drop one in (`button` is in this section's `allowedBlocks`), and it must go
+ * on working.
+ */
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string; __qvProduct?: unknown } }) => (
+    <a data-testid="card" data-id={block.id} href={`/product/${block.id}/`}>
+      card
+      <button
+        type="button"
+        data-testid="card-button"
+        onClick={() => {
+          (globalThis as Record<string, unknown>).__cardButtonClicks =
+            (((globalThis as Record<string, unknown>)
+              .__cardButtonClicks as number) ?? 0) + 1;
+        }}
+      >
+        add
+      </button>
+    </a>
+  )
+}));
+
+/**
+ * react-multi-carousel measures its container and renders an empty track at a
+ * jsdom width of zero, so no slide would reach the DOM through the real one.
+ * The stub renders exactly what the section hands it.
+ */
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({ children }: { children?: React.ReactNode }) => (
+    <div data-testid="carousel">{children}</div>
+  )
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+
+/**
+ * Quick view: the switch that decides whether tapping a product card opens a
+ * panel or leaves for the product page. It exists because some brands' designs
+ * want the panel and some do not, so the two things these lock hardest are
+ * that it is OFF unless asked for — every composition published before it
+ * carries no such key and must keep navigating byte for byte as it did — and
+ * that a slide with no real product behind it never becomes a dead card.
+ */
+
+const product = (pk: number, name: string, price: number) => ({
+  pk,
+  name,
+  absolute_url: `/product/${pk}/`,
+  productimage_set: [{ image: `/img/${pk}.jpg` }],
+  active_price: { price, currency_type: 'TRY' }
+});
+
+const ITERATOR = {
+  id: 'iter',
+  label: 'Iterator',
+  isIterator: true,
+  order: 0,
+  properties: {},
+  styles: {},
+  blocks: [
+    {
+      id: 'card',
+      type: 'group',
+      label: 'Deal Card 1',
+      properties: { tag: 'a' },
+      styles: {},
+      blocks: []
+    }
+  ]
+};
+
+interface SectionOptions {
+  properties?: Record<string, unknown>;
+  products?: Record<string, unknown>[] | null;
+  type?: string;
+  isDesigner?: boolean;
+  breakpoint?: string;
+}
+
+/**
+ * The section as the page really nests it: `SectionWrapper` puts a
+ * `relative z-10` box around every custom renderer, and that box — not the
+ * band the renderer itself draws — is the stacking context the overlay has to
+ * escape. Rendering the section bare would let a z-index fix that does
+ * nothing on a real page look like it worked.
+ */
+const sectionTree = ({
+  properties = {},
+  products = [product(11, 'Blue Stool', 2790), product(22, 'Red Chair', 1490)],
+  type = 'flash-deals-slider',
+  isDesigner = false,
+  breakpoint = 'desktop'
+}: SectionOptions = {}) => (
+  <div data-section-id="sec">
+    <div data-section-content="" className="relative z-10">
+      <PostsSliderSection
+        {...({
+          section: {
+            id: 'sec',
+            type,
+            label: 'sec',
+            properties: { 'items-per-slide': 1, ...properties },
+            styles: {},
+            blocks: [ITERATOR],
+            dataSource: products
+              ? { details: { collection: { products } } }
+              : undefined
+          },
+          currentBreakpoint: breakpoint,
+          placeholderId: 'ph',
+          isDesigner
+        } as any)}
+      />
+    </div>
+  </div>
+);
+
+const renderSection = (options: SectionOptions = {}) =>
+  render(sectionTree(options));
+
+const sectionContent = () =>
+  document.querySelector('[data-section-content]') as HTMLElement;
+
+/** The band the renderer itself draws, inside the wrapper's box. */
+const band = () =>
+  document.querySelector('[data-section-content] > div') as HTMLElement;
+
+/** A real MouseEvent, so `defaultPrevented` is readable afterwards. */
+const clickCard = (element: Element, init: MouseEventInit = {}) => {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    ...init
+  });
+
+  act(() => {
+    element.dispatchEvent(event);
+  });
+
+  return event;
+};
+
+const cards = () => screen.getAllByTestId('card');
+const panel = () => document.querySelector('[data-part="quick-view-panel"]');
+
+describe('posts slider quick view', () => {
+  describe('when the section never asked for it', () => {
+    it('leaves the card a plain link and renders no panel', () => {
+      renderSection();
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+      expect(document.querySelector('[data-slider-quick-view]')).toBeNull();
+    });
+
+    it('leaves the section unlifted and the band unfocusable', () => {
+      renderSection();
+
+      expect(sectionContent().style.zIndex).toBe('');
+      expect(band()).not.toHaveAttribute('tabindex');
+    });
+  });
+
+  describe('when it is on', () => {
+    const ON = { 'show-quick-view': true };
+
+    it('swallows the card click and opens the panel', () => {
+      renderSection({ properties: ON });
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(panel()).not.toBeNull();
+      expect(panel()).toHaveAttribute('role', 'dialog');
+    });
+
+    it('shows the clicked row, not the first one', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[1]);
+
+      expect(screen.getByText('Red Chair')).toBeInTheDocument();
+      expect(screen.queryByText('Blue Stool')).not.toBeInTheDocument();
+      expect(
+        document.querySelector('[data-part="quick-view-media"]')
+      ).toHaveAttribute('src', '/img/22.jpg');
+    });
+
+    it('prints the row price with its currency', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[0]);
+
+      expect(
+        document.querySelector('[data-part="quick-view-price"]')?.textContent
+      ).toContain('TL');
+    });
+
+    it('links to the clicked product with the authored label', () => {
+      renderSection({
+        properties: { ...ON, 'quick-view-link-label': 'ÜRÜNÜ GÖR' }
+      });
+
+      clickCard(cards()[1]);
+
+      const link = document.querySelector('[data-part="quick-view-link"]');
+      expect(link).toHaveAttribute('href', '/product/22/');
+      expect(link).toHaveTextContent('ÜRÜNÜ GÖR');
+    });
+
+    it('gives the favourite button the clicked row, so it renders at all', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[1]);
+
+      // Off a resolved product the button renders nothing on a storefront, so
+      // its presence is the proof the row reached the item scope.
+      expect(
+        document.querySelector(
+          '[data-part="quick-view-favorite"] [data-favorite-button]'
+        )
+      ).not.toBeNull();
+    });
+
+    it('drops the favourite button when the section turns it off', () => {
+      renderSection({
+        properties: { ...ON, 'quick-view-show-favorite': false }
+      });
+
+      clickCard(cards()[0]);
+
+      expect(
+        document.querySelector('[data-part="quick-view-favorite"]')
+      ).toBeNull();
+    });
+
+    it('always draws a close control, so the panel is never a trap', () => {
+      renderSection({
+        properties: { ...ON, 'quick-view-close-label': 'Kapat' }
+      });
+
+      clickCard(cards()[0]);
+
+      const close = document.querySelector('[data-part="quick-view-close"]');
+      expect(close).toHaveAttribute('aria-label', 'Kapat');
+    });
+
+    it('lifts the wrapper that actually owns the stacking context', () => {
+      // Not the band the renderer draws: SectionWrapper's own `relative z-10`
+      // sits ABOVE it, so lifting the inner one leaves the section competing
+      // with a sticky header at 40 and losing.
+      renderSection({ properties: ON });
+
+      clickCard(cards()[0]);
+
+      expect(sectionContent().style.zIndex).toBe('1000');
+    });
+
+    it('closes on the backdrop and puts the section back down', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[0]);
+      const backdrop = document.querySelector(
+        '[data-part="quick-view-backdrop"]'
+      ) as Element;
+
+      clickCard(backdrop);
+
+      expect(panel()).toBeNull();
+      expect(sectionContent().style.zIndex).toBe('');
+    });
+
+    it('takes focus into the panel and gives it back to the clicked card', () => {
+      renderSection({ properties: ON });
+      const card = cards()[1];
+
+      clickCard(card);
+      // Into the panel's first focusable thing, which is the close control.
+      expect(
+        document.querySelector('[data-part="quick-view-close"]')
+      ).toHaveFocus();
+      expect(panel()).toHaveAttribute('aria-modal', 'true');
+
+      act(() => {
+        document.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+        );
+      });
+
+      expect(panel()).toBeNull();
+      // The card LINK, not the slide wrapper the handler sits on — a plain
+      // div cannot hold focus, and handing it one drops the shopper at the
+      // top of the page.
+      expect(card).toHaveFocus();
+    });
+
+    it('lands focus in the section when the card it opened from is gone', () => {
+      const properties = { ...ON };
+      const { rerender } = render(sectionTree({ properties }));
+
+      // A real pointer click focuses the link it lands on; jsdom's synthetic
+      // dispatch does not, and `useOverlay` falls back to whatever held focus
+      // when the panel opened — which would be `document.body`, and body
+      // satisfies `focusIfConnected`, so the fallback would never be reached.
+      (cards()[1] as HTMLElement).focus();
+      clickCard(cards()[1]);
+
+      // The collection refreshes and the card the shopper opened from is no
+      // longer rendered; `focusIfConnected` refuses a detached node, so this
+      // is what the fallback exists for.
+      rerender(
+        sectionTree({ properties, products: [product(99, 'Something', 10)] })
+      );
+
+      act(() => {
+        document.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+        );
+      });
+
+      expect(panel()).toBeNull();
+      expect(
+        document.querySelector('[data-section-content] > div')
+      ).toHaveFocus();
+      expect(document.body).not.toHaveFocus();
+    });
+
+    it('does not close when the click lands on the panel itself', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[0]);
+      clickCard(panel() as Element);
+
+      expect(panel()).not.toBeNull();
+    });
+  });
+
+  describe('the modifier keys the anchor is for', () => {
+    const ON = { 'show-quick-view': true };
+
+    it.each([
+      ['meta', { metaKey: true }],
+      ['ctrl', { ctrlKey: true }],
+      ['shift', { shiftKey: true }],
+      ['alt', { altKey: true }]
+    ])('leaves a %s-click to the browser', (_label, init) => {
+      renderSection({ properties: ON });
+
+      const event = clickCard(cards()[0], init);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+
+    it('leaves a middle click to the browser', () => {
+      renderSection({ properties: ON });
+
+      const event = clickCard(cards()[0], { button: 1 });
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+  });
+
+  describe('controls the designer put inside the card', () => {
+    const ON = { 'show-quick-view': true };
+
+    beforeEach(() => {
+      (globalThis as Record<string, unknown>).__cardButtonClicks = 0;
+    });
+
+    const buttonClicks = () =>
+      ((globalThis as Record<string, unknown>).__cardButtonClicks as number) ??
+      0;
+
+    it('keeps working, because they own their own click', () => {
+      // The handler runs in the capture phase, so a blanket takeover would
+      // stop the click before anything inside the card ever saw it — and
+      // nothing downstream could object.
+      renderSection({ properties: ON });
+
+      clickCard(screen.getAllByTestId('card-button')[0]);
+
+      expect(buttonClicks()).toBe(1);
+      expect(panel()).toBeNull();
+    });
+
+    it('still let the card itself open the panel', () => {
+      renderSection({ properties: ON });
+
+      clickCard(cards()[0]);
+
+      expect(panel()).not.toBeNull();
+      expect(buttonClicks()).toBe(0);
+    });
+
+    it('are unaffected when quick view is off', () => {
+      renderSection();
+
+      clickCard(screen.getAllByTestId('card-button')[0]);
+
+      expect(buttonClicks()).toBe(1);
+    });
+  });
+
+  describe('the panel never outlives its own switch', () => {
+    it('drops the row and puts the section back down at a breakpoint where it is off', () => {
+      const properties = {
+        'show-quick-view': { desktop: true, mobile: false }
+      };
+      const { rerender } = render(sectionTree({ properties }));
+
+      clickCard(cards()[0]);
+      expect(panel()).not.toBeNull();
+      expect(sectionContent().style.zIndex).toBe('1000');
+
+      // The shopper rotates the phone, or the editor switches viewport.
+      rerender(sectionTree({ properties, breakpoint: 'mobile' }));
+
+      expect(panel()).toBeNull();
+      expect(sectionContent().style.zIndex).toBe('');
+
+      // And it does not come back by itself on the way back.
+      rerender(sectionTree({ properties, breakpoint: 'desktop' }));
+
+      expect(panel()).toBeNull();
+    });
+  });
+
+  describe('rows that are not products', () => {
+    it('keeps the card a link when the data source returned nothing', () => {
+      // `products[index] || {}` upstream makes every clone truthy, so this is
+      // the case a truthiness gate would turn into a dead card.
+      renderSection({ properties: { 'show-quick-view': true }, products: [] });
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+
+    it('keeps the card a link when the row carries no usable pk', () => {
+      renderSection({
+        properties: { 'show-quick-view': true },
+        products: [{ pk: 'product-3', name: 'No id' }]
+      });
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+
+    it('keeps a posts slider a posts slider', () => {
+      // Same renderer, but its rows are blog posts — a favourite heart
+      // pointed at a post id is what the section-type declaration prevents.
+      renderSection({
+        properties: { 'show-quick-view': true },
+        type: 'posts-slider'
+      });
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+  });
+
+  describe('the value it is given', () => {
+    it('refuses a value it does not know', () => {
+      renderSection({ properties: { 'show-quick-view': 'maybe' } });
+
+      expect(clickCard(cards()[0]).defaultPrevented).toBe(false);
+    });
+
+    it('resolves per breakpoint', () => {
+      renderSection({
+        properties: {
+          'show-quick-view': { desktop: true, tablet: true, mobile: false }
+        }
+      });
+
+      expect(clickCard(cards()[0]).defaultPrevented).toBe(true);
+    });
+
+    it('is off at a breakpoint the author left off', () => {
+      render(
+        <PostsSliderSection
+          {...({
+            section: {
+              id: 'sec',
+              type: 'flash-deals-slider',
+              label: 'sec',
+              properties: {
+                'items-per-slide': 1,
+                'show-quick-view': { desktop: true, mobile: false }
+              },
+              styles: {},
+              blocks: [ITERATOR],
+              dataSource: {
+                details: { collection: { products: [product(11, 'A', 10)] } }
+              }
+            },
+            currentBreakpoint: 'mobile',
+            placeholderId: 'ph',
+            isDesigner: false
+          } as any)}
+        />
+      );
+
+      expect(clickCard(cards()[0]).defaultPrevented).toBe(false);
+    });
+  });
+
+  describe('in the designer', () => {
+    it('lets a click select the block instead of opening the panel', () => {
+      renderSection({
+        properties: { 'show-quick-view': true },
+        isDesigner: true
+      });
+
+      const event = clickCard(cards()[0]);
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(panel()).toBeNull();
+    });
+
+    it('draws the panel in the flow when the preview toggle is on', () => {
+      renderSection({
+        properties: { 'show-quick-view': true, 'quick-view-preview': true },
+        isDesigner: true
+      });
+
+      const backdrop = document.querySelector(
+        '[data-part="quick-view-backdrop"]'
+      );
+
+      expect(panel()).not.toBeNull();
+      // Nothing fixed over the workspace, and no dimming layer to click
+      // through: the author has to keep working around it.
+      expect(backdrop).toHaveStyle({ position: 'static' });
+      expect(panel()).not.toHaveAttribute('aria-modal');
+    });
+
+    it('holds the preview open when the backdrop is clicked', () => {
+      renderSection({
+        properties: { 'show-quick-view': true, 'quick-view-preview': true },
+        isDesigner: true
+      });
+
+      clickCard(
+        document.querySelector('[data-part="quick-view-backdrop"]') as Element
+      );
+
+      expect(panel()).not.toBeNull();
+    });
+
+    it('falls back to the sample product before a data source is attached', () => {
+      renderSection({
+        properties: { 'show-quick-view': true, 'quick-view-preview': true },
+        products: null,
+        isDesigner: true
+      });
+
+      expect(screen.getByText('Sample product')).toBeInTheDocument();
+    });
+
+    it('still draws the link and the photo frame the author came to style', () => {
+      // The sample row carries neither a URL nor an image, so a panel that
+      // only draws what the row can fill hands the author a preview missing
+      // the two parts they turned it on for.
+      renderSection({
+        properties: {
+          'show-quick-view': true,
+          'quick-view-preview': true,
+          'quick-view-link-label': 'ÜRÜNÜ GÖR'
+        },
+        products: null,
+        isDesigner: true
+      });
+
+      const link = document.querySelector('[data-part="quick-view-link"]');
+      expect(link).toHaveTextContent('ÜRÜNÜ GÖR');
+      expect(
+        document.querySelector('[data-part="quick-view-media"]')
+      ).not.toBeNull();
+    });
+
+    it('cancels a click on that stand-in link', () => {
+      renderSection({
+        properties: { 'show-quick-view': true, 'quick-view-preview': true },
+        products: null,
+        isDesigner: true
+      });
+
+      const event = clickCard(
+        document.querySelector('[data-part="quick-view-link"]') as Element
+      );
+
+      // Following '#' would scroll the editor iframe to the top.
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
+
+  describe('a row missing pieces on a storefront', () => {
+    const ON = { 'show-quick-view': true };
+
+    it('draws no link to nowhere and no empty photo frame', () => {
+      renderSection({
+        properties: ON,
+        products: [{ pk: 7, name: 'Bare row', active_price: { price: 10 } }]
+      });
+
+      clickCard(cards()[0]);
+
+      expect(screen.getByText('Bare row')).toBeInTheDocument();
+      expect(
+        document.querySelector('[data-part="quick-view-link"]')
+      ).toBeNull();
+      expect(
+        document.querySelector('[data-part="quick-view-media"]')
+      ).toBeNull();
+    });
+
+    it('accepts a row that carries `url` instead of `absolute_url`', () => {
+      renderSection({
+        properties: ON,
+        products: [{ pk: 7, name: 'Aliased', url: '/product/7/' }]
+      });
+
+      clickCard(cards()[0]);
+
+      expect(
+        document.querySelector('[data-part="quick-view-link"]')
+      ).toHaveAttribute('href', '/product/7/');
+    });
+
+    it('draws nothing extra when the preview toggle is off', () => {
+      renderSection({
+        properties: { 'show-quick-view': true },
+        isDesigner: true
+      });
+
+      expect(panel()).toBeNull();
+    });
+  });
+});