From cef9e0539d26d9fd05db5d20dddeb853fed09e35 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Mon, 18 Dec 2023 13:36:56 +0000
Subject: [PATCH] fix(storybook): fix test (#5325)

<img width="440" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/329f9c12-cc0b-4aae-9352-3811ab0a27a6">
---
 .../app-sidebar/add-page-button/index.tsx     |  2 +-
 .../page-list/components/new-page-buttton.tsx |  1 -
 .../src/pages/workspace/all-page/all-page.tsx |  8 +++-
 tests/affine-desktop/e2e/basic.spec.ts        |  8 ++--
 tests/affine-local/e2e/all-page.spec.ts       |  7 ++--
 tests/kit/utils/page-logic.ts                 |  2 +-
 tests/kit/utils/sidebar.ts                    |  2 +-
 tests/storybook/.storybook/preview.tsx        |  1 +
 tests/storybook/src/stories/core.stories.tsx  | 40 +++++++++++--------
 9 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/component/src/components/app-sidebar/add-page-button/index.tsx b/packages/frontend/component/src/components/app-sidebar/add-page-button/index.tsx
index 43bde9f114b4f..405e111d4bd41 100644
--- a/packages/frontend/component/src/components/app-sidebar/add-page-button/index.tsx
+++ b/packages/frontend/component/src/components/app-sidebar/add-page-button/index.tsx
@@ -21,7 +21,7 @@ export function AddPageButton({
 
   return (
     <button
-      data-testid="new-page-button"
+      data-testid="sidebar-new-page-button"
       style={style}
       className={clsx([styles.root, className])}
       onClick={onClick}
diff --git a/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx b/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
index 5267b25b26063..8cdc0bb2adc26 100644
--- a/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
+++ b/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
@@ -95,7 +95,6 @@ export const NewPageButton = ({
     >
       <DropdownButton
         size={size}
-        data-testid="new-page-button"
         onClick={useCallback(() => {
           createNewPage();
           setOpen(false);
diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx b/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
index 628b68ea0393c..6e1cbda9c737c 100644
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
@@ -72,7 +72,9 @@ const PageListHeader = () => {
   return (
     <div className={styles.allPagesHeader}>
       <div className={styles.allPagesHeaderTitle}>{title}</div>
-      <NewPageButton>{t['New Page']()}</NewPageButton>
+      <NewPageButton testId="new-page-button-trigger">
+        {t['New Page']()}
+      </NewPageButton>
     </div>
   );
 };
@@ -180,16 +182,18 @@ const NewPageButton = ({
   className,
   children,
   size,
+  testId,
 }: PropsWithChildren<{
   className?: string;
   size?: 'small' | 'default';
+  testId?: string;
 }>) => {
   const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { importFile, createEdgeless, createPage } = usePageHelper(
     currentWorkspace.blockSuiteWorkspace
   );
   return (
-    <div className={className}>
+    <div className={className} data-testid={testId}>
       <PureNewPageButton
         size={size}
         importFile={importFile}
diff --git a/tests/affine-desktop/e2e/basic.spec.ts b/tests/affine-desktop/e2e/basic.spec.ts
index 958d5dce787ec..43e21d1259b10 100644
--- a/tests/affine-desktop/e2e/basic.spec.ts
+++ b/tests/affine-desktop/e2e/basic.spec.ts
@@ -14,7 +14,7 @@ const historyShortcut = async (page: Page, command: 'goBack' | 'goForward') => {
 };
 
 test('new page', async ({ page, workspace }) => {
-  await page.getByTestId('new-page-button').click({
+  await page.getByTestId('sidebar-new-page-button').click({
     delay: 100,
   });
   await page.waitForSelector('v-line');
@@ -32,7 +32,7 @@ test('app sidebar router forward/back', async ({ page }) => {
   {
     // create pages
     await page.waitForTimeout(500);
-    await page.getByTestId('new-page-button').click({
+    await page.getByTestId('sidebar-new-page-button').click({
       delay: 100,
     });
     await page.waitForSelector('v-line');
@@ -42,7 +42,7 @@ test('app sidebar router forward/back', async ({ page }) => {
       delay: 100,
     });
     await page.waitForTimeout(500);
-    await page.getByTestId('new-page-button').click({
+    await page.getByTestId('sidebar-new-page-button').click({
       delay: 100,
     });
     await page.waitForSelector('v-line');
@@ -52,7 +52,7 @@ test('app sidebar router forward/back', async ({ page }) => {
       delay: 100,
     });
     await page.waitForTimeout(500);
-    await page.getByTestId('new-page-button').click({
+    await page.getByTestId('sidebar-new-page-button').click({
       delay: 100,
     });
     await page.waitForSelector('v-line');
diff --git a/tests/affine-local/e2e/all-page.spec.ts b/tests/affine-local/e2e/all-page.spec.ts
index 31bf4870a1ad1..4b6698fca2f34 100644
--- a/tests/affine-local/e2e/all-page.spec.ts
+++ b/tests/affine-local/e2e/all-page.spec.ts
@@ -26,12 +26,13 @@ import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 function getAllPage(page: Page) {
-  const newPageButton = page.getByTestId('new-page-button');
+  const newPageButton = page.getByTestId('new-page-button-trigger');
   const newPageDropdown = newPageButton.locator('svg');
-  const edgelessBlockCard = page.getByTestId('switch-edgeless-mode-button');
+  const edgelessBlockCard = page.getByTestId('new-edgeless-button-in-all-page');
 
   async function clickNewPageButton() {
-    return newPageButton.click();
+    const newPageButton = page.getByTestId('new-page-button-trigger');
+    return await newPageButton.click();
   }
 
   async function clickNewEdgelessDropdown() {
diff --git a/tests/kit/utils/page-logic.ts b/tests/kit/utils/page-logic.ts
index 927635dc45a0a..a14733638a1e5 100644
--- a/tests/kit/utils/page-logic.ts
+++ b/tests/kit/utils/page-logic.ts
@@ -16,7 +16,7 @@ export async function waitForAllPagesLoad(page: Page) {
 
 export async function clickNewPageButton(page: Page) {
   // fixme(himself65): if too fast, the page will crash
-  await page.getByTestId('new-page-button').first().click({
+  await page.getByTestId('sidebar-new-page-button').click({
     delay: 100,
   });
   await waitForEditorLoad(page);
diff --git a/tests/kit/utils/sidebar.ts b/tests/kit/utils/sidebar.ts
index 77012782f67b4..b9e685b0a5a3c 100644
--- a/tests/kit/utils/sidebar.ts
+++ b/tests/kit/utils/sidebar.ts
@@ -13,5 +13,5 @@ export async function clickSideBarCurrentWorkspaceBanner(page: Page) {
 }
 
 export async function clickNewPageButton(page: Page) {
-  return page.getByTestId('new-page-button').click();
+  return page.getByTestId('sidebar-new-page-button').click();
 }
diff --git a/tests/storybook/.storybook/preview.tsx b/tests/storybook/.storybook/preview.tsx
index b57b50da35d9b..480b31c23e8a4 100644
--- a/tests/storybook/.storybook/preview.tsx
+++ b/tests/storybook/.storybook/preview.tsx
@@ -116,6 +116,7 @@ bootstrapPluginSystem(store).catch(err => {
 workspaceManager
   .createWorkspace(WorkspaceFlavour.LOCAL, async w => {
     w.meta.setName('test-workspace');
+    w.meta.writeVersion(w);
   })
   .then(id => {
     store.set(
diff --git a/tests/storybook/src/stories/core.stories.tsx b/tests/storybook/src/stories/core.stories.tsx
index 9d55e461e2a92..37a352c650c06 100644
--- a/tests/storybook/src/stories/core.stories.tsx
+++ b/tests/storybook/src/stories/core.stories.tsx
@@ -37,16 +37,17 @@ export const SettingPage: StoryFn = () => {
 };
 SettingPage.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
-  await waitFor(
-    () => {
-      assertExists(canvasElement.querySelector('v-line'));
-    },
-    {
-      timeout: 10000,
-    }
-  );
+  await waitFor(async () => {
+    assertExists(
+      document.body.querySelector(
+        '[data-testid="slider-bar-workspace-setting-button"]'
+      )
+    );
+  });
   await step('click setting modal button', async () => {
-    await userEvent.click(canvas.getByTestId('settings-modal-trigger'));
+    await userEvent.click(
+      canvas.getByTestId('slider-bar-workspace-setting-button')
+    );
   });
   await waitFor(async () => {
     assertExists(
@@ -120,14 +121,13 @@ export const SearchPage: StoryFn = () => {
 };
 SearchPage.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await waitFor(
-    () => {
-      assertExists(canvasElement.querySelector('v-line'));
-    },
-    {
-      timeout: 10000,
-    }
-  );
+  await waitFor(async () => {
+    assertExists(
+      document.body.querySelector(
+        '[data-testid="slider-bar-quick-search-button"]'
+      )
+    );
+  });
   await userEvent.click(canvas.getByTestId('slider-bar-quick-search-button'));
   await waitFor(
     () => {
@@ -153,6 +153,12 @@ 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'));