Add code coverage section 87 (#88)

* more tweaks

* add todomvc-redux app

* update coverage

* use command to install all dependencies

* add slides

* add code coverage link to readme

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "istanbul"
+  ]
+}

.circleci/config.yml

@@ -1,6 +1,27 @@
 # Check https://circleci.com/docs/2.0/ for more details
 # for config.yml syntax see https://circleci.com/docs/2.0/configuration-reference/
-version: 2
+version: 2.1
+
+commands:
+  install-dependencies:
+    # Install NPM dependencies quickly using "npm ci"
+    # https://on.cypress.io/continuous-integration
+    # https://docs.npmjs.com/cli/ci
+    description: installs npm dependencies
+    steps:
+      # Install NPM dependencies quickly
+      - run:
+          name: Install dependencies
+          command: npm ci
+      - run:
+          name: Install TodoMVC dependencies
+          command: npm ci
+          working_directory: todomvc
+      - run:
+          name: Install TodoMVC Redux dependencies
+          command: npm ci
+          working_directory: todomvc-redux
+
 jobs:
   # example test job with 2 commands
   # 1. starts the app in the background
@@ -22,12 +43,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - dependencies-
 
-      # Install NPM dependencies quickly using "npm ci"
-      # https://on.cypress.io/continuous-integration
-      # https://docs.npmjs.com/cli/ci
-      - run:
-          name: Install dependencies
-          command: npm ci; cd todomvc; npm ci
+      - install-dependencies
 
       - run:
           name: Start TodoMVC server
@@ -66,10 +82,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - dependencies-
 
-      # Install NPM dependencies quickly
-      - run:
-          name: Install dependencies
-          command: npm ci; cd todomvc; npm ci
+      - install-dependencies
 
       - save_cache:
           paths:

.gitignore

@@ -7,3 +7,6 @@ cypress/results
 mochawesome-report/
 mochawesome.json
 cypress/logs
+dist
+.nyc_output
+coverage

README.md

@@ -106,6 +106,7 @@ See the presentation at [https://gitpitch.com/cypress-io/testing-workshop-cypres
 | [🔗](#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)
 
 ## For speakers 🎙

cypress/integration/19-code-coverage/spec.js

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+beforeEach(() => {
+  cy.visit('/')
+})
+
+it('adds 2 todos', () => {
+  cy.get('.new-todo')
+    .type('learn testing{enter}')
+    .type('be cool{enter}')
+  cy.get('.todo-list li').should('have.length', 2)
+})
+
+// add more tests to cover more application source code

cypress/plugins/index.js

@@ -56,6 +56,11 @@ module.exports = (on, config) => {
     }
   })
 
+  // code coverage tasks
+  // on('task', require('cypress-istanbul/task'))
+  // use .babelrc file if want to instrument unit tests
+  // on('file:preprocessor', require('cypress-istanbul/use-babelrc'))
+
   // `config` is the resolved Cypress config
   // see https://on.cypress.io/configuration-api
   config.fixturesFolder = 'cypress/fixtures'

cypress/support/index.js

@@ -26,3 +26,6 @@ import './commands'
 // require('cypress-pipe')
 // require('cypress-plugin-snapshots/commands')
 // require('cypress-failed-log')
+
+// load commands for code coverage
+// require('cypress-istanbul/support')