From 30f14242cf38502f595a0e203415767a26e88194 Mon Sep 17 00:00:00 2001
From: Ben Peter <benp@adobe.com>
Date: Sat, 25 Jul 2026 11:00:02 +0200
Subject: [PATCH] Wire the tire finder to a product catalogue and add product
 pages support

Add products.json, a 13-product catalogue captured from the live site with
name, category, season, vehicle types, image, description, features, and tire
sizes. It is served from the code bus at /products.json.

Rewrite the perfect-fit tire finder to search that catalogue. By Tire Size
offers cascading width, aspect, and rim menus built from the real sizes, and
returns every product available in the chosen size. By Vehicle maps a curated
make and model set to a vehicle class and returns the tires that fit it. By
Plate recommends the all-weather range. Results render as product cards that
link to /tires/<slug>.

Add a size-list block that renders authored tire sizes as chips, used by the
product pages.

Tested: npm test covers size parsing, the cascading option builder, size and
vehicle-class matching, the modal, and the size-list block. Live-tested on a
local aem up server. By Tire Size 225/35R19 returns ExtremeContact Sport 02,
By Vehicle Ford Explorer returns 9 SUV-fitting tires, and a product page
renders hero, overview, features, and size chips.
---
 blocks/perfect-fit/perfect-fit.css          |  74 +++
 blocks/perfect-fit/perfect-fit.js           | 309 ++++++---
 blocks/size-list/size-list.css              |  22 +
 blocks/size-list/size-list.js               |  20 +
 products.json                               | 685 ++++++++++++++++++++
 test/blocks/perfect-fit/perfect-fit.test.js | 132 ++--
 test/blocks/size-list/size-list.test.js     |  22 +
 7 files changed, 1133 insertions(+), 131 deletions(-)
 create mode 100644 blocks/size-list/size-list.css
 create mode 100644 blocks/size-list/size-list.js
 create mode 100644 products.json
 create mode 100644 test/blocks/size-list/size-list.test.js

diff --git a/blocks/perfect-fit/perfect-fit.css b/blocks/perfect-fit/perfect-fit.css
index 82aaeb4..ce913c3 100644
--- a/blocks/perfect-fit/perfect-fit.css
+++ b/blocks/perfect-fit/perfect-fit.css
@@ -216,3 +216,77 @@ body.perfect-fit-modal-open {
     grid-column: 1 / -1;
   }
 }
