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

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,

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')
+  })
+})