Merge queue test example

.github/workflows/chromatic.yml

@@ -5,30 +5,29 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: install
         run: yarn install --frozen-lockfile
       - name: run chromatic
-        run: npx chromatic --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'
+        run: CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --project-token=chpt_8adcafffd1b8cdc --only-changed --exit-zero-on-changed --exit-once-uploaded --auto-accept-changes 'main'
         env:
-          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
+          CHROMATIC_PROJECT_TOKEN: chpt_8adcafffd1b8cdc
+          CHROMATIC_INDEX_URL: https://index.staging-chromatic.com
       # - name: Run Chromatic
       #   id: run-chromatic-action
-      #   uses: chromaui/action@v1
+      #   uses: chromaui/action-next@v1
       #   with:
       #     onlyChanged: true
       #     traceChanged: true
       #     diagnostics: true
       #     exitZeroOnChanges: true
       #     exitOnceUploaded: true
       #     autoAcceptChanges: "main"
-      #     skip: "test-chromatic"
       #   env:
       #     CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
       #     STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}

.gitlab-ci.yml

@@ -20,4 +20,3 @@ chromatic_publish:
   stage: test
   script:
     - yarn chromatic
-  interruptible: true

.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const { mergeConfig } = require('vite');
+const turbosnap = require('vite-plugin-turbosnap');
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    if (configType === 'PRODUCTION') {
+      config?.plugins?.push(turbosnap({ rootDir: config.root }));
+    }
+    return mergeConfig(config, {
+      // customize the Vite config here
+      resolve: {
+        alias: { foo: 'bar' },
+      },
+    });
+  },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export default parameters;

package.json

@@ -7,31 +7,33 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic@latest --only-changed --trace-changed 'expanded' --auto-accept-changes main --exit-zero-on-changes --exit-once-uploaded --project-token=b7e18a53b1f3"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "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": "9.1.1--canary.857.7006504909.0",
+    "chromatic": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/react": "^6.5.10",
-    "@storybook/testing-library": "0.0.13",
+    "@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",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.7",
-    "vite-plugin-turbosnap": "^1.0.1"
+    "storybook": "^7.6.12",
+    "typescript": "^5.3.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/Button.stories.tsx

@@ -1,41 +1,44 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+type Story = StoryObj<typeof Button>;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

src/stories/Header.stories.tsx

@@ -1,25 +1,34 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, fn, expect, createEvent, fireEvent } from '@storybook/test';
 import { Header } from './Header';
 
-export default {
+const meta = {
   title: 'Example/Header',
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Header>;
+  args: {
+    onLogin: fn(),
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+type Story = StoryObj<typeof meta>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  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);
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

src/stories/Page.stories.tsx

@@ -1,26 +1,51 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, fn, expect } from '@storybook/test';
 import { Page } from './Page';
 
-export default {
+const meta = {
   title: 'Example/Page',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+  args: {
+    onClick: fn(),
+    onLogin: fn(),
+  },
+} satisfies Meta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+export default meta;
 
-export const LoggedOut = Template.bind({});
+type Story = StoryObj<typeof meta>;
+// export const LoggedOut: Story = {};
 
-export const LoggedIn = Template.bind({});
+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);
+// };

src/stories/button.css

@@ -9,7 +9,7 @@
 }
 .storybook-button--primary {
   color: white;
-  background-color: blue;
+  background-color: greenyellow;
 }
 .storybook-button--secondary {
   color: #333;