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

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