fix(sender-e2e): stabilize template delete e2e case (#317)

Author: SonyLeo

packages/test/src/sender/helpers/template-helper.ts

@@ -6,6 +6,18 @@ import { SENDER_SELECTORS } from '../selectors'
  */
 export function createTemplateTestHelper(page: Page) {
   const selectors = SENDER_SELECTORS
+  const normalizeEditorText = async () => {
+    const text = await page.evaluate(() => {
+      const editor = document.querySelector('[data-testid="test-sender"] .ProseMirror')
+      return editor?.textContent || ''
+    })
+
+    return text
+      .replace(/\u200b/g, '')
+      .replace(/\u00a0/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+  }
 
   return {
     selectors,
@@ -110,6 +122,17 @@ export function createTemplateTestHelper(page: Page) {
       await block.click()
     },
 
+    /**
+     * 从模板块左侧触发 Delete，避免依赖外层键盘时序
+     */
+    async pressDeleteBeforeTemplate(index: number) {
+      const handled = await page.evaluate((templateIndex) => {
+        return window.__senderTestApi?.pressDeleteBeforeTemplate(templateIndex) ?? false
+      }, index)
+
+      expect(handled).toBe(true)
+    },
+
     /**
      * 聚焦到模板块内容末尾
      */
@@ -206,6 +229,13 @@ export function createTemplateTestHelper(page: Page) {
       await expect(this.getEditor()).toContainText(text)
     },
 
+    /**
+     * 验证去除零宽字符后的编辑器文本完全匹配
+     */
+    async expectNormalizedEditorText(text: string) {
+      await expect.poll(async () => normalizeEditorText()).toBe(text)
+    },
+
     /**
      * 等待一段时间
      */

packages/test/src/sender/index.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { TinySwitch } from '@opentiny/vue'
 import { Sender } from '@opentiny/tiny-robot'
 import type { MentionItem, TemplateItem, SenderSuggestionItem } from '@opentiny/tiny-robot'
 
+declare global {
+  interface Window {
+    __senderTestApi?: {
+      moveCursorBeforeTemplate: (index: number) => boolean
+      pressDeleteBeforeTemplate: (index: number) => boolean
+    }
+  }
+}
+
 const senderRef = ref()
 const content = ref('')
 const result = ref('')
@@ -157,6 +166,58 @@ const extensions = computed(() => {
   }
   return exts
 })
+
+const moveCursorBeforeTemplate = (index: number) => {
+  const exposedEditor = senderRef.value?.editor
+  const editor = exposedEditor?.value ?? exposedEditor
+  if (!editor) return false
+
+  let currentIndex = 0
+  let templatePosition: number | null = null
+
+  editor.state.doc.descendants((node: { type: { name: string } }, pos: number) => {
+    if (node.type.name === 'templateBlock') {
+      if (currentIndex === index) {
+        templatePosition = pos
+        return false
+      }
+      currentIndex += 1
+    }
+    return true
+  })
+
+  if (templatePosition === null) return false
+
+  editor.commands.setTextSelection(templatePosition)
+  editor.commands.focus(templatePosition)
+
+  return editor.state.selection.$from.nodeAfter?.type?.name === 'templateBlock'
+}
+
+const pressDeleteBeforeTemplate = (index: number) => {
+  const exposedEditor = senderRef.value?.editor
+  const editor = exposedEditor?.value ?? exposedEditor
+  if (!editor || !moveCursorBeforeTemplate(index)) return false
+
+  const deleteEvent = new KeyboardEvent('keydown', {
+    key: 'Delete',
+    bubbles: true,
+    cancelable: true,
+  })
+
+  return editor.view.dom.dispatchEvent(deleteEvent) === false
+}
+
+onMounted(() => {
+  window.__senderTestApi = {
+    moveCursorBeforeTemplate,
+    pressDeleteBeforeTemplate,
+  }
+})
+
+onBeforeUnmount(() => {
+  delete window.__senderTestApi
+})
 </script>
 
 <template>

packages/test/src/sender/specs/template/delete.spec.ts

@@ -66,38 +66,18 @@ test.describe('Template Block - Delete 删除逻辑', () => {
 
   test('TC-DL-05: 从模板块左侧按 Delete 应该进入模板块', async () => {
     await templateHelper!.setSimpleTemplate()
-    await helper!.getEditor().click()
-    await templateHelper!.wait(100)
-    await helper!.getEditor().press('Home')
-    await templateHelper!.pressArrowRight(2)
-    await templateHelper!.pressDelete()
+    await templateHelper!.pressDeleteBeforeTemplate(0)
 
     await templateHelper!.expectTemplateCount(1)
     await templateHelper!.expectTemplateText(0, '张三')
   })
 
-  test('TC-DL-06: 从左侧删除空模板块需要多次操作', async () => {
+  test('TC-DL-06: 从左侧按 Delete 应稳定删除空模板块', async () => {
     await templateHelper!.setEmptyTemplate()
-    await helper!.getEditor().click()
-    await helper!.getEditor().press('Home')
-    await templateHelper!.pressArrowRight(2)
-
-    for (let i = 0; i < 4; i++) {
-      if ((await templateHelper!.getTemplateCount()) === 0) {
-        break
-      }
-      await templateHelper!.pressDelete()
-      await templateHelper!.wait(100)
-    }
-
-    if ((await templateHelper!.getTemplateCount()) > 0) {
-      await templateHelper!.pressArrowLeft(1)
-      await templateHelper!.pressBackspace()
-      await templateHelper!.wait(100)
-    }
+    await templateHelper!.pressDeleteBeforeTemplate(0)
 
     await templateHelper!.expectTemplateCount(0)
-    await templateHelper!.expectEditorToContainText('，来自')
+    await templateHelper!.expectNormalizedEditorText('我是，来自')
   })
 
   test('TC-DL-07: 选区删除应该包含模板块', async () => {