setup cypress test in gitlab job

Author: briancaffey

.gitlab-ci.yml

@@ -14,7 +14,7 @@ variables:
   AWSAccessKeyId: $AWS_ACCESS_KEY_ID
   AWSSecretAccessKey: $AWS_SECRET_ACCESS_KEY
 
-Build Documentation:
+.Build Documentation:
   image: node:latest
   stage: documentation
   script:
@@ -105,6 +105,25 @@ Build Documentation:
   after_script:
     - echo "Build backend complete"
 
+# gitlab-runner exec docker "e2e cypress tests without docker-compose"
+e2e cypress tests without docker-compose:
+  stage: integration
+  image: localhost:5000/backend:latest
+  services:
+    - postgres:latest
+    - redis:latest
+  before_script:
+    - /start_asgi.sh &
+    - sleep 10
+  script:
+    - $(npm bin)/cypress run
+    - exit 0
+  artifacts:
+    paths:
+      - cypress/videos/
+      - tests/screenshots/
+    expire_in: 7 days
+
 .e2e cypress tests with docker-compose:
   stage: integration
   image: docker:stable

backend/backend/urls.py

@@ -16,7 +16,7 @@
 from django.conf import settings
 from django.conf.urls.static import static
 from django.contrib import admin
-from django.urls import include, path
+from django.urls import include, path, re_path
 
 from core.views import index_view
 
@@ -32,4 +32,7 @@
     urlpatterns = urlpatterns + [
         path('', index_view, name='index'),
         path('admin/__debug__/', include(debug_toolbar.urls)),
+        # catch all rule so that we can navigate to
+        # routes in vue app other than "/"
+        re_path(r'^(?!js)(?!css)(?!statics)(?!fonts)(?!service\-worker\.js)(?!manifest\.json)(?!precache).*', index_view, name='index') # noqa
     ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

backend/scripts/prod/Dockerfile

@@ -28,14 +28,22 @@ ADD backend /code/
 
 # this stage is used for integration testing
 FROM production as gitlab-ci
-# cypress dependencies
-# RUN apt-get -qq update
-# RUN apt-get -qq install -y xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
-# add static files from build
+# update and install nodejs
 COPY --from=build-stage /app/dist/pwa/index.html /code/templates/
-# COPY --from=build-stage /app/dist/pwa /code/static
 COPY --from=build-stage /app/dist/pwa /static
-# index.html is listed here
-RUN ls /code/templates/ -al
-# also tried this, but still nothing in the templates directory when the container is started
-RUN cp /static/index.html /code/templates/index.html
+
+COPY cypress.json /code
+
+RUN mkdir /code/cypress
+COPY cypress/ /code/cypress/
+
+RUN apt-get -qq update && apt-get -y install nodejs npm
+RUN node -v
+
+# npm installs automatically
+RUN npm -v
+# cypress dependencies
+RUN apt-get -qq install -y xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+
+RUN npm install cypress
+

compose/test.yml

@@ -30,7 +30,6 @@ services:
       context: ../
       dockerfile: backend/scripts/prod/Dockerfile
     ports:
-      - "8000:8000"
       - "9000:9000"
     command: /start_asgi.sh
     volumes:
@@ -52,11 +51,6 @@ services:
       - GITHUB_SECRET=${GITHUB_SECRET}
       - GOOGLE_OAUTH2_KEY=${GOOGLE_OAUTH2_KEY}
       - GOOGLE_OAUTH2_SECRET=${GOOGLE_OAUTH2_SECRET}
-
-      # # for Quasar
-      # - HTTP_PROTOCOL=http
-      # - WS_PROTOCOL=ws
-      # - DOMAIN_NAME=${DOMAIN_NAME}
     depends_on:
       - postgres
       - redis

cypress.json

@@ -1,3 +1,3 @@
 {
-    "baseUrl": "http://0.0.0.0"
+    "baseUrl": "http://localhost:9000"
 }

cypress/integration/test_login.js

@@ -7,7 +7,7 @@ describe('Test Login', function() {
     cy.get("#password").clear();
     cy.get("#password").type("password");
     cy.get("#login-btn").click();
-    cy.wait(1000); // wait for 1 second
+    // cy.wait(1000); // wait for 1 second
     cy.getCookie('user-token').should('exist');
   });
 });