Deco Storefront Test Checklist

Deco Storefront Test Checklist Generator

Generates a context-aware QA checklist by reading the site's actual component inventory, registered sections, interactive patterns, and route structure. The output is scoped to what exists — no phantom items for features the site doesn't have.

When to Use This Skill

• After a Fresh → TanStack migration
• After removing/refactoring islands
• After upgrading @decocms/blocks, @decocms/blocks-admin, @decocms/tanstack, or @decocms/nextjs (the split of the old @decocms/start), or @decocms/apps (unaffected by that split)
• After changing caching configuration
• After modifying the section registry or resolution engine
• Before deploying a new version to production
• When onboarding a QA tester to a specific storefront

Step 1 — Discover the Site Inventory

Run these commands from the site root to build context. The checklist MUST be scoped to what actually exists.

1.1 Registered Sections

# Find setup file and list all registered sections
rg 'registerSections' src/ -l
# Then read the registration map to get every section key
rg '"site/sections/' src/setup.ts

1.2 Routes (Page Types)

ls src/routes/
# Identify: home (index.tsx), catch-all ($.tsx), custom routes

1.3 Interactive Components

# Components with client-side state
rg 'useState|useEffect|useCart|useUI|useSignal|displayCart|displayMenu' src/components/ --glob '*.{tsx,ts}' -l

# Components with event listeners (potential hydration issues)
rg 'addEventListener|onClick|onChange|onSubmit' src/components/ --glob '*.{tsx,ts}' -l

# Vanilla JS DOM access (fragile patterns)
rg 'document\.(getElementById|querySelector|querySelectorAll)' src/components/ --glob '*.{tsx,ts}' -l

1.4 Section Loaders

rg 'registerSectionLoaders' src/setup.ts -A 20

1.5 External Integrations

# VTEX calls
rg 'vtex|VTEX' src/lib/ src/hooks/ --glob '*.{tsx,ts}' -l

# Analytics
rg 'sendEvent|dataLayer|DECO.*events' src/ --glob '*.{tsx,ts}' -l

# Third-party (Trustvox, Autodesk, etc.)
rg 'trustvox|Autodesk|forge|instagram|whatsapp' src/ --glob '*.{tsx,ts}' -i -l

1.6 UI State Signals

rg 'signal\(|useUI' src/sdk/ src/hooks/ --glob '*.{tsx,ts}'

This reveals which drawers, modals, and popups are managed by signals (cart, menu, search, etc.).

Step 2 — Generate the Checklist

Using the inventory from Step 1, build the checklist below. Only include sections that exist in the site. Mark items with context from the actual file paths.

Checklist Template

A. Server Startup & Build

B. Page Loading (per route)

For each route in src/routes/, verify:

C. Header

For sites with sections/Header/Header.tsx:

D. Sliders & Carousels

For every component that imports SliderJS:

Apply to each slider instance:

• Home banner carousel (ui/BannerCarousel.tsx, ui/BannerClientSide.tsx)
• Product shelf (product/ProductShelf.tsx, ProductShelfTabbed.tsx)
• Category list (Category/CategoryList.tsx)
• Testimonials, Cases de Sucesso, Client Logos
• Mini banners, Image double blocks
• Footer benefits

E. PDP — Product Detail Page

For sites with ProductMain/ProductMain.tsx:

F. Cart (Minicart)

For sites with minicart/:

G. Search / PLP

For sites with search/SearchResult.tsx:

H. Modals & Drawers (Signal-Based)

For each: verify opens, closes on Escape, closes on overlay/X, and signal.value resets to false.

I. Footer

For sites with sections/Footer/Footer.tsx:

J. House Catalog (when present)

For sites with product/HouseCatalog/:

K. Institucional

For sites with institucional/:

L. Calculators

For sites with calculator sections:

M. Analytics & Tracking

N. Console Health

O. Performance Sanity

Step 3 — Adapt to the Specific Site

After generating the base checklist:

1. Remove sections the site doesn't have — If no HouseCatalog, remove section J entirely
2. Add site-specific sections — Custom sections from setup.ts that aren't covered above
3. Check integrations — If the site uses Shopify instead of VTEX, adapt cart/checkout tests
4. Note known issues — Add items for bugs found in previous test rounds
5. Prioritize — Mark critical path items (home → PLP → PDP → cart → checkout) as P0

Discovery Commands for Custom Sections

To find sections not covered by the template:

# All registered sections
rg '"site/sections/' src/setup.ts | sed 's/.*"site\/sections\///' | sed 's/".*//' | sort

# Sections with loaders (higher risk)
rg 'export const loader' src/sections/ --glob '*.tsx' -l

# Sections with client state (interactive)
rg 'useState|useEffect' src/sections/ --glob '*.tsx' -l

# Sections importing SliderJS (slider tests needed)
rg 'SliderJS' src/sections/ src/components/ --glob '*.tsx' -l

Automation Hooks

For sites with CI/CD, these checks can be automated:

# Build check
npm run build && echo "PASS: Build" || echo "FAIL: Build"

# Console error check (requires headless browser)
# Use with deco-e2e-testing skill for full automation

# Section registry completeness
node -e "
  const setup = require('./src/setup.ts');
  // Compare registered sections vs section files on disk
"

Related Skills