test(e2e): wip e2e test for todomvc

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

@@ -0,0 +1,79 @@
+import path from 'path'
+import puppeteer from 'puppeteer'
+
+const puppeteerOptions = process.env.CI
+  ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
+  : {}
+
+let browser: puppeteer.Browser
+let page: puppeteer.Page
+
+describe('e2e', () => {
+  beforeEach(async () => {
+    browser = await puppeteer.launch(puppeteerOptions)
+    page = await browser.newPage()
+  })
+
+  afterEach(async () => {
+    await browser.close()
+  })
+
+  test('todomvc', async () => {
+    await page.goto(
+      `file://${path.resolve(__dirname, '../classic/todomvc.html')}`
+    )
+    expect(await isVisible('.main')).toBe(false)
+    expect(await isVisible('.footer')).toBe(false)
+    expect(await count('.filters .selected')).toBe(1)
+    expect(await text('.filters .selected')).toBe('All')
+    expect(await count('.todo')).toBe(0)
+
+    await createNewItem('test')
+    expect(await count('.todo')).toBe(1)
+    expect(await isVisible('.todo .edit')).toBe(false)
+    expect(await text('.todo label')).toBe('test')
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isChecked('.todo .toggle')).toBe(false)
+    expect(await isVisible('.main')).toBe(true)
+    expect(await isVisible('.footer')).toBe(true)
+    expect(await isVisible('.clear-completed')).toBe(false)
+    expect(await value('.new-todo')).toBe('')
+
+    await createNewItem('test2')
+    expect(await count('.todo')).toBe(2)
+    expect(await text('.todo:nth-child(2) label')).toBe('test2')
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // TODO complete the test
+    // https://github.com/vuejs/vue/blob/dev/test/e2e/specs/todomvc.js
+  })
+})
+
+async function isVisible(selector: string) {
+  const display = await page.$eval(selector, (node: HTMLElement) => {
+    return window.getComputedStyle(node).display
+  })
+  return display !== 'none'
+}
+
+async function isChecked(selector: string) {
+  return await page.$eval(selector, (node: any) => node.checked)
+}
+
+async function count(selector: string) {
+  return (await page.$$(selector)).length
+}
+
+async function text(selector: string) {
+  return await page.$eval(selector, node => node.textContent)
+}
+
+async function value(selector: string) {
+  return await page.$eval(selector, (node: any) => node.value)
+}
+
+async function createNewItem(text: string) {
+  const el = (await page.$('.new-todo'))!
+  await el.type(text)
+  await el.press('Enter')
+}

packages/vue/examples/classic/todomvc.html

@@ -11,7 +11,7 @@
               v-model="newTodo"
               @keyup.enter="addTodo">
     </header>
-    <section class="main" v-if="todos.length">
+    <section class="main" v-show="todos.length">
       <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
       <label for="toggle-all">Mark all as complete</label>
       <ul class="todo-list">
@@ -34,7 +34,7 @@
         </li>
       </ul>
     </section>
-    <footer class="footer" v-if="todos.length">
+    <footer class="footer" v-show="todos.length">
         <span class="todo-count">
           <strong>{{ remaining }}</strong> <span>{{ pluralize(remaining) }} left</span>
         </span>
@@ -43,7 +43,7 @@
         <li><a href="#/active" :class="{ selected: visibility === 'active' }">Active</a></li>
         <li><a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a></li>
       </ul>
-      <button class="clear-completed" @click="removeCompleted" v-if="todos.length > remaining">
+      <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
         Clear completed
       </button>
     </footer>