Cypress E2E tests (#79)

* Cypress E2E tests

* Should be ready now

* fix readme link

* change to data attributes

.github/workflows/cypress.yml

@@ -0,0 +1,41 @@
+name: Cypress Tests
+on: 
+  workflow_run:
+    workflows: [Unit Tests, Linter]
+    types:
+      - completed
+    branches:
+      - 'main'
+jobs:
+  Chrome:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Run on Staging 
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: client
+          browser: chrome
+          headless: true
+        env: 
+          NPM_CONFIG_PRODUCTION: false
+          CYPRESS_TEST_USER_EMAIL: ${{ secrets.CYPRESS_TEST_USER_EMAIL }}
+          CYPRESS_TEST_USER_PASS: ${{ secrets.CYPRESS_TEST_USER_PASS }}
+          CYPRESS_baseUrl: "https://tn-spa-bootstrapper-staging.herokuapp.com/"
+  Firefox:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Run on Staging 
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: client
+          browser: firefox
+          headless: true
+        env: 
+          NPM_CONFIG_PRODUCTION: false
+          CYPRESS_TEST_USER_EMAIL: ${{ secrets.CYPRESS_TEST_USER_EMAIL }}
+          CYPRESS_TEST_USER_PASS: ${{ secrets.CYPRESS_TEST_USER_PASS }}
+          CYPRESS_baseUrl: "https://tn-spa-bootstrapper-staging.herokuapp.com/"

README.md

@@ -1,6 +1,8 @@
 # Thinknimble SPA Bootstrapper (Django | Vue | React)
 
-Thinknimble Cookiecutter is a framework for jumpstarting production-ready Django projects along side with client side SPA quickly.
+A production-ready Django SPA app on Heroku in 20-min or less!
+
+[Example deployment (main branch)]
 
 ## Quick Start
 
@@ -109,3 +111,4 @@ See the [CONTRIBUTING] file for information about reporting issues, setting up y
 [Rollbar]: https://docs.rollbar.com/docs
 [pre-commit]: https://github.com/pre-commit/pre-commit
 [Maintained Foundation Fork]: https://github.com/Parbhat/cookiecutter-django-foundation
+[Example deployment (main branch)]: https://tn-spa-bootstrapper-staging.herokuapp.com/

{{cookiecutter.project_slug}}/.env.example

@@ -141,3 +141,9 @@ SMTP_HOST='smtp.mailgun.org'
 SMTP_PORT='587'
 SMTP_VALID_TESTING_DOMAINS='thinknimble.com'
 {% endif %}
+
+# Testing (NOTE: Heroku and Github Actions will need to have matching values for some of these)
+DJANGO_SUPERUSER_PASSWORD='!!!DJANGO_SECRET_KEY!!!'
+CYPRESS_baseUrl='http://localhost:8080'
+CYPRESS_TEST_USER_PASS='!!!DJANGO_SECRET_KEY!!!'
+CYPRESS_TEST_USER_EMAIL='cypress@example.com'

{{cookiecutter.project_slug}}/.github/pull_request_template.md

@@ -0,0 +1,19 @@
+## What this does
+
+Add a description of what feature/page this PR intends to add or change. Don't forget to start the PR title with the Jira ticket number.
+
+- [Jira ticket](Paste Jira link here) 
+
+## Checklist
+- [ ] Todo 1
+- [ ] Todo 2
+- [ ] Todo 3
+
+
+## Deploy Notes
+
+Add any notes for changes needed when deployed. I.e. API keys, environment variables, database changes, etc.
+
+## How to test
+
+Add user steps to achieve desired functionality for this feature.

{{cookiecutter.project_slug}}/.github/workflows/cypress.yml

@@ -0,0 +1,41 @@
+name: Cypress Tests
+on: 
+  workflow_run:
+    workflows: [Unit Tests, Linter]
+    types:
+      - completed
+    branches:
+      - 'main'
+jobs:
+  Chrome:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Run on Staging 
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: client
+          browser: chrome
+          headless: true
+        env: 
+          NPM_CONFIG_PRODUCTION: false
+          CYPRESS_TEST_USER_EMAIL: {{ "${{ secrets.CYPRESS_TEST_USER_EMAIL }}" }}
+          CYPRESS_TEST_USER_PASS: {{ "${{ secrets.CYPRESS_TEST_USER_PASS }}" }}
+          CYPRESS_baseUrl: "https://{{ cookiecutter.project_slug }}-staging.herokuapp.com/"
+  Firefox:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Run on Staging 
+        uses: cypress-io/github-action@v2
+        with:
+          working-directory: client
+          browser: firefox
+          headless: true
+        env: 
+          NPM_CONFIG_PRODUCTION: false
+          CYPRESS_TEST_USER_EMAIL: {{ "${{ secrets.CYPRESS_TEST_USER_EMAIL }}" }}
+          CYPRESS_TEST_USER_PASS: {{ "${{ secrets.CYPRESS_TEST_USER_PASS }}" }}
+          CYPRESS_baseUrl: "https://{{ cookiecutter.project_slug }}-staging.herokuapp.com/"

{{cookiecutter.project_slug}}/.gitignore

@@ -1,4 +1,11 @@
 ### Python template
+
+# project specific
+node_modules/
+server/static/
+server/media-files/
+package-lock.json
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
@@ -25,6 +32,11 @@ wheels/
 .installed.cfg
 *.egg
 
+# Ignore Cypress environment variables & media
+client/cypress.env.json
+client/tests/e2e/screenshots/*
+client/tests/e2e/videos/*
+
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

{{cookiecutter.project_slug}}/README.md

@@ -8,7 +8,7 @@
 If this is your first time...
 1. [Install Docker](https://www.docker.com/)
 1. Run `pipenv lock` to generate a Pipfile.lock
-1. (Optional) Run `npm install` so you have node_modules available outside of Docker
+1. Run `npm install` so you have node_modules available outside of Docker
 1. `make build`
 1. View other available scripts/commands with `make commands`
 
@@ -23,7 +23,8 @@ See the [backend README](server/README.md)
 If not using Docker...
 See the [frontend README](client/README.md)
 
-
 ## Testing
 1. `pipenv install --dev`
-1. `pipenv run pytest server/{{cookiecutter.project_name}}`
+1. `pipenv run pytest server/{{cookiecutter.project_slug}}`
+
+1. `npm run cypress`

{{cookiecutter.project_slug}}/clients/vue3/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "cypress": "source ../.env && npx cypress open",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
@@ -37,6 +38,7 @@
     "@vue/test-utils": "^2.0.0-0",
     "babel-eslint": "^10.1.0",
     "chai": "^4.1.2",
+    "cypress": "^8.6.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",

{{cookiecutter.project_slug}}/clients/vue3/src/App.vue

@@ -6,7 +6,7 @@
       <span id="logout" @click="logout()">Logout</span>
     </template>
     <template v-else>
-      | <router-link to="/login">Login</router-link> |
+      | <router-link to="/login" data-cy="login">Login</router-link> |
       <router-link to="/signup">Signup</router-link>
     </template>
   </div>

{{cookiecutter.project_slug}}/clients/vue3/src/views/Login.vue

@@ -6,6 +6,7 @@
         :errors="form.email.errors"
         @blur="form.email.validate()"
         type="email"
+        data-cy="email"
         label="Email:"
         placeholder="Email"
       />
@@ -15,11 +16,12 @@
         :errors="form.password.errors"
         @blur="form.password.validate()"
         type="password"
+        data-cy="password"
         label="Password:"
         placeholder="Password"
       />
 
-      <button type="submit">Login</button>
+      <button data-cy="submit" type="submit">Login</button>
     </form>
   </div>
 </template>

{{cookiecutter.project_slug}}/clients/vue3/tests/e2e/specs/test_login.js

@@ -0,0 +1,14 @@
+describe('Tests login workflow', () => {
+  it('Home page has link to login', () => {
+    cy.visit('/')
+    cy.get('[data-cy=login]').click()
+    cy.url().should('include', '/login')
+  })
+
+  it('Filling in email and passwords goes to', () => {
+    cy.get('[data-cy=email]').type(Cypress.env('TEST_USER_EMAIL'))
+    cy.get('[data-cy=password]').type(Cypress.env('TEST_USER_PASS'))
+    cy.contains('[data-cy=submit]', 'Login').click()
+    cy.url().should('include', '/dashboard')
+  })
+})

{{cookiecutter.project_slug}}/package.json

@@ -12,7 +12,8 @@
     "npm": "6.*.*"
   },
   "cacheDirectories": [
-    "client/node_modules"
+    "client/node_modules",
+    ".cache/Cypress"
   ],
   "dependencies": {
   }

{{cookiecutter.project_slug}}/server/{{cookiecutter.project_slug}}/core/management/commands/create_test_data.py

@@ -1,5 +1,4 @@
-import os
-
+from decouple import config
 from django.contrib.auth import get_user_model
 from django.core.management.base import BaseCommand
 
@@ -8,8 +7,10 @@ class Command(BaseCommand):
     help = "Create test data to seed database in dev and staging environments"
 
     def handle(self, *args, **kwargs):
-
-        superuser_password = os.environ.get("DJANGO_SUPERUSER_PASSWORD")
+        superuser_password = config("DJANGO_SUPERUSER_PASSWORD")
+        cypress_email = config("CYPRESS_TEST_USER_EMAIL")
+        cypress_password = config("CYPRESS_TEST_USER_PASS")
         get_user_model().objects.create_superuser(
             email="admin@thinknimble.com", password=superuser_password, first_name="Admin", last_name="ThinkNimble"
         )
+        get_user_model().objects.create_user(email=cypress_email, password=cypress_password, first_name="Cypress", last_name="E2E_test")