test: support e2e in storybook (#1533)

packages/component/.storybook/vite.config.ts

@@ -1,15 +1,24 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
-import path from 'node:path';
+import { resolve } from 'node:path';
 import { fileURLToPath } from 'url';
+import istanbul from 'vite-plugin-istanbul';
 
 const config: Pick<StorybookConfig, 'viteFinal'> = {
   async viteFinal(config, { configType }) {
     return mergeConfig(config, {
+      plugins: [
+        istanbul({
+          include: ['src/*'],
+          exclude: ['node_modules', 'test', 'stories'],
+          extension: ['.ts', '.tsx'],
+          forceBuildInstrument: process.env.COVERAGE === 'true',
+        }),
+      ],
       resolve: {
         alias: {
-          '@': path.resolve(fileURLToPath(new URL('../src', import.meta.url))),
-          '@affine/i18n': path.resolve(
+          '@': resolve(fileURLToPath(new URL('../src', import.meta.url))),
+          '@affine/i18n': resolve(
             fileURLToPath(new URL('../../i18n/src', import.meta.url))
           ),
         },

packages/component/package.json

@@ -35,14 +35,14 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-rc.1",
-    "@storybook/addon-essentials": "7.0.0-rc.1",
-    "@storybook/addon-interactions": "7.0.0-rc.1",
-    "@storybook/addon-links": "7.0.0-rc.1",
-    "@storybook/builder-vite": "7.0.0-rc.1",
+    "@storybook/addon-actions": "7.0.0-rc.7",
+    "@storybook/addon-essentials": "7.0.0-rc.7",
+    "@storybook/addon-interactions": "7.0.0-rc.7",
+    "@storybook/addon-links": "7.0.0-rc.7",
+    "@storybook/builder-vite": "7.0.0-rc.7",
     "@storybook/jest": "0.0.10",
-    "@storybook/react": "7.0.0-rc.1",
-    "@storybook/react-vite": "7.0.0-rc.1",
+    "@storybook/react": "7.0.0-rc.7",
+    "@storybook/react-vite": "7.0.0-rc.7",
     "@storybook/test-runner": "0.10.0-next.11",
     "@storybook/testing-library": "0.0.14-next.1",
     "@types/react": "^18.0.28",

packages/component/src/stories/Button.stories.tsx

@@ -1,5 +1,6 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
 import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 
 import { Button } from '..';
 import type { ButtonProps } from '../ui/button/interface';
@@ -44,3 +45,27 @@ Danger.args = {
   type: 'danger',
   children: 'This is a danger button',
 };
+
+export const Test: StoryFn<ButtonProps> = () => {
+  const [input, setInput] = useState('');
+  return (
+    <>
+      <input
+        type="text"
+        data-testid="test-input"
+        value={input}
+        onChange={e => setInput(e.target.value)}
+      />
+      <Button
+        onClick={() => {
+          setInput('');
+        }}
+        data-testid="clear-button"
+      >
+        clear
+      </Button>
+    </>
+  );
+};
+
+Test.storyName = 'Click Test';

packages/component/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["./src"]
+  "include": ["./src", "./.storybook/*.ts"]
 }