1import { setupPuppeteer, getExampleUrl, E2E_TIMEOUT } from './e2eUtils'23describe('e2e: todomvc', () => {4  const {5    page,6    click,7    isVisible,8    count,9    text,10    value,11    isChecked,12    isFocused,13    classList,14    enterValue,15    clearValue16  } = setupPuppeteer()1718  async function removeItemAt(n: number) {19    const item = (await page().$('.todo:nth-child(' + n + ')'))!20    const itemBBox = (await item.boundingBox())!21    await page().mouse.move(itemBBox.x + 10, itemBBox.y + 10)22    await click('.todo:nth-child(' + n + ') .destroy')23  }2425  async function testTodomvc(apiType: 'classic' | 'composition') {26    const baseUrl = getExampleUrl('todomvc', apiType)27    await page().goto(baseUrl)28    expect(await isVisible('.main')).toBe(false)29    expect(await isVisible('.footer')).toBe(false)30    expect(await count('.filters .selected')).toBe(1)31    expect(await text('.filters .selected')).toBe('All')32    expect(await count('.todo')).toBe(0)3334    await enterValue('.new-todo', 'test')35    expect(await count('.todo')).toBe(1)36    expect(await isVisible('.todo .edit')).toBe(false)37    expect(await text('.todo label')).toBe('test')38    expect(await text('.todo-count strong')).toBe('1')39    expect(await isChecked('.todo .toggle')).toBe(false)40    expect(await isVisible('.main')).toBe(true)41    expect(await isVisible('.footer')).toBe(true)42    expect(await isVisible('.clear-completed')).toBe(false)43    expect(await value('.new-todo')).toBe('')4445    await enterValue('.new-todo', 'test2')46    expect(await count('.todo')).toBe(2)47    expect(await text('.todo:nth-child(2) label')).toBe('test2')48    expect(await text('.todo-count strong')).toBe('2')4950    // toggle51    await click('.todo .toggle')52    expect(await count('.todo.completed')).toBe(1)53    expect(await classList('.todo:nth-child(1)')).toContain('completed')54    expect(await text('.todo-count strong')).toBe('1')55    expect(await isVisible('.clear-completed')).toBe(true)5657    await enterValue('.new-todo', 'test3')58    expect(await count('.todo')).toBe(3)59    expect(await text('.todo:nth-child(3) label')).toBe('test3')60    expect(await text('.todo-count strong')).toBe('2')6162    await enterValue('.new-todo', 'test4')63    await enterValue('.new-todo', 'test5')64    expect(await count('.todo')).toBe(5)65    expect(await text('.todo-count strong')).toBe('4')6667    // toggle more68    await click('.todo:nth-child(4) .toggle')69    await click('.todo:nth-child(5) .toggle')70    expect(await count('.todo.completed')).toBe(3)71    expect(await text('.todo-count strong')).toBe('2')7273    // remove74    await removeItemAt(1)75    expect(await count('.todo')).toBe(4)76    expect(await count('.todo.completed')).toBe(2)77    expect(await text('.todo-count strong')).toBe('2')78    await removeItemAt(2)79    expect(await count('.todo')).toBe(3)80    expect(await count('.todo.completed')).toBe(2)81    expect(await text('.todo-count strong')).toBe('1')8283    // remove all84    await click('.clear-completed')85    expect(await count('.todo')).toBe(1)86    expect(await text('.todo label')).toBe('test2')87    expect(await count('.todo.completed')).toBe(0)88    expect(await text('.todo-count strong')).toBe('1')89    expect(await isVisible('.clear-completed')).toBe(false)9091    // prepare to test filters92    await enterValue('.new-todo', 'test')93    await enterValue('.new-todo', 'test')94    await click('.todo:nth-child(2) .toggle')95    await click('.todo:nth-child(3) .toggle')9697    // active filter98    await click('.filters li:nth-child(2) a')99    expect(await count('.todo')).toBe(1)100    expect(await count('.todo.completed')).toBe(0)101    // add item with filter active102    await enterValue('.new-todo', 'test')103    expect(await count('.todo')).toBe(2)104105    // completed filter106    await click('.filters li:nth-child(3) a')107    expect(await count('.todo')).toBe(2)108    expect(await count('.todo.completed')).toBe(2)109110    // filter on page load111    await page().goto(`${baseUrl}#active`)112    expect(await count('.todo')).toBe(2)113    expect(await count('.todo.completed')).toBe(0)114    expect(await text('.todo-count strong')).toBe('2')115116    // completed on page load117    await page().goto(`${baseUrl}#completed`)118    expect(await count('.todo')).toBe(2)119    expect(await count('.todo.completed')).toBe(2)120    expect(await text('.todo-count strong')).toBe('2')121122    // toggling with filter active123    await click('.todo .toggle')124    expect(await count('.todo')).toBe(1)125    await click('.filters li:nth-child(2) a')126    expect(await count('.todo')).toBe(3)127    await click('.todo .toggle')128    expect(await count('.todo')).toBe(2)129130    // editing triggered by blur131    await click('.filters li:nth-child(1) a')132    await click('.todo:nth-child(1) label', { clickCount: 2 })133    expect(await count('.todo.editing')).toBe(1)134    expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true)135    await clearValue('.todo:nth-child(1) .edit')136    await page().type('.todo:nth-child(1) .edit', 'edited!')137    await click('.new-todo') // blur138    expect(await count('.todo.editing')).toBe(0)139    expect(await text('.todo:nth-child(1) label')).toBe('edited!')140141    // editing triggered by enter142    await click('.todo label', { clickCount: 2 })143    await enterValue('.todo:nth-child(1) .edit', 'edited again!')144    expect(await count('.todo.editing')).toBe(0)145    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')146147    // cancel148    await click('.todo label', { clickCount: 2 })149    await clearValue('.todo:nth-child(1) .edit')150    await page().type('.todo:nth-child(1) .edit', 'edited!')151    await page().keyboard.press('Escape')152    expect(await count('.todo.editing')).toBe(0)153    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')154155    // empty value should remove156    await click('.todo label', { clickCount: 2 })157    await enterValue('.todo:nth-child(1) .edit', ' ')158    expect(await count('.todo')).toBe(3)159160    // toggle all161    await click('.toggle-all+label')162    expect(await count('.todo.completed')).toBe(3)163    await click('.toggle-all+label')164    expect(await count('.todo:not(.completed)')).toBe(3)165  }166167  test(168    'classic',169    async () => {170      await testTodomvc('classic')171    },172    E2E_TIMEOUT173  )174175  test(176    'composition',177    async () => {178      await testTodomvc('composition')179    },180    E2E_TIMEOUT181  )182})