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

package/src/blocks/__tests__/accordion-block-state.test.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import AccordionBlock from '../accordion-block';
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: any) => <div data-testid="tb" data-id={block.id} />
+}));
+
+const child = (over: Record<string, unknown> = {}) => ({
+  id: 'c',
+  type: 'text',
+  label: 'child',
+  hidden: false,
+  order: 0,
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'acc',
+      type: 'accordion',
+      label: 'acc',
+      // No new property is set anywhere in this file: the state hooks are not
+      // opt-in flags, they are inert attributes, and that is what makes the
+      // markup comparison below the proof rather than a re-statement.
+      properties: {},
+      styles: {},
+      blocks: [
+        {
+          id: 'h',
+          label: 'Accordion Heading',
+          blocks: [child({ id: 'h1' })]
+        },
+        {
+          id: 'co',
+          label: 'Accordion Content',
+          blocks: [child({ id: 'c1' })]
+        }
+      ]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+/**
+ * `data-part` and `data-state` are the only things this change adds to the
+ * DOM. Removing them again has to give back the markup the block emitted
+ * before, character for character — no extra wrapper, no reordered element,
+ * no changed inline style.
+ */
+const withoutStateHooks = (html: string): string =>
+  html.replace(/\s(?:data-part|data-state)="[^"]*"/g, '');
+
+// Exactly what the block rendered before the state hooks existed.
+const CLOSED_BASELINE =
+  '<div style="cursor: pointer;">' +
+  '<div data-testid="tb" data-id="h1"></div>' +
+  '</div>' +
+  '<div style="display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out;">' +
+  '<div style="overflow: hidden;">' +
+  '<div data-testid="tb" data-id="c1"></div>' +
+  '</div>' +
+  '</div>';
+
+const OPEN_BASELINE = CLOSED_BASELINE.replace(
+  'grid-template-rows: 0fr;',
+  'grid-template-rows: 1fr;'
+);
+
+describe('AccordionBlock — default output is unchanged', () => {
+  it('emits the pre-change markup once the inert hooks are removed (closed)', () => {
+    const { container } = render(<AccordionBlock {...props()} />);
+
+    expect(withoutStateHooks(container.innerHTML)).toBe(CLOSED_BASELINE);
+  });
+
+  it('emits the pre-change markup once the inert hooks are removed (open)', () => {
+    const { container } = render(<AccordionBlock {...props()} />);
+
+    fireEvent.click(container.querySelector('[data-part="header"]') as Element);
+
+    expect(withoutStateHooks(container.innerHTML)).toBe(OPEN_BASELINE);
+  });
+
+  it('leaves the empty placeholder byte-identical', () => {
+    const { container } = render(
+      <AccordionBlock
+        {...props({
+          block: { id: 'acc', type: 'accordion', properties: {}, blocks: [] }
+        })}
+      />
+    );
+
+    expect(withoutStateHooks(container.innerHTML)).toBe(
+      '<div class="p-4 text-gray-400 border border-dashed border-gray-300 rounded">' +
+        'No accordion content' +
+        '</div>'
+    );
+    expect(screen.getByText('No accordion content')).toBeInTheDocument();
+  });
+
+  it('writes no data-state at all while closed', () => {
+    const { container } = render(<AccordionBlock {...props()} />);
+
+    expect(container.querySelectorAll('[data-state]')).toHaveLength(0);
+  });
+});
+
+describe('AccordionBlock — state hooks', () => {
+  const parts = ['header', 'panel', 'content'];
+
+  it('marks header, panel and content open only while expanded', () => {
+    const { container } = render(<AccordionBlock {...props()} />);
+
+    parts.forEach((part) => {
+      expect(
+        container.querySelector(`[data-part="${part}"][data-state~="open"]`)
+      ).toBeNull();
+    });
+
+    fireEvent.click(container.querySelector('[data-part="header"]') as Element);
+
+    parts.forEach((part) => {
+      expect(
+        container.querySelector(`[data-part="${part}"][data-state~="open"]`)
+      ).not.toBeNull();
+    });
+
+    fireEvent.click(container.querySelector('[data-part="header"]') as Element);
+
+    parts.forEach((part) => {
+      expect(
+        container.querySelector(`[data-part="${part}"][data-state~="open"]`)
+      ).toBeNull();
+    });
+  });
+
+  it('starts open, and marked open, when defaultOpen is set', () => {
+    const { container } = render(
+      <AccordionBlock
+        {...props({
+          block: {
+            id: 'acc',
+            type: 'accordion',
+            properties: { defaultOpen: true },
+            blocks: [
+              {
+                id: 'co',
+                label: 'Accordion Content',
+                blocks: [child({ id: 'c1' })]
+              }
+            ]
+          }
+        })}
+      />
+    );
+
+    expect(
+      container.querySelector('[data-part="panel"][data-state~="open"]')
+    ).not.toBeNull();
+  });
+
+  it('exposes the same state to a heading child through the header', () => {
+    // The chevron/plus glyph is an authored child block, so the only way a
+    // brand can restyle it per state is as a descendant of the open header.
+    const { container } = render(<AccordionBlock {...props()} />);
+
+    fireEvent.click(container.querySelector('[data-part="header"]') as Element);
+
+    expect(
+      container.querySelector(
+        '[data-part="header"][data-state~="open"] [data-id="h1"]'
+      )
+    ).not.toBeNull();
+  });
+
+  it('still toggles in the designer, and never on a toolbar click', () => {
+    const { container } = render(
+      <AccordionBlock {...props({ isDesigner: true })} />
+    );
+    const header = container.querySelector('[data-part="header"]') as Element;
+
+    const toolbar = document.createElement('div');
+    toolbar.setAttribute('data-action-toolbar', '');
+    header.appendChild(toolbar);
+
+    fireEvent.click(toolbar);
+    expect(
+      container.querySelector('[data-part="panel"][data-state~="open"]')
+    ).toBeNull();
+
+    fireEvent.click(header);
+    expect(
+      container.querySelector('[data-part="panel"][data-state~="open"]')
+    ).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FacetFiltersBlock from '../facet-filters-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+/**
+ * The pill row is navigation, not a filter panel — which is the whole reason
+ * it exists as its own layout. Two things have to hold or it is not
+ * navigation: the options are anchors carrying a real href (a crawler follows
+ * it, a shopper opens it in a new tab), and none of that leaks into the
+ * designer, where a click would drop the author out of the page being edited.
+ */
+const push = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: (...args: unknown[]) => push(...args) }),
+  usePathname: () => '/kadin-ayakkabi/',
+  useSearchParams: () => new URLSearchParams('page=3')
+}));
+
+const listingContext = {
+  listing: {
+    path: '/kadin-ayakkabi/',
+    products: [],
+    facets: [
+      {
+        key: 'category_ids',
+        name: 'Kategori',
+        search_key: 'category_ids',
+        widget_type: 'select',
+        choices: [
+          { label: 'AYAKKABI', value: '12', quantity: 1574, is_selected: true },
+          { label: 'Sandalet', value: '17', quantity: 210, is_selected: false }
+        ]
+      },
+      {
+        key: 'filterable_size',
+        name: 'Beden',
+        search_key: 'filterable_size',
+        widget_type: 'multiselect',
+        choices: [{ label: '38', value: '38', quantity: 40, is_selected: false }]
+      }
+    ]
+  }
+};
+
+const renderBlock = (
+  properties: Record<string, unknown>,
+  extra: Record<string, unknown> = {}
+) =>
+  render(
+    <ThemePageContextProvider value={listingContext}>
+      <FacetFiltersBlock
+        {...({
+          block: {
+            id: 'facets',
+            type: 'facet-filters',
+            styles: {},
+            properties,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's',
+          ...extra
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const pills = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-part="pill"]'));
+
+beforeEach(() => push.mockClear());
+
+describe('facet filters — the pill row', () => {
+  it('is not drawn unless the layout asks for it', () => {
+    const { container } = renderBlock({});
+
+    expect(container.querySelector('[data-facet-layout]')?.getAttribute('data-facet-layout')).toBe(
+      'sidebar'
+    );
+    expect(pills(container)).toHaveLength(0);
+    // The rail keeps its heading and its checkbox — nothing about the default
+    // render moved.
+    expect(container.querySelectorAll('[data-facet-toggle]').length).toBeGreaterThan(0);
+  });
+
+  it('draws every choice as an anchor with a real href', () => {
+    const { container } = renderBlock({ layout: 'pills' });
+    const row = pills(container);
+
+    expect(row.length).toBe(3);
+    row.forEach((pill) => {
+      expect(pill.tagName).toBe('A');
+      expect(pill.getAttribute('href')).toMatch(/^\/kadin-ayakkabi\//);
+    });
+    // Any filter change invalidates the cursor the shopper was on.
+    row.forEach((pill) => {
+      expect(pill.getAttribute('href')).not.toContain('page=3');
+    });
+  });
+
+  it('marks the chosen subcategory and drops the headings', () => {
+    const { container } = renderBlock({ layout: 'pills' });
+    const selected = pills(container).filter(
+      (pill) => pill.getAttribute('data-facet-selected') === 'true'
+    );
+
+    expect(selected).toHaveLength(1);
+    expect(selected[0].textContent).toContain('AYAKKABI');
+    expect(selected[0].getAttribute('data-state')).toContain('selected');
+    expect(selected[0].getAttribute('aria-current')).toBe('page');
+    expect(container.querySelectorAll('[data-facet-toggle]')).toHaveLength(0);
+    expect(container.querySelectorAll('[data-part="checkbox"]')).toHaveLength(0);
+  });
+
+  it('offers an "All" link that clears its own facet and nothing else', () => {
+    const { container } = renderBlock({
+      layout: 'pills',
+      showAllOption: true,
+      allLabel: 'Tümü',
+      includeFacets: 'category_ids'
+    });
+    const [all] = pills(container);
+
+    expect(all.textContent).toBe('Tümü');
+    expect(all.getAttribute('data-facet-choice')).toBe('__all__');
+    // A facet with a selection means "All" is not the current page.
+    expect(all.getAttribute('data-facet-selected')).toBe('false');
+    expect(all.getAttribute('href')).not.toContain('category_ids');
+  });
+
+  it('shows only the facets the block was pointed at', () => {
+    const { container } = renderBlock({
+      layout: 'pills',
+      includeFacets: 'category_ids'
+    });
+
+    expect(container.querySelectorAll('[data-facet-group]')).toHaveLength(1);
+
+    const { container: excluded } = renderBlock({
+      excludeFacets: 'category_ids'
+    });
+
+    expect(
+      Array.from(excluded.querySelectorAll('[data-facet-group]')).map((el) =>
+        el.getAttribute('data-facet-group')
+      )
+    ).toEqual(['filterable_size']);
+  });
+
+  it('matches a facet by the name a designer reads off the page', () => {
+    const { container } = renderBlock({ layout: 'pills', includeFacets: 'beden' });
+
+    expect(
+      Array.from(container.querySelectorAll('[data-facet-group]')).map((el) =>
+        el.getAttribute('data-facet-group')
+      )
+    ).toEqual(['filterable_size']);
+  });
+
+  it('is inert in the designer', () => {
+    const { container } = renderBlock({ layout: 'pills' }, { isDesigner: true });
+    const [first] = pills(container);
+
+    expect(first.getAttribute('href')).toBeNull();
+
+    first.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    expect(push).not.toHaveBeenCalled();
+  });
+
+  it('leaves a modified click to the browser', () => {
+    const { container } = renderBlock({ layout: 'pills' });
+    const [first] = pills(container);
+
+    first.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true, metaKey: true })
+    );
+
+    // The browser opens the href in a new tab; a router push would have
+    // navigated the tab the shopper meant to keep.
+    expect(push).not.toHaveBeenCalled();
+
+    first.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+    expect(push).toHaveBeenCalledTimes(1);
+  });
+});

package/src/blocks/__tests__/listing-context-card-model.test.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProductGridBlock from '../product-grid-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import { resolveListingContext } from '../listing-context';
+
+/**
+ * The card view model grew three things: a percentage under a named basis, a
+ * second percentage off the previous price, and lookup-fed fields (badge,
+ * swatch colour) that only exist once an author maps them.
+ *
+ * All three are additions to the ROW, and the row is data — so the first test
+ * here is the one that matters: the grid, rendered with no lookup table
+ * supplied, must emit exactly the markup it emitted before any of this
+ * existed. The literal below was captured from the renderer at the previous
+ * commit; if an addition ever leaks into output, this fails on the diff rather
+ * than on a hand-written assertion someone could relax.
+ */
+const payload = {
+  listing: {
+    title: 'Ayakkabı',
+    path: '/kadin-ayakkabi/',
+    products: [
+      {
+        pk: 41,
+        name: 'Deri Sandalet',
+        absolute_url: '/deri-sandalet-41/',
+        image: 'https://cdn.example.com/41.jpg',
+        price: '100.00',
+        retail_price: '200.00',
+        currency_type: 'TRY',
+        in_stock: true,
+        price_extra_field: { previous_price: '150.00' },
+        attributes_kwargs: {
+          badge: { value: 'new_season' }
+        },
+        extra_data: {
+          variants: [
+            {
+              attribute_key: 'integration_color',
+              options: [
+                {
+                  label: 'Kırmızı',
+                  value: 'kirmizi',
+                  is_selectable: true,
+                  is_selected: true,
+                  product: { image: 'https://cdn.example.com/41-red.jpg' }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+
+const renderGrid = (properties: Record<string, unknown> = {}) =>
+  render(
+    <ThemePageContextProvider value={payload}>
+      <ProductGridBlock
+        {...({
+          block: {
+            id: 'grid',
+            type: 'product-grid',
+            styles: {},
+            properties,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's'
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const firstProduct = (options?: Parameters<typeof resolveListingContext>[1]) =>
+  resolveListingContext(payload, options)!.products[0];
+
+describe('product grid output is unchanged by the widened card model', () => {
+  it('emits byte-identical markup when no lookup table is authored', () => {
+    const { container } = renderGrid({
+      showRetailPrice: true,
+      showDiscountBadge: true
+    });
+
+    // Captured from the renderer BEFORE the row was widened. Whole-subtree, so
+    // a stray attribute or an accidentally rendered badge shows up here.
+    expect(container.innerHTML).toBe(
+      '<div data-product-grid="" data-product-grid-id="grid" data-part="list" style="display: grid; gap: var(--product-grid-gap, 16px);">' +
+        '<style>[data-product-grid-id="grid"]{grid-template-columns:repeat(4,minmax(0,1fr));}' +
+        '@media (max-width:1023px){[data-product-grid-id="grid"]{grid-template-columns:repeat(2,minmax(0,1fr));}}</style>' +
+        '<a href="/deri-sandalet-41/" data-product-card="" data-part="card" ' +
+        'style="display: flex; flex-direction: column; gap: 8px; text-decoration: none;">' +
+        '<img alt="Deri Sandalet" loading="lazy" data-product-card-image="" data-part="image" ' +
+        'style="width: 100%; height: auto; display: block; object-fit: cover;" ' +
+        'src="https://cdn.example.com/41.jpg">' +
+        '<span data-product-card-badge="" data-part="badge" style="align-self: flex-start; ' +
+        'padding: 2px 6px; font-size: 0.8em; line-height: 1.4; color: rgb(255, 255, 255); ' +
+        'background: rgb(17, 24, 39); border-radius: 2px;">-50%</span>' +
+        '<span data-product-card-name="" data-part="name">Deri Sandalet</span>' +
+        '<span data-product-card-price="" data-part="price" ' +
+        'style="display: flex; align-items: center; gap: 8px;">' +
+        '<s data-product-card-retail-price="" data-part="list-price" ' +
+        'style="opacity: 0.6; font-size: 0.9em;">TRY&nbsp;200.00</s>' +
+        '<span data-part="sale-price">TRY&nbsp;100.00</span></span></a></div>'
+    );
+  });
+
+  it('publishes no lookup-fed field on the row when nothing is authored', () => {
+    const product = firstProduct();
+
+    expect(product.badge).toBeUndefined();
+    expect(product.colors?.[0].color).toBeUndefined();
+    // The image commerce sent is untouched by the swatch table being absent.
+    expect(product.colors?.[0].image).toBe('https://cdn.example.com/41-red.jpg');
+  });
+});
+
+describe('discount basis', () => {
+  it('keeps discountPercent on the retail basis it has always had', () => {
+    const product = firstProduct();
+
+    expect(product.discountPercent).toBe(50);
+    expect(product.discountPercentFromRetail).toBe(50);
+  });
+
+  it('publishes the previous-price basis alongside it', () => {
+    // 150 -> 100 is 33%, and it is a different number from the 50% off retail:
+    // a card that strikes the previous price was showing the wrong one.
+    expect(firstProduct().discountPercentFromPrevious).toBe(33);
+  });
+
+  it('leaves a basis absent rather than reporting 0% off it', () => {
+    const noPrevious = resolveListingContext({
+      listing: {
+        products: [
+          {
+            pk: 7,
+            name: 'Tam Fiyat',
+            absolute_url: '/tam-fiyat-7/',
+            price: '100.00',
+            retail_price: '100.00'
+          }
+        ]
+      }
+    })!.products[0];
+
+    expect(noPrevious.discountPercent).toBeUndefined();
+    expect(noPrevious.discountPercentFromRetail).toBeUndefined();
+    expect(noPrevious.discountPercentFromPrevious).toBeUndefined();
+  });
+
+  it('parses formatted amounts rather than trusting Number()', () => {
+    const formatted = resolveListingContext({
+      listing: {
+        products: [
+          {
+            pk: 8,
+            name: 'Biçimli',
+            absolute_url: '/bicimli-8/',
+            price: '1.000,00',
+            retail_price: '2.000,00',
+            price_extra_field: { previous_price: '1.250,00' }
+          }
+        ]
+      }
+    })!.products[0];
+
+    expect(formatted.discountPercentFromRetail).toBe(50);
+    expect(formatted.discountPercentFromPrevious).toBe(20);
+  });
+});
+
+describe('authored value lookups', () => {
+  const lookups = {
+    badge: {
+      attribute: 'badge',
+      entries: {
+        New_Season: {
+          label: 'Yeni Sezon',
+          image: 'https://cdn.example.com/new.svg',
+          color: '#0f766e'
+        }
+      }
+    },
+    swatch: { KIRMIZI: '#c81e1e' }
+  };
+
+  it('resolves a bare commerce key into label, image and colour', () => {
+    expect(firstProduct({ lookups }).badge).toEqual({
+      label: 'Yeni Sezon',
+      image: 'https://cdn.example.com/new.svg',
+      color: '#0f766e'
+    });
+  });
+
+  it('matches the key whatever case the integration wrote it in', () => {
+    // The payload says `new_season`, the table says `New_Season`, the swatch
+    // table says `KIRMIZI` — an author cannot be asked to enumerate casings.
+    expect(firstProduct({ lookups }).colors?.[0].color).toBe('#c81e1e');
+  });
+
+  it('publishes nothing for a value the table does not list', () => {
+    const unmapped = firstProduct({
+      lookups: { badge: { attribute: 'badge', entries: { sale: { label: 'İndirim' } } } }
+    });
+
+    // Not a fallback to the raw key: "new_season" on a card is the bug this
+    // mechanism exists to fix, so an unmapped value stays empty.
+    expect(unmapped.badge).toBeUndefined();
+  });
+
+  it('reads the attribute the author named, not a fixed one', () => {
+    expect(
+      firstProduct({
+        lookups: { badge: { attribute: 'not_the_badge_key', entries: { new_season: { label: 'x' } } } }
+      }).badge
+    ).toBeUndefined();
+  });
+
+  it('treats an empty table row as no match', () => {
+    expect(
+      firstProduct({
+        lookups: { badge: { attribute: 'badge', entries: { new_season: {} } } }
+      }).badge
+    ).toBeUndefined();
+  });
+});

package/src/blocks/__tests__/listing-lookup-hardening.test.ts

@@ -0,0 +1,80 @@
+import {
+  parseListingLookups,
+  resolveListingContext
+} from '../listing-context';
+
+/**
+ * The three lookup controls are free text a merchandiser types, and the badge
+ * attribute key is used to index the product's attribute map. Anything that
+ * can be typed into that box has to be survivable: a listing page that throws
+ * takes the whole category down, and the author would have no way to tell
+ * which of the three boxes did it.
+ */
+const context = (attributes: Record<string, { value: string }>) => ({
+  listing: {
+    products: [
+      {
+        pk: 1,
+        title: 'Tee',
+        url: '/p/tee',
+        price: '100.00',
+        currency: 'TRY',
+        attributes_kwargs: attributes
+      }
+    ]
+  }
+});
+
+const productWith = (
+  badgeAttribute: string,
+  badgeMap: string,
+  attributes: Record<string, { value: string }> = {
+    badge: { value: 'new_season' }
+  }
+) =>
+  resolveListingContext(context(attributes), {
+    currency: 'TRY',
+    lookups: parseListingLookups(badgeAttribute, badgeMap, '')
+  })?.products[0];
+
+describe('badge attribute keys that are also Object.prototype members', () => {
+  // `constructor`, `toString`, `valueOf`, `hasOwnProperty` — every one of them
+  // answers on a plain object, and none of them answers with a string.
+  it.each(['constructor', 'toString', 'valueOf', 'hasOwnProperty', '__proto__'])(
+    'reads %s as no badge instead of throwing',
+    (key) => {
+      let product;
+      expect(() => {
+        product = productWith(key, 'new_season|Yeni Sezon');
+      }).not.toThrow();
+
+      expect(product?.badge).toBeUndefined();
+    }
+  );
+
+  it('still reads a real attribute that shadows a prototype member', () => {
+    const product = productWith('toString', 'new_season|Yeni Sezon', {
+      toString: { value: 'new_season' }
+    });
+
+    expect(product?.badge?.label).toBe('Yeni Sezon');
+  });
+});
+
+describe('mapping keys that are also Object.prototype members', () => {
+  it('does not answer an unmapped value out of the table prototype', () => {
+    const product = productWith('badge', '__proto__|Poisoned', {
+      badge: { value: 'label' }
+    });
+
+    expect(product?.badge).toBeUndefined();
+  });
+
+  it('maps a value literally named like a prototype member', () => {
+    const product = productWith('badge', 'constructor|Yapıcı', {
+      badge: { value: 'constructor' }
+    });
+
+    expect(product?.badge?.label).toBe('Yapıcı');
+  });
+});