All Projects → cypress-io → Cypress Example Todomvc

cypress-io / Cypress Example Todomvc

Licence: mit
The official TodoMVC tests written in Cypress.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Cypress Example Todomvc

nest-boilerplate
Nest.js boilerplate with CircleCI, Commitizen, Commitlint, Docker-Compose, ESLint, GitHub Actions, Husky, Lint-staged, OpenAPI, Prettier, PostGreSQL, Travis CI, TypeORM
Stars: ✭ 16 (-88.81%)
Mutual labels:  circleci, travis-ci
Awesome bot
✅ Validate links in awesome projects
Stars: ✭ 697 (+387.41%)
Mutual labels:  travis-ci, circleci
Skyhook
Parses webhooks and forwards them in the proper format to Discord.
Stars: ✭ 263 (+83.92%)
Mutual labels:  travis-ci, circleci
drupal9ci
One-line installers for implementing Continuous Integration in Drupal 9
Stars: ✭ 137 (-4.2%)
Mutual labels:  circleci, travis-ci
Molecule Ansible Docker Aws
Example project showing how to test Ansible roles with Molecule using Testinfra and a multiscenario approach with Docker, Vagrant & AWS EC2 as infrastructure providers
Stars: ✭ 72 (-49.65%)
Mutual labels:  travis-ci, circleci
build-status
Emacs minor mode that monitors and shows a buffer's build status in the mode line.
Stars: ✭ 26 (-81.82%)
Mutual labels:  circleci, travis-ci
Cibuildwheel
🎡 Build Python wheels for all the platforms on CI with minimal configuration.
Stars: ✭ 620 (+333.57%)
Mutual labels:  travis-ci, circleci
docker-coala-base
coala base docker image
Stars: ✭ 20 (-86.01%)
Mutual labels:  circleci, travis-ci
Zemeroth
😠⚔️😈 A minimalistic 2D turn-based tactical game in Rust
Stars: ✭ 940 (+557.34%)
Mutual labels:  travis-ci, circleci
Cargo Make
Rust task runner and build tool.
Stars: ✭ 895 (+525.87%)
Mutual labels:  travis-ci, circleci
Ci Buildstats
Little widget to display AppVeyor, TravisCI, CircleCI, GitHub Actions or Azure Pipelines build history charts and other SVG badges.
Stars: ✭ 134 (-6.29%)
Mutual labels:  travis-ci, circleci
Monorepo
Showcase of how to manage building projects inside monorepo with Gradle as build tool and CircleCI, Bitbucket Pipelines, Travis CI or GitHub Actions as CI tool.
Stars: ✭ 129 (-9.79%)
Mutual labels:  travis-ci, circleci
argocd-operator-helm
[DEPRECATED] Argo CD Operator (Helm) installs Argo CD in OpenShift and Kubernetes.
Stars: ✭ 18 (-87.41%)
Mutual labels:  circleci, travis-ci
CI-Utils
Utilities for running Common Lisp on CI platforms
Stars: ✭ 18 (-87.41%)
Mutual labels:  circleci, travis-ci
googletest-ci
Continuous integration (CI) + Google Test (gtest) + CMake example boilerplate demo
Stars: ✭ 14 (-90.21%)
Mutual labels:  circleci, travis-ci
Tfnotify
A CLI command to parse Terraform execution result and notify it to GitHub
Stars: ✭ 353 (+146.85%)
Mutual labels:  travis-ci, circleci
ci playground
Playground for Cloud CI development for C++
Stars: ✭ 23 (-83.92%)
Mutual labels:  circleci, travis-ci
koshry
Run on CI, Apply Rules on the Build and Get the Result back to the Pull Request.
Stars: ✭ 59 (-58.74%)
Mutual labels:  circleci, travis-ci
Cypress Example Kitchensink
This is an example app used to showcase Cypress.io testing.
Stars: ✭ 734 (+413.29%)
Mutual labels:  travis-ci, e2e-tests
Ci Matters
Integration (comparison) of different continuous integration services on Android project
Stars: ✭ 119 (-16.78%)
Mutual labels:  travis-ci, circleci

TodoMVC Circle CI Build status

renovate-app badge

This repo contains an example React App, with the tests written in Cypress.

Additionally this example app is configured to run tests in Circle CI and Travis CI.

The tests are written to be directly compared to the official TodoMVC tests.

Each test covers the same functionality found in the official TodoMVC tests but utilizes the Cypress API.

The tests are heavily commented to ease you into the Cypress API.

You can find the official TodoMVC tests we are comparing to here. And here. And here.

Help + Testing

The steps below will take you all the way through Cypress. It is assumed you have nothing installed except for node + git.

If you get stuck, here is more help:

1. Install Cypress

Follow these instructions to install Cypress.

2. Fork this repo

If you want to experiment with running this project in Continous Integration, you'll need to fork it first.

After forking this project in Github, run these commands:

## clone this repo to a local directory
git clone https://github.com/<your-username>/cypress-example-todomvc.git

## cd into the cloned repo
cd cypress-example-todomvc

## install the node_modules
npm install

## start the local webserver
npm start

The npm start script will spawn a webserver on port 8888 which hosts the TodoMVC app.

You can verify this by opening your browser and navigating to: http://localhost:8888

You should see the TodoMVC app up and running. We are now ready to run Cypress tests.

3. Add the project to Cypress

Follow these instructions to add the project to Cypress.

4. Run in Continuous Integration

Follow these instructions to run the tests in CI.

Cypress IntelliSense

If you use modern IDE that supports TypeScript (like VSCode), you can benefit from Cypress type declarations included with the cypress NPM module. Just add @ts-check to the spec file and configure "dummy" tsconfig.json file and see IntelliSense over cy.<something> commands.

cy.type IntelliSense

Custom commands

This project also adds several custom commands in cypress/support/commands.js. They are useful to create one or more default todos from the tests.

it('should append new items to the bottom of the list', function () {
  cy.createDefaultTodos().as('todos')
  // more test commands
})

To let TypeScript compiler know that we have added a custom command and have IntelliSense working, I have described the type signature of the custom command in file cypress/support/index.d.ts. Here is how this file looks; the type signatures should match the arguments custom commands expect.

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
    /**
     * Create several Todo items via UI
     * @example
     * cy.createDefaultTodos()
     */
    createDefaultTodos(): Chainable<any>
    /**
     * Creates one Todo using UI
     * @example
     * cy.createTodo('new item')
     */
    createTodo(title: string): Chainable<any>
  }
}

To include the new ".d.ts" file into IntelliSense, I could update tsconfig.json or I could add another special comment to the JavaScript spec files - /// <reference types="...>.

// type definitions for Cypress object "cy"
/// <reference types="cypress" />

// type definitions for custom commands like "createDefaultTodos"
// will resolve to "cypress/support/index.d.ts"
/// <reference types="../support" />

Related: IntelliSense for custom Chai assertions added to Cypress

Support

If you find errors in the type documentation, please open an issue

You can also ask questions in our chat channel

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].