feat(storybook): add handlers for all endpoint groups

feat(storybook): add cve detail mocks

add sbom detail examples

add mock file for vulnerabilities

.storybook/main.ts

@@ -26,9 +26,6 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
   staticDirs: ["../public"],
   typescript: {
     reactDocgen: "react-docgen-typescript",
@@ -44,7 +41,7 @@ const config: StorybookConfig = {
       config.resolve.plugins = [
         ...(config.resolve.plugins || []),
         new TsconfigPathsPlugin({
-          configFile: "client/tsconfig.json",
+          configFile: path.resolve(__dirname, "../client/tsconfig.json"),
           extensions: config.resolve.extensions,
         }),
       ];

.storybook/preview.tsx

@@ -8,10 +8,22 @@ 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";
-import { MemoryRouter } from "react-router";
 import { handlers } from "@mocks/handlers";
 const queryClient = new QueryClient();
 
+if (typeof jest === "undefined") {
+  // Mock Jest in the Storybook runtime
+  globalThis.jest = {
+    fn: () => {
+      const mockFn = () => {};
+      mockFn.mockReturnValue = () => mockFn;
+      mockFn.mockReturnValueOnce = () => mockFn;
+      mockFn.mockImplementation = () => mockFn;
+      return mockFn;
+    },
+  } as any;
+}
+
 /*
  * Initializes MSW
  * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
@@ -36,8 +48,8 @@ const preview: Preview = {
       },
     },
     msw: {
-      handlers: handlers
-    }
+      handlers: [...handlers],
+    },
   },
 };
 

client/jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

client/package.json

@@ -110,5 +110,16 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "imports": {
+    "#useSbomsOfVulnerability": {
+      "storybook": "./src/app/hooks/domain-controls/useSbomsOfVulnerability.mock.ts",
+      "default": "./src/app/hooks/domain-controls/useSbomsOfVulnerability.ts"
+    },
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx"
+    ]
   }
 }

client/src/app/hooks/domain-controls/useSbomsOfVulnerability.mock.ts

@@ -0,0 +1,8 @@
+import { fn } from "@storybook/test";
+import * as actual from "./useSbomsOfVulnerability";
+
+export * from "./useSbomsOfVulnerability";
+
+export const useSbomsOfVulnerability = fn(
+  actual.useSbomsOfVulnerability
+).mockName("useSbomsOfVulnerability");

client/src/app/pages/vulnerability-details/sboms-by-vulnerability.stories.tsx

@@ -3,18 +3,10 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { BrowserRouter } from "react-router-dom";
 import { SbomsByVulnerability } from "./sboms-by-vulnerability";
-import { http, HttpResponse } from "msw";
 
 const meta = {
   title: "Components/vulnerability-details/sboms-by-vulnerability.tsx",
   component: SbomsByVulnerability,
-  decorators: [
-    (Story) => (
-      <BrowserRouter>
-        <Story />
-      </BrowserRouter>
-    ),
-  ],
   parameters: {
     layout: "fullscreen",
   },
@@ -28,28 +20,24 @@ export const Primary: Story = {
   args: {
     vulnerabilityId: "1",
   },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get("/api/v1/vulnerability/1", () => {
-          return HttpResponse.json({});
-        }),
-      ],
-    },
-  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
 };
 
 export const EmptyState: Story = {
   args: {
     vulnerabilityId: "2",
   },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get("/api/v1/vulnerability/1", () => {
-          return HttpResponse.json({});
-        }),
-      ],
-    },
-  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
 };

client/src/app/pages/vulnerability-details/vulnerability-details.stories.tsx

@@ -2,17 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { BrowserRouter } from "react-router-dom";
 import React from "react";
 import { CveDetails } from "./vulnerability-details";
-import { http, HttpResponse } from "msw";
-import getCve from "@mocks/data/cves/CVE-2024-29025/get.json";
-import sbom1 from "@mocks/data/cves/CVE-2024-29025/0193013f-0f00-77e1-afe4-b7d7f8585b7a.json";
-import sbom2 from "@mocks/data/cves/CVE-2024-29025/0193013f-1b8a-7152-8857-8b8f4238b8ba.json";
 
 const meta = {
   title: "Components/vulnerability-details/vulnerability-details.tsx",
   component: CveDetails,
   parameters: {
     query: {
-      vulnerabilityId: "CVE-2024-29025",
+      vulnerabilityId: "CVE-2023-1664",
     },
   },
   tags: ["autodocs"],
@@ -30,27 +26,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
-  parameters: {
-    msw: {
-      handlers: [
-        http.get("/api/v1/vulnerability/CVE-2024-29025", () => {
-          return HttpResponse.json(getCve);
-        }),
-        http.get(
-          "/api/v1/sbom/urn%3Auuid%3A0193013f-0f00-77e1-afe4-b7d7f8585b7a",
-          () => {
-            return HttpResponse.json(sbom1);
-          }
-        ),
-        http.get(
-          "/api/v1/sbom/urn%3Auuid%3A0193013f-1b8a-7152-8857-8b8f4238b8ba",
-          () => {
-            return HttpResponse.json(sbom2);
-          }
-        ),
-      ],
-    },
-  },
   render: () => {
     const urlParams = new URLSearchParams(document.location.search);
     const mockedParam = urlParams.get("vulnerabilityId");