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

package/src/blocks/__tests__/product-grid-lookups.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';
+
+/**
+ * The lookup table the grid hands to the row normaliser.
+ *
+ * `item.badge.*` and `item.colors[0].color` are offered in the binding picker,
+ * but commerce sends a badge as a bare key ("new_season") and a colour as a
+ * bare value ("kirmizi") — neither carries a label, an image or a hex. The
+ * normaliser has always been able to resolve them through an author's table;
+ * nothing authored one, so every card that bound those four fields rendered
+ * nothing while the panel showed them as live targets.
+ *
+ * These tests bind them from a designer-authored row layout, which is the only
+ * place they can be read, and assert the value reaches the DOM.
+ */
+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',
+        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' }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  }
+};
+
+/** A row layout whose children bind the four lookup-fed fields. */
+const rowTemplate = {
+  id: 'row',
+  type: 'group',
+  order: 0,
+  hidden: false,
+  styles: {},
+  properties: { role: 'item-template' },
+  blocks: [
+    {
+      id: 'badge-text',
+      type: 'text',
+      order: 0,
+      hidden: false,
+      styles: {},
+      properties: { dataBinding: 'item.badge.label' }
+    },
+    {
+      id: 'badge-image',
+      type: 'image',
+      order: 1,
+      hidden: false,
+      styles: {},
+      properties: { dataBinding: 'item.badge.image' }
+    },
+    {
+      id: 'badge-colour',
+      type: 'text',
+      order: 2,
+      hidden: false,
+      styles: {},
+      properties: { dataBinding: 'item.badge.color' }
+    },
+    {
+      id: 'swatch-colour',
+      type: 'text',
+      order: 3,
+      hidden: false,
+      styles: {},
+      properties: { dataBinding: 'item.colors[0].color' }
+    }
+  ]
+};
+
+const renderGrid = (
+  properties: Record<string, unknown> = {},
+  blocks: Record<string, unknown>[] = []
+) =>
+  render(
+    <ThemePageContextProvider value={payload}>
+      <ProductGridBlock
+        {...({
+          block: {
+            id: 'grid',
+            type: 'product-grid',
+            styles: {},
+            properties,
+            blocks,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's'
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const authored = {
+  badgeAttribute: 'badge',
+  badgeMap: 'New_Season | Yeni Sezon | https://cdn.example.com/new.svg | #0f766e',
+  swatchMap: 'KIRMIZI | #c81e1e'
+};
+
+describe('the grid passes the authored lookup table to the row', () => {
+  it('resolves the badge key into text a bound row can draw', () => {
+    const { container } = renderGrid(authored, [rowTemplate]);
+
+    expect(container.innerHTML).toContain('Yeni Sezon');
+  });
+
+  it('resolves the badge image and colour', () => {
+    const { container } = renderGrid(authored, [rowTemplate]);
+
+    expect(container.querySelector('img[src="https://cdn.example.com/new.svg"]')).not.toBeNull();
+    expect(container.innerHTML).toContain('#0f766e');
+  });
+
+  it('resolves the colour value into the swatch hex', () => {
+    const { container } = renderGrid(authored, [rowTemplate]);
+
+    expect(container.innerHTML).toContain('#c81e1e');
+  });
+
+  it('matches the key in whatever case the integration wrote it', () => {
+    // The payload says `new_season` / `kirmizi`; the table above says
+    // `New_Season` / `KIRMIZI`.
+    const { container } = renderGrid(
+      { ...authored, badgeMap: 'NEW_SEASON | Yeni Sezon' },
+      [rowTemplate]
+    );
+
+    expect(container.innerHTML).toContain('Yeni Sezon');
+  });
+
+  it('publishes nothing for a key the table does not list', () => {
+    const { container } = renderGrid(
+      { ...authored, badgeMap: 'clearance | İndirim' },
+      [rowTemplate]
+    );
+
+    // Not a fallback to the raw key: "new_season" on a card is the bug the
+    // table exists to fix.
+    expect(container.innerHTML).not.toContain('new_season');
+    expect(container.innerHTML).not.toContain('İndirim');
+  });
+
+  it('reads the attribute the author named', () => {
+    const { container } = renderGrid(
+      { ...authored, badgeAttribute: 'not_the_badge_key' },
+      [rowTemplate]
+    );
+
+    expect(container.innerHTML).not.toContain('Yeni Sezon');
+  });
+});
+
+describe('an authored table is untrusted input', () => {
+  it('drops a script-scheme badge image and keeps the rest of the entry', () => {
+    const { container } = renderGrid(
+      {
+        ...authored,
+        // Browsers strip control characters while parsing a url, so the tab
+        // still resolves to a live handler.
+        badgeMap: 'new_season | Yeni Sezon | java\tscript:alert(1) | #0f766e'
+      },
+      [rowTemplate]
+    );
+
+    expect(container.innerHTML).not.toContain('script:alert(1)');
+    expect(container.innerHTML).toContain('Yeni Sezon');
+  });
+
+  it('drops a badge colour that could close the rule it lands in', () => {
+    const { container } = renderGrid(
+      {
+        ...authored,
+        badgeMap: 'new_season | Yeni Sezon | | red;}body{display:none'
+      },
+      [rowTemplate]
+    );
+
+    expect(container.innerHTML).not.toContain('display:none');
+    expect(container.innerHTML).toContain('Yeni Sezon');
+  });
+
+  it('drops a swatch colour that is not a colour', () => {
+    const { container } = renderGrid(
+      { ...authored, swatchMap: 'kirmizi | url(javascript:alert(1))' },
+      [rowTemplate]
+    );
+
+    expect(container.innerHTML).not.toContain('javascript:alert(1)');
+  });
+});
+
+describe('the built-in card is untouched by the table', () => {
+  it('renders identical markup with and without one authored', () => {
+    const withTable = renderGrid(authored).container.innerHTML;
+    const withoutTable = renderGrid({}).container.innerHTML;
+
+    // No row layout means the built-in card, and the built-in card draws none
+    // of the lookup-fed fields — a published grid cannot move because someone
+    // filled the table in.
+    expect(withTable).toBe(withoutTable);
+  });
+});

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

@@ -0,0 +1,248 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProductPriceBlock from '../product-price-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+/**
+ * The three additions (price history caption, price range, percent+amount
+ * badge) are opt-in, so the first test here is the one that matters most: a
+ * block with none of the new properties set must still render exactly what it
+ * rendered before they existed.
+ */
+const renderBlock = (
+  properties: Record<string, unknown>,
+  product: Record<string, unknown> | null,
+  extra: Record<string, unknown> = {}
+) =>
+  render(
+    <ThemePageContextProvider value={product ? { product } : null}>
+      <ProductPriceBlock
+        {...({
+          block: {
+            id: 'price',
+            type: 'product-price',
+            styles: {},
+            properties,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's',
+          isDesigner: false,
+          currentBreakpoint: 'desktop',
+          ...extra
+        } as any)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const BASE_PRODUCT = {
+  pk: 1,
+  price: '1299.00',
+  retail_price: '1749.00',
+  currency: 'USD'
+};
+
+describe('ProductPriceBlock — untouched properties', () => {
+  it('renders the price and the struck-through retail price only', () => {
+    const { container } = renderBlock({}, BASE_PRODUCT);
+
+    const price = container.querySelector('[data-product-current-price]');
+    expect(price?.textContent).toBe('$1,299.00');
+    // Text child only: the range markup must not appear for a block that
+    // never asked for it.
+    expect(price?.querySelectorAll('[data-part]').length).toBe(0);
+    expect(
+      container.querySelector('[data-product-retail-price]')?.textContent
+    ).toBe('$1,749.00');
+    expect(container.querySelector('[data-product-previous-price]')).toBeNull();
+    expect(container.querySelector('[data-product-discount-badge]')).toBeNull();
+  });
+
+  it('keeps the single-string badge for the percentage mode', () => {
+    const { container } = renderBlock(
+      { showDiscountBadge: true },
+      BASE_PRODUCT
+    );
+
+    const badge = container.querySelector('[data-product-discount-badge]');
+    expect(badge?.textContent).toBe('-26%');
+    expect(badge?.querySelectorAll('[data-part]').length).toBe(0);
+  });
+
+  it('keeps the single-string badge for the amount mode', () => {
+    const { container } = renderBlock(
+      { showDiscountBadge: true, discountMode: 'amount' },
+      BASE_PRODUCT
+    );
+
+    expect(
+      container.querySelector('[data-product-discount-badge]')?.textContent
+    ).toBe('-$450.00');
+  });
+});
+
+describe('ProductPriceBlock — price history caption', () => {
+  const withHistory = {
+    ...BASE_PRODUCT,
+    price_extra_field: { previous_price: '1499.00' }
+  };
+
+  it('prints nothing until the caption is switched on', () => {
+    const { container } = renderBlock({}, withHistory);
+
+    expect(container.querySelector('[data-product-previous-price]')).toBeNull();
+  });
+
+  it('reads price_extra_field.previous_price and formats it with the locale', () => {
+    const { container } = renderBlock({ showPreviousPrice: true }, withHistory);
+
+    const line = container.querySelector('[data-product-previous-price]');
+    expect(line?.textContent).toBe('Lowest price in the last 30 days: $1,499.00');
+    expect(
+      line?.querySelector('[data-part="previous-price"]')?.textContent
+    ).toBe('$1,499.00');
+    expect(
+      line?.querySelector('[data-part="history-caption"]')?.textContent
+    ).toBe('Lowest price in the last 30 days: ');
+  });
+
+  it('reads the flattened previousPrice a listing row carries', () => {
+    const { container } = renderBlock(
+      { showPreviousPrice: true },
+      { ...BASE_PRODUCT, previousPrice: '1499.00' }
+    );
+
+    expect(
+      container.querySelector('[data-part="previous-price"]')?.textContent
+    ).toBe('$1,499.00');
+  });
+
+  it('prints no caption when commerce sent no price history', () => {
+    const { container } = renderBlock({ showPreviousPrice: true }, BASE_PRODUCT);
+
+    expect(container.querySelector('[data-product-previous-price]')).toBeNull();
+  });
+
+  it('shows the missing-history hint in the designer only', () => {
+    const { container } = renderBlock(
+      { showPreviousPrice: true },
+      BASE_PRODUCT,
+      { isDesigner: true }
+    );
+
+    expect(
+      container.querySelector('[data-theme-block-placeholder]')?.textContent
+    ).toBe('Lowest price (no price history)');
+  });
+
+  it('honours an authored caption and still prints the amount without {value}', () => {
+    const { container } = renderBlock(
+      { showPreviousPrice: true, previousPriceTemplate: 'Son 30 gün' },
+      withHistory
+    );
+
+    expect(
+      container.querySelector('[data-product-previous-price]')?.textContent
+    ).toBe('Son 30 gün $1,499.00');
+  });
+});
+
+describe('ProductPriceBlock — discount as both', () => {
+  it('gives the percentage and the amount their own parts', () => {
+    const { container } = renderBlock(
+      { showDiscountBadge: true, discountMode: 'both' },
+      BASE_PRODUCT
+    );
+
+    const badge = container.querySelector('[data-product-discount-badge]');
+    expect(badge?.textContent).toBe('-26% ($450.00)');
+    expect(
+      badge?.querySelector('[data-part="discount-percent"]')?.textContent
+    ).toBe('26%');
+    expect(
+      badge?.querySelector('[data-part="discount-amount"]')?.textContent
+    ).toBe('$450.00');
+  });
+
+  it('prints nothing when there is no discount to state', () => {
+    const { container } = renderBlock(
+      { showDiscountBadge: true, discountMode: 'both' },
+      { ...BASE_PRODUCT, retail_price: '1299.00' }
+    );
+
+    expect(container.querySelector('[data-product-discount-badge]')).toBeNull();
+  });
+});
+
+describe('ProductPriceBlock — price range', () => {
+  const grouped = {
+    ...BASE_PRODUCT,
+    variants: [
+      {
+        attribute_key: 'size',
+        options: [
+          { value: 's', product: { price: '1299.00' } },
+          { value: 'm', product: { price: '1899.00' } },
+          // Not sellable: its price is not a price a shopper can pay.
+          { value: 'l', is_selectable: false, product: { price: '99.00' } }
+        ]
+      }
+    ]
+  };
+
+  it('prints one price until the range is switched on', () => {
+    const { container } = renderBlock({}, grouped);
+
+    expect(
+      container.querySelector('[data-product-current-price]')?.textContent
+    ).toBe('$1,299.00');
+  });
+
+  it('prints the lowest and highest sellable variant price', () => {
+    const { container } = renderBlock({ showPriceRange: true }, grouped);
+
+    const price = container.querySelector('[data-product-current-price]');
+    expect(price?.querySelector('[data-part="price-min"]')?.textContent).toBe(
+      '$1,299.00'
+    );
+    expect(price?.querySelector('[data-part="price-max"]')?.textContent).toBe(
+      '$1,899.00'
+    );
+    expect(
+      price?.querySelector('[data-part="range-separator"]')?.textContent
+    ).toBe(' – ');
+  });
+
+  it('honours an authored separator', () => {
+    const { container } = renderBlock(
+      { showPriceRange: true, priceRangeSeparator: ' to ' },
+      grouped
+    );
+
+    expect(
+      container.querySelector('[data-part="range-separator"]')?.textContent
+    ).toBe(' to ');
+  });
+
+  it('falls back to the single price when the variants do not differ', () => {
+    const { container } = renderBlock(
+      { showPriceRange: true },
+      {
+        ...BASE_PRODUCT,
+        variants: [
+          {
+            options: [
+              { value: 's', product: { price: '1299.00' } },
+              { value: 'm', product: { price: '1299.00' } }
+            ]
+          }
+        ]
+      }
+    );
+
+    const price = container.querySelector('[data-product-current-price]');
+    expect(price?.textContent).toBe('$1,299.00');
+    expect(price?.querySelectorAll('[data-part]').length).toBe(0);
+  });
+});