add cypress

* update all the things

* add server

* pretty darn close to something useful

* add install:server

* i dunno

* simplify

* stuff

* cleanup

* cypress is ready

* update deps and things

* fixup everything that is left hopefully

Author: Kent C. Dodds

.eslintrc.js

@@ -8,6 +8,8 @@ module.exports = {
     'kentcdodds/jest',
     'kentcdodds/react',
   ],
+  plugins: ['eslint-plugin-cypress'],
+  env: {'cypress/globals': true},
   overrides: [
     {
       files: ['**/__tests__/**'],

.travis.yml

@@ -7,8 +7,8 @@ cache:
 notifications:
   email: false
 node_js: '8'
-install: npm install
-script: npm run validate
+install: echo "install happens as part of setup"
+script: npm run setup
 after_script: npx codecov@3
 branches:
   only: master

cypress.json

@@ -1,6 +1,6 @@
 {
   "baseUrl": "http://localhost:8080",
   "integrationFolder": "cypress/e2e",
-  "viewportHeight": 700,
+  "viewportHeight": 900,
   "viewportWidth": 400
 }

cypress/e2e/calculator.js

@@ -1,6 +1,5 @@
-/* globals cy */
-describe('calculator', () => {
-  it('can visit the app', () => {
+describe('anonymous calculator', () => {
+  it('can make calculations', () => {
     cy.visit('/')
       .getByText(/^1$/)
       .click()
@@ -10,5 +9,21 @@ describe('calculator', () => {
       .click()
       .getByText(/^=$/)
       .click()
+      .getByTestId('total')
+      .should('have.text', '3')
+  })
+})
+
+describe('authenticated calculator', () => {
+  it('displays the username', () => {
+    cy.loginAsNewUser().then(user => {
+      cy.visit('/')
+        .getByTestId('username-display')
+        .should('have.text', user.username)
+        .getByText(/logout/i)
+        .click()
+        .get('[data=username-display]')
+        .should('not.exist')
+    })
   })
 })

cypress/e2e/login.js

@@ -0,0 +1,15 @@
+describe('login', () => {
+  it('should login an existing user', () => {
+    cy.createUser().then(user => {
+      cy.visit('/')
+        .getByText(/login/i)
+        .click()
+        .getByLabelText(/username/i)
+        .type(user.username)
+        .getByLabelText(/password/i)
+        .type(user.password)
+        .getByText(/submit/i)
+        .click()
+    })
+  })
+})

cypress/e2e/register.js

@@ -0,0 +1,30 @@
+import {userBuilder} from '../support/generate'
+
+describe('registration', () => {
+  it('should register a new user', () => {
+    const user = userBuilder()
+    cy.visit('/')
+      .getByText(/register/i)
+      .click()
+      .getByLabelText(/username/i)
+      .type(user.username)
+      .getByLabelText(/password/i)
+      .type(user.password)
+      .getByText(/submit/i)
+      .click()
+  })
+
+  it(`should show an error message if there's an error registering`, () => {
+    cy.server()
+    cy.route({
+      method: 'POST',
+      url: 'http://localhost:3000/register',
+      status: 500,
+      response: {},
+    })
+    cy.visit('/register')
+      .getByText(/submit/i)
+      .click()
+      .getByText(/error.*try again/i)
+  })
+})

cypress/support/commands.js

@@ -1,25 +1,31 @@
-// ***********************************************
-// 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) => { ... })
+import {userBuilder} from './generate'
+
+Cypress.Commands.add('createUser', overrides => {
+  const user = userBuilder(overrides)
+  return cy
+    .request({
+      url: 'http://localhost:3000/register',
+      method: 'POST',
+      body: user,
+    })
+    .then(({body}) => body.user)
+})
+
+Cypress.Commands.add('login', user => {
+  return cy
+    .request({
+      url: 'http://localhost:3000/login',
+      method: 'POST',
+      body: user,
+    })
+    .then(({body}) => {
+      window.localStorage.setItem('token', body.user.token)
+      return body.user
+    })
+})
+
+Cypress.Commands.add('loginAsNewUser', () => {
+  cy.createUser().then(user => {
+    cy.login(user)
+  })
+})

cypress/support/generate.js

@@ -0,0 +1,8 @@
+import {build, fake} from 'test-data-bot'
+
+const userBuilder = build('User').fields({
+  username: fake(f => f.internet.userName()),
+  password: fake(f => f.internet.password()),
+})
+
+export {userBuilder}

cypress/support/index.js

@@ -1,21 +1,2 @@
-// ***********************************************************
-// 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'
 import 'cypress-testing-library/add-commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

jest.config.js

@@ -1,12 +1,17 @@
 module.exports = {
   ...require('./test/jest-common'),
-  collectCoverageFrom: ['**/src/**/*.js'],
+  collectCoverageFrom: [
+    '**/src/**/*.js',
+    '!**/__tests__/**',
+    '!**/__server_tests__/**',
+    '!**/node_modules/**',
+  ],
   coverageThreshold: {
     global: {
-      statements: 13,
+      statements: 10,
       branches: 5,
-      functions: 17,
-      lines: 13,
+      functions: 15,
+      lines: 8,
     },
     './src/shared/utils.js': {
       statements: 100,
@@ -15,14 +20,10 @@ module.exports = {
       lines: 100,
     },
   },
-  coveragePathIgnorePatterns: [
-    '/node_modules/',
-    '/__tests__/',
-    '__server_tests__/',
-  ],
   projects: [
     './test/jest.lint.js',
     './test/jest.client.js',
     './test/jest.server.js',
+    './server',
   ],
 }