Skip to content

feat(atomic): add request transformer support to MSW endpoint harness#7624

Open
alexprudhomme wants to merge 2 commits into
mainfrom
msw-request-transformers
Open

feat(atomic): add request transformer support to MSW endpoint harness#7624
alexprudhomme wants to merge 2 commits into
mainfrom
msw-request-transformers

Conversation

@alexprudhomme
Copy link
Copy Markdown
Contributor

Problem

Multiple MSW draft PRs (msw-commerce-facets, msw-facets, msw-navigation, msw-search-controls, msw-commerce-pagination, msw-commerce-query-status) each duplicate a large 490-540 line custom handler file to support interactive mocking (facet selections, pagination, facet search). This is architecturally misaligned with the existing EndpointHarness pattern and creates maintenance burden.

Solution

Extend EndpointHarness with a requestTransformer concept — a function that takes the request body + resolved response and returns a modified response. This keeps the harness pattern intact while enabling dynamic, request-aware mocking.

New transformer modules:

  • commerce/facet-transformer.ts — facet selections, hierarchical navigation, range facets, show-more, facet search
  • commerce/pagination-transformer.ts — reflects page/perPage from requests
  • search/facet-transformer.ts — dynamic facet building, sorting (alphanumeric, natural, occurrences), numeric ranges, facet search

Transformers are wired into MockCommerceApi and MockSearchApi so all MSW-based stories get interactive behavior automatically without needing custom handler files.

How it works

// Before: each story had its own 500+ line handler
// After: transformers are registered on the harness
this.searchEndpoint.withRequestTransformer((body, response) => {
  let result = commerceFacetTransformer(body, response);
  result = commercePaginationTransformer(body, result);
  return result;
});

Migration path

The other MSW draft branches should rebase on this branch and delete their custom facet-aware-handler.ts / dynamic-handler.ts files.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 22, 2026

⚠️ No Changeset found

Latest commit: bd28220

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@svcsnykcoveo
Copy link
Copy Markdown

svcsnykcoveo commented May 22, 2026

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues
Code Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@chromatic-com
Copy link
Copy Markdown

chromatic-com Bot commented May 22, 2026

Tip

All tests passed and all changes approved!

🟢 UI Tests: 367 tests unchanged
🟢 UI Review: 367 stories published -- no changes
Storybook icon Storybook Publish: 367 stories published

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 22, 2026

@coveo/atomic

npm i https://pkg.pr.new/@coveo/atomic@7624

@coveo/atomic-hosted-page

npm i https://pkg.pr.new/@coveo/atomic-hosted-page@7624

@coveo/atomic-legacy

npm i https://pkg.pr.new/@coveo/atomic-legacy@7624

@coveo/atomic-react

npm i https://pkg.pr.new/@coveo/atomic-react@7624

@coveo/auth

npm i https://pkg.pr.new/@coveo/auth@7624

@coveo/bueno

npm i https://pkg.pr.new/@coveo/bueno@7624

@coveo/create-atomic

npm i https://pkg.pr.new/@coveo/create-atomic@7624

@coveo/create-atomic-component

npm i https://pkg.pr.new/@coveo/create-atomic-component@7624

@coveo/create-atomic-component-project

npm i https://pkg.pr.new/@coveo/create-atomic-component-project@7624

@coveo/create-atomic-result-component

npm i https://pkg.pr.new/@coveo/create-atomic-result-component@7624

@coveo/create-atomic-rollup-plugin

npm i https://pkg.pr.new/@coveo/create-atomic-rollup-plugin@7624

@coveo/headless

npm i https://pkg.pr.new/@coveo/headless@7624

@coveo/headless-react

npm i https://pkg.pr.new/@coveo/headless-react@7624

@coveo/shopify

npm i https://pkg.pr.new/@coveo/shopify@7624

commit: bd28220

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Extends the EndpointHarness MSW mocking infrastructure in packages/atomic/storybook-utils to support request-aware response shaping via a requestTransformer, and wires new “interactive facets/pagination” behavior into the Atomic search and commerce mock APIs for Storybook.

Changes:

  • Add RequestTransformer + withRequestTransformer() support to EndpointHarness and apply it during handler execution.
  • Introduce new transformer modules for Search facet building/facet search, and Commerce facet selection + pagination + facet search.
  • Wire interactive transformers into MockSearchApi and MockCommerceApi, and register transformer modules as Knip entry points.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
packages/atomic/storybook-utils/api/_base.ts Adds RequestTransformer and applies it in generateHandler() via request body parsing.
packages/atomic/storybook-utils/api/search/mock.ts Adds enableInteractiveFacets() and registers search/facet-search transformers.
packages/atomic/storybook-utils/api/search/facet-transformer.ts New search transformers for dynamic facet responses and facet search filtering.
packages/atomic/storybook-utils/api/commerce/mock.ts Adds commerce facet-search endpoint and enableInteractiveFacets() wiring (facet + pagination + facet search).
packages/atomic/storybook-utils/api/commerce/facet-transformer.ts New commerce facet transformer + facet-search transformer factory.
packages/atomic/storybook-utils/api/commerce/pagination-transformer.ts New pagination transformer reflecting request page/perPage into responses.
knip.js Registers *-transformer.ts modules as entry points for Knip tracing.

Comment thread packages/atomic/storybook-utils/api/_base.ts
Comment thread packages/atomic/storybook-utils/api/search/mock.ts
Comment thread packages/atomic/storybook-utils/api/commerce/mock.ts
Comment thread packages/atomic/storybook-utils/api/commerce/facet-transformer.ts Outdated
Comment thread packages/atomic/storybook-utils/api/commerce/facet-transformer.ts Outdated
Comment thread packages/atomic/storybook-utils/api/search/facet-transformer.ts Outdated
Comment thread packages/atomic/storybook-utils/api/search/facet-transformer.ts Outdated
@alexprudhomme alexprudhomme force-pushed the msw-request-transformers branch from 2edec45 to f6e1ac9 Compare May 22, 2026 17:49
Extend EndpointHarness with a requestTransformer concept that modifies
responses based on request body content. This enables interactive MSW
mocking (facet selections, pagination, facet search) without monolithic
custom handler files.

New modules:
- commerce/facet-transformer: reflects facet selections, hierarchical
  navigation, range facets, show-more, and facet search
- commerce/pagination-transformer: reflects page/perPage from requests
- search/facet-transformer: builds dynamic facet responses with sorting,
  numeric ranges, and facet search support

Wire transformers into MockCommerceApi and MockSearchApi so all MSW
stories get interactive behavior out of the box.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
When preventAutoSelect is true (after facet search selection), navigate
up one level: select the parent value and show its children as idle.
This matches the real Coveo API behavior where preventAutoSelect causes
the response to show the navigated-to level without auto-selecting.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants