test: use polling for more stable markdown e2e tests

close #1908

packages/vue/__tests__/e2eUtils.ts

@@ -6,6 +6,24 @@ const puppeteerOptions = process.env.CI
   ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
   : {}
 
+const maxTries = 20
+export const timeout = (n: number) => new Promise(r => setTimeout(r, n))
+
+export async function expectByPolling(
+  poll: () => Promise<any>,
+  expected: string
+) {
+  for (let tries = 0; tries < maxTries; tries++) {
+    const actual = (await poll()) || ''
+    if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
+      expect(actual).toMatch(expected)
+      break
+    } else {
+      await timeout(50)
+    }
+  }
+}
+
 export function setupPuppeteer() {
   let browser: puppeteer.Browser
   let page: puppeteer.Page

packages/vue/examples/__tests__/markdown.spec.ts

@@ -1,5 +1,9 @@
 import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
+import {
+  setupPuppeteer,
+  expectByPolling,
+  E2E_TIMEOUT
+} from '../../__tests__/e2eUtils'
 
 describe('e2e: markdown', () => {
   const { page, isVisible, value, html } = setupPuppeteer()
@@ -18,8 +22,8 @@ describe('e2e: markdown', () => {
     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(200)
-    expect(await html('#editor div')).toBe(
+    await expectByPolling(
+      () => html('#editor div'),
       '<h1 id="hello">hello</h1>\n' +
         '<h2 id="foo">foo</h2>\n' +
         '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n'