test-todomvc-using-app-actions

Example Cypress tests going from page objects to app actions

Read blog post Stop using Page Objects and Start using App Actions

Steps

Each step is a Git tag. You can check out particular tag, install dependencies and run application and tests. Usually it would be:

git checkout <tag>
npm install
npm start
# from another terminal
npm run cypress

1. 00-start just TodoMVC application running at localhost:8888
2. 01-first-test adds Cypress and first end-to-end test in spec.js
3. 02-tests brings a lot of tests from cypress-example-todomvc to spec.js. All tests work through UI (page), sometimes using custom commands defined in cypress/support/commands.js
4. 03-page-object drives app via page object todo.page.js
5. 04-app-actions controls application by mostly directly calling the model instance directly to avoid always going through the page.
6. 05-types adds TypeScript model interface so our tests know the app actions they can trigger

Tests

All tests are in folder cypress/integration. Common test settings are in cypress.json file.

IntelliSense

In the application code js/app.jsx we set window.model = ... to expose our model instance for app actions to work. If we use TypeScript check via // @ts-check directive, we need to "tell" TS compiler that there is a new property model on the global window object. We can do this by writing file cypress/integration/model.d.ts with interface definition for TodoModel and window update. Something like this

interface TodoModel {
  todos: unknown[]
  addTodo(...todos: string[])
  // more methods
}
// During tests there we set "window.model" property
// now cy.window() returns Window instance with
// the "model" property that has TodoModel interface
interface Window {
  model: TodoModel
}

From our JavaScript spec files, we need to load this model.d.ts file, and we can do this using special /// <reference> comment.

// type definitions for Cypress object "cy"
/// <reference types="cypress" />
// type definition for out TodoModel
/// <reference path='./model.d.ts' />
// @ts-check

Now whenever you use cy.window().its('model') command, IntelliSense will correctly suggest the "model" property.

And you can invoke the right methods on the window.model

Read more about intelligent code completion in Cypress.