fix(storybook): fix test (#5325)

<img width="440" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/329f9c12-cc0b-4aae-9352-3811ab0a27a6">

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}

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);

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}

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');

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() {

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);

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();
 }

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(

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'));