switch slides to use Reveal and Vite (#247)

Author: bahmutov

README.md

@@ -87,39 +87,41 @@ See the presentation at [https://gitpitch.com/cypress-io/testing-workshop-cypres
 
 | | topic                                  | folder                                                                                   | contents                                                       | slides |
 | --- | -------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------ |
-| [🔗](#intro) | Introduction, TodoMVC application      | [todomvc](todomvc)                                                                       | [intro.md](slides/intro/PITCHME.md)                                   | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/intro)
-| [🔗](#start) | Loading page                           | [00-start](00-start)                                                                     | [00-start](slides/00-start/PITCHME.md)                             | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/00-start)
-| [🔗](#basic) | `cypress open` vs `cypress run`        | [01-basic](cypress/integration/01-basic)                             | [01-basic](slides/01-basic/PITCHME.md)                             | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/01-basic)
-| [🔗](#adding-items) | Adding items test, `cypress.json` file | [02-adding-items](cypress/integration/02-adding-items)               | [02-adding-items](slides/02-adding-items/PITCHME.md)               | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/02-adding-items)
-| [🔗](#selector-playground) | Selector Playground                    | [03-selector-playground](cypress/integration/03-selector-playground) | [03-selector-playground](slides/03-selector-playground/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/03-selector-playground)
-| [🔗](#reset-state) | Reset database using `cy.request`      | [04-reset-state](cypress/integration/04-reset-state)                 | [04-reset-state](slides/04-reset-state/PITCHME.md)                 | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/04-reset-state)
-| [🔗](#xhr) | Spy and stub XHR requests, fixtures    | [05-xhr](cypress/integration/05-xhr)                                 | [05-xhr](slides/05-xhr/PITCHME.md)                                 | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/05-xhr)
-| [🔗](#app-data-store) | Access application code and data       | [06-app-data-store](cypress/integration/06-app-data-store)           | [06-app-data-store](slides/06-app-data-store/PITCHME.md)           | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/06-app-data-store)
+| [🔗](#intro) | Introduction, TodoMVC application      | [todomvc](todomvc)                                                                       | [intro.md](slides/intro/PITCHME.md)                                   | [link](https://testing-workshop-cypress.netlify.app?p=slides/intro)
+| [🔗](#start) | Loading page                           | [00-start](00-start)                                                                     | [00-start](slides/00-start/PITCHME.md)                             | [link](https://testing-workshop-cypress.netlify.app?p=slides/00-start)
+| [🔗](#basic) | `cypress open` vs `cypress run`        | [01-basic](cypress/integration/01-basic)                             | [01-basic](slides/01-basic/PITCHME.md)                             | [link](https://testing-workshop-cypress.netlify.app?p=slides/01-basic)
+| [🔗](#adding-items) | Adding items test, `cypress.json` file | [02-adding-items](cypress/integration/02-adding-items)               | [02-adding-items](slides/02-adding-items/PITCHME.md)               | [link](https://testing-workshop-cypress.netlify.app?p=slides/02-adding-items)
+| [🔗](#selector-playground) | Selector Playground                    | [03-selector-playground](cypress/integration/03-selector-playground) | [03-selector-playground](slides/03-selector-playground/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/03-selector-playground)
+| [🔗](#reset-state) | Reset database using `cy.request`      | [04-reset-state](cypress/integration/04-reset-state)                 | [04-reset-state](slides/04-reset-state/PITCHME.md)                 | [link](https://testing-workshop-cypress.netlify.app?p=slides/04-reset-state)
+| [🔗](#xhr) | Spy and stub XHR requests, fixtures    | [05-xhr](cypress/integration/05-xhr)                                 | [05-xhr](slides/05-xhr/PITCHME.md)                                 | [link](https://testing-workshop-cypress.netlify.app?p=slides/05-xhr)
+| [🔗](#app-data-store) | Access application code and data       | [06-app-data-store](cypress/integration/06-app-data-store)           | [06-app-data-store](slides/06-app-data-store/PITCHME.md)           | [link](https://testing-workshop-cypress.netlify.app?p=slides/06-app-data-store)
 
 ### Intermediate
 | | topic                                  | folder                                                                                   | contents                                                       | slides |
 | --- | -------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------ |
-| [🔗](#ci) | Setting up E2E tests on CI             | [07-ci](cypress/integration/07-ci)                                   | [07-ci](slides/07-ci/PITCHME.md)                                   | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/07-ci)
-| [🔗](#dashboard) | Setting up Cypress Dashboard           | [07-ci](cypress/integration/07-ci)                                   | [08-dashboard](slides/08-dashboard/PITCHME.md)                     | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/08-dashboard)
-| [🔗](#reporters) | Test reporters             | - | [09-reporters](slides/09-reporters/PITCHME.md)                     | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/09-reporters)
-| [🔗](#configuration) | Configuration | - | [10-configuration](slides/10-configuration/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/10-configuration)
-| [🔗](#retry-ability) | Retry-ability | [11-retry-ability](cypress/integration/11-retry-ability) | [11-retry-ability](slides/11-retry-ability/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/11-retry-ability)
-| [🔗](#custom-commands) | Custom commands | [12-custom-commands](cypress/integration/12-custom-commands) | [12-custom-commands](slides/12-custom-commands/PITCHME.md)| [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/12-custom-commands)
+| [🔗](#ci) | Setting up E2E tests on CI             | [07-ci](cypress/integration/07-ci)                                   | [07-ci](slides/07-ci/PITCHME.md)                                   | [link](https://testing-workshop-cypress.netlify.app?p=slides/07-ci)
+| [🔗](#dashboard) | Setting up Cypress Dashboard           | [07-ci](cypress/integration/07-ci)                                   | [08-dashboard](slides/08-dashboard/PITCHME.md)                     | [link](https://testing-workshop-cypress.netlify.app?p=slides/08-dashboard)
+| [🔗](#reporters) | Test reporters             | - | [09-reporters](slides/09-reporters/PITCHME.md)                     | [link](https://testing-workshop-cypress.netlify.app?p=slides/09-reporters)
+| [🔗](#configuration) | Configuration | - | [10-configuration](slides/10-configuration/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/10-configuration)
+| [🔗](#retry-ability) | Retry-ability | [11-retry-ability](cypress/integration/11-retry-ability) | [11-retry-ability](slides/11-retry-ability/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/11-retry-ability)
+| [🔗](#custom-commands) | Custom commands | [12-custom-commands](cypress/integration/12-custom-commands) | [12-custom-commands](slides/12-custom-commands/PITCHME.md)| [link](https://testing-workshop-cypress.netlify.app?p=slides/12-custom-commands)
 
 ### Advanced
 | | topic                                  | folder                                                                                   | contents                                                       | slides |
 | --- | -------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------ |
-| [🔗](#app-actions) | Page Objects vs App Actions | [13-app-actions](cypress/integration/13-app-actions) | [13-app-actions](slides/13-app-actions/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/13-app-actions)
-| [🔗](#fixtures) | Fixtures | [14-fixtures](cypress/integration/14-fixtures) | [14-fixtures](slides/14-fixtures/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/14-fixtures)
-| [🔗](#debugging) | Debugging | [02-adding-items/demo.js](cypress/integration/02-adding-items/demo.js) | [15-debugging](slides/15-debugging/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/15-debugging)
-| [🔗](#preprocessors) | Preprocessors | [16-preprocessors](cypress/integration/16-preprocessors) | [16-preprocessors](slides/16-preprocessors/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/16-preprocessors)
-| [🔗](#component-testing) | Component testing | [17-component-testing](cypress/integration/17-component-testing) | [17-component-testing](slides/17-component-testing/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/17-component-testing)
-| [🔗](#backend) | Backend code | [18-backend](cypress/integration/18-backend) | [18-backend](slides/18-backend/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/18-backend)
-| [🔗](#code-coverage) | Code coverage | [19-code-coverage](cypress/integration/19-code-coverage) | [19-code-coverage](slides/19-code-coverage/PITCHME.md) | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/19-code-coverage)
-| | The end                                | -                                                                                        | [end](slides/end/PITCHME.md)                                       | [link](https://gitpitch.com/cypress-io/testing-workshop-cypress?p=slides/end)
+| [🔗](#app-actions) | Page Objects vs App Actions | [13-app-actions](cypress/integration/13-app-actions) | [13-app-actions](slides/13-app-actions/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/13-app-actions)
+| [🔗](#fixtures) | Fixtures | [14-fixtures](cypress/integration/14-fixtures) | [14-fixtures](slides/14-fixtures/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/14-fixtures)
+| [🔗](#debugging) | Debugging | [02-adding-items/demo.js](cypress/integration/02-adding-items/demo.js) | [15-debugging](slides/15-debugging/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/15-debugging)
+| [🔗](#preprocessors) | Preprocessors | [16-preprocessors](cypress/integration/16-preprocessors) | [16-preprocessors](slides/16-preprocessors/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/16-preprocessors)
+| [🔗](#component-testing) | Component testing | [17-component-testing](cypress/integration/17-component-testing) | [17-component-testing](slides/17-component-testing/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/17-component-testing)
+| [🔗](#backend) | Backend code | [18-backend](cypress/integration/18-backend) | [18-backend](slides/18-backend/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/18-backend)
+| [🔗](#code-coverage) | Code coverage | [19-code-coverage](cypress/integration/19-code-coverage) | [19-code-coverage](slides/19-code-coverage/PITCHME.md) | [link](https://testing-workshop-cypress.netlify.app?p=slides/19-code-coverage)
+| | The end                                | -                                                                                        | [end](slides/end/PITCHME.md)                                       | [link](https://testing-workshop-cypress.netlify.app?p=slides/end)
 
 ## For speakers 🎙
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/de48e52e-e2ee-4092-a626-ab4fa358e441/deploy-status)](https://app.netlify.com/sites/testing-workshop-cypress/deploys)
+
 This workshop can take all day, but you can pick the sections you are interested in teaching at will and customize it into any time duration. Everyone is coding 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](https://docs.cypress.io/)). 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`.

cypress/integration/02-adding-items/answer.js

@@ -24,10 +24,7 @@ it('can mark an item as completed', () => {
   addItem('hard')
 
   // marks the first item as completed
-  cy.contains('li.todo', 'simple')
-    .should('exist')
-    .find('.toggle')
-    .check()
+  cy.contains('li.todo', 'simple').should('exist').find('.toggle').check()
 
   // confirms the first item has the expected completed class
   cy.contains('li.todo', 'simple').should('have.class', 'completed')
@@ -56,7 +53,7 @@ it('can delete an item', () => {
  * Adds a todo item
  * @param {string} text
  */
-const addItem = text => {
+const addItem = (text) => {
   cy.get('.new-todo').type(`${text}{enter}`)
 }
 
@@ -72,9 +69,7 @@ it('can add many items', () => {
 })
 
 it('adds item with random text', () => {
-  const randomLabel = `Item ${Math.random()
-    .toString()
-    .slice(2, 14)}`
+  const randomLabel = `Item ${Math.random().toString().slice(2, 14)}`
 
   addItem(randomLabel)
   cy.contains('li.todo', randomLabel)
@@ -87,7 +82,7 @@ it('starts with zero items', () => {
 })
 
 it('does not allow adding blank todos', () => {
-  cy.on('uncaught:exception', e => {
+  cy.on('uncaught:exception', (e) => {
     // what will happen if this assertion fails?
     // will the test fail?
     // expect(e.message).to.include('Cannot add a blank todo')

cypress/integration/02-adding-items/demo.js

@@ -15,7 +15,7 @@ beforeEach(function visitSite() {
   cy.visit('/')
 })
 
-it('adds items', function() {
+it('adds items', function () {
   cy.get('.new-todo')
     .type('todo A{enter}')
     .type('todo B{enter}')

cypress/integration/03-selector-playground/answer.js

@@ -6,12 +6,12 @@ it('loads', () => {
   cy.contains('h1', 'todos')
 })
 // optional test data attribute selector helper
-const tid = id => `[data-cy="${id}"]`
+const tid = (id) => `[data-cy="${id}"]`
 /**
  * Adds a todo item
  * @param {string} text
  */
-const addItem = text => {
+const addItem = (text) => {
   cy.get('[data-cy="input"]').type(`${text}{enter}`)
 }
 

cypress/integration/03-selector-playground/spec.js

@@ -15,7 +15,7 @@ it('loads', () => {
  * Adds a todo item
  * @param {string} text
  */
-const addItem = text => {
+const addItem = (text) => {
   // write Cy commands here to add the new item
 }
 it('adds two items', () => {

cypress/integration/04-reset-state/answer.js

@@ -3,7 +3,7 @@
  * Adds a todo item
  * @param {string} text
  */
-const addItem = text => {
+const addItem = (text) => {
   cy.get('.new-todo').type(`${text}{enter}`)
 }
 
@@ -76,7 +76,7 @@ describe('set initial data', () => {
   })
 
   it('sets data using fixture', () => {
-    cy.fixture('two-items').then(todos => {
+    cy.fixture('two-items').then((todos) => {
       // "todos" is an array
       cy.task('resetData', { todos })
     })

cypress/integration/04-reset-state/spec.js

@@ -3,7 +3,7 @@
  * Adds a todo item
  * @param {string} text
  */
-const addItem = text => {
+const addItem = (text) => {
   cy.get('.new-todo').type(`${text}{enter}`)
 }