test(e2e): complete e2e test for todomvc (#517)

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

@@ -44,8 +44,125 @@ describe('e2e', () => {
     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
+    // toggle
+    await page.click('.todo .toggle')
+    expect(await count('.todo.completed')).toBe(1)
+    expect(await classList('.todo:nth-child(1)')).toContain('completed')
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isVisible('.clear-completed')).toBe(true)
+
+    await createNewItem('test3')
+    expect(await count('.todo')).toBe(3)
+    expect(await text('.todo:nth-child(3) label')).toBe('test3')
+    expect(await text('.todo-count strong')).toBe('2')
+
+    await createNewItem('test4')
+    await createNewItem('test5')
+    expect(await count('.todo')).toBe(5)
+    expect(await text('.todo-count strong')).toBe('4')
+
+    // toggle more
+    await page.click('.todo:nth-child(4) .toggle')
+    await page.click('.todo:nth-child(5) .toggle')
+    expect(await count('.todo.completed')).toBe(3)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // remove
+    await removeItemAt(1)
+    expect(await count('.todo')).toBe(4)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('2')
+    await removeItemAt(2)
+    expect(await count('.todo')).toBe(3)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('1')
+
+    // remove all
+    await page.click('.clear-completed')
+    expect(await count('.todo')).toBe(1)
+    expect(await text('.todo label')).toBe('test2')
+    expect(await count('.todo.completed')).toBe(0)
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isVisible('.clear-completed')).toBe(false)
+
+    // prepare to test filters
+    await createNewItem('test')
+    await createNewItem('test')
+    await page.click('.todo:nth-child(2) .toggle')
+    await page.click('.todo:nth-child(3) .toggle')
+
+    // active filter
+    await page.click('.filters li:nth-child(2) a')
+    expect(await count('.todo')).toBe(1)
+    expect(await count('.todo.completed')).toBe(0)
+    // add item with filter active
+    await createNewItem('test')
+    expect(await count('.todo')).toBe(2)
+
+    // completed filter
+    await page.click('.filters li:nth-child(3) a')
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(2)
+
+    // filter on page load
+    await page.goto(
+      `file://${path.resolve(__dirname, '../classic/todomvc.html#active')}`
+    )
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(0)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // completed on page load
+    await page.goto(
+      `file://${path.resolve(__dirname, '../classic/todomvc.html#completed')}`
+    )
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // toggling with filter active
+    await page.click('.todo .toggle')
+    expect(await count('.todo')).toBe(1)
+    await page.click('.filters li:nth-child(2) a')
+    expect(await count('.todo')).toBe(3)
+    await page.click('.todo .toggle')
+    expect(await count('.todo')).toBe(2)
+
+    // editing triggered by blur
+    await page.click('.filters li:nth-child(1) a')
+    await page.click('.todo:nth-child(1) label', { clickCount: 2 })
+    expect(await count('.todo.editing')).toBe(1)
+    expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true)
+    await clearValue('.todo:nth-child(1) .edit')
+    await page.type('.todo:nth-child(1) .edit', 'edited!')
+    await page.click('.new-todo') // blur
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited!')
+
+    // editing triggered by enter
+    await page.click('.todo label', { clickCount: 2 })
+    await enterValue('.todo:nth-child(1) .edit', 'edited again!')
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
+
+    // cancel
+    await page.click('.todo label', { clickCount: 2 })
+    await clearValue('.todo:nth-child(1) .edit')
+    await page.type('.todo:nth-child(1) .edit', 'edited!')
+    await page.keyboard.press('Escape')
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
+
+    // empty value should remove
+    await page.click('.todo label', { clickCount: 2 })
+    await enterValue('.todo:nth-child(1) .edit', ' ')
+    expect(await count('.todo')).toBe(3)
+
+    // toggle all
+    await page.click('.toggle-all+label')
+    expect(await count('.todo.completed')).toBe(3)
+    await page.click('.toggle-all+label')
+    expect(await count('.todo:not(.completed)')).toBe(3)
   })
 })
 
@@ -72,8 +189,34 @@ async function value(selector: string) {
   return await page.$eval(selector, (node: any) => node.value)
 }
 
+async function classList(selector: string) {
+  return await page.$eval(selector, (node: any) => [...node.classList])
+}
+
+async function isFocused(selector: string) {
+  return await page.$eval(selector, node => node === document.activeElement)
+}
+
+async function clearValue(selector: string) {
+  return await page.$eval(selector, (node: any) => (node.value = ''))
+}
+
+async function enterValue(selector: string, value: string) {
+  const el = (await page.$(selector))!
+  await el.evaluate((node: any) => (node.value = ''))
+  await el.type(value)
+  await el.press('Enter')
+}
+
 async function createNewItem(text: string) {
   const el = (await page.$('.new-todo'))!
   await el.type(text)
   await el.press('Enter')
 }
+
+async function removeItemAt(n: number) {
+  const item = (await page.$('.todo:nth-child(' + n + ')'))!
+  const itemBBox = (await item.boundingBox())!
+  await page.mouse.move(itemBBox.x + 10, itemBBox.y + 10)
+  await page.click('.todo:nth-child(' + n + ') .destroy')
+}