From 3cd1c1fced91ae1044f79a2b8467d03b671db6f6 Mon Sep 17 00:00:00 2001
From: nathan <nathan@appflowy.io>
Date: Wed, 24 Sep 2025 15:33:38 +0800
Subject: [PATCH] test: style test2

---
 cypress/e2e/editor/document-editing.cy.ts     | 36 +++++++++----------
 cypress/e2e/editor/slash-menu.cy.ts           |  4 +--
 cypress/support/selectors.ts                  | 24 +++++++++++++
 .../selection-toolbar/SelectionToolbar.tsx    |  1 +
 .../selection-toolbar/actions/Bold.tsx        |  1 +
 .../selection-toolbar/actions/InlineCode.tsx  |  1 +
 .../selection-toolbar/actions/Italic.tsx      |  1 +
 .../actions/StrikeThrough.tsx                 |  1 +
 .../selection-toolbar/actions/Underline.tsx   |  1 +
 9 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/cypress/e2e/editor/document-editing.cy.ts b/cypress/e2e/editor/document-editing.cy.ts
index 5e667e37..7d683472 100644
--- a/cypress/e2e/editor/document-editing.cy.ts
+++ b/cypress/e2e/editor/document-editing.cy.ts
@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { AuthTestUtils } from '../../support/auth-utils';
+import { EditorSelectors } from '../../support/selectors';
 
 describe('Document Editing with Formatting', () => {
   const generateRandomEmail = () => `${uuidv4()}@appflowy.io`;
@@ -26,9 +27,8 @@ describe('Document Editing with Formatting', () => {
       cy.wait(5000);
 
       // Find and focus the editor
-      cy.get('[data-slate-editor="true"]', { timeout: 10000 })
+      EditorSelectors.firstEditor()
         .should('exist')
-        .first()
         .click({ force: true });
       cy.wait(1000);
 
@@ -65,9 +65,9 @@ describe('Document Editing with Formatting', () => {
       cy.wait(1000);
 
       // Verify content
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Document Title');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Main Heading');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Some content text');
+      EditorSelectors.slateEditor().should('contain.text', 'Document Title');
+      EditorSelectors.slateEditor().should('contain.text', 'Main Heading');
+      EditorSelectors.slateEditor().should('contain.text', 'Some content text');
     });
   });
 
@@ -88,9 +88,8 @@ describe('Document Editing with Formatting', () => {
       cy.wait(5000);
 
       // Find and focus the editor
-      cy.get('[data-slate-editor="true"]', { timeout: 10000 })
+      EditorSelectors.firstEditor()
         .should('exist')
-        .first()
         .click({ force: true });
       cy.wait(1000);
 
@@ -136,10 +135,10 @@ describe('Document Editing with Formatting', () => {
       cy.wait(1000);
 
       // Verify content
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Shopping List');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Apples');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Bananas');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Oranges');
+      EditorSelectors.slateEditor().should('contain.text', 'Shopping List');
+      EditorSelectors.slateEditor().should('contain.text', 'Apples');
+      EditorSelectors.slateEditor().should('contain.text', 'Bananas');
+      EditorSelectors.slateEditor().should('contain.text', 'Oranges');
     });
   });
 
@@ -160,9 +159,8 @@ describe('Document Editing with Formatting', () => {
       cy.wait(5000);
 
       // Find and focus the editor
-      cy.get('[data-slate-editor="true"]', { timeout: 10000 })
+      EditorSelectors.firstEditor()
         .should('exist')
-        .first()
         .click({ force: true });
       cy.wait(1000);
 
@@ -235,12 +233,12 @@ describe('Document Editing with Formatting', () => {
       cy.wait(1000);
 
       // Verify content
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Steps to Follow');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'First step');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Second step');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Tasks');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Complete report');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Review code');
+      EditorSelectors.slateEditor().should('contain.text', 'Steps to Follow');
+      EditorSelectors.slateEditor().should('contain.text', 'First step');
+      EditorSelectors.slateEditor().should('contain.text', 'Second step');
+      EditorSelectors.slateEditor().should('contain.text', 'Tasks');
+      EditorSelectors.slateEditor().should('contain.text', 'Complete report');
+      EditorSelectors.slateEditor().should('contain.text', 'Review code');
     });
   });
 });
