test: add e2e

e2e/shim.d.ts

@@ -4,6 +4,7 @@
 import type { Editor } from '@milkdown/core'
 import type { EditorView } from '@milkdown/prose/view'
 import type { Telemetry } from '@milkdown/ctx'
+import type { Crepe } from '@milkdown/crepe'
 
 declare global {
   var __milkdown__: Editor
@@ -14,13 +15,8 @@ declare global {
 
   var __inspect__: () => Telemetry[]
 
-  namespace Cypress {
-    interface Chainable {
-      paste: (payload: Record<string, unknown>) => Chainable<void>
-      isMarkdown: (markdown: string) => Chainable<void>
-      markdownFixture: (path: string) => Chainable<void>
-    }
-  }
+  var __beforeCrepeCreate__: (crepe: Crepe) => void
+  var __afterCrepeCreated__: (crepe: Crepe) => void
 
   var commands: {
     toggleStrong?: () => void

e2e/src/crepe/main.ts

@@ -8,6 +8,12 @@ setup(async () => {
   const crepe = new Crepe({
     root: '#app',
   })
+  if (globalThis.__beforeCrepeCreate__) {
+    globalThis.__beforeCrepeCreate__(crepe)
+  }
   await crepe.create()
+  if (globalThis.__afterCrepeCreated__) {
+    globalThis.__afterCrepeCreated__(crepe)
+  }
   return crepe.editor
 })

e2e/tests/crepe/listener.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test'
+import { focusEditor } from 'tests/misc';
+
+test('listen change before editor is created', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.__beforeCrepeCreate__ = (crepe) => {
+      crepe.on(listener => {
+        listener.markdownUpdated((_, markdown) => {
+          // oxlint-disable-next-line no-console
+          console.log('markdown', markdown)
+        })
+      })
+    }
+  });
+  await page.goto('/crepe/')
+
+  const messagePromise = page.waitForEvent('console', (msg) => {
+    return msg.text().includes('Hello');
+  });
+
+  await focusEditor(page)
+  await page.keyboard.type('Hello')
+
+  const message = await messagePromise;
+  const log: string = await message.args()[1]?.jsonValue()
+  expect(log.trim()).toBe('Hello')
+});
+
+test('listen change after editor is created', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.__afterCrepeCreated__ = (crepe) => {
+      crepe.on(listener => {
+        listener.markdownUpdated((_, markdown) => {
+          // oxlint-disable-next-line no-console
+          console.log('markdown', markdown)
+        })
+      })
+    }
+  });
+  await page.goto('/crepe/')
+
+  const messagePromise = page.waitForEvent('console', (msg) => {
+    return msg.text().includes('World');
+  });
+
+  await focusEditor(page)
+  await page.keyboard.type('World')
+
+  const message = await messagePromise;
+  const log: string = await message.args()[1]?.jsonValue()
+  expect(log.trim()).toBe('World')
+})