Initial integration testing configuration (#122)

.devcontainer.json

@@ -6,7 +6,7 @@
     "runServices": ["dev", "docs", "server"],
     "workspaceFolder": "/home/calitp/app",
     "postStartCommand": ["/bin/bash", "bin/init.sh"],
-    "postAttachCommand": ["/bin/bash", "bin/pre-commit.sh"],
+    "postAttachCommand": ["/bin/bash", "localhost/bin/init.sh"],
 
     // Set *default* container specific settings.json values on container create.
     "settings": {

docs/getting-started/testing.md

@@ -0,0 +1,44 @@
+# Automated tests
+
+## Integration
+
+End-to-end integration tests are implemented with [`cypress`](https://www.cypress.io/) and can be found in the
+[`tests/e2e`](https://github.com/cal-itp/benefits/tree/dev/tests/e2e) directory in the repository.
+
+See the [`cypress` Command Line](https://docs.cypress.io/guides/guides/command-line) guide for more information.
+
+### Using Docker Compose
+
+Run the tests with Docker Compose against the `client` service.
+
+1. Ensure your `.env` file has an updated `CYPRESS_baseUrl` variable:
+
+    ```env
+    # using the Docker Compose service address
+    CYPRESS_baseURL=http://client:8000
+    ```
+
+2. From within the `localhost` directory:
+
+    ```bash
+    docker compose run tests-e2e
+    ```
+
+### From the Dev Container
+
+`cypress` is installed and available to run directly in the devcontainer.
+
+1. Ensure your `.env` file has an updated `CYPRESS_baseUrl` variable:
+
+    ```env
+    # using localhost since we're inside the container
+    CYPRESS_baseURL=http://localhost:8000
+    ```
+
+2. Rebuild and Reopen the devcontainer
+3. Start the `benefits` app with `F5`
+4. From within the `tests/e2e` directory:
+
+    ```bash
+    npx cypress run
+    ```

localhost/.env.sample

@@ -19,3 +19,6 @@ DJANGO_DEBUG=true
 DJANGO_INIT_PATH=data/client.json
 DJANGO_LOG_LEVEL=DEBUG
 DJANGO_SECRET_KEY=secret
+
+# tests config
+CYPRESS_baseUrl=http://client:8000

localhost/Dockerfile.dev

@@ -6,6 +6,12 @@ RUN apt-get install -qq --no-install-recommends curl git jq ssh && \
     python -m pip install --upgrade pip && \
     pip install --no-cache-dir flake8 debugpy pre-commit
 
-COPY docs/requirements.txt docs/requirements.txt
+# install node.js
+# see https://github.com/nodesource/distributions#installation-instructions
+
+RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash
+RUN apt-get install -qq nodejs libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
+                        libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
 
+COPY docs/requirements.txt docs/requirements.txt
 RUN pip install --no-cache-dir -r docs/requirements.txt

bin/pre-commit.sh → localhost/bin/init.sh

@@ -6,3 +6,6 @@ pre-commit install --install-hooks --overwrite
 
 # manage commit-msg hooks
 pre-commit install --hook-type commit-msg
+
+# install cypress
+cd tests/e2e && npm install && npx cypress install

localhost/docker-compose.yml

@@ -26,6 +26,7 @@ services:
     image: benefits_client:dev
     environment:
       - ANALYTICS_KEY
+      - CYPRESS_baseUrl
       - DJANGO_ADMIN
       - DJANGO_ALLOWED_HOSTS
       - DJANGO_DB
@@ -91,5 +92,15 @@ services:
     volumes:
       - configvolume:/aws
 
+  tests-e2e:
+    image: cypress/included:8.5.0
+    depends_on:
+      - client
+    environment:
+      - CYPRESS_baseUrl
+    working_dir: /usr/src/e2e
+    volumes:
+      - ../tests/e2e:/usr/src/e2e
+
 volumes:
   configvolume:

tests/e2e/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+screenshots/
+videos/

tests/e2e/cypress.json

@@ -0,0 +1,4 @@
+{
+    "pluginsFile": false,
+    "supportFile": false
+}

tests/e2e/cypress/integration/index.spec.js

@@ -0,0 +1,25 @@
+describe("Index page spec", () => {
+    it("Gives user transit provider options", () => {
+        cy.visit("/")
+
+        cy.contains("Choose your transit provider")
+          .siblings(".btn")
+          .should('not.be.empty')
+          .each(($e) => {
+              expect($e).attr("href").to.match(/\/[a-z]{3,}$/)
+          })
+    })
+
+    it("Takes user to transit provider page", () => {
+        cy.visit("/")
+
+        cy.get(".buttons .btn")
+          .first()
+          .click()
+
+        cy.contains("Let’s do it!")
+          .then(($e) => {
+            expect($e).attr("href").to.match(/\/eligibility\/$/)
+          })
+    })
+})