@pageobject/todomvc

An exemplary test suite for the popular TodoMVC application.

This package is part of PageObjectJS.

Installation

yarn add @pageobject/todomvc

Introduction

This project serves as an example implementation. We use TypeScript as programming language, Jest as test runner and perform the tests with Puppeteer in a headless Chrome. The artifact published on npm contains all components written for this project.

Test cases

You can find the complete code of all test cases here.

Creating todos

test.perform(app.page.goto('http://todomvc.com/examples/react/#/'));

test
  .assert(app.newTodoInput.hasFocus(), is(true), 'newTodoInput has focus (1)')
  .perform(app.keyboard.type('My first todo'))
  .perform(app.keyboard.press('Enter'))

  .assert(app.newTodoInput.hasFocus(), is(true), 'newTodoInput has focus (2)')
  .perform(app.keyboard.type('My second todo'))
  .perform(app.keyboard.press('Enter'))

  .assert(app.todoList.todos.first().label.getText(), is('My first todo'))
  .assert(app.todoList.todos.last().label.getText(), is('My second todo'));

Completing a todo

test.perform(app.page.goto('http://todomvc.com/examples/react/#/'));

test
  .assert(app.newTodoInput.hasFocus(), is(true), 'newTodoInput has focus')
  .perform(app.keyboard.type('My todo'))
  .perform(app.keyboard.press('Enter'));

const todo = app.todoList.todos.first();

test
  .assert(todo.toggle.isChecked(), is(false), 'toggle is not checked')
  .perform(todo.toggle.click())
  .assert(todo.toggle.isChecked(), is(true), 'toggle is checked');

API documentation

Please find the API documentation here.

Copyright (c) 2017-present, Clemens Akens. Released under the terms of the MIT License.