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

package/src/__tests__/facet-filters-block.test.tsx

@@ -0,0 +1,707 @@
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+const mockPush = jest.fn();
+let mockQuery = '';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+  usePathname: () => '/list',
+  useSearchParams: () => new URLSearchParams(mockQuery)
+}));
+
+import FacetFiltersBlock from '../blocks/facet-filters-block';
+import { ThemePageContextProvider } from '../theme-page-context';
+
+type Choice = { label: string; value: string; quantity?: number; selected?: boolean };
+
+const facet = (
+  key: string,
+  name: string,
+  choices: Choice[],
+  widgetType = 'multiselect'
+) => ({
+  key,
+  name,
+  search_key: `attributes_${key}`,
+  widget_type: widgetType,
+  data: {
+    choices: choices.map((choice) => ({
+      label: choice.label,
+      value: choice.value,
+      quantity: choice.quantity ?? 5,
+      is_selected: choice.selected ?? false
+    }))
+  }
+});
+
+const COLOR = facet('color', 'Renk', [
+  { label: 'Siyah', value: 'black', quantity: 12 },
+  { label: 'Beyaz', value: 'white', quantity: 7 },
+  { label: 'Lacivert', value: 'navy', quantity: 3 }
+]);
+
+const SIZE = facet('size', 'Beden', [
+  { label: 'S', value: 's', quantity: 9 },
+  { label: 'M', value: 'm', quantity: 4 }
+]);
+
+const pageContext = (facets: unknown[] = [COLOR, SIZE]) => ({
+  listing: {
+    title: 'Shoes',
+    path: '/list',
+    query: '',
+    products: [],
+    facets,
+    sorters: [],
+    pagination: {},
+    breadcrumbs: []
+  }
+});
+
+const renderBlock = (
+  properties: Record<string, unknown> = {},
+  options: {
+    isDesigner?: boolean;
+    facets?: unknown[];
+    currentBreakpoint?: string;
+  } = {}
+) =>
+  render(
+    <ThemePageContextProvider value={pageContext(options.facets)}>
+      <FacetFiltersBlock
+        block={
+          {
+            id: 'blk-1',
+            type: 'facet-filters',
+            label: 'Filters',
+            order: 0,
+            hidden: false,
+            value: '',
+            properties,
+            styles: {},
+            blocks: []
+          } as never
+        }
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={options.isDesigner ?? false}
+        currentBreakpoint={options.currentBreakpoint ?? 'desktop'}
+      />
+    </ThemePageContextProvider>
+  );
+
+beforeEach(() => {
+  mockPush.mockClear();
+  mockQuery = '';
+  document.body.style.overflow = '';
+});
+
+/**
+ * The lock. These snapshots were taken from the shipped renderer BEFORE any of
+ * the option-search / selected-count / facet-order / staged-apply / dropdown-
+ * close work landed. Every one of those arrives off by default, so a
+ * composition that sets no property must keep producing exactly this markup —
+ * if a snapshot moves, a published storefront moved with it.
+ */
+describe('default render is frozen', () => {
+  it('renders the sidebar layout unchanged', () => {
+    const { container } = renderBlock();
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it('renders the topbar layout unchanged', () => {
+    const { container } = renderBlock({ layout: 'topbar' });
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it('renders the pills layout unchanged', () => {
+    const { container } = renderBlock({ layout: 'pills' });
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it('renders an opened dropdown unchanged', () => {
+    const { container } = renderBlock({ layout: 'dropdown' });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it('renders an opened panel unchanged', () => {
+    const { container } = renderBlock({
+      layout: 'panel',
+      showClear: true,
+      showApply: true
+    });
+    fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+
+  it('draws no search box and no count badge anywhere by default', () => {
+    const { container } = renderBlock({
+      layout: 'panel',
+      showClear: true,
+      showApply: true
+    });
+    fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+
+    expect(container.querySelector('input')).toBeNull();
+    expect(container.querySelector('[data-part="option-search"]')).toBeNull();
+    expect(container.querySelector('[data-part="selected-count"]')).toBeNull();
+    expect(container.querySelector('[data-part="trigger-count"]')).toBeNull();
+    expect(container.querySelector('[data-part="no-match"]')).toBeNull();
+  });
+
+  it('keeps apply-as-you-pick: a tick navigates immediately', () => {
+    renderBlock({ layout: 'panel', showApply: true });
+    fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+
+    expect(mockPush).toHaveBeenCalledWith('/list?attributes_color=black');
+  });
+
+  it('keeps the default Apply button cosmetic — it only closes', () => {
+    renderBlock({ layout: 'panel', showApply: true });
+    fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+});
+
+describe('option search', () => {
+  it('is absent until a designer turns it on', () => {
+    const { container } = renderBlock({ showOptionSearch: false });
+    expect(container.querySelector('[data-part="option-search"]')).toBeNull();
+  });
+
+  it('narrows a group to the options that match', () => {
+    renderBlock({ showOptionSearch: true });
+
+    const input = screen.getAllByRole('searchbox')[0];
+    fireEvent.change(input, { target: { value: 'la' } });
+
+    // "Lacivert" survives; the other two colours do not. The size group is
+    // searched on its own term, so both of its options stay.
+    expect(screen.getByRole('button', { name: /Lacivert/ })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Siyah/ })).toBeNull();
+    expect(screen.getByRole('button', { name: /^S/ })).toBeTruthy();
+  });
+
+  it('matches without regard to case', () => {
+    renderBlock({ showOptionSearch: true });
+    fireEvent.change(screen.getAllByRole('searchbox')[0], {
+      target: { value: 'SIYAH' }
+    });
+
+    expect(screen.getByRole('button', { name: /Siyah/ })).toBeTruthy();
+  });
+
+  it('says so when nothing matches, and marks the list empty', () => {
+    const { container } = renderBlock({ showOptionSearch: true });
+    fireEvent.change(screen.getAllByRole('searchbox')[0], {
+      target: { value: 'zzzz' }
+    });
+
+    expect(container.querySelector('[data-part="no-match"]')?.textContent).toBe(
+      'No matches'
+    );
+    const lists = container.querySelectorAll('[data-part="option-list"]');
+    expect(lists[0].getAttribute('data-state')).toContain('empty');
+  });
+
+  it('only appears on groups past the option threshold', () => {
+    const { container } = renderBlock({
+      showOptionSearch: true,
+      optionSearchMinOptions: 3
+    });
+
+    // Renk has three options, Beden two.
+    expect(container.querySelectorAll('[data-part="option-search"]')).toHaveLength(
+      1
+    );
+  });
+
+  it('stays out of the pill row, which is navigation', () => {
+    const { container } = renderBlock({
+      layout: 'pills',
+      showOptionSearch: true
+    });
+    expect(container.querySelector('[data-part="option-search"]')).toBeNull();
+  });
+});
+
+describe('selected counts', () => {
+  const withSelection = [
+    facet('color', 'Renk', [
+      { label: 'Siyah', value: 'black', selected: true },
+      { label: 'Beyaz', value: 'white', selected: true },
+      { label: 'Lacivert', value: 'navy' }
+    ]),
+    SIZE
+  ];
+
+  it('puts the count on the group heading when asked', () => {
+    const { container } = renderBlock(
+      { showSelectedCount: true },
+      { facets: withSelection }
+    );
+
+    const badge = container.querySelector('[data-part="selected-count"]');
+    expect(badge?.textContent).toBe('(2)');
+  });
+
+  it('honours the designer template', () => {
+    const { container } = renderBlock(
+      { showSelectedCount: true, selectedCountTemplate: '[{count}]' },
+      { facets: withSelection }
+    );
+
+    expect(
+      container.querySelector('[data-part="selected-count"]')?.textContent
+    ).toBe('[2]');
+  });
+
+  it('shows nothing on a group with no selection', () => {
+    const { container } = renderBlock(
+      { showSelectedCount: true },
+      { facets: withSelection }
+    );
+
+    const groups = container.querySelectorAll('[data-facet-group]');
+    expect(
+      (groups[1] as HTMLElement).querySelector('[data-part="selected-count"]')
+    ).toBeNull();
+  });
+
+  it('counts every applied filter on the panel trigger', () => {
+    const { container } = renderBlock(
+      { layout: 'panel', showTriggerCount: true },
+      { facets: withSelection }
+    );
+
+    expect(
+      container.querySelector('[data-part="trigger-count"]')?.textContent
+    ).toBe('(2)');
+  });
+
+  it('drops the trigger badge when nothing is applied', () => {
+    const { container } = renderBlock({
+      layout: 'panel',
+      showTriggerCount: true
+    });
+
+    expect(container.querySelector('[data-part="trigger-count"]')).toBeNull();
+  });
+});
+
+describe('facet order', () => {
+  it('follows commerce when the designer names no order', () => {
+    const { container } = renderBlock();
+    const groups = Array.from(container.querySelectorAll('[data-facet-group]'));
+    expect(groups.map((g) => g.getAttribute('data-facet-group'))).toEqual([
+      'color',
+      'size'
+    ]);
+  });
+
+  it('puts the named facets first, in the order given', () => {
+    const { container } = renderBlock({ facetOrder: 'size' });
+    const groups = Array.from(container.querySelectorAll('[data-facet-group]'));
+    expect(groups.map((g) => g.getAttribute('data-facet-group'))).toEqual([
+      'size',
+      'color'
+    ]);
+  });
+
+  it('matches the display name a designer reads off the page', () => {
+    const { container } = renderBlock({ facetOrder: 'Beden, Renk' });
+    const groups = Array.from(container.querySelectorAll('[data-facet-group]'));
+    expect(groups.map((g) => g.getAttribute('data-facet-group'))).toEqual([
+      'size',
+      'color'
+    ]);
+  });
+});
+
+describe('staged apply', () => {
+  const staged = {
+    layout: 'panel',
+    showApply: true,
+    showClear: true,
+    applyMode: 'staged'
+  };
+
+  const openPanel = () =>
+    fireEvent.click(screen.getByRole('button', { name: /Filters/ }));
+
+  it('writes no URL while the shopper is picking', () => {
+    renderBlock(staged);
+    openPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Beyaz/ }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it('writes one URL carrying every staged choice on Apply', () => {
+    renderBlock(staged);
+    openPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: /^M/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).toHaveBeenCalledTimes(1);
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list?attributes_color=black&attributes_size=m'
+    );
+  });
+
+  it('shows the shopper what is staged and what is applied', () => {
+    const { container } = renderBlock(staged);
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+
+    const option = container.querySelector('[data-facet-choice="black"]');
+    expect(option?.getAttribute('data-state')).toContain('selected');
+    expect(option?.getAttribute('data-state')).toContain('staged');
+
+    const untouched = container.querySelector('[data-facet-choice="white"]');
+    expect(untouched?.getAttribute('data-state') || '').not.toContain('staged');
+
+    expect(
+      container
+        .querySelector('[data-part="apply"]')
+        ?.getAttribute('data-state')
+    ).toContain('staged');
+  });
+
+  it('marks a staged un-tick as staged too', () => {
+    mockQuery = 'attributes_color=black';
+    const { container } = renderBlock(staged, {
+      facets: [
+        facet('color', 'Renk', [
+          { label: 'Siyah', value: 'black', selected: true },
+          { label: 'Beyaz', value: 'white' }
+        ]),
+        SIZE
+      ]
+    });
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+
+    const option = container.querySelector('[data-facet-choice="black"]');
+    expect(option?.getAttribute('data-state') || '').not.toContain('selected');
+    expect(option?.getAttribute('data-state')).toContain('staged');
+  });
+
+  it('forgets a staged choice when the shopper abandons the panel', () => {
+    const { container } = renderBlock(staged);
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+
+    openPanel();
+    expect(
+      container
+        .querySelector('[data-facet-choice="black"]')
+        ?.getAttribute('data-state') || ''
+    ).not.toContain('staged');
+  });
+
+  it('drops the page cursor when the staged URL is written', () => {
+    mockQuery = 'page=4';
+    renderBlock(staged);
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).toHaveBeenCalledWith('/list?attributes_color=black');
+  });
+
+  /**
+   * The round trip. Staging's whole promise is one page load instead of one
+   * per tap, so a panel the shopper ended up not changing must cost ZERO —
+   * in App Router a push is a real navigation (RSC refetch, scroll to top, a
+   * history entry that makes Back look broken).
+   */
+  it('writes no URL when the shopper undoes every staged choice', () => {
+    const { container } = renderBlock(staged);
+    openPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: /^M/ }));
+    fireEvent.click(screen.getByRole('button', { name: /^M/ }));
+
+    expect(
+      container.querySelector('[data-part="apply"]')?.getAttribute('data-state') ||
+        ''
+    ).not.toContain('staged');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('writes no URL for Clear All on an already-clean panel', () => {
+    // `handleClear` stages unconditionally, so an untouched panel ends up with
+    // a staged query that is identical to the URL.
+    renderBlock(staged);
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: 'Clear all' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  /**
+   * The page cursor is dropped while staging because a filter change
+   * invalidates it — but its absence is not itself a change. Comparing it
+   * lights Apply up on a panel nothing differs in, and committing then throws
+   * the shopper from page 4 back to page 1 for nothing.
+   */
+  it('does not count the dropped page cursor as a staged change', () => {
+    mockQuery = 'attributes_size=m&page=4';
+    const { container } = renderBlock(staged, {
+      facets: [
+        facet('size', 'Beden', [
+          { label: 'S', value: 's' },
+          { label: 'M', value: 'm', selected: true }
+        ]),
+        COLOR
+      ]
+    });
+    openPanel();
+
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+
+    expect(
+      container.querySelector('[data-part="apply"]')?.getAttribute('data-state') ||
+        ''
+    ).not.toContain('staged');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it('still commits when a real change also dropped the page cursor', () => {
+    mockQuery = 'attributes_size=m&page=4';
+    renderBlock(staged, {
+      facets: [
+        facet('size', 'Beden', [
+          { label: 'S', value: 's' },
+          { label: 'M', value: 'm', selected: true }
+        ]),
+        COLOR
+      ]
+    });
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).toHaveBeenCalledWith(
+      '/list?attributes_size=m&attributes_color=black'
+    );
+  });
+
+  /**
+   * The page cursor is free text, so a merchant can type a key a facet
+   * already owns into it. Honouring that would take the facet out of the
+   * staged-versus-applied comparison AND off every URL this block writes —
+   * the shopper's choice would be dropped on the floor by a control that
+   * looks like it worked.
+   */
+  describe('a page cursor a facet already owns', () => {
+    it('commits a choice made under the facet\'s own key', () => {
+      renderBlock({ ...staged, pageQueryParam: 'attributes_color' });
+      openPanel();
+
+      fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+      expect(mockPush).toHaveBeenCalledWith('/list?attributes_color=black');
+    });
+
+    it('leaves that facet on the URL when another filter changes', () => {
+      mockQuery = 'attributes_color=black';
+      renderBlock(
+        { layout: 'sidebar', pageQueryParam: 'attributes_color' },
+        {
+          facets: [
+            facet('color', 'Renk', [
+              { label: 'Siyah', value: 'black', selected: true },
+              { label: 'Beyaz', value: 'white' }
+            ]),
+            SIZE
+          ]
+        }
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: /^M/ }));
+
+      expect(mockPush).toHaveBeenCalledWith(
+        '/list?attributes_color=black&attributes_size=m'
+      );
+    });
+
+    it('still drops the real cursor it fell back to', () => {
+      mockQuery = 'page=4';
+      renderBlock({ ...staged, pageQueryParam: 'attributes_color' });
+      openPanel();
+
+      fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+      expect(mockPush).toHaveBeenCalledWith('/list?attributes_color=black');
+    });
+  });
+
+  it('stages Clear All rather than navigating on the spot', () => {
+    mockQuery = 'attributes_color=black';
+    renderBlock(staged, {
+      facets: [
+        facet('color', 'Renk', [
+          { label: 'Siyah', value: 'black', selected: true },
+          { label: 'Beyaz', value: 'white' }
+        ]),
+        SIZE
+      ]
+    });
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: 'Clear all' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(screen.getByRole('dialog')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(mockPush).toHaveBeenCalledWith('/list');
+  });
+
+  it('reads the group count off the staged selection, the trigger off the applied one', () => {
+    // The URL carries what commerce reports as applied — that agreement is
+    // what every href in this block is already built on.
+    mockQuery = 'attributes_color=black';
+    const { container } = renderBlock(
+      { ...staged, showSelectedCount: true, showTriggerCount: true },
+      {
+        facets: [
+          facet('color', 'Renk', [
+            { label: 'Siyah', value: 'black', selected: true },
+            { label: 'Beyaz', value: 'white' }
+          ])
+        ]
+      }
+    );
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Beyaz/ }));
+
+    expect(
+      container.querySelector('[data-part="selected-count"]')?.textContent
+    ).toBe('(2)');
+    expect(
+      container.querySelector('[data-part="trigger-count"]')?.textContent
+    ).toBe('(1)');
+  });
+
+  it('marks only the group the shopper actually changed', () => {
+    const { container } = renderBlock({
+      ...staged,
+      showSelectedCount: true
+    });
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+
+    const badges = container.querySelectorAll('[data-part="selected-count"]');
+    // Only Renk has a staged tick; Beden has none, so it draws no badge at all.
+    expect(badges).toHaveLength(1);
+    expect(badges[0].getAttribute('data-state')).toContain('staged');
+  });
+
+  it('is inert in the designer', () => {
+    const { container } = renderBlock(staged, { isDesigner: true });
+    openPanel();
+    fireEvent.click(screen.getByRole('button', { name: /Siyah/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(container).toBeTruthy();
+  });
+});
+
+describe('dropdown close control', () => {
+  // The floating list is addressed through its data hook, not its part: the
+  // dropdown spreads `panel` over it after `option-list`, so `data-part` reads
+  // "panel" in this layout.
+  const openList = (container: HTMLElement) =>
+    container.querySelector('[data-facet-choices]');
+
+  it('draws none by default', () => {
+    const { container } = renderBlock({ layout: 'dropdown' });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+
+    expect(openList(container)).toBeTruthy();
+    expect(container.querySelector('[data-part="close"]')).toBeNull();
+  });
+
+  it('closes the floating panel from inside it', () => {
+    const { container } = renderBlock({
+      layout: 'dropdown',
+      showDropdownClose: true
+    });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+
+    const close = container.querySelector('[data-part="close"]');
+    expect(close).toBeTruthy();
+    fireEvent.click(close as Element);
+
+    expect(openList(container)).toBeNull();
+  });
+
+  it('leaves an outside click alone unless the designer asked', () => {
+    const { container } = renderBlock({ layout: 'dropdown' });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+    fireEvent.mouseDown(document.body);
+
+    expect(openList(container)).toBeTruthy();
+  });
+
+  it('dismisses on an outside click when asked', () => {
+    const { container } = renderBlock({
+      layout: 'dropdown',
+      closeOnOutsideClick: true
+    });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+    expect(openList(container)).toBeTruthy();
+
+    fireEvent.mouseDown(document.body);
+    expect(openList(container)).toBeNull();
+  });
+
+  it('keeps a click inside the block from dismissing it', () => {
+    const { container } = renderBlock({
+      layout: 'dropdown',
+      closeOnOutsideClick: true
+    });
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+    fireEvent.mouseDown(openList(container) as Element);
+
+    expect(openList(container)).toBeTruthy();
+  });
+
+  it('never listens for outside clicks in the designer', () => {
+    const { container } = renderBlock(
+      { layout: 'dropdown', closeOnOutsideClick: true },
+      { isDesigner: true }
+    );
+    fireEvent.click(screen.getByRole('button', { name: /Renk/ }));
+    fireEvent.mouseDown(document.body);
+
+    expect(openList(container)).toBeTruthy();
+  });
+});