From 6fefe4ec715e087ff2b4b63750336b70f8d537ba Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 28 Dec 2023 10:07:05 +0000
Subject: [PATCH] fix(storybook): storybook flaky (#5430)

should add additional wait timeout for every story.play

I think this is a storybook issue. It seems that it starts to run the plays as soon as the following shows up:

![CleanShot 2023-12-28 at 17.32.49@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/33d5e49d-a2fd-46c5-9f31-0f7cc14c3acf.png)
---
 tests/storybook/src/stories/core.stories.tsx | 54 ++++++++++++--------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/tests/storybook/src/stories/core.stories.tsx b/tests/storybook/src/stories/core.stories.tsx
index 37a352c650..c5cf157abb 100644
--- a/tests/storybook/src/stories/core.stories.tsx
+++ b/tests/storybook/src/stories/core.stories.tsx
@@ -37,13 +37,18 @@ export const SettingPage: StoryFn = () => {
 };
 SettingPage.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
-  await waitFor(async () => {
-    assertExists(
-      document.body.querySelector(
-        '[data-testid="slider-bar-workspace-setting-button"]'
-      )
-    );
-  });
+  await waitFor(
+    async () => {
+      assertExists(
+        document.body.querySelector(
+          '[data-testid="slider-bar-workspace-setting-button"]'
+        )
+      );
+    },
+    {
+      timeout: 10000,
+    }
+  );
   await step('click setting modal button', async () => {
     await userEvent.click(
       canvas.getByTestId('slider-bar-workspace-setting-button')
@@ -121,13 +126,18 @@ export const SearchPage: StoryFn = () => {
 };
 SearchPage.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await waitFor(async () => {
-    assertExists(
-      document.body.querySelector(
-        '[data-testid="slider-bar-quick-search-button"]'
-      )
-    );
-  });
+  await waitFor(
+    async () => {
+      assertExists(
+        document.body.querySelector(
+          '[data-testid="slider-bar-quick-search-button"]'
+        )
+      );
+    },
+    {
+      timeout: 3000,
+    }
+  );
   await userEvent.click(canvas.getByTestId('slider-bar-quick-search-button'));
   await waitFor(
     () => {
@@ -153,20 +163,20 @@ export const ImportPage: StoryFn = () => {
 };
 ImportPage.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await waitFor(async () => {
-    assertExists(
-      document.body.querySelector('[data-testid="sidebar-new-page-button"]')
-    );
-  });
-  await userEvent.click(canvas.getByTestId('sidebar-new-page-button'));
   await waitFor(
-    () => {
-      assertExists(canvasElement.querySelector('v-line'));
+    async () => {
+      assertExists(
+        document.body.querySelector('[data-testid="sidebar-new-page-button"]')
+      );
     },
     {
       timeout: 10000,
     }
   );
+  await userEvent.click(canvas.getByTestId('sidebar-new-page-button'));
+  await waitFor(() => {
+    assertExists(canvasElement.querySelector('v-line'));
+  });
   await waitFor(() => {
     assertExists(
       canvasElement.querySelector('[data-testid="header-dropDownButton"]')