Update stories

package.json

@@ -12,28 +12,28 @@
     "chromatic": "npx chromatic --project-token=b7e18a53b1f3 --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'"
   },
   "dependencies": {
-    "chromatic": "10.2.2--canary.884.7480424995.0",
+    "chromatic": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
-    "@storybook/test": "^7.6.7",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
+    "@storybook/test": "^7.6.12",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "babel-loader": "^8.2.5",
-    "storybook": "^7.6.7",
+    "storybook": "^7.6.12",
     "typescript": "^5.3.3",
-    "vite": "^3.0.7",
-    "vite-plugin-turbosnap": "^1.0.1",
-    "vitest": "^1.1.3"
+    "vite": "^5.0.12",
+    "vite-plugin-turbosnap": "^1.0.3",
+    "vitest": "^1.2.2"
   },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]"

src/stories/Header.stories.tsx

@@ -1,25 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
+import { within, fn, expect, createEvent, fireEvent } from '@storybook/test';
 import { Header } from './Header';
 
-const meta: Meta<typeof Header> = {
+const meta = {
   title: 'Example/Header',
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-};
+  args: {
+    onLogin: fn(),
+  },
+} satisfies Meta<typeof Header>;
 
 export default meta;
 
-type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
+  args: {},
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.findByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    const clickHyperlink = createEvent.click(loginButton);
+    const isPrevented = fireEvent(loginButton, clickHyperlink);
+    await expect(args.onLogin).toHaveBeenCalled();
+    expect(isPrevented).toBe(true);
   },
 };
 

src/stories/Page.stories.tsx

@@ -1,26 +1,51 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/test';
+import { within, userEvent, fn, expect } from '@storybook/test';
 import { Page } from './Page';
 
-const meta: Meta<typeof Page> = {
+const meta = {
   title: 'Example/Page',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-};
+  args: {
+    onClick: fn(),
+    onLogin: fn(),
+  },
+} satisfies Meta<typeof Page>;
 
 export default meta;
 
-type Story = StoryObj<typeof Page>;
-export const LoggedOut: Story = {};
+type Story = StoryObj<typeof meta>;
+// export const LoggedOut: Story = {};
 
-export const LoggedIn: Story = {};
+export const LoggedIn: Story = {
+  args: {
+    user: { name: 'Test User' },
+  },
+  // play: async ({ args, canvasElement }) => {
+  //   const canvas = within(canvasElement);
+  //   const loginButton = await canvas.findByRole('button', { name: /Log in/i });
+  //   await expect(loginButton).toBeInTheDocument();
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+  //   // const mockEvent = { preventDefault: fn() };
+  //   userEvent.click(loginButton);
+  //   await expect(args.onLogin).toHaveBeenCalled();
+  //   // expect(mockEvent.preventDefault).toBeCalled();
+  //   // const clickHyperlink = createEvent.click(loginButton);
+  //   // const isPrevented = fireEvent(loginButton, clickHyperlink);
+  //   // expect(clickHyperlink.defaultPrevented).toBe(true);
+  //   // expect(isPrevented).toBe(false);
+  //   // await userEvent.click(clickHyperlink);
+  // },
 };
+
+// // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// LoggedIn.play = async ({ canvasElement }) => {
+//   const canvas = within(canvasElement);
+//   const loginButton = await canvas.getByRole('button', { name: /Log out/i });
+//   const clickHyperlink = createEvent.click(loginButton);
+//   fireEvent(loginButton, clickHyperlink);
+//   // await userEvent.click(clickHyperlink);
+// };