Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

cypress-example-todomvc-redux CircleCI renovate-app badge Coverage Status

TodoMVC example with full e2e test code coverage

This example is a fork of the official Redux TodoMVC example with a set of Cypress.io end-to-end tests. The tests run instrumented application code and the code coverage is saved automatically using cypress-istanbul plugin.

GitLab CI mirror

pipeline status coverage report

Deployed coverage report is at https://cypress-io.gitlab.io/cypress-example-todomvc-redux/, generated following this GitLab coverage guide.

Install and use

Because this project uses Parcel bundler to serve the web application, it requires Node v12+.

yarn
yarn test

The full code coverage HTML report will be saved in coverage. You can also see text summary by running

yarn report:coverage:text

How it works

Application is served by Parcel bundler that uses .babelrc file to load babel-plugin-istanbul plugin. This plugin instruments the application source code. During tests @cypress/code-coverage plugin merges and saves application code coverage information, rendering the full HTML report at the end.

Unit tests like cypress/integration/selectors-spec.js that reach into hard to test code paths are also instrumented using the same .babelrc file, and this additional code coverage is automatically added to the application code coverage.

.babelrc

To always instrument the code using Babel and babel-plugin-istanbul one can simply use the istanbul plugin

{
  "plugins": ["istanbul"]
}

But this will have instrumented code in the production bundle. To only instrument the code during tests, add the plugin to the test environment and serve with NODE_ENV=test

{
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

Parceljs note: there are some issues with environment-specific plugins, see PR #2840.

More info

There are also separate blog posts

CircleCI

Code coverage is saved on CircleCI as a test artifact. You can view the full report there by clicking on the "Artifacts" tab and then on "index.html"

Code coverage artifact

The report is a static site, you can drill into each folder to see individual source files. This project should be 100% covered by Cypress tests:

100% code coverage

Warning

Full code coverage is not the guarantee of exceptional quality. For example, the application might NOT work on mobile viewport, while working perfectly on desktop with 100% code coverage. See cypress/integration/viewports-spec.js for how to test main user stories across several viewports.

Smoke tests

As an example, there is a reusable smoke test cypress/integration/smoke.js that goes through the most important parts of the app, covering 84% of the source code. This test can be reused from other tests, for example from cypress/integration/smoke-spec.js, that can be executed after deploy for example by using cypress-smoke.json config file

npx cypress run --config-file cypress-smoke.json

Component tests

Unit (individual JS functions) and component tests (React components) can be run without any server. There is no need to set anything up, this project works right out of the box without any additional steps, except you need to add import 'cypress-react-unit-test' to your Cypress supportFile.

$ npx cypress open --config-file cypress-unit.json

These tests leave alongside Jest tests in src folder and are named *.cy-spec.js. Implemented using cypress-react-unit-test.

License

This project is licensed under the terms of the MIT license.

About

Example TodoMVC application with full code coverage

Topics

Resources

License

Releases

No releases published

Packages

No packages published