feat: Add MSW addon config

Signed-off-by: Arthur Andrade <arthurfelandrade@gmail.com>

.storybook/preview.js

@@ -4,8 +4,16 @@ import '!style-loader!css-loader!sass-loader!../src/styles/global/resets.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/storybook-components.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/tokens.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/typography.scss'
+import { initialize, mswDecorator } from 'msw-storybook-addon'
+
+// Initialize MSW
+initialize()
+
 import SBTheme from './theme'
 
+// Provide the MSW addon decorator globally
+export const decorators = [mswDecorator]
+
 // Viewports from src/styles/vendors/include-media_overwrite.scss
 const customViewports = {
   phone: {

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Adds [MSW Addon](https://storybook.js.org/addons/msw-storybook-addon) ([#143](https://github.com/vtex-sites/gatsby.store/pull/143))
 - Uses new cross selling API on PDP ([#159](https://github.com/vtex-sites/nextjs.store/pull/159))
 - Applies new local tokens to `SuggestionProductCard` ([#135](https://github.com/vtex-sites/gatsby.store/pull/135))
 - Applies new local tokens to `Navbar` ([#132](https://github.com/vtex-sites/gatsby.store/pull/132))

package.json

@@ -86,6 +86,8 @@
     "husky": "^5.2.0",
     "is-ci": "^3.0.0",
     "lint-staged": "^10.5.4",
+    "msw": "^0.43.1",
+    "msw-storybook-addon": "^1.6.3",
     "postcss": "^8.4.4",
     "prettier": "^2.2.0",
     "storybook-addon-gatsby": "^0.0.5",
@@ -113,5 +115,8 @@
     "*.scss": [
       "stylelint --fix"
     ]
+  },
+  "msw": {
+    "workerDirectory": "static"
   }
 }

src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx

@@ -1,5 +1,6 @@
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
 import { SessionProvider } from '@faststore/sdk'
+import { rest } from 'msw'
 
 import { SuggestionsTopSearch } from '.'
 import type { SuggestionsTopSearchProps } from '.'
@@ -40,4 +41,28 @@ Default.args = {
 
 Default.parameters = {
   backgrounds: { default: 'dark' },
+  msw: {
+    handlers: [
+      rest.get('/api/graphql', (_, res, ctx) => {
+        return res(
+          ctx.json({
+            data: {
+              search: {
+                suggestions: {
+                  terms: [
+                    {
+                      value: 'Option 1',
+                    },
+                    {
+                      value: 'Option 2',
+                    },
+                  ],
+                },
+              },
+            },
+          })
+        )
+      }),
+    ],
+  },
 }