testing-workshop-cypress

A 3-4 hour testing workshop complete with application, exercise tests and speaker slides for Cypress.io

Requirements

Any computer: Mac, Windows, Linux
Node 6+
git

Application

Vue.js + Vuex + REST server application that we are going to test is in the folder todomvc. This application and its full testing is described in this blog post.

Slides

https://gitpitch.com/cypress-io/testing-workshop-cypress with the starting file in PITCHME.md presented using GitPitch. The pitch file includes files from the slides folder. Students should open the presentation slides and follow along.

Content

topics	folder	slides
Introduction, TodoMVC application	todomvc	intro.md
Loading page	00-start	00-start.md
`cypress open` vs `cypress run`	cypress/integration/01-basic	01-basic.md
Adding items test, `cypress.json` file	cypress/integration/02-adding-items	02-adding-items.md
Selector Playground	cypress/integration/03-selector-playground	03-selector-playground.md
Reset database using `cy.request`	cypress/integration/04-reset-state	04-reset-state.md
Spy and stub XHR requests, fixtures	cypress/integration/05-xhr	05-xhr.md
Access application code and data	cypress/integration/06-app-data-store	06-app-data-store.md
Setting up E2E tests on CI	cypress/integration/07-ci	07-ci.md
Setting up Cypress Dashboard	cypress/integration/07-ci	08-dashboard.md
The end	-	end.md

For speakers

During a testing workshop in Boston, Gleb Bahmutov covered this material in 3 hours (with a 25 minute lunch break). Everyone worked or coded for the most part, except for CI and the Cypress Dashboard sections, where the usage was shown via slides and actual sites.

During the workshop, keep the todomvc app running in one shell, while each section 01-basic, 02-..., 03-... etc. has its own Cypress and specs subfolders cypress/integration/.... Usually a spec has several tests with placeholder comments. The workshop attendees are expected to make the tests pass using the knowledge from the slides and hints (and Cypress documentation). Note that most folders have a prepared spec.js file and an answer.js file. The answer.js file is ignored by Cypress using a setting in cypress.json.

The only exception is the folder 00-start. This is a folder for students to see how Cypress scaffolds example specs when you open Cypress for the very first time. In this folder students should execute...

cd 00-start
npm run cy:open

...and see the list of created example specs.