add setup cypress instructions

.gitignore

@@ -15,3 +15,7 @@ dist
 .eslintcache
 /client/other/shared
 /server/other/shared
+/other/configuration/calculator/cypress/videos
+/other/configuration/calculator/cypress/screenshots
+/other/configuration/calculator.solution/cypress/videos
+/other/configuration/calculator.solution/cypress/screenshots

INSTRUCTIONS.md

@@ -342,7 +342,7 @@ See section called ["Jest"](#jest) below in the shared content
 
 **Instruction**:
 
-* Navigate to `./other/setup-jest/calculator`
+* Navigate to `./other/configuration/calculator`
 * Go ahead and run `npm run dev` and open up `localhost:8080` to see the app
 * `npm install --save-dev jest`
 * Create a `test` script in `package.json` to `jest`
@@ -486,6 +486,40 @@ _optional_
 
 ### Configuring Cypress
 
+**Instructions**:
+
+1.  Change directories to `other/configuration/calculator` (further directories relative to this)
+2.  Run `npm install --save-dev cypress`
+3.  Run `npx cypress open`. Play around with it, then stop the process.
+4.  Explore `./cypress`
+
+Now let's have it run on our codebase
+
+1.  In one terminal tab/window start the dev server `npm run dev`. Note this is running on port `8080`
+2.  Open `./cypress.json` and add `"baseUrl": "http://localhost:8080"` and `"integrationFolder": "cypress/e2e"`
+3.  Delete `./cypress/integration` and copy `../calculator.solution/e2e/calculator.js` to `./cypress/e2e/calculator.js`
+4.  Start cypress over again: `npx cypress open` and run the test. It passes!
+
+Now let's make this a script
+
+1.  `npm install --save-dev npm-run-all`
+2.  Add a `test:e2e:dev` script: `npm-run-all --parallel --race dev cy:open`
+3.  Add a `cy:open` script: `cypress open`
+4.  Run `npm run test:e2e:dev`. It works!
+
+Now let's make this work for CI
+
+1.  Add a `test:e2e` script: `npm-run-all --parallel --race start cy:run`
+2.  Add a `cy:run` script: `cypress run`
+3.  Add a `pretest:e2e` script: `npm run build`
+4.  Run `npm run test:e2e`. It works!
+
+**Exercise**:
+
+> No exercise here. It would be really boring I think...
+
+**Takeaways**:
+
 * TODO
 
 ### End-to-end testing

appveyor.yml

@@ -18,7 +18,7 @@ cache:
   - ./client/node_modules -> ./client/package.json
   - ./server/node_modules -> ./server/package.json
   - ./shared/node_modules -> ./shared/package.json
-  - ./other/setup-jest/calculator/node_modules -> ./other/setup-jest/calculator/package.json
-  - ./other/setup-jest/calculator.solution/node_modules -> ./other/setup-jest/calculator.solution/package.json
+  - ./other/configuration/calculator/node_modules -> ./other/configuration/calculator/package.json
+  - ./other/configuration/calculator.solution/node_modules -> ./other/configuration/calculator.solution/package.json
 
 build: off

other/setup-jest/calculator.solution/.babelrc.js → other/configuration/calculator.solution/.babelrc.js

@@ -6,5 +6,5 @@ module.exports = {
     'transform-class-properties',
     'transform-object-rest-spread',
     isTest ? 'dynamic-import-node' : null,
-  ],
+  ].filter(Boolean),
 }

other/configuration/calculator.solution/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "integrationFolder": "cypress/e2e"
+}

other/configuration/calculator.solution/cypress/e2e/calculator.js

@@ -0,0 +1,6 @@
+/* globals cy */
+describe('calculator', () => {
+  it('can visit the app', () => {
+    cy.visit('/')
+  })
+})

other/configuration/calculator.solution/cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

other/configuration/calculator.solution/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (_on, _config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

other/configuration/calculator.solution/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

other/configuration/calculator.solution/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

other/setup-jest/calculator.solution/package.json → other/configuration/calculator.solution/package.json

@@ -6,8 +6,14 @@
   "scripts": {
     "test": "jest --coverage",
     "test:watch": "jest --watch",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "pretest:e2e": "npm run build",
+    "test:e2e": "npm-run-all --parallel --race start cy:run",
+    "test:e2e:dev": "npm-run-all --parallel --race dev cy:open",
     "dev": "webpack-dev-server --mode=development",
-    "build": "webpack --mode=production"
+    "build": "webpack --mode=production",
+    "start": "serve -s dist --port 8080"
   },
   "keywords": [],
   "author": "Kent C. Dodds <[email protected]> (http://kentcdodds.com/)",
@@ -22,9 +28,12 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.10",
+    "cypress": "^2.1.0",
     "file-loader": "^1.1.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.2",
+    "npm-run-all": "^4.1.2",
+    "serve": "^6.5.3",
     "style-loader": "^0.20.2",
     "webpack": "^4.1.1",
     "webpack-cli": "^2.0.10",

other/setup-jest/calculator/package.json → other/configuration/calculator/package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack-dev-server --mode=development",
-    "build": "webpack --mode=production"
+    "build": "webpack --mode=production",
+    "start": "serve -s dist --port 8080"
   },
   "keywords": [],
   "author": "Kent C. Dodds <[email protected]> (http://kentcdodds.com/)",
@@ -19,6 +20,7 @@
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.10",
     "file-loader": "^1.1.11",
+    "serve": "^6.5.3",
     "style-loader": "^0.20.2",
     "webpack": "^4.1.1",
     "webpack-cli": "^2.0.10",

other/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     './client',
     './server',
     './other/whats-a-mock',
-    './other/setup-jest/calculator.solution',
+    './other/configuration/calculator.solution',
     './other/jest-expect',
   ],
 }

scripts/install.js

@@ -7,8 +7,8 @@ installDeps([
   path.resolve(__dirname, '../shared'),
   path.resolve(__dirname, '../server'),
   path.resolve(__dirname, '../client'),
-  path.resolve(__dirname, '../other/setup-jest/calculator'),
-  path.resolve(__dirname, '../other/setup-jest/calculator.solution'),
+  path.resolve(__dirname, '../other/configuration/calculator'),
+  path.resolve(__dirname, '../other/configuration/calculator.solution'),
 ]).then(
   () => {
     console.log('👍  all dependencies installed')