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:

core/factory_apps/location.py

@@ -42,7 +42,7 @@ class Meta:
     longitude = factory.Faker('longitude')
 
     welcome_email_days_ahead = factory.Iterator([1,2,3,4,5])
-    max_booking_days = factory.Iterator([1,5,14,30])
+    max_booking_days = factory.Iterator([5,14,30])
 
     stay_page = factory.Faker('text')
     front_page_stay = factory.Faker('text')
@@ -106,7 +106,7 @@ class Meta:
 
     name = factory.Faker('name')
     location = factory.SubFactory(LocationFactory)
-    default_rate = factory.Faker('pydecimal', left_digits=0, positive=True)
+    default_rate = factory.Iterator([14.12, 30.53, 99, 31.41])
     description = factory.Faker('text')
     summary = factory.Faker('sentence')
     cancellation_policy = factory.Faker('text')

core/views/unsorted.py

@@ -2301,15 +2301,17 @@ def process_unsaved_booking(request):
     return
 
 
-def user_login(request):
+def user_login(request, username=None):
     logger.debug('in user_login')
     next_page = None
     if 'next' in request.GET:
         next_page = request.GET['next']
 
-    username = password = ''
+    password = ''
     if request.POST:
-        username = request.POST['username']
+        # Username is pre-set if this is part of registration flow
+        if not username:
+            username = request.POST['username']
         # JKS this is a bit janky. this is because we use this view both after
         # the user registration or after the login view, which themselves use
         # slightly different forms.
@@ -2355,8 +2357,7 @@ def register(request):
         profile_form = UserProfileForm(request.POST, request.FILES)
         if profile_form.is_valid():
             user = profile_form.save()
-            request.POST['username'] = user.username
-            return user_login(request)
+            return user_login(request, username=user.username)
         else:
             logger.debug('profile form contained errors:')
             logger.debug(profile_form.errors)

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