test: support e2e in storybook (#1533)

apps/desktop/package.json

@@ -7,7 +7,7 @@
   "module": "true",
   "scripts": {
     "dev:app": "NODE_ENV=development tauri dev",
-    "dev:web": "yarn workspace @affine/app dev",
+    "dev:web": "yarn workspace @affine/web dev",
     "build:rs-types": "zx scripts/generateTsTypingsFromJsonSchema.mjs",
     "build:affine": "zx scripts/buildAffine.mjs",
     "build:preload": "esbuild src/preload/index.ts --outdir=public/preload",

apps/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@affine/app",
+  "name": "@affine/web",
   "private": true,
   "scripts": {
     "dev": "node src/server.mjs",

package.json

@@ -11,15 +11,17 @@
   ],
   "scripts": {
     "dev": "dev-web",
-    "dev:ac": "NODE_API_SERVER=ac yarn workspace @affine/app dev",
-    "dev:local": "NODE_API_SERVER=local yarn workspace @affine/app dev",
+    "dev:ac": "NODE_API_SERVER=ac yarn workspace @affine/web dev",
+    "dev:local": "NODE_API_SERVER=local yarn workspace @affine/web dev",
     "dev:app": "yarn workspace @affine/electron dev:app",
-    "build": "yarn workspace @affine/app build",
+    "build": "yarn workspace @affine/web build",
     "build:client": "yarn workspace @affine/client-app build:app",
     "build:storybook": "yarn workspace @affine/component build-storybook",
     "bump:nightly": "./scripts/bump-blocksuite.sh",
-    "export": "yarn workspace @affine/app export",
-    "start": "yarn workspace @affine/app start",
+    "export": "yarn workspace @affine/web export",
+    "start": "yarn workspace @affine/web start",
+    "start:storybook": "yarn exec serve packages/component/storybook-static -l 6006",
+    "start:e2e": "yar dlx run-p start start:storybook",
     "lint": "eslint . --ext .js,mjs,.ts,.tsx",
     "lint:fix": "yarn lint --fix",
     "test": "playwright test",
@@ -64,8 +66,10 @@
     "prettier": "^2.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "serve": "^14.2.0",
     "typescript": "^5.0.2",
     "vite": "^4.2.0",
+    "vite-plugin-istanbul": "^4.0.1",
     "vitest": "^0.29.3",
     "vitest-fetch-mock": "^0.2.2"
   },

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"]
 }

playwright.config.ts

@@ -55,6 +55,16 @@ const config: PlaywrightTestConfig = {
         JWST_DEV: '1',
       },
     },
+    {
+      command: 'yarn run build:storybook && yarn run start:storybook',
+      port: 6006,
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+      env: {
+        COVERAGE: process.env.COVERAGE || 'false',
+        ENABLE_DEBUG_PAGE: '1',
+      },
+    },
     {
       command: 'yarn build && yarn start -p 8080',
       port: 8080,

tests/parallels/storybook/button.spec.ts

@@ -0,0 +1,29 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '../../libs/playwright';
+
+async function openStorybook(page: Page, storyName?: string) {
+  return page.goto(`http://localhost:6006`);
+}
+
+test.describe('storybook - Button', () => {
+  test('Basic', async ({ page }) => {
+    await openStorybook(page);
+    await page.click('#storybook-explorer-tree >> #affine-button');
+    await page.click('#affine-button--test');
+
+    const iframe = page.frameLocator('iframe');
+    await iframe
+      .locator('input[data-testid="test-input"]')
+      .type('Hello World!');
+
+    expect(
+      await iframe.locator('input[data-testid="test-input"]').inputValue()
+    ).toBe('Hello World!');
+    await iframe.locator('[data-testid="clear-button"]').click();
+    expect(
+      await iframe.locator('input[data-testid="test-input"]').textContent()
+    ).toBe('');
+  });
+});