@lobehub/lobehub 2.0.0-next.267 → 2.0.0-next.268

package/e2e/src/steps/page/editor-content.steps.ts

@@ -0,0 +1,344 @@
+/**
+ * Page Editor Content Steps
+ *
+ * Step definitions for Page editor rich text editing E2E tests
+ */
+import { Then, When } from '@cucumber/cucumber';
+import { expect } from '@playwright/test';
+
+import { CustomWorld } from '../../support/world';
+
+// ============================================
+// Helper Functions
+// ============================================
+
+/**
+ * Get the contenteditable editor element
+ */
+async function getEditor(world: CustomWorld) {
+  const editor = world.page.locator('[contenteditable="true"]').first();
+  await expect(editor).toBeVisible({ timeout: 5000 });
+  return editor;
+}
+
+// ============================================
+// When Steps - Basic Text
+// ============================================
+
+When('用户点击编辑器内容区域', async function (this: CustomWorld) {
+  console.log('   📍 Step: 点击编辑器内容区域...');
+
+  const editorContent = this.page.locator('[contenteditable="true"]').first();
+  if ((await editorContent.count()) > 0) {
+    await editorContent.click();
+  } else {
+    // Fallback: click somewhere else
+    await this.page.click('body', { position: { x: 400, y: 400 } });
+  }
+  await this.page.waitForTimeout(500);
+
+  console.log('   ✅ 已点击编辑器内容区域');
+});
+
+When('用户按下 Enter 键', async function (this: CustomWorld) {
+  console.log('   📍 Step: 按下 Enter 键...');
+
+  await this.page.keyboard.press('Enter');
+  // Wait for debounce save (1000ms) + buffer
+  await this.page.waitForTimeout(1500);
+
+  console.log('   ✅ 已按下 Enter 键');
+});
+
+When('用户输入文本 {string}', async function (this: CustomWorld, text: string) {
+  console.log(`   📍 Step: 输入文本 "${text}"...`);
+
+  await this.page.keyboard.type(text, { delay: 30 });
+  await this.page.waitForTimeout(300);
+
+  // Store for later verification
+  this.testContext.inputText = text;
+
+  console.log(`   ✅ 已输入文本 "${text}"`);
+});
+
+When('用户在编辑器中输入内容 {string}', async function (this: CustomWorld, content: string) {
+  console.log(`   📍 Step: 在编辑器中输入内容 "${content}"...`);
+
+  const editor = await getEditor(this);
+  await editor.click();
+  await this.page.waitForTimeout(300);
+  await this.page.keyboard.type(content, { delay: 30 });
+  await this.page.waitForTimeout(300);
+
+  this.testContext.inputText = content;
+
+  console.log(`   ✅ 已输入内容 "${content}"`);
+});
+
+When('用户选中所有内容', async function (this: CustomWorld) {
+  console.log('   📍 Step: 选中所有内容...');
+
+  await this.page.keyboard.press(`${this.modKey}+A`);
+  await this.page.waitForTimeout(300);
+
+  console.log('   ✅ 已选中所有内容');
+});
+
+// ============================================
+// When Steps - Slash Commands
+// ============================================
+
+When('用户输入斜杠 {string}', async function (this: CustomWorld, slash: string) {
+  console.log(`   📍 Step: 输入斜杠 "${slash}"...`);
+
+  await this.page.keyboard.type(slash, { delay: 50 });
+  // Wait for slash menu to appear
+  await this.page.waitForTimeout(500);
+
+  console.log(`   ✅ 已输入斜杠 "${slash}"`);
+});
+
+When('用户输入斜杠命令 {string}', async function (this: CustomWorld, command: string) {
+  console.log(`   📍 Step: 输入斜杠命令 "${command}"...`);
+
+  // The command format is "/shortcut" (e.g., "/h1", "/codeblock")
+  // First type the slash and wait for menu
+  await this.page.keyboard.type('/', { delay: 100 });
+  await this.page.waitForTimeout(800); // Wait for slash menu to appear
+
+  // Then type the rest of the command (without the leading /)
+  const shortcut = command.startsWith('/') ? command.slice(1) : command;
+  await this.page.keyboard.type(shortcut, { delay: 80 });
+  await this.page.waitForTimeout(500); // Wait for menu to filter
+
+  console.log(`   ✅ 已输入斜杠命令 "${command}"`);
+});
+
+// ============================================
+// When Steps - Formatting
+// ============================================
+
+When('用户按下快捷键 {string}', async function (this: CustomWorld, shortcut: string) {
+  console.log(`   📍 Step: 按下快捷键 "${shortcut}"...`);
+
+  // Convert Meta to platform-specific modifier key for cross-platform support
+  const platformShortcut = shortcut.replaceAll('Meta', this.modKey);
+  await this.page.keyboard.press(platformShortcut);
+  await this.page.waitForTimeout(300);
+
+  console.log(`   ✅ 已按下快捷键 "${platformShortcut}"`);
+});
+
+// ============================================
+// Then Steps - Basic Text
+// ============================================
+
+Then('编辑器应该显示输入的文本', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证编辑器显示输入的文本...');
+
+  const editor = await getEditor(this);
+  const text = this.testContext.inputText;
+
+  // Check if the text is visible in the editor
+  const editorText = await editor.textContent();
+  expect(editorText).toContain(text);
+
+  console.log(`   ✅ 编辑器显示文本: "${text}"`);
+});
+
+Then('编辑器应该显示 {string}', async function (this: CustomWorld, expectedText: string) {
+  console.log(`   📍 Step: 验证编辑器显示 "${expectedText}"...`);
+
+  const editor = await getEditor(this);
+  const editorText = await editor.textContent();
+  expect(editorText).toContain(expectedText);
+
+  console.log(`   ✅ 编辑器显示 "${expectedText}"`);
+});
+
+// ============================================
+// Then Steps - Slash Commands
+// ============================================
+
+Then('应该显示斜杠命令菜单', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证显示斜杠命令菜单...');
+
+  // The slash menu should be visible
+  // Look for menu with heading options, list options, etc.
+  const menuSelectors = ['[role="menu"]', '[role="listbox"]', '.slash-menu', '[data-slash-menu]'];
+
+  let menuFound = false;
+  for (const selector of menuSelectors) {
+    const menu = this.page.locator(selector);
+    if ((await menu.count()) > 0 && (await menu.isVisible())) {
+      menuFound = true;
+      break;
+    }
+  }
+
+  // Alternative: look for menu items by text
+  if (!menuFound) {
+    const headingOption = this.page.getByText(/heading|标题/i).first();
+    const listOption = this.page.getByText(/list|列表/i).first();
+
+    menuFound =
+      ((await headingOption.count()) > 0 && (await headingOption.isVisible())) ||
+      ((await listOption.count()) > 0 && (await listOption.isVisible()));
+  }
+
+  expect(menuFound).toBe(true);
+
+  console.log('   ✅ 斜杠命令菜单已显示');
+});
+
+Then('编辑器应该包含一级标题', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证编辑器包含一级标题...');
+
+  // Check for h1 element in the editor
+  const editor = await getEditor(this);
+  const h1 = editor.locator('h1');
+
+  await expect(h1).toBeVisible({ timeout: 5000 });
+
+  console.log('   ✅ 编辑器包含一级标题');
+});
+
+Then('编辑器应该包含无序列表', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证编辑器包含无序列表...');
+
+  const editor = await getEditor(this);
+  const ul = editor.locator('ul');
+
+  await expect(ul).toBeVisible({ timeout: 5000 });
+
+  console.log('   ✅ 编辑器包含无序列表');
+});
+
+Then('编辑器应该包含任务列表', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证编辑器包含任务列表...');
+
+  const editor = await getEditor(this);
+
+  // Task list usually has checkbox elements
+  const checkboxSelectors = [
+    'input[type="checkbox"]',
+    '[role="checkbox"]',
+    '[data-lexical-check-list]',
+    'li[role="listitem"] input',
+  ];
+
+  let found = false;
+  for (const selector of checkboxSelectors) {
+    const checkbox = editor.locator(selector);
+    if ((await checkbox.count()) > 0) {
+      found = true;
+      break;
+    }
+  }
+
+  // Alternative: check for specific class or structure
+  if (!found) {
+    const listItem = editor.locator('li');
+    found = (await listItem.count()) > 0;
+  }
+
+  expect(found).toBe(true);
+
+  console.log('   ✅ 编辑器包含任务列表');
+});
+
+Then('编辑器应该包含代码块', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证编辑器包含代码块...');
+
+  // Code block might be rendered inside the editor OR as a sibling element
+  // CodeMirror renders its own container
+
+  // First check inside the editor
+  const editor = await getEditor(this);
+  const codeBlockSelectors = [
+    'pre',
+    'code',
+    '.cm-editor', // CodeMirror
+    '[data-language]',
+    '.code-block',
+  ];
+
+  let found = false;
+  for (const selector of codeBlockSelectors) {
+    const codeBlock = editor.locator(selector);
+    if ((await codeBlock.count()) > 0) {
+      found = true;
+      break;
+    }
+  }
+
+  // If not found inside editor, check the whole page
+  // CodeMirror might render outside the contenteditable
+  if (!found) {
+    for (const selector of codeBlockSelectors) {
+      const codeBlock = this.page.locator(selector);
+      if ((await codeBlock.count()) > 0 && (await codeBlock.isVisible())) {
+        found = true;
+        break;
+      }
+    }
+  }
+
+  expect(found).toBe(true);
+
+  console.log('   ✅ 编辑器包含代码块');
+});
+
+// ============================================
+// Then Steps - Formatting
+// ============================================
+
+Then('选中的文本应该被加粗', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证文本已加粗...');
+
+  const editor = await getEditor(this);
+
+  // Check for bold element (strong or b tag, or font-weight style)
+  const boldSelectors = [
+    'strong',
+    'b',
+    '[style*="font-weight: bold"]',
+    '[style*="font-weight: 700"]',
+  ];
+
+  let found = false;
+  for (const selector of boldSelectors) {
+    const boldElement = editor.locator(selector);
+    if ((await boldElement.count()) > 0) {
+      found = true;
+      break;
+    }
+  }
+
+  expect(found).toBe(true);
+
+  console.log('   ✅ 文本已加粗');
+});
+
+Then('选中的文本应该变为斜体', async function (this: CustomWorld) {
+  console.log('   📍 Step: 验证文本已斜体...');
+
+  const editor = await getEditor(this);
+
+  // Check for italic element (em or i tag, or font-style style)
+  const italicSelectors = ['em', 'i', '[style*="font-style: italic"]'];
+
+  let found = false;
+  for (const selector of italicSelectors) {
+    const italicElement = editor.locator(selector);
+    if ((await italicElement.count()) > 0) {
+      found = true;
+      break;
+    }
+  }
+
+  expect(found).toBe(true);
+
+  console.log('   ✅ 文本已斜体');
+});