javascript/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2026-03-13 10:00:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: style test2

Browse Source
This commit is contained in:
nathan
2025-09-24 15:33:38 +08:00
parent b7897a253a
commit 3cd1c1fced
9 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
cypress/e2e/editor/document-editing.cy.ts
View File

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

4
cypress/e2e/editor/slash-menu.cy.ts
View File

@@ -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

24
cypress/support/selectors.ts
View File

@@ -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
*/

1
src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx
View File

@@ -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'
}

1
src/components/editor/components/toolbar/selection-toolbar/actions/Bold.tsx
View File

@@ -25,6 +25,7 @@ export function Bold() {
<ActionButton
onClick={onClick}
active={isActivated}
data-testid="toolbar-bold-button"
tooltip={
<>
<div>{t('toolbar.bold')}</div>

1
src/components/editor/components/toolbar/selection-toolbar/actions/InlineCode.tsx
View File

@@ -24,6 +24,7 @@ export function InlineCode() {
<ActionButton
onClick={onClick}
active={isActivated}
data-testid="toolbar-code-button"
tooltip={
<>
<div>{t('editor.embedCode')}</div>

1
src/components/editor/components/toolbar/selection-toolbar/actions/Italic.tsx
View File

@@ -24,6 +24,7 @@ export function Italic() {
<ActionButton
onClick={onClick}
active={isActivated}
data-testid="toolbar-italic-button"
tooltip={
<>
<div>{t('toolbar.italic')}</div>

1
src/components/editor/components/toolbar/selection-toolbar/actions/StrikeThrough.tsx
View File

@@ -24,6 +24,7 @@ export function StrikeThrough() {
<ActionButton
onClick={onClick}
active={isActivated}
data-testid="toolbar-strikethrough-button"
tooltip={
<>
<div>{t('editor.strikethrough')}</div>

1
src/components/editor/components/toolbar/selection-toolbar/actions/Underline.tsx
View File

@@ -24,6 +24,7 @@ export function Underline() {
<ActionButton
onClick={onClick}
active={isActivated}
data-testid="toolbar-underline-button"
tooltip={
<>
<div>{t('editor.underline')}</div>