feat(atomic): migrate commerce facet stories to MSW

Migrate atomic-commerce-facet, atomic-commerce-facets,
atomic-commerce-numeric-facet, atomic-commerce-category-facet, and
atomic-commerce-timeframe-facet stories to use MockCommerceApi MSW
handlers for proper API mocking.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: alexprudhomme

packages/atomic/src/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.new.stories.tsx

@@ -9,6 +9,10 @@ import {
 import {parameters} from '@/storybook-utils/common/common-meta-parameters';
 import '@/src/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.js';
 import '@/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js';
+import {MockCommerceApi} from '@/storybook-utils/api/commerce/mock';
+
+const commerceApiHarness = new MockCommerceApi();
+commerceApiHarness.enableInteractiveFacets();
 
 const {play, decorator} = wrapInCommerceInterface({
   includeCodeRoot: false,
@@ -26,13 +30,19 @@ const meta: Meta = {
   decorators: [commerceFacetWidthDecorator, decorator],
   parameters: {
     ...parameters,
+    msw: {
+      handlers: commerceApiHarness.handlers,
+    },
     chromatic: {disableSnapshot: true},
     actions: {
       handles: events,
     },
   },
   args,
   argTypes,
+  beforeEach: () => {
+    commerceApiHarness.clearAll();
+  },
 };
 
 export default meta;

packages/atomic/src/components/commerce/atomic-commerce-facet/atomic-commerce-facet.new.stories.tsx

@@ -9,6 +9,10 @@ import {
 import {parameters} from '@/storybook-utils/common/common-meta-parameters';
 import '@/src/components/commerce/atomic-commerce-facet/atomic-commerce-facet.js';
 import '@/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js';
+import {MockCommerceApi} from '@/storybook-utils/api/commerce/mock';
+
+const commerceApiHarness = new MockCommerceApi();
+commerceApiHarness.enableInteractiveFacets();
 
 const {play, decorator} = wrapInCommerceInterface({
   includeCodeRoot: false,
@@ -26,13 +30,19 @@ const meta: Meta = {
   decorators: [commerceFacetWidthDecorator, decorator],
   parameters: {
     ...parameters,
+    msw: {
+      handlers: commerceApiHarness.handlers,
+    },
     chromatic: {disableSnapshot: true},
     actions: {
       handles: events,
     },
   },
   args,
   argTypes,
+  beforeEach: () => {
+    commerceApiHarness.clearAll();
+  },
 };
 
 export default meta;

packages/atomic/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.new.stories.tsx

@@ -6,6 +6,10 @@ import {
 } from '@/storybook-utils/commerce/commerce-interface-wrapper';
 import {parameters} from '@/storybook-utils/common/common-meta-parameters';
 import '@/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js';
+import {MockCommerceApi} from '@/storybook-utils/api/commerce/mock';
+
+const commerceApiHarness = new MockCommerceApi();
+commerceApiHarness.enableInteractiveFacets();
 
 const {decorator, play} = wrapInCommerceInterface({
   skipFirstRequest: true,
@@ -23,6 +27,7 @@ const meta: Meta = {
   decorators: [decorator],
   parameters: {
     ...parameters,
+    msw: {handlers: [...commerceApiHarness.handlers]},
     chromatic: {disableSnapshot: true},
     actions: {
       handles: events,
@@ -32,6 +37,9 @@ const meta: Meta = {
   argTypes,
 
   play,
+  beforeEach: () => {
+    commerceApiHarness.clearAll();
+  },
 };
 
 export default meta;

packages/atomic/src/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.new.stories.tsx

@@ -9,6 +9,10 @@ import {
 import {parameters} from '@/storybook-utils/common/common-meta-parameters';
 import '@/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js';
 import '@/src/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.js';
+import {MockCommerceApi} from '@/storybook-utils/api/commerce/mock';
+
+const commerceApiHarness = new MockCommerceApi();
+commerceApiHarness.enableInteractiveFacets();
 
 const {play, decorator} = wrapInCommerceInterface({
   includeCodeRoot: false,
@@ -26,13 +30,19 @@ const meta: Meta = {
   decorators: [commerceFacetWidthDecorator, decorator],
   parameters: {
     ...parameters,
+    msw: {
+      handlers: commerceApiHarness.handlers,
+    },
     chromatic: {disableSnapshot: true},
     actions: {
       handles: events,
     },
   },
   args,
   argTypes,
+  beforeEach: () => {
+    commerceApiHarness.clearAll();
+  },
 };
 
 export default meta;

packages/atomic/src/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.new.stories.tsx

@@ -9,6 +9,10 @@ import {
 import {parameters} from '@/storybook-utils/common/common-meta-parameters';
 import '@/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.js';
 import '@/src/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js';
+import {MockCommerceApi} from '@/storybook-utils/api/commerce/mock';
+
+const commerceApiHarness = new MockCommerceApi();
+commerceApiHarness.enableInteractiveFacets();
 
 const {play, decorator} = wrapInCommerceInterface({
   engineConfig: {
@@ -37,13 +41,19 @@ const meta: Meta = {
   decorators: [commerceFacetWidthDecorator, decorator],
   parameters: {
     ...parameters,
+    msw: {
+      handlers: commerceApiHarness.handlers,
+    },
     chromatic: {disableSnapshot: true},
     actions: {
       handles: events,
     },
   },
   args,
   argTypes,
+  beforeEach: () => {
+    commerceApiHarness.clearAll();
+  },
 };
 
 export default meta;