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

package/src/blocks/__tests__/store-locator-block.test.tsx

@@ -0,0 +1,691 @@
+import React from 'react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import StoreLocatorBlock from '../store-locator-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+/**
+ * The store list is the block a brand already has on the page, and the find-in-
+ * store form is new capability bolted beside it. Two things have to hold: the
+ * list a published composition renders today cannot move by a byte, and the
+ * form that opens over the page has to be a real dialog rather than a div that
+ * looks like one.
+ *
+ * The golden below was captured by rendering the block at the commit BEFORE
+ * this work and dumping `container.innerHTML`; it is pasted here verbatim, so
+ * it cannot be regenerated from the code it is meant to police.
+ */
+const GOLDEN: Record<string, string> = {
+  "default":
+    "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+902123531500\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=41.0678,29.0092\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+903125411000\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=39.9497,32.8241\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>",
+  "default-designer":
+    "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"#\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"#\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"#\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"#\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>",
+  "grid":
+    "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><style>[data-store-locator-id=\"sl-1\"]{grid-template-columns:repeat(2,minmax(0,1fr));}@media (max-width:1023px){[data-store-locator-id=\"sl-1\"]{grid-template-columns:repeat(2,minmax(0,1fr));}}</style><ul data-part=\"list\" data-store-locator-id=\"sl-1\" style=\"display: grid; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+903125411000\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=39.9497,32.8241\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+902123531500\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=41.0678,29.0092\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>",
+  "no-filter":
+    "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>",
+  "distance":
+    "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><button type=\"button\" data-store-locator-location=\"\" data-part=\"location-button\" style=\"display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; cursor: pointer;\">Use my location</button><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+902123531500\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=41.0678,29.0092\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+903125411000\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=39.9497,32.8241\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>",
+  // The trigger form, captured the same way at the same commit. It is newer
+  // than the list above and unreleased, but "unreleased" is exactly when a
+  // golden is worth having: `aria-haspopup` on the trigger, `aria-hidden` on
+  // the backdrop, `role`/`aria-modal`/`aria-label`/`tabindex` on the panel and
+  // the placement box are all load-bearing, and none of them is obvious enough
+  // to survive a refactor by luck.
+  "trigger":
+    "<div data-store-locator=\"\" data-store-locator-mode=\"trigger\" style=\"position: relative;\"><button type=\"button\" data-store-locator-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"false\" style=\"display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; cursor: pointer;\">Find in store</button></div>",
+  "trigger-open":
+    "<div data-store-locator=\"\" data-store-locator-mode=\"trigger\" style=\"position: relative;\"><button type=\"button\" data-store-locator-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"true\" style=\"display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; cursor: pointer;\" data-state=\"open\">Find in store</button><div data-store-locator-backdrop=\"\" data-part=\"backdrop\" aria-hidden=\"true\" style=\"position: fixed; inset: 0; z-index: 40;\"></div><div data-store-locator-panel=\"\" data-part=\"panel\" data-state=\"open\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Find in store\" tabindex=\"-1\" style=\"position: fixed; z-index: 41; display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); padding: 20px; overflow-y: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 64px);\"><div style=\"display: flex; align-items: center; justify-content: space-between; gap: 12px;\"><span data-store-locator-panel-title=\"\" data-part=\"panel-title\" style=\"font-weight: 600;\">Find in store</span><button type=\"button\" data-store-locator-panel-close=\"\" data-part=\"panel-close\" style=\"background: transparent; cursor: pointer; padding: 4px;\">Close</button></div><div style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+902123531500\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=41.0678,29.0092\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+903125411000\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=39.9497,32.8241\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div></div></div>",
+  "trigger-open-designer":
+    "<div data-store-locator=\"\" data-store-locator-mode=\"trigger\" style=\"position: relative;\"><button type=\"button\" data-store-locator-trigger=\"\" data-part=\"trigger\" data-state=\"open\" aria-haspopup=\"dialog\" aria-expanded=\"true\" style=\"display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; cursor: pointer;\">Find in store</button><div data-store-locator-backdrop=\"\" data-part=\"backdrop\" aria-hidden=\"true\" style=\"position: fixed; inset: 0; z-index: 40;\"></div><div data-store-locator-panel=\"\" data-part=\"panel\" data-state=\"open\" role=\"dialog\" aria-label=\"Find in store\" tabindex=\"-1\" style=\"position: fixed; z-index: 41; display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); padding: 20px; overflow-y: auto; top: 0px; right: 0px; bottom: 0px;\"><div style=\"display: flex; align-items: center; justify-content: space-between; gap: 12px;\"><span data-store-locator-panel-title=\"\" data-part=\"panel-title\" style=\"font-weight: 600;\">Find in store</span><button type=\"button\" data-store-locator-panel-close=\"\" data-part=\"panel-close\" style=\"background: transparent; cursor: pointer; padding: 4px;\">Close</button></div><div style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"#\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"#\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"#\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"#\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div></div></div>"
+};
+
+/**
+ * `innerHTML` records the order attributes were ADDED in rather than the
+ * markup: one that first appears on a later commit is appended at the end. The
+ * trigger goldens are therefore compared attribute-set by attribute-set — every
+ * element, every attribute and every value still has to match exactly, but a
+ * value that arrives one commit later is not a golden break.
+ */
+const canonical = (html: string): string => {
+  const host = document.createElement('div');
+  host.innerHTML = html;
+
+  const sortAttributes = (element: Element) => {
+    const pairs = element
+      .getAttributeNames()
+      .sort()
+      .map((name) => [name, element.getAttribute(name) ?? ''] as const);
+
+    pairs.forEach(([name]) => element.removeAttribute(name));
+    pairs.forEach(([name, value]) => element.setAttribute(name, value));
+    Array.from(element.children).forEach(sortAttributes);
+  };
+
+  Array.from(host.children).forEach(sortAttributes);
+
+  return host.innerHTML;
+};
+
+/** The store rows the golden was captured against — they may not be edited. */
+const GOLDEN_STORES = [
+  {
+    pk: 1,
+    name: 'Kanyon AVM',
+    address: 'Büyükdere Cad. No:185',
+    phone_number: '+902123531500',
+    latitude: '41.0678',
+    longitude: '29.0092',
+    township: { name: 'Şişli', city: { name: 'İstanbul' } }
+  },
+  {
+    pk: 2,
+    name: 'Ankamall',
+    address: 'Akköprü Mah.',
+    phone_number: '+903125411000',
+    latitude: '39.9497',
+    longitude: '32.8241',
+    city: { name: 'Ankara' }
+  },
+  {
+    pk: 3,
+    name: 'Merkez',
+    address: '',
+    phone_number: '',
+    latitude: '0',
+    longitude: '0',
+    city: 'İzmir'
+  }
+];
+
+let mockStores: unknown[] = [];
+let mockCities: unknown[] = [];
+let mockStockRows: unknown[] = [];
+let mockStockRejects = false;
+const stockCalls: unknown[] = [];
+
+jest.mock('@akinon/next/data/client/address', () => ({
+  __esModule: true,
+  useGetStoresQuery: () => ({
+    data: { results: mockStores },
+    isLoading: false
+  }),
+  useGetRetailStoreQuery: () => ({ data: { results: mockCities } }),
+  useGetRetailStoreStockMutation: () => [
+    (args: unknown) => {
+      stockCalls.push(args);
+      return {
+        unwrap: () =>
+          mockStockRejects
+            ? Promise.reject(new Error('commerce is down'))
+            : Promise.resolve(mockStockRows)
+      };
+    }
+  ]
+}));
+
+const PRODUCT_CONTEXT = {
+  product: {
+    pk: 4242,
+    name: 'Oxford Ayakkabı',
+    variants: [
+      {
+        attribute_key: 'size',
+        attribute_name: 'Beden',
+        options: [{ value: '42', is_selected: true }]
+      }
+    ]
+  }
+};
+
+const renderBlock = (
+  properties: Record<string, unknown>,
+  extra: Record<string, unknown> = {},
+  context: Record<string, unknown> | null = null
+) =>
+  render(
+    <ThemePageContextProvider value={context}>
+      <StoreLocatorBlock
+        {...({
+          block: {
+            id: 'sl-1',
+            type: 'store-locator',
+            styles: {},
+            properties,
+            order: 0,
+            hidden: false
+          },
+          placeholderId: 'p',
+          sectionId: 's',
+          ...extra
+        } as never)}
+      />
+    </ThemePageContextProvider>
+  );
+
+const trigger = (c: HTMLElement) =>
+  c.querySelector('[data-store-locator-trigger]') as HTMLButtonElement;
+const panel = (c: HTMLElement) =>
+  c.querySelector('[data-store-locator-panel]') as HTMLElement | null;
+
+beforeEach(() => {
+  mockStores = GOLDEN_STORES;
+  mockCities = [];
+  mockStockRows = [];
+  mockStockRejects = false;
+  stockCalls.length = 0;
+  document.body.style.overflow = '';
+});
+
+describe('store locator — the list that already ships', () => {
+  it('renders the default composition byte for byte', () => {
+    expect(renderBlock({}).container.innerHTML).toBe(GOLDEN['default']);
+  });
+
+  it('renders the default composition in the designer byte for byte', () => {
+    expect(renderBlock({}, { isDesigner: true }).container.innerHTML).toBe(
+      GOLDEN['default-designer']
+    );
+  });
+
+  it('renders a sorted grid byte for byte', () => {
+    expect(
+      renderBlock({ columns: 2, columnsMobile: 2, sort: 'name' }).container
+        .innerHTML
+    ).toBe(GOLDEN['grid']);
+  });
+
+  it('renders a stripped-down list byte for byte', () => {
+    expect(
+      renderBlock({ showCityFilter: false, showMap: false, showPhone: false })
+        .container.innerHTML
+    ).toBe(GOLDEN['no-filter']);
+  });
+
+  it('renders the distance form byte for byte', () => {
+    expect(renderBlock({ showDistance: true }).container.innerHTML).toBe(
+      GOLDEN['distance']
+    );
+  });
+
+  it('adds nothing to the availability list but the notice route', () => {
+    // The one place the new work reaches an existing render, and it is a
+    // composition that had to opt into `productMode` to get there. Removing
+    // the added anchor has to leave the previous markup exactly.
+    const html = renderBlock(
+      { productMode: true, availabilityHelpUrl: 'https://brand.example/stores' },
+      {},
+      PRODUCT_CONTEXT
+    ).container.innerHTML;
+
+    const added =
+      '<a data-store-locator-notice-link="" data-part="notice-link" ' +
+      'href="https://brand.example/stores" style="font-size: 0.9em;">' +
+      'Check availability</a>';
+
+    expect(html).toContain(added);
+    expect(html.replace(added, '')).toBe(
+      "<div data-store-locator=\"\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px);\"><label data-store-locator-filter=\"\" data-part=\"filter\" style=\"display: inline-flex; align-items: center; gap: 8px;\"><span data-part=\"filter-label\">City</span><select data-part=\"select\" style=\"background: transparent; padding: 8px 10px;\"><option value=\"\">All cities</option><option value=\"Ankara\">Ankara</option><option value=\"İstanbul\">İstanbul</option><option value=\"İzmir\">İzmir</option></select></label><span data-store-locator-notice=\"\" data-part=\"notice\" style=\"font-size: 0.9em; opacity: 0.8;\">Pick a city to see stock for this product</span><ul data-part=\"list\" style=\"display: flex; flex-direction: column; gap: var(--store-locator-gap, 16px); list-style: none; margin: 0px; padding: 0px;\"><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Kanyon AVM</span><a data-store-locator-availability=\"\" data-store-locator-availability-state=\"unknown\" data-part=\"availability\" data-state=\"unknown\" href=\"https://brand.example/stores\" style=\"font-size: 0.85em;\">Check availability</a><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Büyükdere Cad. No:185</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İstanbul</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+902123531500\">+902123531500</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=41.0678,29.0092\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Ankamall</span><a data-store-locator-availability=\"\" data-store-locator-availability-state=\"unknown\" data-part=\"availability\" data-state=\"unknown\" href=\"https://brand.example/stores\" style=\"font-size: 0.85em;\">Check availability</a><span data-store-locator-address=\"\" data-part=\"address\" style=\"opacity: 0.8;\">Akköprü Mah.</span><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">Ankara</span><a data-store-locator-phone=\"\" data-part=\"phone\" href=\"tel:+903125411000\">+903125411000</a><a data-store-locator-map=\"\" data-part=\"map-link\" href=\"https://www.google.com/maps/search/?api=1&amp;query=39.9497,32.8241\" target=\"_blank\" rel=\"noopener noreferrer\">View on map</a></li><li data-store-locator-item=\"\" data-part=\"card\" style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;\"><span data-store-locator-name=\"\" data-part=\"name\" style=\"font-weight: 600;\">Merkez</span><a data-store-locator-availability=\"\" data-store-locator-availability-state=\"unknown\" data-part=\"availability\" data-state=\"unknown\" href=\"https://brand.example/stores\" style=\"font-size: 0.85em;\">Check availability</a><span data-store-locator-city=\"\" data-part=\"city\" style=\"opacity: 0.7;\">İzmir</span></li></ul></div>"
+    );
+  });
+});
+
+describe('store locator — find in store is a dialog', () => {
+  it('renders the trigger byte for byte', () => {
+    expect(
+      canonical(renderBlock({ displayMode: 'trigger' }).container.innerHTML)
+    ).toBe(canonical(GOLDEN['trigger']));
+  });
+
+  it('renders the open overlay byte for byte', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+    act(() => trigger(container).click());
+
+    expect(canonical(container.innerHTML)).toBe(
+      canonical(GOLDEN['trigger-open'])
+    );
+  });
+
+  it('renders the open overlay in the designer byte for byte', () => {
+    // Held open, placed as a side drawer, and — the line the golden exists to
+    // hold — with no `aria-modal`, because nothing traps focus on the canvas.
+    const { container } = renderBlock(
+      { displayMode: 'trigger', panelPlacement: 'right' },
+      { isDesigner: true }
+    );
+
+    expect(canonical(container.innerHTML)).toBe(
+      canonical(GOLDEN['trigger-open-designer'])
+    );
+  });
+
+  it('shows a trigger and nothing else until it is pressed', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+
+    expect(trigger(container)).toBeTruthy();
+    expect(trigger(container).getAttribute('aria-haspopup')).toBe('dialog');
+    expect(trigger(container).getAttribute('aria-expanded')).toBe('false');
+    expect(panel(container)).toBeNull();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('moves focus in, locks the page and claims aria-modal honestly', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+
+    act(() => {
+      trigger(container).click();
+    });
+
+    const dialog = panel(container) as HTMLElement;
+    expect(dialog.getAttribute('role')).toBe('dialog');
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.getAttribute('aria-label')).toBe('Find in store');
+    expect(trigger(container).getAttribute('aria-expanded')).toBe('true');
+    expect(dialog.contains(document.activeElement)).toBe(true);
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('holds Tab inside the dialog', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+    act(() => {
+      trigger(container).click();
+    });
+
+    const dialog = panel(container) as HTMLElement;
+    const focusables = Array.from(
+      dialog.querySelectorAll<HTMLElement>('a[href], button, select')
+    );
+    expect(focusables.length).toBeGreaterThan(1);
+
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    act(() => last.focus());
+    fireEvent.keyDown(dialog, { key: 'Tab' });
+    expect(document.activeElement).toBe(first);
+
+    fireEvent.keyDown(dialog, { key: 'Tab', shiftKey: true });
+    expect(document.activeElement).toBe(last);
+  });
+
+  it('pulls focus back when it lands outside the dialog', () => {
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    const { container } = renderBlock({ displayMode: 'trigger' });
+    act(() => {
+      trigger(container).click();
+    });
+
+    const dialog = panel(container) as HTMLElement;
+    act(() => outside.focus());
+
+    expect(dialog.contains(document.activeElement)).toBe(true);
+    outside.remove();
+  });
+
+  it('closes on Escape and gives focus back to the trigger', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+    act(() => {
+      trigger(container).click();
+    });
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+
+    expect(panel(container)).toBeNull();
+    expect(document.activeElement).toBe(trigger(container));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('closes on the close button and on the backdrop', () => {
+    const { container } = renderBlock({ displayMode: 'trigger' });
+
+    act(() => trigger(container).click());
+    act(() => {
+      (
+        container.querySelector(
+          '[data-store-locator-panel-close]'
+        ) as HTMLElement
+      ).click();
+    });
+    expect(panel(container)).toBeNull();
+
+    act(() => trigger(container).click());
+    act(() => {
+      (
+        container.querySelector('[data-store-locator-backdrop]') as HTMLElement
+      ).click();
+    });
+    expect(panel(container)).toBeNull();
+  });
+
+  it('counts the holders of the scroll lock', () => {
+    // Two panels on one page is the ordinary composition, not a corner case:
+    // the mobile buy row carries one and the desktop one carries another.
+    const a = renderBlock({ displayMode: 'trigger' });
+    const b = renderBlock({ displayMode: 'trigger' });
+
+    act(() => trigger(a.container).click());
+    act(() => trigger(b.container).click());
+    expect(document.body.style.overflow).toBe('hidden');
+
+    b.unmount();
+    // The first panel is still over the page, so the lock is not the second
+    // panel's to release.
+    expect(document.body.style.overflow).toBe('hidden');
+
+    a.unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('survives a second panel on the same page', () => {
+    // A product page carries this block twice — once on the mobile buy row and
+    // once on the desktop one — so two open panels is the ordinary
+    // composition. Each used to install a document-level `focusin` listener
+    // that pulled focus into its OWN panel, so the two pulled against each
+    // other until the tab died with "Maximum call stack size exceeded".
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    const a = renderBlock({ displayMode: 'trigger' });
+    const b = renderBlock({ displayMode: 'trigger' });
+
+    act(() => trigger(a.container).click());
+    act(() => trigger(b.container).click());
+
+    expect(() => act(() => outside.focus())).not.toThrow();
+
+    const second = panel(b.container) as HTMLElement;
+    // The panel a shopper opened last is the one holding focus.
+    expect(second.contains(document.activeElement)).toBe(true);
+    // And only that one may tell assistive tech the rest of the page is gone.
+    expect(second.getAttribute('aria-modal')).toBe('true');
+    expect(
+      (panel(a.container) as HTMLElement).getAttribute('aria-modal')
+    ).toBeNull();
+
+    outside.remove();
+  });
+
+  it('closes the panel on top and leaves the one underneath open', () => {
+    const a = renderBlock({ displayMode: 'trigger' });
+    const b = renderBlock({ displayMode: 'trigger' });
+
+    act(() => trigger(a.container).click());
+    act(() => trigger(b.container).click());
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+
+    expect(panel(b.container)).toBeNull();
+    expect(panel(a.container)).toBeTruthy();
+    // Escape backed out of one panel, not out of every panel on the page — so
+    // the page stays frozen behind the one still covering it, and that one
+    // takes the claim back now that it is on top.
+    expect(document.body.style.overflow).toBe('hidden');
+    expect(
+      (panel(a.container) as HTMLElement).getAttribute('aria-modal')
+    ).toBe('true');
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+
+    expect(panel(a.container)).toBeNull();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores the page value the first locker found, not an empty one', () => {
+    document.body.style.overflow = 'clip';
+
+    const { container } = renderBlock({ displayMode: 'trigger' });
+    act(() => trigger(container).click());
+    expect(document.body.style.overflow).toBe('hidden');
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+    expect(document.body.style.overflow).toBe('clip');
+  });
+});
+
+describe('store locator — the designer is not a shopper', () => {
+  it('holds the panel open without claiming it, locking or stealing focus', () => {
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+    act(() => outside.focus());
+
+    const { container } = renderBlock(
+      { displayMode: 'trigger' },
+      { isDesigner: true }
+    );
+
+    const dialog = panel(container) as HTMLElement;
+    expect(dialog).toBeTruthy();
+    expect(dialog.getAttribute('aria-modal')).toBeNull();
+    expect(document.activeElement).toBe(outside);
+    expect(document.body.style.overflow).toBe('');
+
+    // Nothing a click reaches may close the panel being styled.
+    act(() => trigger(container).click());
+    act(() =>
+      (
+        container.querySelector(
+          '[data-store-locator-panel-close]'
+        ) as HTMLElement
+      ).click()
+    );
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+    expect(panel(container)).toBeTruthy();
+
+    outside.remove();
+  });
+
+  it('asks commerce nothing and lets no link navigate', () => {
+    const { container } = renderBlock(
+      {
+        displayMode: 'trigger',
+        productMode: true,
+        availabilityHelpUrl: 'https://brand.example/stores'
+      },
+      { isDesigner: true },
+      PRODUCT_CONTEXT
+    );
+
+    expect(stockCalls).toHaveLength(0);
+    container
+      .querySelectorAll('a[href]')
+      .forEach((anchor) => expect(anchor.getAttribute('href')).toBe('#'));
+  });
+});
+
+describe('store locator — an unasked store is unknown, not unavailable', () => {
+  const AVAILABILITY_PROPS = {
+    productMode: true,
+    availabilityHelpUrl: 'https://brand.example/stores'
+  };
+
+  const markers = (c: HTMLElement) =>
+    Object.fromEntries(
+      Array.from(
+        c.querySelectorAll('[data-store-locator-item]')
+      ).map((card) => [
+        card.querySelector('[data-part="name"]')?.textContent,
+        card
+          .querySelector('[data-store-locator-availability]')
+          ?.getAttribute('data-store-locator-availability-state')
+      ])
+    );
+
+  beforeEach(() => {
+    mockStores = [
+      ...GOLDEN_STORES,
+      {
+        pk: 4,
+        name: 'Akasya',
+        address: 'Acıbadem',
+        latitude: '40.9910',
+        longitude: '29.0630',
+        township: { name: 'Üsküdar', city: { name: 'İstanbul' } }
+      }
+    ];
+    mockCities = [{ pk: 34, name: 'İstanbul' }];
+  });
+
+  const chooseIstanbul = (container: HTMLElement) =>
+    fireEvent.change(container.querySelector('select') as HTMLSelectElement, {
+      target: { value: 'İstanbul' }
+    });
+
+  it('marks only what the city answer actually mentioned', async () => {
+    mockStockRows = [{ name: 'Kanyon AVM', stock: '3' }];
+
+    const { container } = renderBlock(AVAILABILITY_PROPS, {}, PRODUCT_CONTEXT);
+    chooseIstanbul(container);
+
+    await waitFor(() =>
+      expect(markers(container)['Kanyon AVM']).toBe('available')
+    );
+    // Akasya is in the answered city and the answer never named it. That is
+    // not a no — it is a question nobody asked.
+    expect(markers(container)['Akasya']).toBe('unknown');
+    expect(
+      container.querySelector(
+        '[data-store-locator-availability-state="unavailable"]'
+      )
+    ).toBeNull();
+  });
+
+  it('says unavailable only when commerce said zero', async () => {
+    mockStockRows = [
+      { name: 'Kanyon AVM', stock: '0' },
+      { name: 'Akasya', stock: 'n/a' }
+    ];
+
+    const { container } = renderBlock(AVAILABILITY_PROPS, {}, PRODUCT_CONTEXT);
+    chooseIstanbul(container);
+
+    await waitFor(() =>
+      expect(markers(container)['Kanyon AVM']).toBe('unavailable')
+    );
+    // A count commerce could not express is not a zero either.
+    expect(markers(container)['Akasya']).toBe('unknown');
+  });
+
+  it('keeps every store unknown when the request fails', async () => {
+    mockStockRejects = true;
+
+    const { container } = renderBlock(AVAILABILITY_PROPS, {}, PRODUCT_CONTEXT);
+    chooseIstanbul(container);
+
+    await waitFor(() => expect(markers(container)['Kanyon AVM']).toBe('unknown'));
+    expect(markers(container)['Akasya']).toBe('unknown');
+  });
+
+  it('gives the unknown marker its own state to be styled by', async () => {
+    mockStockRows = [{ name: 'Kanyon AVM', stock: '3' }];
+
+    const { container } = renderBlock(AVAILABILITY_PROPS, {}, PRODUCT_CONTEXT);
+    chooseIstanbul(container);
+
+    await waitFor(() =>
+      expect(markers(container)['Kanyon AVM']).toBe('available')
+    );
+
+    const unknown = Array.from(
+      container.querySelectorAll('[data-part="availability"]')
+    ).filter((el) => el.getAttribute('data-state') === 'unknown');
+    const unavailable = Array.from(
+      container.querySelectorAll('[data-part="availability"]')
+    ).filter((el) => el.getAttribute('data-state') === 'unavailable');
+
+    expect(unknown.length).toBeGreaterThan(0);
+    expect(unavailable).toHaveLength(0);
+    // The unknown state carries the brand's route rather than a dead label.
+    expect(unknown[0].tagName).toBe('A');
+    expect(unknown[0].getAttribute('href')).toBe('https://brand.example/stores');
+  });
+});
+
+describe('store locator — the check-availability route reaches the overlay', () => {
+  it('offers the route beside the notice, inside the panel', () => {
+    const { container } = renderBlock(
+      {
+        displayMode: 'trigger',
+        productMode: true,
+        availabilityHelpUrl: 'https://brand.example/stores'
+      },
+      {},
+      PRODUCT_CONTEXT
+    );
+
+    act(() => trigger(container).click());
+
+    const dialog = panel(container) as HTMLElement;
+    const route = dialog.querySelector(
+      '[data-store-locator-notice-link]'
+    ) as HTMLAnchorElement;
+
+    expect(dialog.querySelector('[data-store-locator-notice]')).toBeTruthy();
+    expect(route).toBeTruthy();
+    expect(route.getAttribute('href')).toBe('https://brand.example/stores');
+    // Same wording as the unknown marker — one authorable label, not two.
+    expect(route.textContent).toBe('Check availability');
+  });
+
+  it('offers it when the overlay has no store to show at all', () => {
+    mockStores = [];
+
+    const { container } = renderBlock(
+      {
+        displayMode: 'trigger',
+        productMode: true,
+        availabilityHelpUrl: 'https://brand.example/stores'
+      },
+      {},
+      PRODUCT_CONTEXT
+    );
+
+    act(() => trigger(container).click());
+
+    const dialog = panel(container) as HTMLElement;
+    expect(dialog.querySelector('[data-part="empty"]')).toBeTruthy();
+    expect(
+      dialog
+        .querySelector('[data-store-locator-notice-link]')
+        ?.getAttribute('href')
+    ).toBe('https://brand.example/stores');
+  });
+
+  it('stays out of the empty message a plain store list renders', () => {
+    mockStores = [];
+
+    const { container } = renderBlock({ showEmptyState: true });
+
+    expect(container.querySelector('[data-part="empty"]')).toBeTruthy();
+    expect(container.querySelector('[data-store-locator-notice-link]')).toBeNull();
+  });
+
+  it('refuses a url that would execute', () => {
+    // The url is typed by a merchant in the editor and lands in an href.
+    const { container } = renderBlock(
+      {
+        productMode: true,
+        availabilityHelpUrl: 'java\u0000script:alert(1)'
+      },
+      {},
+      PRODUCT_CONTEXT
+    );
+
+    expect(container.querySelector('[data-store-locator-notice-link]')).toBeNull();
+    expect(container.querySelector('a[href^="java"]')).toBeNull();
+    // The label survives as text, which is what an unset url does too.
+    const marker = container.querySelector('[data-part="availability"]');
+    expect(marker?.tagName).toBe('SPAN');
+    expect(marker?.textContent).toBe('Check availability');
+  });
+});