https://github.com/giltayar/visual-grid-todomvc-tests
Implementation of TodoMVC (React+Redux), including Cypress and Storybook tests that visually test it using the Applitools Visual Grid
https://github.com/giltayar/visual-grid-todomvc-tests
applitools cypress storybook testing todomvc visual-testing
Last synced: about 2 months ago
JSON representation
Implementation of TodoMVC (React+Redux), including Cypress and Storybook tests that visually test it using the Applitools Visual Grid
- Host: GitHub
- URL: https://github.com/giltayar/visual-grid-todomvc-tests
- Owner: giltayar
- Created: 2020-03-26T06:57:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-09T23:00:02.000Z (over 2 years ago)
- Last Synced: 2025-01-28T21:32:20.868Z (over 1 year ago)
- Topics: applitools, cypress, storybook, testing, todomvc, visual-testing
- Language: JavaScript
- Homepage:
- Size: 1.1 MB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```sh
npm install
```
## Source Code
* The source code for the TodoMVC app can be found in [`src`](src).
* The source code for the TodoMVC storybook can be found in
[`src/stories`](src/stories).
* The source code for the Cypress Eyes test can be found in
[`cypress/integration/todomvc_spec.js`](cypress/integration/todomvc_spec.js).
## Running the TodoMVC app
To view the TodoMVC app, run:
```sh
npm start
```
and open (if the browser wasn't already opened for you).
## Viewing the Storybook
To view the TodoMVC Storybook, run:
```sh
npm run storybook
```
and open (if the browser wasn't already opened for you).
## Testing
To run the Storybook Eyes tests and the Cypress Eyes tests, run:
```sh
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:
```sh
npm run test:cypress
```
To run the Cypress Eyes tests interactively, first run the application, using:
```sh
npm start
```
then run Cypress interactively, using:
```sh
npx cypress
```
### Running the Storybook Eyes Tests
To run the Eyes Storybook test, run:
```sh
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`](.github/workflows/nodejs.yml).
## Building (optional and not necessary)
To build production ready versions of the TodoMVC and its storybook, run:
```sh
npm run build
```