@akinon/pz-theme 2.0.152-rc.3 → 2.0.153-beta.0

package/src/blocks/__tests__/add-to-cart-stock-alert.test.tsx

@@ -0,0 +1,673 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import AddToCartBlock from '../add-to-cart-block';
+import VariantSelectorBlock from '../variant-selector-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import {
+  __resetStockAlertPickForTests,
+  setStockAlertPick
+} from '../stock-alert-pick';
+
+/**
+ * ZERO-5233: the PDP button says "notify me" for a sold-out product or a
+ * sold-out size the shopper picked, and "sold out" only for a product with
+ * nothing left to come back.
+ */
+
+let currentPath = '/p/s';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => currentPath,
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+let sessionStatus: 'authenticated' | 'unauthenticated' = 'authenticated';
+let sessionEmail = 'shopper@example.com';
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({
+    status: sessionStatus,
+    data:
+      sessionStatus === 'authenticated'
+        ? { user: { email: sessionEmail } }
+        : null
+  })
+}));
+
+const mockAddProduct = jest.fn();
+const mockAddStockAlert = jest.fn();
+
+jest.mock('@akinon/next/data/client/product', () => ({
+  __esModule: true,
+  useAddProductMutation: () => [
+    (payload: unknown) => mockAddProduct(payload),
+    { isLoading: false }
+  ],
+  useAddStockAlertMutation: () => [
+    (payload: unknown) => mockAddStockAlert(payload),
+    { isLoading: false }
+  ],
+  basketApi: {
+    util: { invalidateTags: () => ({ type: 'basket/invalidateTags' }) }
+  }
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppSelector: () => undefined,
+  useAppDispatch: () => () => undefined
+}));
+
+const SIZES = {
+  attribute_key: 'integration_beden',
+  attribute_name: 'Beden',
+  options: [
+    {
+      label: 'S',
+      value: 's',
+      in_stock: true,
+      is_selectable: true,
+      product: { pk: 101, absolute_url: '/p/s', stock: 9 }
+    },
+    {
+      label: 'M',
+      value: 'm',
+      in_stock: false,
+      is_selectable: false,
+      product: { pk: 102, absolute_url: '/p/m', stock: 0 }
+    }
+  ]
+};
+
+const SOLD_OUT_SIZES = {
+  ...SIZES,
+  options: SIZES.options.map((option) => ({
+    ...option,
+    in_stock: false,
+    is_selectable: false,
+    product: { ...option.product, stock: 0 }
+  }))
+};
+
+const IN_STOCK = { pk: 101, name: 'Polo', in_stock: true, variants: [SIZES] };
+// The page's own size is gone, another size of the colour is not.
+const SOLD_OUT = { pk: 101, name: 'Polo', in_stock: false, variants: [SIZES] };
+// Every size of the colour is gone.
+const COLOUR_GONE = {
+  pk: 101,
+  name: 'Polo',
+  in_stock: false,
+  variants: [SOLD_OUT_SIZES]
+};
+const DELISTED = { pk: 101, name: 'Polo', in_stock: false, variants: [] };
+
+const LABELS = {
+  label: 'Sepete Ekle',
+  outOfStockLabel: 'Tükendi',
+  stockAlertLabel: 'Stok Gelince Haber Ver',
+  stockAlertTitle: 'Stok alarmı',
+  stockAlertMessage: 'Ürün stoğa girdiğinde {email} adresine haber vereceğiz.',
+  stockAlertMessageNoEmail: 'Ürün stoğa girdiğinde haber vereceğiz.',
+  stockAlertErrorMessage: 'Bir hata oluştu.',
+  stockAlertCloseLabel: 'Kapat'
+};
+
+const block = (type: string, properties: Record<string, unknown>) =>
+  ({
+    id: type,
+    type,
+    label: type,
+    value: '',
+    order: 0,
+    hidden: false,
+    properties,
+    styles: {}
+  } as never);
+
+const renderPdp = (
+  product: Record<string, unknown>,
+  {
+    alert = true,
+    selector = false,
+    extra = {}
+  }: {
+    alert?: boolean;
+    selector?: boolean;
+    extra?: Record<string, unknown>;
+  } = {}
+) =>
+  render(
+    <ThemePageContextProvider value={{ product } as never}>
+      {selector && (
+        <VariantSelectorBlock
+          {...({
+            block: block('variant-selector', {
+              stockAlert: true,
+              stockAlertPresentation: 'add-to-cart'
+            }),
+            currentBreakpoint: 'desktop'
+          } as never)}
+        />
+      )}
+      <AddToCartBlock
+        {...({
+          block: block('add-to-cart', {
+            ...LABELS,
+            stockAlert: alert,
+            ...extra
+          }),
+          currentBreakpoint: 'desktop'
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const button = (container: HTMLElement) =>
+  container.querySelector('[data-add-to-cart]') as HTMLButtonElement;
+
+const dialog = () => document.querySelector('[role="dialog"]') as HTMLElement;
+
+const press = async (container: HTMLElement) => {
+  await act(async () => {
+    fireEvent.click(button(container));
+  });
+};
+
+const withLocation = async (run: (assign: jest.Mock) => Promise<void>) => {
+  const assign = jest.fn();
+  const original = window.location;
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: { ...original, pathname: '/polo-101/', search: '?a=1', assign }
+  });
+
+  try {
+    await run(assign);
+  } finally {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original
+    });
+  }
+};
+
+beforeEach(() => {
+  sessionStatus = 'authenticated';
+  sessionEmail = 'shopper@example.com';
+  currentPath = '/p/s';
+  mockAddProduct.mockReset();
+  mockAddStockAlert.mockReset();
+  mockAddStockAlert.mockReturnValue({ unwrap: () => Promise.resolve({}) });
+  __resetStockAlertPickForTests();
+});
+
+describe('add-to-cart stock alert', () => {
+  it('keeps the disabled out-of-stock button while the switch is off', () => {
+    const { container } = renderPdp(SOLD_OUT, { alert: false });
+
+    expect(button(container).textContent).toBe('Tükendi');
+    expect(button(container).disabled).toBe(true);
+  });
+
+  it('adds to cart as before while the product is in stock', () => {
+    const { container } = renderPdp(IN_STOCK);
+
+    expect(button(container).textContent).toBe('Sepete Ekle');
+    expect(button(container).getAttribute('data-add-to-cart-state')).toBe(
+      'idle'
+    );
+  });
+
+  it('offers the alert while another size of the colour is in stock', () => {
+    const { container } = renderPdp(SOLD_OUT);
+
+    expect(button(container).textContent).toBe('Stok Gelince Haber Ver');
+    expect(button(container).disabled).toBe(false);
+    expect(button(container).getAttribute('data-state')).toBe('unavailable');
+  });
+
+  it('says sold out when every size of the colour is gone', () => {
+    const { container } = renderPdp(COLOUR_GONE);
+
+    expect(button(container).textContent).toBe('Tükendi');
+    expect(button(container).disabled).toBe(true);
+  });
+
+  it('says sold out for a product with no variants left', () => {
+    const { container } = renderPdp(DELISTED);
+
+    expect(button(container).textContent).toBe('Tükendi');
+    expect(button(container).disabled).toBe(true);
+  });
+
+  it('registers a signed-in shopper and names their email in a dialog', async () => {
+    const { container } = renderPdp(SOLD_OUT);
+
+    expect(dialog()).toBeNull();
+
+    await press(container);
+
+    expect(mockAddStockAlert).toHaveBeenCalledWith({
+      productPk: 101,
+      email: 'shopper@example.com'
+    });
+    expect(mockAddProduct).not.toHaveBeenCalled();
+    expect(dialog().textContent).toContain('Stok alarmı');
+    expect(dialog().textContent).toContain(
+      'Ürün stoğa girdiğinde shopper@example.com adresine haber vereceğiz.'
+    );
+
+    // Only the × closes it: no second close button under the message.
+    expect(dialog().querySelectorAll('button')).toHaveLength(1);
+    expect(dialog().querySelector('[data-part="title"]')?.textContent).toBe(
+      'Stok alarmı'
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Kapat' }));
+    });
+
+    expect(dialog()).toBeNull();
+
+    // Already on the list: the dialog again, no second request.
+    await press(container);
+
+    expect(mockAddStockAlert).toHaveBeenCalledTimes(1);
+    expect(dialog()).not.toBeNull();
+  });
+
+  it('opens as a drawer on the side the author picked', async () => {
+    const { container } = renderPdp(SOLD_OUT, {
+      extra: { stockAlertPresentation: 'drawer', stockAlertWidth: 420 }
+    });
+
+    await press(container);
+
+    // jsdom drops `min()`, so the side and the full height stand in for it.
+    expect(dialog().style.position).toBe('absolute');
+    expect(dialog().style.right).toBe('0px');
+    expect(dialog().style.top).toBe('0px');
+    expect(dialog().style.bottom).toBe('0px');
+  });
+
+  it('opens as a bottom sheet with the backdrop the author picked', async () => {
+    const { container } = renderPdp(SOLD_OUT, {
+      extra: {
+        stockAlertPresentation: 'sheet',
+        stockAlertSheetHeight: 87,
+        stockAlertBackdropColor: '#00321B',
+        stockAlertBackdropOpacity: 85
+      }
+    });
+
+    await press(container);
+
+    expect(dialog().style.bottom).toBe('0px');
+    expect(dialog().style.maxHeight).toBe('87vh');
+    expect(
+      (document.querySelector('[data-part="overlay"]') as HTMLElement).style
+        .background
+    ).toBe('rgba(0, 50, 27, 0.85)');
+  });
+
+  it('closes with the brand icon glyph when one is set', async () => {
+    const { container } = renderPdp(SOLD_OUT, {
+      extra: {
+        stockAlertCloseIcon: 'pz-icon-close"><script>',
+        stockAlertCloseIconSize: 12
+      }
+    });
+
+    await press(container);
+
+    const close = screen.getByRole('button', { name: 'Kapat' });
+    const glyph = close.querySelector('i') as HTMLElement;
+
+    expect(close.querySelector('svg')).toBeNull();
+    // Only class-name characters reach `className`.
+    expect(glyph.className).toBe('flex pz-icon-closescript');
+    expect(glyph.style.fontSize).toBe('12px');
+  });
+
+  it('tells the shopper when commerce refuses the alert', async () => {
+    mockAddStockAlert.mockReturnValue({
+      unwrap: () => Promise.reject({ status: 400 })
+    });
+    const { container } = renderPdp(SOLD_OUT);
+
+    await press(container);
+
+    expect(dialog().textContent).toContain('Bir hata oluştu.');
+    expect(dialog().textContent).not.toContain('shopper@example.com');
+  });
+
+  it('sends a guest to sign in with the page as the way back', async () => {
+    sessionStatus = 'unauthenticated';
+
+    await withLocation(async (assign) => {
+      const { container } = renderPdp(SOLD_OUT);
+
+      await press(container);
+
+      expect(mockAddStockAlert).not.toHaveBeenCalled();
+      expect(assign).toHaveBeenCalledWith(
+        `/auth?callbackUrl=${encodeURIComponent('/polo-101/?a=1')}`
+      );
+    });
+  });
+
+  it('sends a shopper whose session lapsed to sign in too', async () => {
+    mockAddStockAlert.mockReturnValue({
+      unwrap: () => Promise.reject({ status: 401 })
+    });
+
+    await withLocation(async (assign) => {
+      const { container } = renderPdp(SOLD_OUT, {
+        extra: { stockAlertReturnParam: 'next' }
+      });
+
+      await press(container);
+
+      expect(assign).toHaveBeenCalledWith(
+        `/auth?next=${encodeURIComponent('/polo-101/?a=1')}`
+      );
+      expect(dialog()).toBeNull();
+    });
+  });
+
+  it('leaves the email out of the message for an account without one', async () => {
+    sessionEmail = '';
+    const { container } = renderPdp(SOLD_OUT);
+
+    await press(container);
+
+    expect(mockAddStockAlert).toHaveBeenCalledWith({
+      productPk: 101,
+      email: ''
+    });
+    expect(dialog().textContent).toContain(
+      'Ürün stoğa girdiğinde haber vereceğiz.'
+    );
+  });
+
+  it('carries the picked size on the way back from sign-in', async () => {
+    sessionStatus = 'unauthenticated';
+    act(() => {
+      setStockAlertPick({
+        pagePk: 101,
+        productPk: 102,
+        optionLabel: 'M',
+        attributeKey: 'integration_beden'
+      });
+    });
+
+    await withLocation(async (assign) => {
+      const { container } = renderPdp(IN_STOCK);
+
+      await press(container);
+
+      expect(assign).toHaveBeenCalledWith(
+        `/auth?callbackUrl=${encodeURIComponent(
+          '/polo-101/?a=1&stock_alert=102'
+        )}`
+      );
+    });
+  });
+
+  it('ignores a pick made on another page', () => {
+    act(() => {
+      setStockAlertPick({
+        pagePk: 999,
+        productPk: 102,
+        optionLabel: 'M',
+        attributeKey: 'integration_beden'
+      });
+    });
+
+    const { container } = renderPdp(IN_STOCK);
+
+    expect(button(container).textContent).toBe('Sepete Ekle');
+  });
+});
+
+describe('variant selector handing a sold-out size to the button', () => {
+  const sizeOption = (container: HTMLElement, label: string) =>
+    Array.from(
+      container.querySelectorAll('[data-variant-option]')
+    ).find((node) => node.textContent === label) as HTMLElement;
+
+  it('turns the button into the alert for the picked size, and back', async () => {
+    const { container } = renderPdp(IN_STOCK, { selector: true });
+    const m = sizeOption(container, 'M');
+
+    expect(m.tagName).toBe('BUTTON');
+    expect(m.getAttribute('aria-pressed')).toBe('false');
+
+    act(() => {
+      fireEvent.click(m);
+    });
+
+    expect(m.getAttribute('aria-pressed')).toBe('true');
+    expect(m.getAttribute('data-state')).toBe('disabled selected');
+    expect(button(container).textContent).toBe('Stok Gelince Haber Ver');
+
+    await act(async () => {
+      fireEvent.click(button(container));
+    });
+
+    expect(mockAddStockAlert).toHaveBeenCalledWith({
+      productPk: 102,
+      email: 'shopper@example.com'
+    });
+
+    act(() => {
+      fireEvent.click(sizeOption(container, 'M'));
+    });
+
+    expect(button(container).textContent).toBe('Sepete Ekle');
+  });
+
+  it('drops the pick when an in-stock size is picked, even the one on the page', () => {
+    const { container } = renderPdp(IN_STOCK, { selector: true });
+
+    act(() => {
+      fireEvent.click(sizeOption(container, 'M'));
+    });
+    expect(button(container).textContent).toBe('Stok Gelince Haber Ver');
+
+    act(() => {
+      fireEvent.click(sizeOption(container, 'S'));
+    });
+
+    expect(button(container).textContent).toBe('Sepete Ekle');
+    expect(sizeOption(container, 'M').getAttribute('aria-pressed')).toBe(
+      'false'
+    );
+  });
+
+  it('drops the pick on navigation, so coming back does not restore it', () => {
+    const view = renderPdp(IN_STOCK, { selector: true });
+
+    act(() => {
+      fireEvent.click(sizeOption(view.container, 'M'));
+    });
+    expect(button(view.container).textContent).toBe('Stok Gelince Haber Ver');
+
+    // Another colour (the blocks remount on the new page), then back.
+    view.unmount();
+    currentPath = '/p/other';
+    renderPdp({ ...IN_STOCK, pk: 301 }, { selector: true }).unmount();
+    currentPath = '/p/s';
+
+    const back = renderPdp(IN_STOCK, { selector: true });
+
+    expect(button(back.container).textContent).toBe('Sepete Ekle');
+  });
+
+  it('picks the size again when sign-in hands the shopper back', () => {
+    window.history.replaceState(null, '', '/p/s?a=1&stock_alert=102');
+
+    const { container } = renderPdp(IN_STOCK, { selector: true });
+
+    expect(button(container).textContent).toBe('Stok Gelince Haber Ver');
+    expect(sizeOption(container, 'M').getAttribute('aria-pressed')).toBe(
+      'true'
+    );
+    expect(window.location.search).toBe('?a=1');
+
+    window.history.replaceState(null, '', '/');
+  });
+
+  it('only lets the size row hand a pick over, never an outer one', () => {
+    const product = {
+      ...IN_STOCK,
+      variants: [
+        {
+          attribute_key: 'integration_renk',
+          attribute_name: 'Renk',
+          options: [
+            {
+              label: 'Mavi',
+              value: 'mavi',
+              in_stock: true,
+              is_selected: true,
+              is_selectable: true,
+              product: { pk: 101, absolute_url: '/p/s', stock: 9 }
+            },
+            {
+              label: 'Kırmızı',
+              value: 'kirmizi',
+              in_stock: false,
+              is_selectable: false,
+              product: { pk: 201, absolute_url: '/p/red', stock: 0 }
+            }
+          ]
+        },
+        SIZES
+      ]
+    };
+    const { container } = renderPdp(product, { selector: true });
+
+    expect(sizeOption(container, 'Kırmızı').tagName).toBe('SPAN');
+    expect(sizeOption(container, 'M').tagName).toBe('BUTTON');
+  });
+
+  it('leaves a sold-out size inert when the colour has no size left', () => {
+    const { container } = renderPdp(COLOUR_GONE, { selector: true });
+
+    expect(sizeOption(container, 'M').tagName).toBe('SPAN');
+    expect(container.querySelector('form')).toBeNull();
+  });
+
+  it('leaves a sold-out size inert while the switch is off', () => {
+    const { container } = render(
+      <ThemePageContextProvider value={{ product: IN_STOCK } as never}>
+        <VariantSelectorBlock
+          {...({
+            block: block('variant-selector', { stockAlert: false }),
+            currentBreakpoint: 'desktop'
+          } as never)}
+        />
+      </ThemePageContextProvider>
+    );
+
+    expect(sizeOption(container, 'M').tagName).toBe('SPAN');
+  });
+});
+
+/**
+ * Commerce's real shape: a size the colour does not have is filled with that
+ * size of ANOTHER colour, and a colour that is sold out altogether has every
+ * size filled that way — in stock.
+ */
+describe('only the colour on the page counts', () => {
+  const size = (
+    label: string,
+    pk: number,
+    renk: string,
+    inStock: boolean
+  ) => ({
+    label,
+    value: label.toLowerCase(),
+    in_stock: inStock,
+    is_selectable: inStock,
+    product: {
+      pk,
+      absolute_url: `/p/${pk}`,
+      stock: inStock ? 9 : 0,
+      attributes: { integration_renk: renk }
+    }
+  });
+
+  const page = (renk: string, sizes: ReturnType<typeof size>[]) => ({
+    pk: 500,
+    name: 'Polo',
+    in_stock: false,
+    attributesKeyed: { integration_renk: renk },
+    variants: [
+      {
+        attribute_key: 'integration_renk',
+        options: [{ label: renk, value: renk, in_stock: false }]
+      },
+      { attribute_key: 'integration_beden', options: sizes }
+    ]
+  });
+
+  it('says sold out on a colour whose every size is gone, whatever the row lists', () => {
+    // The yellow page: S and M are the green and the brown ones.
+    const yellow = page('714', [
+      size('XS', 501, '714', false),
+      size('S', 502, '308', true),
+      size('M', 503, '284', true)
+    ]);
+    const { container } = renderPdp(yellow, { selector: true });
+
+    expect(button(container).textContent).toBe('Tükendi');
+    expect(
+      Array.from(container.querySelectorAll('[data-variant-option]')).find(
+        (node) => node.textContent === 'XS'
+      )?.tagName
+    ).toBe('SPAN');
+  });
+
+  it('offers the alert while one of the colour own sizes is in stock', () => {
+    const { container } = renderPdp(
+      page('714', [size('XS', 501, '714', false), size('S', 502, '714', true)])
+    );
+
+    expect(button(container).textContent).toBe('Stok Gelince Haber Ver');
+  });
+
+  it('lets another colour stand-in size be picked, as gant_zero did', async () => {
+    const white = {
+      ...page('110', [
+        // XS of grey stands in for the white XS that does not exist.
+        size('XS', 601, '95', false),
+        size('M', 602, '110', false),
+        size('L', 603, '110', true)
+      ]),
+      in_stock: true
+    };
+    const { container } = renderPdp(white, { selector: true });
+    const option = (label: string) =>
+      Array.from(container.querySelectorAll('[data-variant-option]')).find(
+        (node) => node.textContent === label
+      ) as HTMLElement;
+
+    expect(option('XS').tagName).toBe('BUTTON');
+    expect(option('M').tagName).toBe('BUTTON');
+
+    act(() => {
+      fireEvent.click(option('XS'));
+    });
+    await press(container);
+
+    // The alert goes to the product commerce sent for the size.
+    expect(mockAddStockAlert).toHaveBeenCalledWith({
+      productPk: 601,
+      email: 'shopper@example.com'
+    });
+  });
+});