test(e2e): add e2e test for markdown example (#533)

diff --git a/packages/vue/examples/__tests__/e2eUtils.ts b/packages/vue/examples/__tests__/e2eUtils.ts
index 18779efa741be5d56a267acce042c1fc39ab8504..e8c7e5f6f65ca7c02c4265b5d4c7192f834f310f 100644 (file)
--- a/packages/vue/examples/__tests__/e2eUtils.ts
+++ b/packages/vue/examples/__tests__/e2eUtils.ts
@@ -30,7 +30,11 @@ export function setupPuppeteer() {
   }
 
   async function value(selector: string) {
-    return await page.$eval(selector, (node: any) => node.value)
+    return await page.$eval(selector, (node: HTMLInputElement) => node.value)
+  }
+
+  async function html(selector: string) {
+    return await page.$eval(selector, node => node.innerHTML)
   }
 
   async function classList(selector: string) {
@@ -49,7 +53,7 @@ export function setupPuppeteer() {
   }
 
   async function isChecked(selector: string) {
-    return await page.$eval(selector, (node: any) => node.checked)
+    return await page.$eval(selector, (node: HTMLInputElement) => node.checked)
   }
 
   async function isFocused(selector: string) {
@@ -58,13 +62,16 @@ export function setupPuppeteer() {
 
   async function enterValue(selector: string, value: string) {
     const el = (await page.$(selector))!
-    await el.evaluate((node: any) => (node.value = ''))
+    await el.evaluate((node: HTMLInputElement) => (node.value = ''))
     await el.type(value)
     await el.press('Enter')
   }
 
   async function clearValue(selector: string) {
-    return await page.$eval(selector, (node: any) => (node.value = ''))
+    return await page.$eval(
+      selector,
+      (node: HTMLInputElement) => (node.value = '')
+    )
   }
 
   return {
@@ -73,6 +80,7 @@ export function setupPuppeteer() {
     count,
     text,
     value,
+    html,
     classList,
     children,
     isVisible,

diff --git a/packages/vue/examples/__tests__/markdown.spec.ts b/packages/vue/examples/__tests__/markdown.spec.ts
new file mode 100644 (file)
index 0000000..196f720
--- /dev/null
+++ b/packages/vue/examples/__tests__/markdown.spec.ts
@@ -0,0 +1,36 @@
+import path from 'path'
+import { setupPuppeteer } from './e2eUtils'
+
+describe('e2e: markdown', () => {
+  const { page, isVisible, value, html } = setupPuppeteer()
+
+  async function testMarkdown(apiType: 'classic' | 'composition') {
+    const baseUrl = `file://${path.resolve(
+      __dirname,
+      `../${apiType}/markdown.html`
+    )}`
+
+    await page().goto(baseUrl)
+    expect(await isVisible('#editor')).toBe(true)
+    expect(await value('textarea')).toBe('# hello')
+    expect(await html('#editor div')).toBe('<h1 id="hello">hello</h1>\n')
+
+    await page().type('textarea', '\n## foo\n\n- bar\n- baz')
+    // assert the output is not updated yet because of debounce
+    expect(await html('#editor div')).toBe('<h1 id="hello">hello</h1>\n')
+    await page().waitFor(500)
+    expect(await html('#editor div')).toBe(
+      '<h1 id="hello">hello</h1>\n' +
+        '<h2 id="foo">foo</h2>\n' +
+        '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n'
+    )
+  }
+
+  test('classic', async () => {
+    await testMarkdown('classic')
+  })
+
+  test('composition', async () => {
+    await testMarkdown('composition')
+  })
+})