feat(atomic): migrate product section stories to MSW#7602
Conversation
Add MockCommerceApi handlers and beforeEach cleanup to all 9 product section component stories for proper API mocking. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
@coveo/atomic
@coveo/atomic-hosted-page
@coveo/atomic-legacy
@coveo/atomic-react
@coveo/auth
@coveo/bueno
@coveo/create-atomic
@coveo/create-atomic-component
@coveo/create-atomic-component-project
@coveo/create-atomic-result-component
@coveo/create-atomic-rollup-plugin
@coveo/headless
@coveo/headless-react
@coveo/shopify
commit: |
|
Important Testing in progress…🟢 UI Tests: 366 tests unchanged |
There was a problem hiding this comment.
Pull request overview
This PR migrates the Atomic commerce product section Storybook stories to use MSW-backed API mocking so they no longer depend on real commerce API calls during Storybook runs and automated story tests.
Changes:
- Added a
MockCommerceApiharness to each product section story file. - Registered the harness handlers via
parameters.msw.handlersfor Storybook/MSW integration. - Reset mock endpoint state per run via
beforeEachcallingclearAll()to improve isolation.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/atomic/src/components/commerce/atomic-product-section-visual/atomic-product-section-visual.new.stories.tsx | Adds MockCommerceApi handlers + per-run reset for the visual section story. |
| packages/atomic/src/components/commerce/atomic-product-section-name/atomic-product-section-name.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-metadata/atomic-product-section-metadata.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-emphasized/atomic-product-section-emphasized.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-description/atomic-product-section-description.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run (while keeping its custom engine preprocessing). |
| packages/atomic/src/components/commerce/atomic-product-section-children/atomic-product-section-children.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-bottom-metadata/atomic-product-section-bottom-metadata.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-badges/atomic-product-section-badges.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
| packages/atomic/src/components/commerce/atomic-product-section-actions/atomic-product-section-actions.new.stories.tsx | Adds MSW commerce API mocking and clears mocks before each run. |
Problem
Commerce product section stories lack MSW (Mock Service Worker) API mocking, making them dependent on real API calls during testing.
Solution
Add
MockCommerceApihandlers to all 9 product section component stories:atomic-product-section-nameatomic-product-section-visualatomic-product-section-metadataatomic-product-section-descriptionatomic-product-section-emphasizedatomic-product-section-actionsatomic-product-section-badgesatomic-product-section-bottom-metadataatomic-product-section-childrenEach story now:
MockCommerceApiharnessparameters.mswbeforeEachfor test isolation