From b14f816cd20bc72716fe2433f7ecdc9c1e3cab71 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:14:10 +0200
Subject: [PATCH] add storybook-msw to storybook

---
 .../.storybook/preview.js                     | 16 +++++++++++++
 src/Umbraco.Web.UI.Client/package-lock.json   | 24 +++++++++++++++++++
 src/Umbraco.Web.UI.Client/package.json        |  1 +
 .../src/mocks/browser.ts                      | 19 ++++++++-------
 4 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 6fac879af1..84d7f64230 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -1,6 +1,17 @@
 import '@umbraco-ui/uui';
 import '@umbraco-ui/uui-css/dist/uui-css.css';
 
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+
+import { onUnhandledRequest } from '../src/mocks/browser';
+import { handlers } from '../src/mocks/handlers';
+
+// Initialize MSW
+initialize({onUnhandledRequest});
+
+// Provide the MSW addon decorator globally
+export const decorators = [mswDecorator];
+
 export const parameters = {
 	actions: { argTypesRegex: '^on.*' },
 	controls: {
@@ -10,4 +21,9 @@ export const parameters = {
 			date: /Date$/,
 		},
 	},
+	msw: {
+		handlers: {
+			global: handlers
+		}
+	}
 };
diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 0452f4db11..d9ff7cd76c 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -42,6 +42,7 @@
         "eslint-plugin-storybook": "^0.6.1",
         "lit-html": "^2.2.7",
         "msw": "^0.44.2",
+        "msw-storybook-addon": "^1.6.3",
         "prettier": "2.7.1",
         "typescript": "^4.7.4",
         "vite": "^3.0.3"
@@ -16998,6 +16999,19 @@
         }
       }
     },
+    "node_modules/msw-storybook-addon": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.3.tgz",
+      "integrity": "sha512-Ps80WdRmXsmenoTwfrgKMNpQD8INUUFyUFyZOecx8QjuqSlL++UYrLaGyACXN2goOn+/VS6rb0ZapbjrasPClg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "^6.0.0",
+        "is-node-process": "^1.0.1"
+      },
+      "peerDependencies": {
+        "msw": ">=0.35.0 <1.0.0"
+      }
+    },
     "node_modules/msw/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -37629,6 +37643,16 @@
         }
       }
     },
+    "msw-storybook-addon": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.3.tgz",
+      "integrity": "sha512-Ps80WdRmXsmenoTwfrgKMNpQD8INUUFyUFyZOecx8QjuqSlL++UYrLaGyACXN2goOn+/VS6rb0ZapbjrasPClg==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "^6.0.0",
+        "is-node-process": "^1.0.1"
+      }
+    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 8604e717ab..eb0cfd0a86 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -67,6 +67,7 @@
     "eslint-plugin-storybook": "^0.6.1",
     "lit-html": "^2.2.7",
     "msw": "^0.44.2",
+    "msw-storybook-addon": "^1.6.3",
     "prettier": "2.7.1",
     "typescript": "^4.7.4",
     "vite": "^3.0.3"
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser.ts
index e296cc5fd0..bc470aaff6 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser.ts
@@ -1,15 +1,18 @@
-import { setupWorker } from 'msw';
+import { MockedRequest, setupWorker } from 'msw';
+
 import { handlers } from './handlers';
 
 const worker = setupWorker(...handlers);
 
+export const onUnhandledRequest = (req: MockedRequest) => {
+	if (req.url.pathname.startsWith('/node_modules/')) return;
+	if (req.url.pathname.startsWith('/src/')) return;
+	if (req.destination === 'image') return;
+
+	console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
+};
+
 export const startMockServiceWorker = () =>
 	worker.start({
-		onUnhandledRequest: (req) => {
-			if (req.url.pathname.startsWith('/node_modules/')) return;
-			if (req.url.pathname.startsWith('/src/')) return;
-			if (req.destination === 'image') return;
-
-			console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
-		},
+		onUnhandledRequest,
 	});