fix(storybook): add msw to mock network requests, fix existing stories (

#240)
trustification · Nov 14, 2024 · 138c0cf · 138c0cf
1 parent 8257938
commit 138c0cf
Show file tree

Hide file tree

Showing 11 changed files with 3,148 additions and 1,213 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -17,7 +17,6 @@ const config: StorybookConfig = {
   ],
   addons: [
     getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
-    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
@@ -31,6 +30,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  staticDirs: ["../public"],
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {

diff --git a/.storybook/preview.ts → .storybook/preview.tsx b/.storybook/preview.ts → .storybook/preview.tsx
@@ -1,12 +1,32 @@
+import React from "react";
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/utilities/Accessibility/accessibility.css";
 import "@patternfly/patternfly/utilities/Display/display.css";
 import "@patternfly/patternfly/utilities/Flex/flex.css";
 import "@patternfly/patternfly/utilities/Sizing/sizing.css";
 import "@patternfly/patternfly/utilities/Spacing/spacing.css";
 import type { Preview } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { initialize, mswLoader } from "msw-storybook-addon";
+
+const queryClient = new QueryClient();
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+initialize();
 
 const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+  loaders: [mswLoader],
   parameters: {
     controls: {
       matchers: {

diff --git a/client/package.json b/client/package.json
@@ -77,7 +77,6 @@
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.5.2",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "msw": "^1.2.3",
     "raw-loader": "^4.0.2",
     "react-refresh": "^0.14.0",
     "react-refresh-typescript": "^2.0.9",

diff --git a/client/src/app/pages/vulnerability-list/vulnerability-list.stories.tsx b/client/src/app/pages/vulnerability-list/vulnerability-list.stories.tsx