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

package/src/blocks/__tests__/product-recommendations-block.test.tsx

@@ -0,0 +1,702 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+// The item-template module pulls in theme-block -> the whole renderer registry
+// (next-auth, RTK, …). These tests are about the strip's own card path, so the
+// custom-layout branch is stubbed off rather than exercised here.
+let itemTemplatePresent = false;
+jest.mock('../item-template', () => ({
+  __esModule: true,
+  hasItemTemplate: () => itemTemplatePresent,
+  ItemTemplateList: () => <div data-testid="item-template-list" />
+}));
+
+/** The collection payload behind the strip; undefined means "no collection". */
+let mockWidget: Record<string, unknown> | undefined;
+/** What `/product/{pk}/` answers the overlay with. */
+let mockDetail: Record<string, unknown> | undefined;
+/** Every payload that reached the basket endpoint, in order. */
+const mockAdds: Record<string, unknown>[] = [];
+
+/**
+ * Every `@akinon/next/data/client/*` subpath is folded onto one mock module by
+ * the jest moduleNameMapper, so one factory has to serve the widget query, the
+ * overlay's product query and the add mutation. A hoisted function declaration
+ * rather than a const: ts-jest lifts `jest.mock` above the imports, and the
+ * factory runs while the block is being required.
+ */
+function mockDataClient() {
+  return {
+    __esModule: true,
+    useGetWidgetQuery: (_id: unknown, options?: { skip?: boolean }) => ({
+      data: options?.skip ? undefined : mockWidget,
+      isFetching: false
+    }),
+    useGetProductByPkQuery: (_pk: unknown, options?: { skip?: boolean }) => ({
+      data: options?.skip ? undefined : mockDetail,
+      isFetching: false,
+      isError: false,
+      refetch: () => undefined
+    }),
+    useAddProductMutation: () => [
+      (payload: Record<string, unknown>) => {
+        mockAdds.push(payload);
+        return { unwrap: () => Promise.resolve({}) };
+      },
+      { isLoading: false }
+    ]
+  };
+}
+
+jest.mock('@akinon/next/data/client/misc', mockDataClient);
+jest.mock('@akinon/next/data/client/product', mockDataClient);
+
+import ProductRecommendationsBlock from '../product-recommendations-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import {
+  DEFAULT_RECENTLY_VIEWED_KEY,
+  readRecentlyViewed,
+  recordRecentlyViewed
+} from '../recently-viewed-store';
+
+const props = (properties: Record<string, unknown> = {}, over: Record<string, unknown> = {}) =>
+  ({
+    block: { id: 'rec1', type: 'product-recommendations', label: 'rec', properties },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...over
+  } as any);
+
+const PRODUCT = {
+  pk: 41,
+  title: 'Viewed Shirt',
+  url: '/viewed-shirt',
+  image: 'https://cdn/viewed.jpg',
+  price: '199.90',
+  currency: 'TRY'
+};
+
+const entry = (over: Record<string, unknown> = {}) => ({
+  pk: '7',
+  name: 'Stored Coat',
+  url: '/stored-coat',
+  image: 'https://cdn/coat.jpg',
+  price: '1299.00',
+  currency: 'USD',
+  viewedAt: Date.now(),
+  ...over
+});
+
+const renderBlock = (rendered: React.ReactElement, product: unknown = PRODUCT) =>
+  render(
+    <ThemePageContextProvider value={{ product } as Record<string, unknown>}>
+      {rendered}
+    </ThemePageContextProvider>
+  );
+
+beforeEach(() => {
+  // jsdom has no requestIdleCallback, so the deferred write lands on the
+  // setTimeout fallback — fake timers are what let a test observe it.
+  jest.useFakeTimers();
+  window.localStorage.clear();
+  jest.restoreAllMocks();
+  itemTemplatePresent = false;
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+describe('default source is unchanged', () => {
+  it('renders the collection empty state and touches no storage', () => {
+    const setItem = jest.spyOn(Storage.prototype, 'setItem');
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props({}, { isDesigner: true })} />
+    );
+
+    expect(container.textContent).toContain('set a collection id');
+    expect(setItem).not.toHaveBeenCalled();
+  });
+
+  it('renders nothing on the storefront when the collection is empty', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props()} />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('does not record a view when the source was never switched', () => {
+    renderBlock(<ProductRecommendationsBlock {...props()} />);
+
+    expect(window.localStorage.getItem(DEFAULT_RECENTLY_VIEWED_KEY)).toBeNull();
+  });
+});
+
+describe('recently viewed source', () => {
+  it('renders nothing on a first visit', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props({ source: 'recently-viewed' })} />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('records the ambient product, deduped and newest first', () => {
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([entry({ pk: '41', name: 'Old Name' }), entry({ pk: '9' })])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock {...props({ source: 'recently-viewed' })} />
+    );
+    act(() => {
+      jest.advanceTimersByTime(0);
+    });
+
+    const stored = readRecentlyViewed(DEFAULT_RECENTLY_VIEWED_KEY);
+    expect(stored.map((item) => item.pk)).toEqual(['41', '9']);
+    expect(stored[0].name).toBe('Viewed Shirt');
+    expect(stored[0].price).toBe('199.90');
+  });
+
+  it('caps the stored history at the authored capacity', () => {
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([entry({ pk: '1' }), entry({ pk: '2' }), entry({ pk: '3' })])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'recently-viewed', recentlyViewedCapacity: 2 })}
+      />
+    );
+    act(() => {
+      jest.advanceTimersByTime(0);
+    });
+
+    expect(
+      readRecentlyViewed(DEFAULT_RECENTLY_VIEWED_KEY).map((item) => item.pk)
+    ).toEqual(['41', '1']);
+  });
+
+  it('shows the stored products and excludes the one being viewed', () => {
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([
+        entry({ pk: '41', name: 'Viewed Shirt' }),
+        entry({ pk: '7', name: 'Stored Coat' })
+      ])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock {...props({ source: 'recently-viewed' })} />
+    );
+
+    expect(screen.getByText('Stored Coat')).toBeInTheDocument();
+    expect(screen.queryByText('Viewed Shirt')).not.toBeInTheDocument();
+  });
+
+  it('formats the stored amount at read time instead of storing a string', () => {
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([entry({ pk: '7', price: '1299.00', currency: 'USD' })])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock {...props({ source: 'recently-viewed' })} />
+    );
+
+    const price = document.querySelector('[data-product-card-price]');
+    expect(price?.textContent).toMatch(/1,299\.00/);
+    expect(price?.textContent).not.toBe('1299.00');
+  });
+
+  it('drops entries older than the authored window', () => {
+    const old = Date.now() - 40 * 24 * 60 * 60 * 1000;
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([
+        entry({ pk: '7', name: 'Stale Coat', viewedAt: old }),
+        entry({ pk: '8', name: 'Fresh Coat' })
+      ])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'recently-viewed', recentlyViewedMaxAge: 30 })}
+      />
+    );
+
+    expect(screen.getByText('Fresh Coat')).toBeInTheDocument();
+    expect(screen.queryByText('Stale Coat')).not.toBeInTheDocument();
+  });
+
+  it('honours a custom storage key', () => {
+    window.localStorage.setItem(
+      'brand-b',
+      JSON.stringify([entry({ pk: '7', name: 'Brand B Coat' })])
+    );
+
+    renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'recently-viewed', recentlyViewedKey: 'brand-b' })}
+      />
+    );
+
+    expect(screen.getByText('Brand B Coat')).toBeInTheDocument();
+  });
+});
+
+describe('designer', () => {
+  it('draws placeholder rows instead of collapsing', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'recently-viewed' }, { isDesigner: true })}
+      />
+    );
+
+    expect(
+      container.querySelectorAll('[data-product-card]').length
+    ).toBeGreaterThan(0);
+    expect(screen.getAllByText('Recently viewed').length).toBeGreaterThan(0);
+  });
+
+  it('uses the authored placeholder text', () => {
+    renderBlock(
+      <ProductRecommendationsBlock
+        {...props(
+          {
+            source: 'recently-viewed',
+            recentlyViewedEmptyLabel: 'Son gezdiklerin'
+          },
+          { isDesigner: true }
+        )}
+      />
+    );
+
+    expect(screen.getAllByText('Son gezdiklerin').length).toBeGreaterThan(0);
+  });
+
+  it('records nothing and keeps links inert', () => {
+    const setItem = jest.spyOn(Storage.prototype, 'setItem');
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'recently-viewed' }, { isDesigner: true })}
+      />
+    );
+    act(() => {
+      jest.advanceTimersByTime(0);
+    });
+
+    expect(setItem).not.toHaveBeenCalled();
+    container.querySelectorAll('a[data-product-card]').forEach((card) => {
+      expect(card.getAttribute('href')).toBe('#');
+    });
+  });
+});
+
+describe('storage failures never reach the shopper', () => {
+  it('survives a private window where localStorage throws on read', () => {
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('SecurityError');
+    });
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props({ source: 'recently-viewed' })} />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('survives a full quota on write', () => {
+    jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('QuotaExceededError');
+    });
+
+    expect(() =>
+      recordRecentlyViewed(DEFAULT_RECENTLY_VIEWED_KEY, entry(), 20)
+    ).not.toThrow();
+  });
+
+  it('treats another app’s payload under the same key as no history', () => {
+    window.localStorage.setItem(DEFAULT_RECENTLY_VIEWED_KEY, '{not json');
+
+    expect(readRecentlyViewed(DEFAULT_RECENTLY_VIEWED_KEY)).toEqual([]);
+  });
+
+  it('drops entries with no pk, which cannot be deduped or excluded', () => {
+    window.localStorage.setItem(
+      DEFAULT_RECENTLY_VIEWED_KEY,
+      JSON.stringify([{ name: 'No Pk' }, entry({ pk: '7' })])
+    );
+
+    expect(
+      readRecentlyViewed(DEFAULT_RECENTLY_VIEWED_KEY).map((item) => item.pk)
+    ).toEqual(['7']);
+  });
+});
+
+/**
+ * A recommendation card carries ONE pk and a summary, while the overlay sells
+ * whatever LEAF the shopper picks. The two are different products the moment
+ * the card points at a size, which is the everyday shape of a group product.
+ */
+const CARD = {
+  pk: 57,
+  name: 'Runner',
+  absolute_url: '/runner',
+  price: '100.00',
+  currency_type: 'TRY'
+};
+
+const detail = (
+  inStock: boolean,
+  options: Record<string, unknown>[] | null
+) => ({
+  product: { pk: 57, name: 'Runner', absolute_url: '/runner', price: '100.00' },
+  in_stock: inStock,
+  selected_variant: null,
+  variants: options
+    ? [{ attribute_key: 'size', attribute_name: 'Beden', options }]
+    : []
+});
+
+const QUICK_VIEW = { collectionId: 'runners', showQuickView: true };
+
+const trigger = (container: HTMLElement) =>
+  container.querySelector('[data-product-card-quick-view]') as HTMLButtonElement;
+
+const size = (container: HTMLElement, label: string) =>
+  Array.from(
+    container.querySelectorAll<HTMLButtonElement>(
+      '[data-product-card-quick-view-size]'
+    )
+  ).find((node) => node.textContent === label) as HTMLButtonElement;
+
+const addButton = (container: HTMLElement) =>
+  container.querySelector(
+    '[data-product-card-quick-view-add]'
+  ) as HTMLButtonElement;
+
+describe('quick view stock follows the size the shopper picked', () => {
+  beforeEach(() => {
+    mockWidget = { products: [CARD] };
+    mockDetail = undefined;
+    mockAdds.length = 0;
+  });
+
+  afterEach(() => {
+    mockWidget = undefined;
+    mockDetail = undefined;
+  });
+
+  /**
+   * The card points at S because S is what the merchandiser put in the
+   * collection; S has since sold through while M and L are still sellable.
+   */
+  const CARD_SIZE_SOLD_OUT = [
+    { label: 'S', value: 's', in_stock: false, is_selectable: false, product: { pk: 57, stock: 0 } },
+    { label: 'M', value: 'm', in_stock: true, is_selectable: true, product: { pk: 58, stock: 4 } },
+    { label: 'L', value: 'l', in_stock: true, is_selectable: true, product: { pk: 59, stock: 2 } }
+  ];
+
+  it('offers the sizes that are left instead of declaring the product dead', () => {
+    mockDetail = detail(false, CARD_SIZE_SOLD_OUT);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+
+    expect(size(container, 'M')).not.toBeDisabled();
+    // Nothing is picked yet and two sizes are sellable, so "Out of stock" is a
+    // claim about a product the shop can still sell.
+    expect(addButton(container).textContent).toBe('Select a size');
+  });
+
+  it('enables the add button once a sellable size is picked', () => {
+    mockDetail = detail(false, CARD_SIZE_SOLD_OUT);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+    fireEvent.click(size(container, 'M'));
+
+    const add = addButton(container);
+    expect(add.textContent).toBe('Add to basket');
+    expect(add).not.toBeDisabled();
+    expect(add.getAttribute('data-product-card-quick-view-add-state')).toBe(
+      'idle'
+    );
+  });
+
+  it('posts the picked leaf, not the pk the card carried', async () => {
+    mockDetail = detail(false, CARD_SIZE_SOLD_OUT);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+    fireEvent.click(size(container, 'M'));
+    await act(async () => {
+      fireEvent.click(addButton(container));
+    });
+
+    expect(mockAdds).toEqual([{ product: 58, quantity: 1, attributes: {} }]);
+  });
+
+  /**
+   * The other direction: the parent is in stock, so the overlay used to hand a
+   * sold-out leaf to the basket endpoint with everything enabled.
+   */
+  const LEAF_SOLD_OUT = [
+    { label: 'M', value: 'm', in_stock: true, is_selectable: true, product: { pk: 58, stock: 4 } },
+    { label: 'L', value: 'l', in_stock: false, is_selectable: true, product: { pk: 57, stock: 0 } }
+  ];
+
+  it('refuses a sold-out leaf commerce did not mark pickable', () => {
+    mockDetail = detail(true, LEAF_SOLD_OUT);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+
+    const sold = size(container, 'L');
+    expect(sold).toBeDisabled();
+    expect(sold.getAttribute('data-state')).toContain('unavailable');
+  });
+
+  it('lets a sold-out leaf be picked when commerce says it may, and still refuses to add it', async () => {
+    mockDetail = detail(true, [
+      LEAF_SOLD_OUT[0],
+      { ...LEAF_SOLD_OUT[1], is_selectable_without_stock: true }
+    ]);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+
+    const sold = size(container, 'L');
+    expect(sold).not.toBeDisabled();
+    fireEvent.click(sold);
+
+    const add = addButton(container);
+    expect(add.textContent).toBe('Out of stock');
+    expect(add).toBeDisabled();
+
+    await act(async () => {
+      fireEvent.click(add);
+    });
+    expect(mockAdds).toEqual([]);
+  });
+
+  it('still reads the product itself when it has no sizes', () => {
+    mockDetail = detail(false, null);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+
+    const add = addButton(container);
+    expect(add.textContent).toBe('Out of stock');
+    expect(add).toBeDisabled();
+  });
+
+  it('adds a product with no sizes at the pk the card carried', async () => {
+    mockDetail = detail(true, null);
+
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+    await act(async () => {
+      fireEvent.click(addButton(container));
+    });
+
+    expect(mockAdds).toEqual([{ product: 57, quantity: 1, attributes: {} }]);
+  });
+});
+
+describe('quick view overlay', () => {
+  beforeEach(() => {
+    mockWidget = { products: [CARD] };
+    mockDetail = detail(true, null);
+    mockAdds.length = 0;
+  });
+
+  afterEach(() => {
+    mockWidget = undefined;
+    mockDetail = undefined;
+  });
+
+  it('moves focus into the panel and hands it back to the trigger on Escape', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    const opener = trigger(container);
+    fireEvent.click(opener);
+
+    const panel = container.querySelector(
+      '[data-product-card-quick-view-panel]'
+    ) as HTMLElement;
+    expect(panel.contains(document.activeElement)).toBe(true);
+    expect(panel.getAttribute('aria-modal')).toBe('true');
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(
+      container.querySelector('[data-product-card-quick-view-panel]')
+    ).toBeNull();
+    expect(document.activeElement).toBe(opener);
+  });
+
+  it('gives the page its own overflow back when the overlay closes', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    fireEvent.click(
+      container.querySelector(
+        '[data-product-card-quick-view-close]'
+      ) as HTMLElement
+    );
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('stays inert on the designer canvas', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props(QUICK_VIEW, { isDesigner: true })}
+      />
+    );
+    fireEvent.click(trigger(container));
+
+    const panel = container.querySelector(
+      '[data-product-card-quick-view-panel]'
+    ) as HTMLElement;
+    expect(panel).not.toBeNull();
+    // No focus stolen into the canvas, no frozen page, no `aria-modal` claim.
+    expect(panel.contains(document.activeElement)).toBe(false);
+    expect(document.body.style.overflow).toBe('');
+    expect(panel.getAttribute('aria-modal')).toBeNull();
+
+    // An author styling a held-open panel must not have it collapse on Escape.
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(
+      container.querySelector('[data-product-card-quick-view-panel]')
+    ).not.toBeNull();
+  });
+});
+
+/**
+ * A leaf the payload gave no `value` to.
+ *
+ * `chosenOption` starts '' and `toText(undefined)` is also '', so an unguarded
+ * lookup matched such an option before the shopper had touched anything: the
+ * strip reported a size as chosen that no button ever showed as pressed, and
+ * the add button posted it.
+ */
+describe('quick view will not sell a size nobody picked', () => {
+  const NO_VALUE = [
+    { label: 'M', product: { pk: 58, stock: 4 } },
+    { label: 'L', value: 'l', product: { pk: 59, stock: 2 } }
+  ];
+
+  beforeEach(() => {
+    mockWidget = { products: [CARD] };
+    mockDetail = detail(true, NO_VALUE);
+    mockAdds.length = 0;
+  });
+
+  afterEach(() => {
+    mockWidget = undefined;
+    mockDetail = undefined;
+  });
+
+  const open = () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    fireEvent.click(trigger(container));
+    return container;
+  };
+
+  it('still asks for a size when the first option carries no value', () => {
+    expect(addButton(open()).textContent).toBe('Select a size');
+  });
+
+  it('posts nothing while no size has actually been picked', () => {
+    const container = open();
+
+    act(() => {
+      fireEvent.click(addButton(container));
+    });
+
+    expect(mockAdds).toEqual([]);
+  });
+
+  it('reports no size as pressed, matching what the row draws', () => {
+    const pressed = Array.from(
+      open().querySelectorAll('[data-product-card-quick-view-size]')
+    ).filter((node) => node.getAttribute('aria-pressed') === 'true');
+
+    expect(pressed).toHaveLength(0);
+  });
+
+  it('does not offer a leaf it has no way to name', () => {
+    const container = open();
+    // Clicking it could only ever set `chosenOption` back to '', so it would
+    // be a control whose click does nothing.
+    expect(size(container, 'M')).toBeDisabled();
+    expect(size(container, 'L')).not.toBeDisabled();
+  });
+});
+
+describe('the strip root is a real focus target only where it is needed', () => {
+  beforeEach(() => {
+    mockWidget = { products: [CARD] };
+    mockDetail = detail(true, null);
+  });
+
+  afterEach(() => {
+    mockWidget = undefined;
+    mockDetail = undefined;
+  });
+
+  it('adds no attribute to a strip without quick view', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props({ collectionId: 'runners' })} />
+    );
+
+    expect(
+      container
+        .querySelector('[data-product-recommendations]')
+        ?.getAttribute('tabindex')
+    ).toBeNull();
+  });
+
+  it('is focusable, out of the tab order, once the overlay exists', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props(QUICK_VIEW)} />
+    );
+    const root = container.querySelector(
+      '[data-product-recommendations]'
+    ) as HTMLElement;
+
+    // Without this the overlay's last-resort focus target silently refused
+    // focus and a shopper whose trigger had gone was dropped on <body>.
+    expect(root.getAttribute('tabindex')).toBe('-1');
+    root.focus();
+    expect(document.activeElement).toBe(root);
+  });
+});