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

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

@@ -0,0 +1,394 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+
+/**
+ * The strip's edges: flush right, a sliced next card, and a lead-in that only
+ * exists at the start.
+ *
+ * Two of the three are geometry, and geometry here belongs to the carousel
+ * library, not to this section — `itemWidth = round(containerWidth /
+ * slidesToShow)` and `transform = -itemWidth * currentSlide`. So the arithmetic
+ * is asserted against the library's OWN functions rather than against a DOM:
+ * the real carousel renders zero items under jsdom, so a render-and-measure
+ * test here would be measuring nothing.
+ *
+ * The third — the lead-in — is not geometry at all. No padding is
+ * position-dependent, so it is the library's `additionalTransfrom` (its
+ * spelling), handed back to 0 the moment the shopper leaves slide 0. What
+ * these lock is WHEN that prop is passed, and that a slider which has not
+ * opted in is handed the identical props it was handed before.
+ */
+
+const carouselProps: Record<string, unknown>[] = [];
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="slide-content" data-id={block.id} />
+  )
+}));
+
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: (props: Record<string, unknown>) => {
+    carouselProps.push(props);
+    return (
+      <div data-testid="carousel">{props.children as React.ReactNode}</div>
+    );
+  }
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+
+// The library's own maths, imported rather than reimplemented.
+const { getItemClientSideWidth } =
+  require('react-multi-carousel/lib/utils') as {
+    getItemClientSideWidth: (
+      props: { slidesToShow?: number; centerMode?: boolean },
+      slidesToShow: number,
+      containerWidth: number
+    ) => number;
+  };
+
+const slide = (id: string) => ({
+  id,
+  type: 'group',
+  label: id,
+  properties: {},
+  styles: {},
+  order: 0,
+  blocks: []
+});
+
+const renderSection = (
+  properties: Record<string, unknown> = {},
+  slideCount = 6,
+  styles: Record<string, unknown> = {}
+) => {
+  carouselProps.length = 0;
+
+  const result = render(
+    <PostsSliderSection
+      {...({
+        section: {
+          id: 'sec',
+          type: 'flash-deals-slider',
+          label: 'sec',
+          properties: { 'items-per-slide': 1, ...properties },
+          styles,
+          blocks: Array.from({ length: slideCount }, (_, i) => slide(`s${i}`))
+        },
+        currentBreakpoint: 'desktop',
+        placeholderId: 'ph',
+        isDesigner: false
+      } as any)}
+    />
+  );
+
+  return { ...result, props: carouselProps[carouselProps.length - 1] };
+};
+
+/** The inline style of each slide wrapper, in order. */
+const slidePadding = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="slide-content"]')).map(
+    (node) => {
+      const wrapper = node.parentElement as HTMLElement;
+      return {
+        left: wrapper.style.paddingLeft,
+        right: wrapper.style.paddingRight
+      };
+    }
+  );
+
+describe('a slider that has not opted in', () => {
+  it('is handed no edge props at all', () => {
+    const { props } = renderSection();
+
+    expect('additionalTransfrom' in props).toBe(false);
+    expect('beforeChange' in props).toBe(false);
+  });
+
+  it('keeps the half-gap on both sides of every slide', () => {
+    // gap defaults to 16, so slidePadding is 8 — unchanged from before.
+    const { container } = renderSection();
+
+    slidePadding(container).forEach((padding) => {
+      expect(padding).toEqual({ left: '8px', right: '8px' });
+    });
+  });
+});
+
+describe('flush edges', () => {
+  it('moves the whole gap to one side so the outer edges carry none', () => {
+    const { container } = renderSection({ 'flush-edges': true });
+    const padding = slidePadding(container);
+
+    // Card k ends at (k+1)·iw − gap and card k+1 starts at (k+1)·iw, so the
+    // visible gap between them is still exactly `gap`.
+    padding.slice(0, -1).forEach((entry) => {
+      expect(entry).toEqual({ left: '0px', right: '16px' });
+    });
+  });
+
+  it('drops the last card’s own padding so its content reaches the edge', () => {
+    const { container } = renderSection({ 'flush-edges': true });
+    const padding = slidePadding(container);
+
+    expect(padding[padding.length - 1]).toEqual({ left: '0px', right: '0px' });
+  });
+
+  it('is a no-op when there is no gap to move', () => {
+    // `gap` is a section STYLE, not a property.
+    const { container } = renderSection({ 'flush-edges': true }, 6, {
+      gap: 0
+    });
+
+    slidePadding(container).forEach((padding) => {
+      expect(padding).toEqual({ left: '0px', right: '0px' });
+    });
+  });
+});
+
+describe('the lead-in', () => {
+  /**
+   * The shape the panel actually writes. Every authored property is stored per
+   * breakpoint (`{ desktop: 60 }`), and reading one without
+   * `getResponsiveValue` yields NaN — which fell back to 0 and disabled the
+   * feature silently while the editor showed the value as set. The flat number
+   * these tests used to pass hid exactly that.
+   */
+  it('reads the per-breakpoint shape the panel stores', () => {
+    const { props } = renderSection({ 'lead-in': { desktop: 60 } });
+
+    expect(props.additionalTransfrom).toBe(60);
+  });
+
+  it('resolves it at the breakpoint being rendered', () => {
+    const { props } = renderSection({
+      'lead-in': { desktop: 60, mobile: 12 }
+    });
+
+    expect(props.additionalTransfrom).toBe(60);
+  });
+
+  it('offsets the track while it sits at the start', () => {
+    const { props } = renderSection({ 'lead-in': 60 });
+
+    expect(props.additionalTransfrom).toBe(60);
+  });
+
+  it('hands the offset back as soon as the slider moves', () => {
+    const { props } = renderSection({ 'lead-in': 60 });
+
+    act(() => {
+      (props.beforeChange as (next: number) => void)(1);
+    });
+
+    // The section re-renders; the newest props are the ones that matter.
+    expect(carouselProps[carouselProps.length - 1].additionalTransfrom).toBe(0);
+  });
+
+  it('takes it back when the slider returns to the start', () => {
+    const { props } = renderSection({ 'lead-in': 60 });
+
+    act(() => {
+      (props.beforeChange as (next: number) => void)(1);
+    });
+    act(() => {
+      (
+        carouselProps[carouselProps.length - 1].beforeChange as (
+          next: number
+        ) => void
+      )(0);
+    });
+
+    expect(carouselProps[carouselProps.length - 1].additionalTransfrom).toBe(
+      60
+    );
+  });
+
+  it('is refused in infinite mode, which never sits at slide 0', () => {
+    // The library starts on a clone at 2 × slidesToShow, so there is no start
+    // position for a lead-in to belong to.
+    const { props } = renderSection({
+      'lead-in': 60,
+      autoplay: true,
+      infinite: true
+    });
+
+    expect('additionalTransfrom' in props).toBe(false);
+  });
+
+  it('is refused when there is nothing to scroll', () => {
+    const { props } = renderSection({ 'lead-in': 60, 'items-per-slide': 6 }, 6);
+
+    expect('additionalTransfrom' in props).toBe(false);
+  });
+
+  it('is clamped rather than trusted', () => {
+    expect(renderSection({ 'lead-in': 9999 }).props.additionalTransfrom).toBe(
+      400
+    );
+    expect(
+      'additionalTransfrom' in renderSection({ 'lead-in': -20 }).props
+    ).toBe(false);
+  });
+});
+
+/**
+ * Which edge the gap sits on. `left` is a lead-in at the start; `right` is its
+ * mirror, a trail-out at the far end — a right-hand gap at the START is not
+ * something the geometry can offer, because what sits against the right edge
+ * there is the sliced next card.
+ */
+describe('the gap edge', () => {
+  it('defaults to the left, so nothing authored before this moves', () => {
+    const { props } = renderSection({ 'lead-in': { desktop: 60 } });
+
+    expect(props.additionalTransfrom).toBe(60);
+  });
+
+  it('opens on the right only once the track reaches the end', () => {
+    const authored = {
+      'lead-in': { desktop: 60 },
+      'lead-in-side': { desktop: 'right' },
+      'items-per-slide': 3.5
+    };
+    const { props } = renderSection(authored);
+
+    // At the start there is no trailing gap: the sliced card is there instead.
+    expect(props.additionalTransfrom).toBe(0);
+
+    // 6 slides at 3.5 per view ⇒ the library rests at 2.5.
+    act(() => {
+      (props.beforeChange as (next: number) => void)(2.5);
+    });
+
+    expect(carouselProps[carouselProps.length - 1].additionalTransfrom).toBe(
+      -60
+    );
+  });
+
+  it('closes again on the way back from the end', () => {
+    const { props } = renderSection({
+      'lead-in': { desktop: 60 },
+      'lead-in-side': { desktop: 'right' },
+      'items-per-slide': 3.5
+    });
+
+    act(() => {
+      (props.beforeChange as (next: number) => void)(2.5);
+    });
+    act(() => {
+      (
+        carouselProps[carouselProps.length - 1].beforeChange as (
+          next: number
+        ) => void
+      )(1);
+    });
+
+    expect(carouselProps[carouselProps.length - 1].additionalTransfrom).toBe(0);
+  });
+
+  it('refuses a side it does not know rather than guessing', () => {
+    const { props } = renderSection({
+      'lead-in': { desktop: 60 },
+      'lead-in-side': { desktop: 'middle' }
+    });
+
+    // Anything but `right` is the left edge, which is the documented default.
+    expect(props.additionalTransfrom).toBe(60);
+  });
+
+  it('never opens both edges at once', () => {
+    const { props } = renderSection({
+      'lead-in': { desktop: 60 },
+      'lead-in-side': { desktop: 'left' },
+      'items-per-slide': 3.5
+    });
+
+    expect(props.additionalTransfrom).toBe(60);
+
+    act(() => {
+      (props.beforeChange as (next: number) => void)(2.5);
+    });
+
+    // At the end, with the gap on the left, there is no offset at all.
+    expect(carouselProps[carouselProps.length - 1].additionalTransfrom).toBe(0);
+  });
+});
+
+describe('a fractional item count', () => {
+  it('reaches the library unrounded, which is what slices the next card', () => {
+    const { props } = renderSection({ 'items-per-slide': 3.5 });
+    const responsive = props.responsive as Record<string, { items: number }>;
+
+    expect(Object.values(responsive).some((entry) => entry.items === 3.5)).toBe(
+      true
+    );
+  });
+});
+
+/**
+ * The geometry, from the library's own `getItemClientSideWidth`. What has to
+ * hold at every viewport: the next card is genuinely cut (not hidden, not
+ * fully visible), and the lead-in leaves enough of it to read as a peek.
+ */
+describe('the arithmetic of 3.5 items', () => {
+  const widths = [390, 768, 1280, 1440, 1630, 1920];
+  const items = 3.5;
+
+  it.each(widths)('slices the fourth card at %ipx', (width) => {
+    const itemWidth = getItemClientSideWidth({}, items, width);
+    const visibleWhole = Math.floor(items);
+    const consumed = visibleWhole * itemWidth;
+
+    // Strictly between: a fourth card exists on screen and is not complete.
+    expect(consumed).toBeLessThan(width);
+    expect(width - consumed).toBeLessThan(itemWidth);
+  });
+
+  it.each(widths)(
+    'keeps the last card flush within rounding at %ipx',
+    (width) => {
+      const itemWidth = getItemClientSideWidth({}, items, width);
+
+      // `itemWidth` is rounded per item, so the strip can miss the edge by at
+      // most half a pixel per visible item. Demanding an exact 0 would be a
+      // test that fails on arithmetic, not on layout.
+      expect(Math.abs(items * itemWidth - width)).toBeLessThanOrEqual(
+        items * 0.5
+      );
+    }
+  );
+
+  /**
+   * The hard constraint, stated as a rule rather than as a blessed number: a
+   * lead-in wider than half a card eats the peek and the strip stops
+   * signalling that it scrolls. Measured: at 390px with 3.5 items a card is
+   * 111px, so a 60px lead-in is already over the line — mobile cannot take
+   * the desktop lead-in at this item count.
+   */
+  it.each(widths)(
+    'admits a lead-in only under half a card at %ipx',
+    (width) => {
+      const itemWidth = getItemClientSideWidth({}, items, width);
+      const viable = itemWidth / 2;
+      const peek = (leadIn: number) =>
+        items - leadIn / itemWidth - Math.floor(items);
+
+      expect(peek(0)).toBeCloseTo(0.5, 1);
+      expect(peek(viable - 1)).toBeGreaterThan(0);
+      expect(peek(itemWidth)).toBeLessThanOrEqual(0);
+    }
+  );
+
+  it('rules out a 60px lead-in at phone width, and allows it from tablet up', () => {
+    const tooNarrow = getItemClientSideWidth({}, items, 390) / 2;
+    expect(60).toBeGreaterThan(tooNarrow);
+
+    [768, 1280, 1440, 1920].forEach((width) => {
+      expect(60).toBeLessThan(getItemClientSideWidth({}, items, width) / 2);
+    });
+  });
+});

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * The quick view asks commerce for nothing, and this is the guard on that.
+ *
+ * A by-pk fetch was added here to recover the "view product" link for rows
+ * that carry no URL, and then reverted: a collection data source is
+ * snapshotted from OMNITRON, so `row.pk` is an Omnitron product id, while the
+ * storefront's `/product/<pk>` is a different id space. Measured on a live
+ * store — row pk 48 (sku 8684464001616, a bed sheet) came back as pk 48, a
+ * glass serving plate — so the panel showed one product and linked another.
+ *
+ * These tests exist so that the next person to reach for that fetch sees a
+ * failing test with the reason in it, rather than rediscovering it in
+ * production. The right fix is upstream, where the widget is saved.
+ */
+
+const asks: unknown[] = [];
+
+/**
+ * Every `@akinon/next/data/client/*` subpath is folded onto one mock module by
+ * the jest moduleNameMapper, so one factory serves the product hooks and the
+ * wishlist hooks the favourite button needs. Each product hook RECORDS being
+ * called, which is what the assertions below read.
+ */
+function mockDataClient() {
+  return {
+    __esModule: true,
+    useGetProductByPkQuery: (pk: unknown, options?: { skip?: boolean }) => {
+      if (options?.skip !== true) asks.push({ hook: 'getProductByPk', pk });
+      return { data: undefined, isFetching: false, isError: false };
+    },
+    useGetProductByParamsQuery: (params: unknown) => {
+      asks.push({ hook: 'getProductByParams', params });
+      return { data: undefined, isFetching: false, isError: false };
+    },
+    useAddProductMutation: () => [
+      () => ({ unwrap: () => Promise.resolve({}) }),
+      { isLoading: false }
+    ],
+    useGetFavoritesQuery: () => ({ data: undefined, isFetching: false }),
+    useAddFavoriteMutation: () => [
+      () => ({ unwrap: () => Promise.resolve({}) }),
+      { isLoading: false }
+    ],
+    useRemoveFavoriteMutation: () => [
+      () => ({ unwrap: () => Promise.resolve({}) }),
+      { isLoading: false }
+    ]
+  };
+}
+
+jest.mock('@akinon/next/data/client/product', mockDataClient);
+jest.mock('@akinon/next/data/client/wishlist', mockDataClient);
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <a data-testid="card" data-id={block.id} href="">
+      card
+    </a>
+  )
+}));
+
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({ children }: { children?: React.ReactNode }) => (
+    <div data-testid="carousel">{children}</div>
+  )
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+
+/** A row exactly as a collection data source snapshots it: no URL anywhere. */
+const urllessRow = (pk: number, name: string) => ({
+  pk,
+  name,
+  sku: `sku-${pk}`,
+  active_price: { price: '2499.99', currency_type: 'try' },
+  productimage_set: [{ image: `/img/${pk}.jpg` }]
+});
+
+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: []
+    }
+  ]
+};
+
+const renderSection = (products: Record<string, unknown>[]) =>
+  render(
+    <PostsSliderSection
+      {...({
+        section: {
+          id: 'sec',
+          type: 'flash-deals-slider',
+          label: 'sec',
+          properties: {
+            'items-per-slide': 1,
+            'show-quick-view': true,
+            'quick-view-link-label': 'ÜRÜNÜ GÖR'
+          },
+          styles: {},
+          blocks: [ITERATOR],
+          dataSource: { details: { collection: { products } } }
+        },
+        currentBreakpoint: 'desktop',
+        placeholderId: 'ph',
+        isDesigner: false
+      } as any)}
+    />
+  );
+
+const openCard = (index = 0) => {
+  const card = screen.getAllByTestId('card')[index];
+  act(() => {
+    card.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 })
+    );
+  });
+};
+
+const link = () => document.querySelector('[data-part="quick-view-link"]');
+const panel = () => document.querySelector('[data-part="quick-view-panel"]');
+
+beforeEach(() => {
+  asks.length = 0;
+});
+
+describe('the quick view asks commerce for nothing', () => {
+  it('makes no product request when a card is opened', () => {
+    renderSection([urllessRow(48, 'Sarı Çarşaf')]);
+
+    openCard();
+
+    expect(panel()).not.toBeNull();
+    expect(asks).toEqual([]);
+  });
+
+  it('makes none even for a row whose pk looks perfectly askable', () => {
+    // The pk IS valid — in Omnitron. Asking the storefront with it is the bug.
+    renderSection([urllessRow(48, 'A'), urllessRow(49, 'B')]);
+
+    openCard(1);
+
+    expect(asks).toEqual([]);
+  });
+});
+
+describe('what a row without an address gets', () => {
+  it('draws no link rather than one to the wrong product', () => {
+    renderSection([urllessRow(48, 'Sarı Çarşaf')]);
+
+    openCard();
+
+    expect(link()).toBeNull();
+    // Everything the row CAN answer is still shown.
+    expect(screen.getByText('Sarı Çarşaf')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-part="quick-view-price"]')?.textContent
+    ).toContain('2.499,99');
+  });
+
+  it('draws the link as soon as the row carries one', () => {
+    renderSection([{ ...urllessRow(48, 'Sarı'), absolute_url: '/carsaf/' }]);
+
+    openCard();
+
+    expect(link()).toHaveAttribute('href', '/carsaf/');
+    expect(link()).toHaveTextContent('ÜRÜNÜ GÖR');
+    expect(asks).toEqual([]);
+  });
+
+  it('accepts a row that names it `url` instead', () => {
+    renderSection([{ ...urllessRow(48, 'Sarı'), url: '/carsaf-alias/' }]);
+
+    openCard();
+
+    expect(link()).toHaveAttribute('href', '/carsaf-alias/');
+  });
+
+  it('shows the row’s own name and price, never another product’s', () => {
+    renderSection([{ ...urllessRow(48, 'Sarı'), absolute_url: '/carsaf/' }]);
+
+    openCard();
+
+    expect(screen.getByText('Sarı')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-part="quick-view-media"]')
+    ).toHaveAttribute('src', '/img/48.jpg');
+  });
+});