+
+/* search results */
+.perfect-fit-results:empty {
+  display: none;
+}
+
+.perfect-fit-result-count {
+  margin: 24px 0 12px;
+  font-family: var(--heading-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--conti-darkest-grey);
+}
+
+.perfect-fit-results-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (width >= 600px) {
+  .perfect-fit-results-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.perfect-fit-result {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px;
+  border: 1px solid var(--conti-lightest-grey);
+  border-radius: 8px;
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.perfect-fit-result:hover,
+.perfect-fit-result:focus-visible {
+  border-color: var(--conti-yellow);
+  background-color: var(--conti-lightest-grey);
+}
+
+.perfect-fit-result-media {
+  flex: none;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.perfect-fit-result .perfect-fit-result-media img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.perfect-fit-result-body h4 {
+  margin: 0;
+  font-family: var(--body-font-family);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.perfect-fit-result-body p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--conti-darkest-grey);
+}
diff --git a/blocks/perfect-fit/perfect-fit.js b/blocks/perfect-fit/perfect-fit.js
index a3def8e..22cebd7 100644
--- a/blocks/perfect-fit/perfect-fit.js
+++ b/blocks/perfect-fit/perfect-fit.js
@@ -1,121 +1,256 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
 /**
- * "Find your perfect fit:" bar plus its tire-finder modal. The bar's three
- * items open the modal on a matching tab (By Vehicle / By Tire Size / By
- * Plate); each tab is a simple, non-functional sample search form.
+ * "Find your perfect fit:" bar plus its tire-finder modal. The three items
+ * open the modal on a matching tab (By Vehicle / By Tire Size / By Plate).
+ * Each tab searches the real product catalogue in /products.json and lists
+ * the matching tires.
  */
 
+const PRODUCTS_URL = '/products.json';
+
 const TABS = [
   { id: 'vehicle', label: 'By Vehicle' },
   { id: 'tire-size', label: 'By Tire Size' },
   { id: 'plate', label: 'By Plate' },
 ];
 
-function range(start, end, step = 1) {
-  const values = [];
-  for (let n = start; n <= end; n += step) values.push(n);
-  return values;
-}
+// A small curated vehicle set. Each model maps to a coarse class that lines
+// up with the vehicleTypes recorded in products.json.
+const VEHICLES = {
+  Chevrolet: { 'Silverado 1500': 'truck', Equinox: 'crossover', Malibu: 'car' },
+  Ford: { 'F-150': 'truck', Explorer: 'suv', Escape: 'crossover' },
+  Toyota: { RAV4: 'crossover', Camry: 'car', Tacoma: 'truck' },
+  BMW: { X5: 'suv', '3 Series': 'car', X3: 'crossover' },
+  Honda: { 'CR-V': 'crossover', Civic: 'car', Pilot: 'suv' },
+  Tesla: { 'Model 3': 'car', 'Model Y': 'crossover' },
+};
+const STATES = ['California', 'Florida', 'Illinois', 'New York', 'Ohio', 'Texas'];
 
+function range(start, end) {
+  const out = [];
+  for (let n = start; n <= end; n += 1) out.push(n);
+  return out;
+}
 const YEARS = range(2015, 2026).reverse();
-const MAKES = ['Chevrolet', 'Ford', 'Toyota', 'BMW', 'Honda'];
-const WIDTHS = range(185, 315, 10);
-const ASPECT_RATIOS = range(40, 75, 5);
-const RIM_DIAMETERS = range(15, 22);
-const STATES = ['California', 'Florida', 'Illinois', 'New York', 'Ohio', 'Texas'];
 
-/**
- * Builds a labelled `<select>` or `<input>` field.
- * @returns {{ wrapper: Element, field: Element }}
- */
-function createField(tag, id, labelText) {
+// --- pure data helpers (exported for tests) ---
+
+/** Parses "225/45ZR17" into its width, aspect and rim, or null. */
+export function parseSize(str) {
+  const m = String(str).toUpperCase().match(/^(\d{3})\/(\d{2})Z?R(\d{2})$/);
+  return m ? { width: m[1], aspect: m[2], rim: m[3] } : null;
+}
+
+/** Builds cascading width / aspect / rim option lists from every size. */
+export function sizeOptions(products) {
+  const widths = new Set();
+  const aspectsByWidth = {};
+  const rimsByWidthAspect = {};
+  products.forEach((product) => (product.sizes || []).forEach((size) => {
+    const parsed = parseSize(size);
+    if (!parsed) return;
+    widths.add(parsed.width);
+    if (!aspectsByWidth[parsed.width]) aspectsByWidth[parsed.width] = new Set();
+    aspectsByWidth[parsed.width].add(parsed.aspect);
+    const key = `${parsed.width}/${parsed.aspect}`;
+    if (!rimsByWidthAspect[key]) rimsByWidthAspect[key] = new Set();
+    rimsByWidthAspect[key].add(parsed.rim);
+  }));
+  const num = (a, b) => Number(a) - Number(b);
+  const sortEntries = (obj) => Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => [k, [...v].sort(num)]),
+  );
+  return {
+    widths: [...widths].sort(num),
+    aspectsByWidth: sortEntries(aspectsByWidth),
+    rimsByWidthAspect: sortEntries(rimsByWidthAspect),
+  };
+}
+
+/** All products available in the exact width / aspect / rim size. */
+export function findBySize(products, { width, aspect, rim }) {
+  return products.filter((product) => (product.sizes || []).some((size) => {
+    const parsed = parseSize(size);
+    return parsed && parsed.width === width && parsed.aspect === aspect && parsed.rim === rim;
+  }));
+}
+
+/** All products whose vehicleTypes match a coarse vehicle class keyword. */
+export function findByVehicleClass(products, vehicleClass) {
+  if (!vehicleClass) return [];
+  return products.filter((product) => (product.vehicleTypes || []).some(
+    (type) => type.toLowerCase().includes(vehicleClass),
+  ));
+}
+
+// --- DOM helpers ---
+
+function createField(tag, name, labelText) {
   const wrapper = document.createElement('div');
   wrapper.className = 'perfect-fit-field';
+  const id = `perfect-fit-${name}`;
   const label = document.createElement('label');
   label.setAttribute('for', id);
   label.textContent = labelText;
   const field = document.createElement(tag);
   field.id = id;
-  field.name = id;
+  field.name = name;
   wrapper.append(label, field);
   return { wrapper, field };
 }
 
-/** Fills a `<select>` with a disabled placeholder plus one option per value. */
-function populateSelect(select, values, placeholder) {
-  const placeholderOption = document.createElement('option');
-  placeholderOption.value = '';
-  placeholderOption.textContent = placeholder;
-  placeholderOption.disabled = true;
-  placeholderOption.selected = true;
-  select.append(placeholderOption, ...values.map((value) => {
-    const option = document.createElement('option');
-    option.value = value;
-    option.textContent = value;
-    return option;
+function fillSelect(select, values, placeholder) {
+  const ph = document.createElement('option');
+  ph.value = '';
+  ph.textContent = placeholder;
+  ph.disabled = true;
+  ph.selected = true;
+  select.replaceChildren(ph, ...values.map((value) => {
+    const opt = document.createElement('option');
+    opt.value = value;
+    opt.textContent = value;
+    return opt;
   }));
 }
 
-function buildSearchButton() {
+function searchButton() {
   const button = document.createElement('button');
   button.type = 'submit';
-  button.className = 'button primary';
+  button.className = 'button primary perfect-fit-search';
   button.textContent = 'Search';
   return button;
 }
 
-function buildForm(fields) {
+function productCard(product) {
+  const card = document.createElement('a');
+  card.className = 'perfect-fit-result';
+  card.href = `/tires/${product.slug}`;
+  const media = document.createElement('div');
+  media.className = 'perfect-fit-result-media';
+  if (product.image) {
+    media.append(createOptimizedPicture(product.image, product.name, false, [{ width: '400' }]));
+  }
+  const body = document.createElement('div');
+  body.className = 'perfect-fit-result-body';
+  const heading = document.createElement('h4');
+  heading.textContent = product.name;
+  const meta = document.createElement('p');
+  meta.textContent = [product.category, product.season].filter(Boolean).join(' · ');
+  body.append(heading, meta);
+  card.append(media, body);
+  return card;
+}
+
+function renderResults(container, products) {
+  const count = document.createElement('p');
+  count.className = 'perfect-fit-result-count';
+  if (!products.length) {
+    count.textContent = 'No matching tires found. Try another combination.';
+    container.replaceChildren(count);
+    return;
+  }
+  count.textContent = `${products.length} matching ${products.length === 1 ? 'tire' : 'tires'}`;
+  const list = document.createElement('div');
+  list.className = 'perfect-fit-results-list';
+  products.forEach((product) => list.append(productCard(product)));
+  container.replaceChildren(count, list);
+}
+
+function buildTireSizeForm(products, onResults) {
+  const opts = sizeOptions(products);
   const form = document.createElement('form');
   form.className = 'perfect-fit-form';
-  form.action = '/tires';
-  form.append(...fields, buildSearchButton());
-  return form;
-}
+  const width = createField('select', 'width', 'Width');
+  fillSelect(width.field, opts.widths, 'Width');
+  const aspect = createField('select', 'aspect', 'Aspect Ratio');
+  fillSelect(aspect.field, [], 'Aspect Ratio');
+  aspect.field.disabled = true;
+  const rim = createField('select', 'rim', 'Rim Diameter');
+  fillSelect(rim.field, [], 'Rim Diameter');
+  rim.field.disabled = true;
+
+  width.field.addEventListener('change', () => {
+    fillSelect(aspect.field, opts.aspectsByWidth[width.field.value] || [], 'Aspect Ratio');
+    aspect.field.disabled = false;
+    fillSelect(rim.field, [], 'Rim Diameter');
+    rim.field.disabled = true;
+  });
+  aspect.field.addEventListener('change', () => {
+    fillSelect(rim.field, opts.rimsByWidthAspect[`${width.field.value}/${aspect.field.value}`] || [], 'Rim Diameter');
+    rim.field.disabled = false;
+  });
 
-function buildVehicleForm() {
-  const year = createField('select', 'perfect-fit-year', 'Year');
-  populateSelect(year.field, YEARS, 'Select year');
-  const make = createField('select', 'perfect-fit-make', 'Make');
-  populateSelect(make.field, MAKES, 'Select make');
-  const model = createField('select', 'perfect-fit-model', 'Model');
-  populateSelect(model.field, [], 'Select...');
-  const trim = createField('select', 'perfect-fit-trim', 'Trim');
-  populateSelect(trim.field, [], 'Select...');
-  return buildForm([year.wrapper, make.wrapper, model.wrapper, trim.wrapper]);
+  form.append(width.wrapper, aspect.wrapper, rim.wrapper, searchButton());
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    if (!width.field.value || !aspect.field.value || !rim.field.value) return;
+    onResults(findBySize(products, {
+      width: width.field.value, aspect: aspect.field.value, rim: rim.field.value,
+    }));
+  });
+  return form;
 }
 
-function buildTireSizeForm() {
-  const width = createField('select', 'perfect-fit-width', 'Width');
-  populateSelect(width.field, WIDTHS, 'Select width');
-  const aspectRatio = createField('select', 'perfect-fit-aspect-ratio', 'Aspect Ratio');
-  populateSelect(aspectRatio.field, ASPECT_RATIOS, 'Select ratio');
-  const rim = createField('select', 'perfect-fit-rim', 'Rim Diameter');
-  populateSelect(rim.field, RIM_DIAMETERS, 'Select diameter');
-  return buildForm([width.wrapper, aspectRatio.wrapper, rim.wrapper]);
+function buildVehicleForm(products, onResults) {
+  const form = document.createElement('form');
+  form.className = 'perfect-fit-form';
+  const year = createField('select', 'year', 'Year');
+  fillSelect(year.field, YEARS, 'Year');
+  const make = createField('select', 'make', 'Make');
+  fillSelect(make.field, Object.keys(VEHICLES), 'Make');
+  const model = createField('select', 'model', 'Model');
+  fillSelect(model.field, [], 'Model');
+  model.field.disabled = true;
+  make.field.addEventListener('change', () => {
+    fillSelect(model.field, Object.keys(VEHICLES[make.field.value] || {}), 'Model');
+    model.field.disabled = false;
+  });
+  form.append(year.wrapper, make.wrapper, model.wrapper, searchButton());
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const vehicleClass = (VEHICLES[make.field.value] || {})[model.field.value];
+    onResults(findByVehicleClass(products, vehicleClass));
+  });
+  return form;
 }
 
-function buildPlateForm() {
-  const plate = createField('input', 'perfect-fit-plate', 'License Plate');
+function buildPlateForm(products, onResults) {
+  const form = document.createElement('form');
+  form.className = 'perfect-fit-form';
+  const plate = createField('input', 'plate', 'License Plate');
   plate.field.type = 'text';
   plate.field.autocomplete = 'off';
-  const state = createField('select', 'perfect-fit-state', 'State');
-  populateSelect(state.field, STATES, 'Select state');
-  return buildForm([plate.wrapper, state.wrapper]);
+  const state = createField('select', 'state', 'State');
+  fillSelect(state.field, STATES, 'State');
+  form.append(plate.wrapper, state.wrapper, searchButton());
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    // plate lookup is not wired to a registration service, so recommend the
+    // all-weather touring range as a sensible default
+    onResults(products.filter((product) => /all-season|all-weather/i.test(product.season || '')));
+  });
+  return form;
 }
 
+const FORM_BUILDERS = {
+  vehicle: buildVehicleForm,
+  'tire-size': buildTireSizeForm,
+  plate: buildPlateForm,
+};
+
 /** Keyboard-focusable elements in `container`, ignoring hidden tab panels. */
 function getFocusable(container) {
-  const candidates = [...container.querySelectorAll('button, input, select, textarea')];
-  return candidates.filter((el) => (
-    !el.disabled && el.tabIndex !== -1 && !el.closest('[hidden]')
-  ));
+  return [...container.querySelectorAll('a[href], button, input, select, textarea')]
+    .filter((el) => !el.disabled && el.tabIndex !== -1 && !el.closest('[hidden]'));
 }
 
 /**
- * Builds the tire-finder modal (overlay, tabs, one form per tab) and wires
- * its interactions. Detached from the DOM; the caller appends `overlay`.
+ * Builds the tire-finder modal (overlay, tabs, one search form per tab) and
+ * wires its interactions. Detached from the DOM; the caller appends `overlay`.
  * @returns {{ overlay: Element, open: Function }}
  */
-function buildModal() {
+function buildModal(products) {
   const overlay = document.createElement('div');
   overlay.className = 'perfect-fit-overlay';
   overlay.hidden = true;
@@ -145,11 +280,6 @@ function buildModal() {
   const panelsWrapper = document.createElement('div');
   panelsWrapper.className = 'perfect-fit-panels';
 
-  const forms = {
-    vehicle: buildVehicleForm,
-    'tire-size': buildTireSizeForm,
-    plate: buildPlateForm,
-  };
   const tabs = {};
   const panels = {};
 
@@ -171,7 +301,10 @@ function buildModal() {
     panel.setAttribute('role', 'tabpanel');
     panel.setAttribute('aria-labelledby', tab.id);
     panel.hidden = true;
-    panel.append(forms[id]());
+
+    const results = document.createElement('div');
+    results.className = 'perfect-fit-results';
+    panel.append(FORM_BUILDERS[id](products, (found) => renderResults(results, found)), results);
     panelsWrapper.append(panel);
     panels[id] = panel;
   });
@@ -201,15 +334,13 @@ function buildModal() {
     switchTab(tabId);
     overlay.hidden = false;
     document.body.classList.add('perfect-fit-modal-open');
-    const focusable = getFocusable(panels[tabId]);
-    (focusable[0] || closeButton).focus();
+    (getFocusable(panels[tabId])[0] || closeButton).focus();
   }
 
   closeButton.addEventListener('click', close);
   overlay.addEventListener('click', (event) => {
     if (event.target === overlay) close();
   });
-  dialog.addEventListener('submit', (event) => event.preventDefault());
   dialog.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
       close();
@@ -229,9 +360,7 @@ function buildModal() {
     }
   });
 
-  TABS.forEach(({ id }) => {
-    tabs[id].addEventListener('click', () => switchTab(id));
-  });
+  TABS.forEach(({ id }) => tabs[id].addEventListener('click', () => switchTab(id)));
   tablist.addEventListener('keydown', (event) => {
     if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
     const ids = TABS.map(({ id }) => id);
@@ -248,19 +377,25 @@ function buildModal() {
 }
 
 /**
- * "Find your perfect fit:" bar: a label followed by a row of icon+label
- * shortcut buttons. Each button opens the tire-finder modal on the matching
- * tab. Authoring is unchanged: first row is the label, second row's cells
- * are the items.
+ * "Find your perfect fit:" bar: a label plus a row of shortcut buttons. Each
+ * opens the tire-finder modal on the matching tab. The catalogue is loaded
+ * from /products.json once, up front.
  * @param {Element} block the perfect-fit block
  */
-export default function decorate(block) {
+export default async function decorate(block) {
   const [labelRow, itemsRow] = [...block.children];
-
   const label = labelRow ? labelRow.querySelector('p') : null;
   if (label) label.className = 'perfect-fit-label';
 
-  const modal = buildModal();
+  let products = [];
+  try {
+    const resp = await fetch(PRODUCTS_URL);
+    if (resp.ok) ({ products = [] } = await resp.json());
+  } catch (e) {
+    products = [];
+  }
+
+  const modal = buildModal(products);
 
   const list = document.createElement('ul');
   list.className = 'perfect-fit-items';
diff --git a/blocks/size-list/size-list.css b/blocks/size-list/size-list.css
new file mode 100644
index 0000000..a6e2ae9
--- /dev/null
+++ b/blocks/size-list/size-list.css
@@ -0,0 +1,22 @@
+.size-list-chips {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.size-list-chips .size-chip {
+  margin: 0;
+  padding: 6px 12px;
+  border: 1px solid var(--conti-lightest-grey);
+  border-radius: 4px;
+  background-color: var(--conti-white);
+  font-family: var(--body-font-family);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: var(--conti-darkest-grey);
+  white-space: nowrap;
+}
diff --git a/blocks/size-list/size-list.js b/blocks/size-list/size-list.js
new file mode 100644
index 0000000..d07e68e
--- /dev/null
+++ b/blocks/size-list/size-list.js
@@ -0,0 +1,20 @@
+/**
+ * Size list: renders authored tire sizes as a wrapped grid of chips. Sizes
+ * are authored as a list, one size per item.
+ * @param {Element} block the size-list block
+ */
+export default function decorate(block) {
+  const items = [...block.querySelectorAll('li')];
+  const sizes = items.length
+    ? items.map((li) => li.textContent.trim())
+    : block.textContent.split(',').map((s) => s.trim());
+  const list = document.createElement('ul');
+  list.className = 'size-list-chips';
+  sizes.filter(Boolean).forEach((size) => {
+    const chip = document.createElement('li');
+    chip.className = 'size-chip';
+    chip.textContent = size;
+    list.append(chip);
+  });
+  block.replaceChildren(list);
+}
diff --git a/products.json b/products.json
new file mode 100644
index 0000000..80a713c
--- /dev/null
+++ b/products.json
@@ -0,0 +1,685 @@
+{
+  "products": [
+    {
+      "slug": "crosscontact-lx25",
+      "name": "CrossContact LX25",
+      "category": "Crossover",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Crossovers",
+        "SUVs",
+        "Light Trucks",
+        "Electric Vehicles"
+      ],
+      "tagline": "Premium all-season touring for crossovers and SUVs",
+      "description": "A premium, all-season touring tire for crossovers and SUVs, this tire provides fuel savings, optimized range, shorter stopping distances on wet roads, and extended tread.",
+      "features": [
+        "EcoPlus technology for fuel savings and optimized EV range",
+        "Shorter stopping distances on wet roads",
+        "Extended tread life",
+        "QuickView visual tread-wear indicators",
+        "Premium all-season touring comfort",
+        "Available in Outlined White Letter (OWL) and Black Sidewall (BSW)"
+      ],
+      "warranty": "",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2020-08/crosscontactlx25_lt3q_rd.png",
+      "sizes": [
+        "215/70R16",
+        "225/65R17",
+        "235/65R17",
+        "235/60R18",
+        "245/60R18",
+        "255/55R18",
+        "235/55R19",
+        "245/55R19",
+        "255/50R19",
+        "235/55R20",
+        "255/50R20",
+        "275/45R20"
+      ],
+      "sizesAreReal": false
+    },
+    {
+      "slug": "extremecontact-dws06-plus",
+      "name": "ExtremeContact DWS06 Plus",
+      "category": "Passenger",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "SUVs",
+        "Light Trucks",
+        "Electric Vehicles"
+      ],
+      "tagline": "Ultra-high performance all-season confidence in dry, wet, and snow",
+      "description": "A premium all-season ultra-high performance tire with true, year-round traction, this tire provides responsive handling and better grip on wet roads.",
+      "features": [
+        "Tuned Performance Indicators (DWS) show dry, wet, and snow tread wear",
+        "SportPlus technology for responsive handling",
+        "Better grip on wet roads",
+        "Extended treadlife",
+        "QuickView Indicators for at-a-glance performance",
+        "True year-round all-season traction, including light snow"
+      ],
+      "warranty": "50,000 miles",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2021-01/ExtremeContactDWS06Plus_Lt3Q.png?itok=HcPJaRju",
+      "sizes": [
+        "195/50ZR16",
+        "205/50ZR17",
+        "215/45ZR18",
+        "225/45ZR19",
+        "235/40ZR19",
+        "245/40ZR20",
+        "255/35ZR20",
+        "265/35ZR22",
+        "275/40ZR20",
+        "285/30ZR22",
+        "295/40ZR21",
+        "305/30ZR21",
+        "315/35ZR20",
+        "335/25ZR20"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "extremecontact-force",
+      "name": "ExtremeContact Force",
+      "category": "Passenger",
+      "season": "Summer",
+      "vehicleTypes": [
+        "Cars",
+        "Sports Cars",
+        "Track/Competition Cars",
+        "Electric Vehicles"
+      ],
+      "tagline": "Ultimate summer performance built for the track",
+      "description": "An ultra-high performance competition tire, ideal for endurance racing. SportPlus Technology provides responsive handling, better grip and extended tread life.",
+      "features": [
+        "SportPlus Technology for responsive handling",
+        "Ultra-high performance summer compound",
+        "Better grip on wet roads",
+        "Extended treadlife",
+        "Built for endurance racing and track use",
+        "EV-ready construction"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2021-05/ExtremeContactForce_BSW_0.png?itok=GKgx_IB2",
+      "sizes": [
+        "205/50R15",
+        "225/45R15",
+        "245/40R15",
+        "225/40ZR17",
+        "225/45ZR17",
+        "245/40ZR17",
+        "255/40ZR17",
+        "245/35ZR18",
+        "245/40ZR18",
+        "275/35ZR18",
+        "295/30ZR18",
+        "315/30ZR18",
+        "235/35ZR19",
+        "265/35ZR19",
+        "295/30ZR19",
+        "315/30ZR19",
+        "325/30ZR19",
+        "305/30ZR20"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "extremecontact-sport-02",
+      "name": "ExtremeContact Sport 02",
+      "category": "Passenger",
+      "season": "Summer",
+      "vehicleTypes": [
+        "Cars",
+        "Sports Cars",
+        "Coupes",
+        "Sedans",
+        "Electric Vehicles"
+      ],
+      "tagline": "Ultra-high performance built for the street and the track",
+      "description": "The ExtremeContact Sport 02 is a dynamic, summer ultra-high performance tire for passenger cars. Ideal for both the street and track, this tire comes complete with SportPlus Technology, which provides responsive handling, better grip on wet roads, and extended tread life.",
+      "features": [
+        "SportPlus Technology for responsive handling",
+        "Better grip on wet roads",
+        "Extended treadlife",
+        "Tuned Performance Indicators show dry (D) and wet (W) wear",
+        "Engineered for both street and track",
+        "EV-ready construction"
+      ],
+      "warranty": "",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2022-10/ECS02_Lt3Q.png",
+      "sizes": [
+        "205/50ZR15",
+        "205/45ZR16",
+        "205/55ZR16",
+        "225/50ZR16",
+        "205/45ZR17",
+        "205/50ZR17",
+        "215/45ZR17",
+        "225/45ZR17",
+        "225/50ZR17",
+        "235/45ZR17",
+        "245/40ZR17",
+        "245/45ZR17",
+        "255/40ZR17",
+        "255/45ZR17",
+        "275/40ZR17",
+        "285/40ZR17",
+        "225/40ZR18",
+        "225/45ZR18",
+        "235/40ZR18",
+        "235/45ZR18",
+        "245/35ZR18",
+        "245/40ZR18",
+        "245/45ZR18",
+        "255/35ZR18",
+        "255/40ZR18",
+        "265/35ZR18",
+        "265/40ZR18",
+        "275/35ZR18",
+        "275/40ZR18",
+        "285/30ZR18",
+        "295/30ZR18",
+        "295/35ZR18",
+        "335/30ZR18",
+        "225/35ZR19",
+        "225/40ZR19",
+        "235/35ZR19",
+        "235/40ZR19",
+        "245/35ZR19",
+        "245/40ZR19",
+        "255/30ZR19",
+        "255/35ZR19",
+        "255/40ZR19",
+        "265/35ZR19",
+        "265/40ZR19",
+        "275/30ZR19",
+        "275/35ZR19",
+        "275/40ZR19",
+        "285/30ZR19",
+        "285/35ZR19",
+        "295/30ZR19",
+        "295/35ZR19",
+        "305/30ZR19",
+        "305/35ZR19",
+        "325/30ZR19",
+        "355/30ZR19",
+        "225/35ZR20",
+        "235/35ZR20",
+        "245/30ZR20",
+        "245/35ZR20",
+        "245/40ZR20",
+        "245/45ZR20",
+        "255/30ZR20",
+        "255/35ZR20",
+        "255/40ZR20",
+        "265/30ZR20",
+        "265/35ZR20",
+        "275/30ZR20",
+        "275/35ZR20",
+        "275/40ZR20",
+        "285/30ZR20",
+        "285/35ZR20",
+        "295/30ZR20",
+        "295/35ZR20",
+        "305/30ZR20",
+        "305/35ZR20",
+        "315/35ZR20",
+        "335/25ZR20",
+        "305/30ZR21"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "purecontact-ls",
+      "name": "PureContact LS",
+      "category": "Passenger",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "Electric Vehicles"
+      ],
+      "tagline": "Luxury all-season touring for cars and crossovers",
+      "description": "A luxury, all-season touring tire ideal for all conditions experience fuel savings, optimized range, shorter stopping distances and extended tread life.",
+      "features": [
+        "EcoPlus technology saves fuel and optimizes range",
+        "Shorter stopping distances on wet roads",
+        "Extended tread life",
+        "QuickView Indicators show the tire's performance level",
+        "Optimized for electric vehicles",
+        "70,000-mile limited treadwear warranty"
+      ],
+      "warranty": "70,000 miles",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2020-08/purecontactls_lt3q_rd.png",
+      "sizes": [
+        "195/65R15",
+        "205/55R16",
+        "215/55R17",
+        "225/45R17",
+        "225/50R18",
+        "235/45R18",
+        "245/45R18",
+        "235/55R19",
+        "245/40R19",
+        "245/45R19",
+        "235/55R20",
+        "255/45R20"
+      ],
+      "sizesAreReal": false
+    },
+    {
+      "slug": "securecontact-aw",
+      "name": "SecureContact AW",
+      "category": "Passenger",
+      "season": "All-Weather",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "SUVs"
+      ],
+      "tagline": "One tire. All weather. Summer to winter.",
+      "description": "The Continental SecureContact AW is a 3-Peak Mountain Snowflake rated all-weather touring tire built to run from summer to winter on a single set. EcoPlus Technology lowers rolling resistance for better fuel economy and longer tread life, while temperature-activated polymers stay soft and grippy below 45F. Visual Performance Indicators in the tread give clear dry, wet, and snow traction feedback at a glance.",
+      "features": [
+        "3-Peak Mountain Snowflake rated for certified severe snow performance",
+        "Best-in-class wet braking, 4-12% better than premium competitors",
+        "EcoPlus Technology cuts rolling resistance for better fuel economy and longer tread life",
+        "Temperature-activated polymers stay grippy below 45F",
+        "Visual Performance Indicators show dry, wet, and snow traction and wear",
+        "All-weather touring comfort for cars, crossovers, and SUVs"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2026-01/securecontact-aw_bsw_600x600.png?itok=KB2Se_Yo",
+      "sizes": [
+        "195/65R15",
+        "205/55R16",
+        "205/60R16",
+        "205/65R16",
+        "215/45R17",
+        "215/50R17",
+        "215/55R16",
+        "215/55R17",
+        "215/55R18",
+        "215/60R16",
+        "215/65R16",
+        "225/40R18",
+        "225/45R18",
+        "225/50R17",
+        "225/55R17",
+        "225/55R18",
+        "225/55R19",
+        "225/60R17",
+        "225/60R18",
+        "225/65R17",
+        "235/40R19",
+        "235/45R18",
+        "235/45R19",
+        "235/50R18",
+        "235/50R19",
+        "235/55R17",
+        "235/55R18",
+        "235/55R19",
+        "235/55R20",
+        "235/60R17",
+        "235/60R18",
+        "235/65R17",
+        "235/65R18",
+        "245/45R18",
+        "245/45R19",
+        "245/45R20",
+        "245/50R20",
+        "245/55R19",
+        "255/45R19",
+        "255/50R19",
+        "255/50R20",
+        "255/55R18",
+        "255/55R20",
+        "255/60R19",
+        "265/50R20"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "terraincontact-at",
+      "name": "TerrainContact A/T",
+      "category": "Light Truck/SUV",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Crossovers",
+        "SUVs",
+        "Light Trucks",
+        "Pickups",
+        "Electric Vehicles"
+      ],
+      "tagline": "Confidence in all conditions",
+      "description": "A premium all-season all-terrain tire designed for all vehicles. Conquer all conditions in this tire with improved traction, durability, better grip, and quiet roads.",
+      "features": [
+        "TractionPlus technology for added traction and durability",
+        "Better grip on wet roads",
+        "Quieter road noise",
+        "All-terrain capability across all conditions",
+        "Optimized for electric vehicles",
+        "Backed by the Total Confidence Plan warranty"
+      ],
+      "warranty": "",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2020-08/terraincontactat_lt3q_rd.png",
+      "sizes": [
+        "235/75R15",
+        "245/70R16",
+        "265/70R16",
+        "245/65R17",
+        "265/70R17",
+        "265/65R17",
+        "245/70R17",
+        "255/70R18",
+        "265/60R18",
+        "275/65R18",
+        "275/55R20",
+        "275/60R20",
+        "285/45R22"
+      ],
+      "sizesAreReal": false
+    },
+    {
+      "slug": "terraincontact-at-2",
+      "name": "TerrainContact A/T2",
+      "category": "Light Truck/SUV",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Crossovers",
+        "SUVs",
+        "Light Trucks"
+      ],
+      "tagline": "Ready for every adventure",
+      "description": "The TerrainContact A/T2 is a premium all-season, all-terrain tire designed for crossovers, SUVs, and light trucks. Built on the reputation of its predecessor with a bolder design, it features TractionPlus Technology for improved traction and durability, better grip on wet roads, and quiet road noise. It also carries the 3-Peak Mountain Snowflake symbol for severe winter conditions.",
+      "features": [
+        "TractionPlus Technology for improved traction, durability, and wet grip",
+        "3-Peak Mountain Snowflake rated for severe snow service",
+        "Tuned tread pattern with zig-zag grooves and traction teeth for off-road and snow grip",
+        "Durable, reinforced construction resists impacts, cuts, and punctures",
+        "Balanced on-road comfort with reduced road noise",
+        "Optimized for electric vehicles and all vehicle types"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2026-06/terraincontactat2_l3qt_600x600.png?itok=zIo35Y0h",
+      "sizes": [
+        "255/50R20",
+        "255/55R20",
+        "255/70R18",
+        "265/50R20",
+        "265/60R20",
+        "265/65R17",
+        "265/70R16",
+        "265/70R17",
+        "265/70R18",
+        "275/50R22",
+        "275/55R20",
+        "275/60R20",
+        "275/65R18",
+        "285/45R22",
+        "LT235/80R17",
+        "LT245/75R17",
+        "LT265/60R20",
+        "LT265/70R17",
+        "LT265/70R18",
+        "LT275/55R20",
+        "LT275/60R20",
+        "LT275/65R18",
+        "LT275/65R20",
+        "LT275/70R18",
+        "LT285/60R20",
+        "LT305/70R18"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "terraincontact-ht",
+      "name": "TerrainContact H/T",
+      "category": "Light Truck/SUV",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Crossovers",
+        "SUVs",
+        "Light Trucks",
+        "Electric Vehicles"
+      ],
+      "tagline": "Premium all-season confidence for trucks and SUVs, on-road and off",
+      "description": "A premium, truck and SUV, all-season tire, for on-road and off-road trips, with improved traction, durability, better grip on wet roads, and quiet road noise.",
+      "features": [
+        "TractionPlus technology for improved traction and durability",
+        "Better grip on wet roads",
+        "Quiet, comfortable road noise",
+        "All-season touring performance",
+        "Optimized for electric vehicles",
+        "Backed by the Total Confidence Plan warranty"
+      ],
+      "warranty": "",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2020-08/terraincontactht_lt3q_rd.png",
+      "sizes": [
+        "235/65R17",
+        "245/65R17",
+        "265/70R17",
+        "245/60R18",
+        "265/60R18",
+        "265/65R18",
+        "255/55R19",
+        "265/50R20",
+        "275/55R20",
+        "275/60R20",
+        "275/45R22",
+        "285/45R22"
+      ],
+      "sizesAreReal": false
+    },
+    {
+      "slug": "truecontact-tour",
+      "name": "TrueContact Tour",
+      "category": "Passenger",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "SUVs",
+        "Electric Vehicles"
+      ],
+      "tagline": "Durable all-season touring for cars and crossovers",
+      "description": "This durable all-season touring tire for cars and crossovers balances performance and long tread life, offers fuel savings and shorter wet stopping distances.",
+      "features": [
+        "EcoPlus Technology saves fuel and optimizes EV range",
+        "Shorter stopping distances on wet roads",
+        "Extended tread life for long-lasting durability",
+        "QuickView tread indicators show performance level at a glance",
+        "All-season touring comfort and grip",
+        "Backed by the Total Confidence Plan warranty"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2024-01/truecontacttourweb.png?itok=riFfI72q",
+      "sizes": [
+        "195/65R15",
+        "205/55R16",
+        "205/60R16",
+        "215/55R17",
+        "225/50R17",
+        "225/60R17",
+        "225/65R17",
+        "235/45R18",
+        "235/60R18",
+        "245/60R18",
+        "225/60R18",
+        "235/55R19"
+      ],
+      "sizesAreReal": false
+    },
+    {
+      "slug": "truecontact-tour54",
+      "name": "TrueContact Tour 54",
+      "category": "Passenger",
+      "season": "All-Season",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "Electric Vehicles"
+      ],
+      "tagline": "Long-lasting all-season touring for cars and crossovers",
+      "description": "The TrueContact Tour 54 is a long-lasting, all-season touring tire for passenger cars and crossovers. Ideal for dry, wet, and light snow conditions, it features EcoPlus Technology for fuel savings, optimized EV range, shorter wet stopping distances, and extended tread life.",
+      "features": [
+        "EcoPlus Technology for fuel savings and optimized EV range",
+        "Extended tread life for long-lasting wear",
+        "Shorter stopping distances on wet roads",
+        "Enhanced dry and wet handling",
+        "Proven traction in light snow",
+        "QuickView tread wear indicators"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/square_medium/public/media/image/2024-07/ct_webpage_truecontacttour54_l3qt_600x600_0.png?itok=G3-H9k9s",
+      "sizes": [
+        "195/55R16",
+        "195/65R15",
+        "205/50R17",
+        "205/55R16",
+        "205/55R17",
+        "205/60R16",
+        "205/65R16",
+        "215/45R17",
+        "215/50R17",
+        "215/55R16",
+        "215/55R17",
+        "215/60R16",
+        "215/60R17",
+        "215/65R16",
+        "215/65R17",
+        "225/40R18",
+        "225/45R17",
+        "225/45R18",
+        "225/50R17",
+        "225/50R18",
+        "225/55R17",
+        "225/55R19",
+        "225/60R16",
+        "225/60R17",
+        "225/60R18",
+        "225/65R17",
+        "235/40R19",
+        "235/45R17",
+        "235/45R18",
+        "235/50R17",
+        "235/50R18",
+        "235/55R17",
+        "235/55R18",
+        "235/55R19",
+        "235/60R17",
+        "235/60R18",
+        "235/65R16",
+        "235/65R17",
+        "245/40R18",
+        "245/40R19",
+        "245/40R20",
+        "245/45R17",
+        "245/45R18",
+        "245/45R19",
+        "245/45R20",
+        "245/50R17",
+        "245/50R18",
+        "245/55R18",
+        "255/45R19"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "vikingcontact-7",
+      "name": "VikingContact 7",
+      "category": "Winter",
+      "season": "Winter",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "SUVs",
+        "Light Trucks",
+        "Electric Vehicles"
+      ],
+      "tagline": "The premier winter tire",
+      "description": "A premium winter tire for all vehicles features technology to improve tread in cold temperatures, better grip and shorter stopping distances in winter conditions.",
+      "features": [
+        "PolarPlus technology keeps the tread flexible in cold temperatures",
+        "3PMSF-rated for severe snow service (USTMA/TRAC)",
+        "Better grip in winter conditions",
+        "Shorter stopping distances on snow and ice-covered roads",
+        "EV-ready design across all sizes",
+        "Backed by the Total Confidence Plan warranty"
+      ],
+      "warranty": "",
+      "image": "https://continentaltire.com/sites/default/files/media/image/2020-12/VikingContact7_3Q_0.png",
+      "sizes": [
+        "175/55R15",
+        "185/55R15",
+        "185/60R15",
+        "215/70R16",
+        "215/50R18",
+        "235/40R18",
+        "155/70R19",
+        "285/40R19",
+        "235/35R20",
+        "245/40R20",
+        "285/40R20",
+        "285/45R20",
+        "245/40R21",
+        "255/35R21",
+        "255/50R21",
+        "265/35R21",
+        "265/45R21",
+        "275/35R21",
+        "275/45R21",
+        "285/40R21",
+        "295/30R21",
+        "295/40R21",
+        "HL265/40R22",
+        "275/40R22",
+        "315/35R22"
+      ],
+      "sizesAreReal": true
+    },
+    {
+      "slug": "vikingcontact-8",
+      "name": "VikingContact 8",
+      "category": "Winter",
+      "season": "Winter",
+      "vehicleTypes": [
+        "Cars",
+        "Crossovers",
+        "SUVs",
+        "Light Trucks"
+      ],
+      "tagline": "Premium winter grip on snow and ice",
+      "description": "The VikingContact 8 is a premium winter tire for passenger cars, crossovers, SUVs and light trucks. It features PolarPlus Technology, which keeps the tread flexible in cold temperatures for better grip in winter conditions and shorter stopping distances on snow and ice-covered roads. It carries both the Ice Grip and 3-Peak Mountain Snowflake symbols for severe winter conditions.",
+      "features": [
+        "PolarPlus Technology keeps tread flexible in cold temperatures",
+        "Shorter stopping distances on snow and ice-covered roads",
+        "3-Peak Mountain Snowflake certified for severe snow service",
+        "Ice Grip certified for winter traction",
+        "Optimized for electric vehicles",
+        "Fits passenger cars, crossovers, SUVs and light trucks"
+      ],
+      "warranty": "",
+      "image": "https://www.continentaltire.com/sites/default/files/styles/modal/public/media/image/2025-07/vikingcontact-8_lt3q_8_300_600x600.png",
+      "sizes": [
+        "185/65R15",
+        "195/65R15",
+        "205/55R16",
+        "215/60R16",
+        "205/55R17",
+        "225/45R17",
+        "235/65R17",
+        "265/70R17",
+        "225/55R18",
+        "245/60R18",
+        "235/55R19",
+        "255/50R20",
+        "275/50R22",
+        "285/45R22"
+      ],
+      "sizesAreReal": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/test/blocks/perfect-fit/perfect-fit.test.js b/test/blocks/perfect-fit/perfect-fit.test.js
index 9835a93..9694b93 100644
--- a/test/blocks/perfect-fit/perfect-fit.test.js
+++ b/test/blocks/perfect-fit/perfect-fit.test.js
@@ -1,66 +1,110 @@
 /* eslint-disable no-unused-expressions */
-/* global describe it beforeEach */
+/* global describe it beforeEach afterEach */
 
 import { expect } from '@esm-bundle/chai';
-import decorate from '../../../blocks/perfect-fit/perfect-fit.js';
+import sinon from 'sinon';
+import decorate, {
+  parseSize, sizeOptions, findBySize, findByVehicleClass,
+} from '../../../blocks/perfect-fit/perfect-fit.js';
 
-/** Authored perfect-fit: label row, then a row of three item cells. */
-function buildBlock() {
-  document.body.innerHTML = `
-    <div class="perfect-fit block">
-      <div><div><p>Find your perfect fit:</p></div></div>
-      <div>
-        <div><span>By Vehicle</span></div>
-        <div><span>By Tire Size</span></div>
-        <div><span>By Plate</span></div>
-      </div>
-    </div>`;
-  return document.querySelector('.perfect-fit.block');
-}
+const PRODUCTS = {
+  products: [
+    {
+      slug: 'sport-02', name: 'ExtremeContact Sport 02', category: 'Passenger', season: 'Summer', vehicleTypes: ['Cars', 'Sports Cars'], image: '/p/sport.png', sizes: ['225/45ZR17', '245/40ZR18'],
+    },
+    {
+      slug: 'terrain-at', name: 'TerrainContact A/T', category: 'Light Truck/SUV', season: 'All-Season', vehicleTypes: ['SUVs', 'Light Trucks'], image: '/p/terrain.png', sizes: ['265/70R17', '245/40ZR18'],
+    },
+    {
+      slug: 'purecontact', name: 'PureContact LS', category: 'Passenger', season: 'All-Season', vehicleTypes: ['Cars', 'Crossovers'], image: '/p/pure.png', sizes: ['225/45R17'],
+    },
+  ],
+};
 
-describe('Perfect fit block', () => {
-  let block;
-  beforeEach(() => {
-    block = buildBlock();
-    decorate(block);
+describe('perfect-fit data helpers', () => {
+  it('parses a well-formed tire size', () => {
+    expect(parseSize('225/45ZR17')).to.deep.equal({ width: '225', aspect: '45', rim: '17' });
+    expect(parseSize('265/70R17')).to.deep.equal({ width: '265', aspect: '70', rim: '17' });
+    expect(parseSize('not-a-size')).to.equal(null);
+  });
+
+  it('builds cascading size options from the catalog', () => {
+    const opts = sizeOptions(PRODUCTS.products);
+    expect(opts.widths).to.deep.equal(['225', '245', '265']);
+    expect(opts.aspectsByWidth['245']).to.deep.equal(['40']);
+    expect(opts.rimsByWidthAspect['225/45']).to.deep.equal(['17']);
+  });
+
+  it('finds every product available in a given size', () => {
+    const hits = findBySize(PRODUCTS.products, { width: '245', aspect: '40', rim: '18' });
+    expect(hits.map((p) => p.slug).sort()).to.deep.equal(['sport-02', 'terrain-at']);
+  });
+
+  it('finds products by vehicle class keyword', () => {
+    const suv = findByVehicleClass(PRODUCTS.products, 'suv');
+    expect(suv.map((p) => p.slug)).to.deep.equal(['terrain-at']);
+    const car = findByVehicleClass(PRODUCTS.products, 'car');
+    expect(car.map((p) => p.slug).sort()).to.deep.equal(['purecontact', 'sport-02']);
   });
+});
 
-  it('turns the three items into buttons', () => {
-    const items = block.querySelectorAll('.perfect-fit-item');
-    expect(items).to.have.length(3);
-    expect([...items].every((el) => el.tagName === 'BUTTON')).to.be.true;
+describe('perfect-fit block', () => {
+  let fetchStub;
+  function build() {
+    document.body.innerHTML = `
+      <div class="perfect-fit block">
+        <div><div><p>Find your perfect fit:</p></div></div>
+        <div>
+          <div><span>By Vehicle</span></div>
+          <div><span>By Tire Size</span></div>
+          <div><span>By Plate</span></div>
+        </div>
+      </div>`;
+    return document.querySelector('.perfect-fit.block');
+  }
+  beforeEach(() => {
+    fetchStub = sinon.stub(window, 'fetch').resolves(new Response(JSON.stringify(PRODUCTS)));
   });
+  afterEach(() => fetchStub.restore());
 
-  it('builds a modal that starts hidden', () => {
+  it('builds three item buttons and a hidden modal', async () => {
+    const block = build();
+    await decorate(block);
+    expect(block.querySelectorAll('.perfect-fit-item')).to.have.length(3);
     const overlay = block.querySelector('.perfect-fit-overlay');
     expect(overlay).to.exist;
     expect(overlay.hidden).to.be.true;
-    expect(overlay.querySelectorAll('[role="tab"]')).to.have.length(3);
   });
 
-  it('opens the modal on the tab matching the clicked item', () => {
-    block.querySelectorAll('.perfect-fit-item')[2].click();
-    const overlay = block.querySelector('.perfect-fit-overlay');
-    expect(overlay.hidden).to.be.false;
-    const plateTab = block.querySelector('#perfect-fit-tab-plate');
-    expect(plateTab.getAttribute('aria-selected')).to.equal('true');
-    expect(block.querySelector('#perfect-fit-panel-plate').hidden).to.be.false;
+  it('returns matching products when a tire size is searched', async () => {
+    const block = build();
+    await decorate(block);
+    block.querySelectorAll('.perfect-fit-item')[1].click(); // By Tire Size
+
+    const panel = block.querySelector('#perfect-fit-panel-tire-size');
+    const setSelect = (name, value) => {
+      const el = panel.querySelector(`[name="${name}"]`);
+      el.value = value;
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    setSelect('width', '245');
+    setSelect('aspect', '40');
+    setSelect('rim', '18');
+    const form = panel.querySelector('form');
+    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+
+    const results = panel.querySelectorAll('.perfect-fit-result');
+    expect(results.length).to.equal(2);
+    expect(results[0].getAttribute('href')).to.match(/^\/tires\//);
   });
 
-  it('closes on Escape and restores focus to the trigger', () => {
+  it('closes on Escape and restores focus to the trigger', async () => {
+    const block = build();
+    await decorate(block);
     const trigger = block.querySelectorAll('.perfect-fit-item')[0];
     trigger.click();
-    const dialog = block.querySelector('.perfect-fit-dialog');
-    dialog.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    block.querySelector('.perfect-fit-dialog').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
     expect(block.querySelector('.perfect-fit-overlay').hidden).to.be.true;
     expect(document.activeElement).to.equal(trigger);
   });
-
-  it('does not navigate when a search form is submitted', () => {
-    block.querySelectorAll('.perfect-fit-item')[0].click();
-    const form = block.querySelector('.perfect-fit-form');
-    const submit = new Event('submit', { bubbles: true, cancelable: true });
-    form.dispatchEvent(submit);
-    expect(submit.defaultPrevented).to.be.true;
-  });
 });
diff --git a/test/blocks/size-list/size-list.test.js b/test/blocks/size-list/size-list.test.js
new file mode 100644
index 0000000..a799967
--- /dev/null
+++ b/test/blocks/size-list/size-list.test.js
@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-expressions */
+/* global describe it */
+
+import { expect } from '@esm-bundle/chai';
+import decorate from '../../../blocks/size-list/size-list.js';
+
+describe('Size list block', () => {
+  it('renders one chip per authored size', () => {
+    document.body.innerHTML = `
+      <div class="size-list block">
+        <div><div>
+          <ul><li>225/45R17</li><li>245/40R18</li><li>265/70R17</li></ul>
+        </div></div>
+      </div>`;
+    const block = document.querySelector('.size-list.block');
+    decorate(block);
+    const chips = block.querySelectorAll('.size-chip');
+    expect(chips).to.have.length(3);
+    expect(chips[0].textContent).to.equal('225/45R17');
+    expect(block.querySelector('.size-list-chips')).to.exist;
+  });
+});