wip

yannbf · Oct 26, 2024 · c0bad62 · c0bad62
1 parent e9f92de
commit c0bad62
Show file tree

Hide file tree

Showing 6 changed files with 451 additions and 1,042 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,18 +2,12 @@ import { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: [
-    '../src/docs/Introduction.mdx',
-    '../src/docs/*.mdx',
-    '../src/**/*.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/RestaurantDetailPage.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@chromatic-com/storybook',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-coverage',
-    '@storybook/addon-designs',
+    '@storybook/experimental-addon-test'
   ],
   typescript: {
     reactDocgen: 'react-docgen',

diff --git a/.storybook/vitest.setup.ts b/.storybook/vitest.setup.ts
@@ -6,4 +6,4 @@ import * as projectAnnotations from './preview';
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 const project = setProjectAnnotations([projectAnnotations]);
 
-beforeAll(project.beforeAll);
+beforeAll(project.beforeAll);
diff --git a/package.json b/package.json
@@ -57,22 +57,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.1.0",
     "@ladle/react": "^4.1.2",
-    "@storybook/addon-a11y": "^8.3.0",
+    "@storybook/addon-a11y": "^8.4.0-beta.0",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-themes": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/experimental-addon-test": "^8.3.0",
-    "@storybook/manager-api": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
-    "@storybook/test": "^8.3.0",
+    "@storybook/addon-essentials": "^8.4.0-beta.0",
+    "@storybook/addon-themes": "^8.4.0-beta.0",
+    "@storybook/blocks": "^8.4.0-beta.0",
+    "@storybook/experimental-addon-test": "^8.4.0-beta.0",
+    "@storybook/manager-api": "^8.4.0-beta.0",
+    "@storybook/react": "^8.4.0-beta.0",
+    "@storybook/react-vite": "^8.4.0-beta.0",
+    "@storybook/test": "^8.4.0-beta.0",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.0",
+    "@storybook/theming": "^8.4.0-beta.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -116,7 +115,7 @@
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.3.0",
+    "storybook": "^8.4.0-beta.0",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",

diff --git a/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx b/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
@@ -4,16 +4,22 @@ import { expect } from '@storybook/test'
 
 import { BASE_URL } from '../../api'
 import { restaurants } from '../../stub/restaurants'
-import { cartItems } from '../../stub/cart-items'
 import { withDeeplink } from '../../../.storybook/withDeeplink'
 
 import { RestaurantDetailPage } from './RestaurantDetailPage'
 
 const meta = {
   title: 'Pages/RestaurantDetailPage',
   component: RestaurantDetailPage,
+  tags: ['autodocs'],
   decorators: [withDeeplink],
   parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 400,
+      }
+    },
     layout: 'fullscreen',
     deeplink: {
       route: '/restaurants/1',
@@ -33,6 +39,26 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+
+function isolatedResolver(resolver: any) {
+  return (info: any) => {
+    console.log('INSIDE RESOLVER RESOLVING')
+    const node = document.createElement('p')
+    node.id = "MSW_DEBUG"
+    node.style.fontSize = '50px'
+    node.style.color = 'red'
+    node.style.fontWeight = 'bold'
+    node.style.zIndex = '999'
+    node.innerText = info.request.referrer + '-' + location.href
+    document.body.appendChild(node)
+    console.log('info', { requestReferrer: info.request.referrer, href: location.href })
+    if (info.request.referrer !== location.href) {
+      return
+    }
+    return resolver(info)
+  }
+}
+
 export const Success = {
   parameters: {
     design: {
@@ -41,9 +67,10 @@ export const Success = {
     },
     msw: {
       handlers: [
-        http.get(BASE_URL, () => {
+        http.get(BASE_URL, isolatedResolver(() => {
+          console.log('INSIDE RESOLVER CB')
           return HttpResponse.json(restaurants[0])
-        }),
+        })),
       ],
     },
   },
@@ -53,25 +80,6 @@ export const Success = {
   },
 } satisfies Story
 
-export const WithModalOpen: Story = {
-  ...Success,
-  play: async (context) => {
-    await Success.play(context)
-    const item = await context.canvas.findByText(/Cheeseburger/i)
-    await context.userEvent.click(item)
-    await expect(context.canvas.getByTestId('modal')).toBeInTheDocument()
-  },
-}
-
-export const WithItemsInTheCart: Story = {
-  parameters: {
-    ...Success.parameters,
-    store: {
-      initialState: { cart: { items: cartItems } },
-    },
-  },
-}
-
 export const Loading: Story = {
   parameters: {
     design: {
@@ -80,9 +88,9 @@ export const Loading: Story = {
     },
     msw: {
       handlers: [
-        http.get(BASE_URL, async () => {
+        http.get(BASE_URL, isolatedResolver(async () => {
           await delay('infinite')
-        }),
+        })),
       ],
     },
   },
@@ -100,9 +108,9 @@ export const NotFound: Story = {
     },
     msw: {
       handlers: {
-        error: http.get(BASE_URL, () => {
+        error: http.get(BASE_URL, isolatedResolver(() => {
           return HttpResponse.json(null, { status: 404 })
-        }),
+        })),
       },
     },
   },
@@ -120,9 +128,9 @@ export const Error: Story = {
     },
     msw: {
       handlers: [
-        http.get(BASE_URL, () => {
+        http.get(BASE_URL, isolatedResolver(() => {
           return HttpResponse.json({}, { status: 500 })
-        }),
+        })),
       ],
     },
   },

diff --git a/vitest.workspace.ts b/vitest.workspace.ts
@@ -15,7 +15,7 @@ export default defineWorkspace([
       name: 'storybook',
       browser: {
         enabled: true,
-        headless: true,
+        headless: false,
         name: 'chromium',
         provider: 'playwright',
       },
@@ -24,14 +24,4 @@ export default defineWorkspace([
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   },
-  // This is just to test legacy code, ignore this.
-  {
-    extends: 'vite.config.ts',
-    test: {
-      name: 'portable-stories',
-      environment: 'happy-dom',
-      include: ['**/*.test.tsx'],
-      setupFiles: ['./ps-setup.ts'],
-    },
-  },
 ]);