giltayar / visual-grid-todomvc-tests

Implementation of TodoMVC (React+Redux), including Cypress and Storybook tests that visually test it using the Applitools Visual Grid

Visual Grid TodoMVC Storybook and Cypress Tests

This repository contains:

• A complete implementation of TodoMVC (React+Redux)
• Cypress and Storybook tests that visually test it using the Applitools Visual Grid.

Installation

Clone this repo, then run:

npm install

Source Code

• The source code for the TodoMVC app can be found in src.
• The source code for the TodoMVC storybook can be found in src/stories.
• The source code for the Cypress Eyes test can be found in cypress/integration/todomvc_spec.js.

Running the TodoMVC app

To view the TodoMVC app, run:

npm start

and open http://localhost:3000 (if the browser wasn't already opened for you).

Viewing the Storybook

To view the TodoMVC Storybook, run:

npm run storybook

and open http://localhost:9009 (if the browser wasn't already opened for you).

Testing

To run the Storybook Eyes tests and the Cypress Eyes tests, run:

npm test

This will run eslint, Storybook eyes, and the Cypress test in parallel

Running the Cypress Tests

To run just the Cypress Eyes tests, run:

npm run test:cypress

To run the Cypress Eyes tests interactively, first run the application, using:

npm start

then run Cypress interactively, using:

npx cypress

Running the Storybook Eyes Tests

To run the Eyes Storybook test, run:

npx eyes-storybook

Github Actions

You can view the Github workflow that builds and runs the Cypress and Storybook tests in Github actions at .github/workflows/nodejs.yml.

Building (optional and not necessary)

To build production ready versions of the TodoMVC and its storybook, run:

npm run build