From 956cde308ef58d1a86f589bf944a989e1b29472f Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Sat, 19 Aug 2023 12:30:24 -0500
Subject: [PATCH] feat(storybook): avoid refresh (#3841)

---
 apps/storybook/.storybook/preview.tsx       |  6 ++++
 apps/storybook/src/stories/core.stories.tsx | 37 ++++++++++++---------
 tests/fixtures/tsconfig.json                |  3 +-
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
index 48a03067d9..3dcc7c59ed 100644
--- a/apps/storybook/.storybook/preview.tsx
+++ b/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;
     },
     {
diff --git a/apps/storybook/src/stories/core.stories.tsx b/apps/storybook/src/stories/core.stories.tsx
index 2ed2f1efda..401dea8873 100644
--- a/apps/storybook/src/stories/core.stories.tsx
+++ b/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 = {
diff --git a/tests/fixtures/tsconfig.json b/tests/fixtures/tsconfig.json
index ae68bb7122..bd90e03952 100644
--- a/tests/fixtures/tsconfig.json
+++ b/tests/fixtures/tsconfig.json
@@ -8,5 +8,6 @@
     "module": "NodeNext",
     "resolveJsonModule": true
   },
-  "include": [".", "./*.json"]
+  "include": [".", "./*.json"],
+  "exclude": ["./tsconfig.json"]
 }