\ No newline at end of file
diff --git a/cypress/e2e/editor/slash-menu.cy.ts b/cypress/e2e/editor/slash-menu.cy.ts
index 84e9f94f..a7d73b69 100644
--- a/cypress/e2e/editor/slash-menu.cy.ts
+++ b/cypress/e2e/editor/slash-menu.cy.ts
@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { AuthTestUtils } from '../../support/auth-utils';
-import { PageSelectors, waitForReactUpdate } from '../../support/selectors';
+import { EditorSelectors, PageSelectors, waitForReactUpdate } from '../../support/selectors';
 
 describe('Editor Slash Menu', () => {
   const generateRandomEmail = () => `${uuidv4()}@appflowy.io`;
@@ -37,7 +37,7 @@ describe('Editor Slash Menu', () => {
       cy.wait(5000); // Give page time to fully load
 
       // Focus on editor
-      cy.get('[data-slate-editor="true"]').should('exist').click();
+      EditorSelectors.slateEditor().should('exist').click();
       waitForReactUpdate(1000);
 
       // Type slash to open menu
diff --git a/cypress/support/selectors.ts b/cypress/support/selectors.ts
index 131d5903..8a7afc0b 100644
--- a/cypress/support/selectors.ts
+++ b/cypress/support/selectors.ts
@@ -303,6 +303,30 @@ export const CheckboxSelectors = {
   uncheckedCells: () => cy.get('[data-checked="false"]'),
 };
 
+/**
+ * Editor-related selectors
+ */
+export const EditorSelectors = {
+  // Main Slate editor
+  slateEditor: () => cy.get('[data-slate-editor="true"]'),
+
+  // Get first editor
+  firstEditor: () => cy.get('[data-slate-editor="true"]').first(),
+
+  // Get editor with specific content
+  editorWithText: (text: string) => cy.get('[data-slate-editor="true"]').contains(text),
+
+  // Selection toolbar
+  selectionToolbar: () => cy.get('[data-testid="selection-toolbar"]'),
+
+  // Formatting buttons in toolbar
+  boldButton: () => cy.get('[data-testid="toolbar-bold-button"]'),
+  italicButton: () => cy.get('[data-testid="toolbar-italic-button"]'),
+  underlineButton: () => cy.get('[data-testid="toolbar-underline-button"]'),
+  strikethroughButton: () => cy.get('[data-testid="toolbar-strikethrough-button"]'),
+  codeButton: () => cy.get('[data-testid="toolbar-code-button"]'),
+};
+
 /**
  * Helper function to wait for React to re-render after state changes
  */
diff --git a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx
index a35e8711..8704bb37 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx
@@ -43,6 +43,7 @@ export function SelectionToolbar() {
     <SelectionToolbarContext.Provider value={{ visible, forceShow, rePosition, getDecorateState }}>
       <div
         ref={ref}
+        data-testid="selection-toolbar"
         className={
           'selection-toolbar pointer-events-none transform transition-opacity duration-200 absolute z-[100] flex min-h-[32px] w-fit flex-grow items-center rounded-lg bg-[var(--fill-toolbar)] px-2 opacity-0 shadow-lg'
         }
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx
index 80e3a5dd..537156a1 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx
@@ -25,6 +25,7 @@ export function Bold() {
     <ActionButton
       onClick={onClick}
       active={isActivated}
+      data-testid="toolbar-bold-button"
       tooltip={
         <>
           <div>{t('toolbar.bold')}</div>
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx
index 0afe9537..f3ff2898 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx
@@ -24,6 +24,7 @@ export function InlineCode() {
     <ActionButton
       onClick={onClick}
       active={isActivated}
+      data-testid="toolbar-code-button"
       tooltip={
         <>
           <div>{t('editor.embedCode')}</div>
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx
index 0df1909a..38cc8eb8 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx
@@ -24,6 +24,7 @@ export function Italic() {
     <ActionButton
       onClick={onClick}
       active={isActivated}
+      data-testid="toolbar-italic-button"
       tooltip={
         <>
           <div>{t('toolbar.italic')}</div>
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx
index ee248ff6..58ff8c17 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx
@@ -24,6 +24,7 @@ export function StrikeThrough() {
     <ActionButton
       onClick={onClick}
       active={isActivated}
+      data-testid="toolbar-strikethrough-button"
       tooltip={
         <>
           <div>{t('editor.strikethrough')}</div>
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx
index e6a45202..f9042239 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx
@@ -24,6 +24,7 @@ export function Underline() {
     <ActionButton
       onClick={onClick}
       active={isActivated}
+      data-testid="toolbar-underline-button"
       tooltip={
         <>
           <div>{t('editor.underline')}</div>