From 3ae12ebdfcb086cb8f992d6ce91aeb151078ec05 Mon Sep 17 00:00:00 2001
From: tzhangchi <terry.zhangchi@outlook.com>
Date: Fri, 23 Dec 2022 23:15:32 +0800
Subject: [PATCH] test: add test for Convert to edgeless by editor header items

---
 .../components/editor-mode-switch/index.tsx   |  2 +-
 .../header-right-items/editor-option-menu.tsx |  1 +
 packages/app/src/components/header/header.tsx |  2 +-
 tests/change-page-mode.spec.ts                | 19 +++++++++++++++++--
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/editor-mode-switch/index.tsx b/packages/app/src/components/editor-mode-switch/index.tsx
index 251171e0b5..8a219e4757 100644
--- a/packages/app/src/components/editor-mode-switch/index.tsx
+++ b/packages/app/src/components/editor-mode-switch/index.tsx
@@ -127,7 +127,7 @@ export const EditorModeSwitch = ({
       <AnimateRadioItem
         isLeft={false}
         label="Edgeless"
-        data-testid="edgeless-item"
+        data-testid="switch-edgeless-item"
         icon={<EdgelessItem />}
         active={mode === 'edgeless'}
         status={radioItemStatus.right}
diff --git a/packages/app/src/components/header/header-right-items/editor-option-menu.tsx b/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
index 462367e916..ea809a9489 100644
--- a/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
+++ b/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
@@ -42,6 +42,7 @@ const PopoverContent = () => {
       </MenuItem>
       <MenuItem
         icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
+        data-testid="menus-edgeless-item"
         onClick={() => {
           changePageMode(id, mode === 'page' ? 'edgeless' : 'page');
         }}
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index 1287ff72d6..919d89d7be 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -56,7 +56,7 @@ export const Header = ({
           setShowWarning(false);
         }}
       />
-      <StyledHeader hasWarning={showWarning}>
+      <StyledHeader hasWarning={showWarning} data-testid="editor-header-items">
         {children}
         <StyledHeaderRightSide>
           {rightItems.map(itemName => {
diff --git a/tests/change-page-mode.spec.ts b/tests/change-page-mode.spec.ts
index 48bc96129c..195b03a5eb 100644
--- a/tests/change-page-mode.spec.ts
+++ b/tests/change-page-mode.spec.ts
@@ -4,7 +4,7 @@ import { loadPage } from './libs/load-page';
 loadPage();
 
 test.describe('Change page mode(Paper or Edgeless)', () => {
-  test('Switch to edgeless', async ({ page }) => {
+  test('Switch to edgeless by switch edgeless item', async ({ page }) => {
     const switcher = page.locator('[data-testid=editor-mode-switcher]');
     const box = await switcher.boundingBox();
     await expect(box?.x).not.toBeUndefined();
@@ -14,7 +14,7 @@ test.describe('Change page mode(Paper or Edgeless)', () => {
     await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10);
 
     // await page.waitForTimeout(1000);
-    const edgelessButton = page.getByTestId('edgeless-item'); // page.getByText('Edgeless').click()
+    const edgelessButton = page.getByTestId('switch-edgeless-item'); // page.getByText('Edgeless').click()
 
     await edgelessButton.click();
 
@@ -36,4 +36,19 @@ test.describe('Change page mode(Paper or Edgeless)', () => {
 
     await expect(await edgelessDom.isVisible()).toBe(true);
   });
+
+  test('Convert to edgeless by editor header items', async ({ page }) => {
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+    const menusEdgelessItem = page.getByTestId('menus-edgeless-item');
+
+    await menusEdgelessItem.click();
+
+    const edgelessDom = page.locator('affine-edgeless-page');
+
+    await expect(await edgelessDom.isVisible()).toBe(true);
+  });
 });