Add Cypress browser tests

.gitignore

@@ -20,3 +20,5 @@ modernomad/local_settings.py.bak
 ghostdriver.log
 .env
 static/CACHE/
+
+/node_modules

.travis.yml

@@ -1,5 +1,21 @@
+language: node_js
+node_js:
+ - 10
+cache:
+  npm: true
+  directories:
+    # cache folder with Cypress binary
+    - ~/.cache
 dist: xenial
-script: script/test
+install:
+  - sudo apt-get install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+  - npm ci
+script:
+ - script/test
+ - docker-compose up -d
+ - docker-compose run web ./manage.py migrate
+ - docker-compose run web ./manage.py generate_test_data
+ - $(npm bin)/cypress run --record --key 88257c2f-8d2e-464c-878b-650cace8563e
 notifications:
   slack:
     rooms:

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8000",
+  "projectId": "3gfovh"
+}

cypress/integration/booking_spec.js

@@ -0,0 +1,41 @@
+/// <reference types="Cypress" />
+const randomstring = require("randomstring");
+
+describe("Booking a room", function() {
+  it("New user flow", function() {
+    cy.visit("/");
+    cy.contains("Cummings Green").click();
+    cy.contains("View all rooms").click();
+    cy.contains("Evan Johnson").click({ force: true });
+
+    cy.get("input[name=arrive]").focus();
+    // Pick next month so all the dates are available
+    cy.get(".react-datepicker__navigation--next").click({ force: true });
+    cy.get("[aria-label=day-13]").click({ force: true });
+    // Force de-select first date picker. For some reason immediately selecting second date
+    // picker causes first not to close.
+    cy.get("#network-footer").click("topLeft");
+    cy.get("input[name=depart]").focus();
+    cy.get("[aria-label=day-16]").click({ force: true });
+    cy.get("[name=purpose]").type("Work.");
+    cy.contains("Request to Book").click();
+
+    cy.get("[name=bio]").type("I am a robot.");
+    cy.get("[name=projects]").type("Kill all humans.");
+    cy.get("[name=sharing]").type("I can do your math homework.");
+    cy.get("[name=discussion]").type("Is AI risk overrated?");
+    cy.get("[name=first_name]").type("Bot");
+    cy.get("[name=last_name]").type("McBotface");
+    cy.get("[name=referral]").type("Pixel");
+    cy.get("[name=city]").type("Chapek 9");
+    cy.get("[name=email]").type(`${randomstring.generate(10)}@example.com`);
+    cy.get("[name=password1]").type("password");
+    cy.get("[name=password2]").type("password");
+
+    cy.uploadFile("profile.png", "input[name=image");
+
+    cy.contains("Submit").click();
+
+    cy.contains("Your booking has been submitted.");
+  });
+});

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
+}

cypress/support/commands.js

@@ -0,0 +1,41 @@
+// ***********************************************
+// 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) => { ... })
+
+// https://github.com/cypress-io/cypress/issues/170
+Cypress.Commands.add("uploadFile", (fileName, selector) => {
+  cy.get(selector).then(subject => {
+    cy.fixture(fileName).then(content => {
+      Cypress.Blob.base64StringToBlob(content, "image/jpeg").then(blob => {
+        const el = subject[0];
+        const testFile = new File([blob], fileName);
+        const dataTransfer = new DataTransfer();
+
+        dataTransfer.items.add(testFile);
+        el.files = dataTransfer.files;
+      });
+    });
+  });
+});

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')

docs/browser-tests.md

@@ -0,0 +1,16 @@
+# Browser tests
+
+We use [Cypress](https://www.cypress.io/) to test the high-level features of Modernomad in a browser. This checks that the frontend code and backend code all work together from the level of a user clicking around on the site.
+
+Cypress needs to run on your local machine, not inside Chrome or a VM, because it has to start and control your browser.
+
+First, install Cypress:
+
+    $ npm install
+
+Then, start it up: 
+
+    npm run cypress:open
+
+[The Cypress documentation has information on how to run and write tests.](https://docs.cypress.io/) The test cases are in `cypress/fixtures/`.
+