feat(storybook): avoid refresh (#3841)

apps/storybook/.storybook/preview.tsx

@@ -52,15 +52,21 @@ const ThemeChange = () => {
   return null;
 };
 
+const storeMap = new Map<string, ReturnType<typeof createStore>>();
+
 const withContextDecorator: Decorator = (Story, context) => {
   const { data: store } = useSWR(
     context.id,
     async () => {
+      if (storeMap.has(context.id)) {
+        return storeMap.get(context.id);
+      }
       localStorage.clear();
       const store = createStore();
       _setCurrentStore(store);
       await setup(store);
       await bootstrapPluginSystem(store);
+      storeMap.set(context.id, store);
       return store;
     },
     {

apps/storybook/src/stories/core.stories.tsx

@@ -1,7 +1,7 @@
 import { routes } from '@affine/core/router';
 import { assertExists } from '@blocksuite/global/utils';
 import type { StoryFn } from '@storybook/react';
-import { userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { Outlet, useLocation } from 'react-router-dom';
 import {
   reactRouterOutlets,
@@ -35,21 +35,26 @@ Index.parameters = {
 export const SettingPage: StoryFn = () => {
   return <FakeApp />;
 };
-SettingPage.play = async ({ canvasElement }) => {
-  await waitFor(
-    () => {
-      assertExists(
-        canvasElement.querySelector('[data-testid="settings-modal-trigger"]')
-      );
-    },
-    {
-      timeout: 5000,
-    }
-  );
-  const settingModalBtn = canvasElement.querySelector(
-    '[data-testid="settings-modal-trigger"]'
-  ) as Element;
-  await userEvent.click(settingModalBtn);
+SettingPage.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await waitFor(async () => {
+    assertExists(canvasElement.querySelector('v-line'));
+  });
+  await step('click setting modal button', async () => {
+    await userEvent.click(canvas.getByTestId('settings-modal-trigger'));
+  });
+  await waitFor(async () => {
+    assertExists(
+      document.body.querySelector('[data-testid="language-menu-button"]')
+    );
+  });
+  await step('click language menu button', async () => {
+    await userEvent.click(
+      document.body.querySelector(
+        '[data-testid="language-menu-button"]'
+      ) as HTMLElement
+    );
+  });
 };
 SettingPage.decorators = [withRouter];
 SettingPage.parameters = {

tests/fixtures/tsconfig.json

@@ -8,5 +8,6 @@
     "module": "NodeNext",
     "resolveJsonModule": true
   },
-  "include": [".", "./*.json"]
+  "include": [".", "./*.json"],
+  "exclude": ["./tsconfig.json"]
 }