Pipeline/e2e (#453)

* Fix and upgrade cypress integration tests * Remove unneeded code and packages * Remove unused ports from docker-compose.yml * Rename task and set where to run * Fix naming of job * Update workflow action dependencies * Add individual names to steps * Add webpacker as dev dependency * Replace entrypoint and remove unneeded packags in package.json * explicit network managment * fixing test env * Increase Time settings * Fix local setup. --------- Co-authored-by: Splines <[email protected]>
MaMpf-HD · Apr 17, 2023 · e7f7829 · e7f7829
1 parent 7d05005
commit e7f7829
Show file tree

Hide file tree

Showing 25 changed files with 104 additions and 3,595 deletions.
diff --git a/.github/workflows/test-integration.yml b/.github/workflows/test-integration.yml
@@ -1,26 +1,41 @@
-name: test-integration
-on: [push]
+name: Integration tests
+on:
+  push:
+    branches:
+      - main
+      - mampf-next
+      - production
+      - experimental
+  pull_request:
 jobs:
-  build:
+  e2e-test-job:
+    name: Run E2E tests & upload results to Cypress
     runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v3
         with:
           submodules: recursive
-      - run: docker-compose pull
+
+      - name: Pull docker images
+        run: docker compose pull --ignore-buildable
         working-directory: docker/run_cypress_tests
-      - uses: satackey/[email protected]
-        # Ignore the failure of a step and avoid terminating the job.
+
+      - name: Use Docker layer caching # https://github.com/jpribyl/action-docker-layer-caching
+        uses: jpribyl/[email protected]
         continue-on-error: true
-      - run: docker-compose build
+
+      - name: Build docker containers
+        run: docker compose build
         working-directory: docker/run_cypress_tests
-      - name: Test
+
+      - name: Run integration tests
         working-directory: docker/run_cypress_tests
         env:
           # pass the Dashboard record key as an environment variable
+          CYPRESS_baseUrl: http://mampf:3000
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           # pass GitHub token to allow accurately detecting a build vs a re-run build
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: docker-compose run -e GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} cypress_runner cypress run --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
+        run: docker compose run -e GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} --entrypoint="" cypress_runner sh -c "while ! curl  http://mampf:3000 ; do echo waiting for MaMpf to come online at http://mampf:3000; sleep 3; done; cypress run --record --key ${{ secrets.CYPRESS_RECORD_KEY }}"
diff --git a/TESTING.md b/TESTING.md
@@ -12,7 +12,7 @@
 
 ## Writing own tests
 
-The describing test files can be found/ must be placed in `spec/cypress/integration/*.js`.
+The describing test files can be found/ must be placed in `spec/cypress/e2e/*.cy.js`.
 You can call arbitrary functions/files in mampf by calling `cy.app("clean")` for example located in `spec/cypress/app_commands`.
 Furthermore, you can setup special scenarios by providing a file in `spec/cypress/app_commands/scenarios/`,
 that can be called by `cy.appScenario("setup")` for example. Always try to 

diff --git a/docker/run_cypress_tests/Dockerfile b/docker/run_cypress_tests/Dockerfile
@@ -30,5 +30,8 @@ RUN bundle install
 COPY --from=build-pdfcomprezzor /go/src/pdfcomprezzor.wasm /go/src/wasm_exec.js /usr/src/app/public/pdfcomprezzor/
 COPY --from=build-pdfcomprezzor /go/src/pdfcomprezzor.wasm /go/src/wasm_exec.js /
 
+COPY Gemfile Gemfile.lock package.json yarn.lock /usr/src/app/
+RUN bundle install && \
+    yarn  install --production=false
 COPY  ./ /usr/src/app/
 RUN RAILS_ENV=test TEST_DATABASE_ADAPTER=postgresql rake assets:precompile
diff --git a/docker/run_cypress_tests/Dockerfile_cypress b/docker/run_cypress_tests/Dockerfile_cypress
@@ -1,5 +1,5 @@
-FROM cypress/included:7.6.0
+FROM cypress/included:12.9.0
 
 COPY ./spec/cypress/support /cypress/support
 # install the needed support stuff
-RUN cd /cypress/support && yarn install
+RUN apt-get update && apt-get install curl -y
diff --git a/docker/run_cypress_tests/docker-compose.local.yml b/docker/run_cypress_tests/docker-compose.local.yml
@@ -39,7 +39,7 @@ services:
     entrypoint: ./entrypoint.sh
     environment:
       RAILS_ENV: test
-      TEST_DATABASE_ADAPTER: postgresql:13
+      TEST_DATABASE_ADAPTER: postgresql
       TEST_DATABASE_DATABASE: mampf
       TEST_DATABASE_INTERACTIONS: interactions
       TEST_DATABASE_USERNAME: mampf
@@ -72,17 +72,17 @@ services:
       - mailcatcher
 
   cypress_runner:
-    image: mampf-cypress:6.5.0
+    image: mampf-cypress
     build:
       context: ./../..
       dockerfile: docker/run_cypress_tests/Dockerfile_cypress
     environment:
       CYPRESS_baseUrl: http://mampf:3000
     entrypoint: bash -c "while ! curl -s $$CYPRESS_baseUrl > /dev/null; do echo waiting for MaMpf to come online at $$CYPRESS_baseUrl; sleep 1; done; npx cypress run $$@"
     volumes:
-      - ../../spec/cypress/integration:/cypress/integration:ro
+      - ../../spec/cypress/e2e:/cypress/e2e:ro
       - ../../spec/cypress/fixtures:/cypress/fixtures:ro
-      - ../../spec/cypress.json:/cypress.json:ro
+      - ../../spec/cypress.config.js:/cypress.config.js:ro
       - ../../.git:/.git:ro
       # cypress outputs are saved here (needed only locally)
       - ../../cypress/videos:/cypress/videos

diff --git a/docker/run_cypress_tests/docker-compose.yml b/docker/run_cypress_tests/docker-compose.yml
@@ -1,45 +1,49 @@
 ---
 version: "3.4"
+networks:
+  frontend:
+  backend:
 services:
   redis:
     image: "redis:6.2.6-alpine"
+    networks:
+      - backend
 
   solr:
     image: "solr:8.11.1"
-    ports:
-      - "127.0.0.1:8983:8983"
     volumes:
       - type: bind
         source: ../../solr/development/conf/
         target: /solrconfig/
         read_only: true
     command: ["solr-precreate", "test", "/solrconfig"]
+    networks:
+      - backend
 
   db:
     image: postgres
     environment:
       - POSTGRES_USER=mampf
       - POSTGRES_HOST_AUTH_METHOD=trust
+    networks:
+      - backend
 
   mailcatcher:
     restart: on-failure:10
     image: dockage/mailcatcher:latest
-    ports:
-      - "127.0.0.1:1080:1080"
-
+    networks:
+      - backend
   mampf:
     build:
       context: ./../..
       dockerfile: docker/run_cypress_tests/Dockerfile
     image: mampf:tests
-    ports:
-      - "127.0.0.1:3000:3000"
     # TODO: Use this
     # entrypoint: /usr/src/app/docker/run_cypress_tests/run_tests.sh
     entrypoint: /usr/src/app/entrypoint.sh
     environment:
       RAILS_ENV: test
-      TEST_DATABASE_ADAPTER: postgresql:13
+      TEST_DATABASE_ADAPTER: postgresql
       TEST_DATABASE_DATABASE: mampf
       TEST_DATABASE_INTERACTIONS: interactions
       TEST_DATABASE_USERNAME: mampf
@@ -57,6 +61,8 @@ services:
       PROJECT_NOTIFICATION_EMAIL: project+notification@localhost
       MEDIA_FOLDER: mampf
       REDIS_URL: redis://redis:6379/1
+      SOLR_HOST: solr
+      SOLR_PORT: 8983
       SOLR_PATH: /solr/test
       SPROCKETS_CACHE: /cache
     volumes:
@@ -68,22 +74,26 @@ services:
       - solr
       - redis
       - mailcatcher
+    networks:
+      - backend
+      - frontend
 
   cypress_runner:
-    image: mampf-cypress:6.5.0
+    image: mampf-cypress
     build:
       context: ./../..
       dockerfile: docker/run_cypress_tests/Dockerfile_cypress
     environment:
       CYPRESS_baseUrl: http://mampf:3000
-    entrypoint: bash -c "while ! curl -s $$CYPRESS_baseUrl > /dev/null; do echo waiting for MaMpf to come online at $$CYPRESS_baseUrl; sleep 1; done; npx cypress run $$@"
     volumes:
-      - ../../spec/cypress/integration:/cypress/integration:ro
+      - ../../spec/cypress/e2e:/cypress/e2e:ro
       - ../../spec/cypress/fixtures:/cypress/fixtures:ro
-      - ../../spec/cypress.json:/cypress.json:ro
+      - ../../spec/cypress.config.js:/cypress.config.js:ro
       - ../../.git:/.git:ro
       # cypress outputs are saved here (needed only locally)
       #- ../../cypress/videos:/cypress/videos
       #- ../../cypress/screenshots:/cypress/screenshots
     depends_on:
       - mampf
+    networks:
+      - frontend
diff --git a/package.json b/package.json
@@ -20,8 +20,5 @@
   },
   "scripts": {
     "lint": "eslint ."
-  },
-  "devDependencies": {
-    "cypress": "9.5.1"
   }
-}
+}
diff --git a/spec/cypress.config.js b/spec/cypress.config.js
@@ -0,0 +1,13 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e:{
+    "baseUrl": "http://localhost:3000",
+    "defaultCommandTimeout": 10000,
+    "projectId": "v45wg9",
+    "retries": {
+      "runMode": 2,
+      "openMode": 0
+    }
+  }
+})
diff --git a/spec/cypress.json b/spec/cypress.json
diff --git a/spec/cypress/integration/admin_spec.js → spec/cypress/e2e/admin_spec.cy.js b/spec/cypress/integration/admin_spec.js → spec/cypress/e2e/admin_spec.cy.js
@@ -21,8 +21,8 @@ describe("Authentication", function () {
             cy.get('input[type="submit"]').click();
             cy.visit(`/administration/profile`);
             cy.contains("Profile Image").should("exist");
-            const yourFixturePath = 'files/image.png';
-            cy.get('#upload-image').attachFile(yourFixturePath);
+            const yourFixturePath = 'cypress/fixtures/files/image.png';
+            cy.get('#upload-image').selectFile(yourFixturePath,{force:true});
             cy.wait(100);
             cy.contains("Upload").click();
             cy.wait(100);

diff --git a/spec/cypress/integration/courses_spec.js → spec/cypress/e2e/courses_spec.cy.js b/spec/cypress/integration/courses_spec.js → spec/cypress/e2e/courses_spec.cy.js
@@ -55,8 +55,8 @@ describe("Courses", function () {
                 cy.visit(`/courses/${records[0].id}/edit`);
                 cy.contains("Bild").should("exist");
                 cy.get("#image_heading").contains("Ein-/Ausklappen").click();
-                const yourFixturePath = 'files/image.png';
-                cy.get('#upload-image').attachFile(yourFixturePath);
+                const yourFixturePath = 'cypress/fixtures/files/image.png';
+                cy.get('#upload-image').selectFile(yourFixturePath,{force: true});
                 cy.contains("Upload").click();
                 cy.wait(100);
                 cy.contains("Speichern").click();
@@ -74,17 +74,11 @@ describe("Courses", function () {
                     'user_id':1
                 }]
             ]).then((records) => {
-                cy.server();
-                cy.route('**/new').as('new');
-                //cy.route('POST', '/lectures').as('courses');
                 cy.visit('/administration');
                 cy.get('a[title="Veranstaltung anlegen"]').click();
-
-                //cy.wait('@new');
 
                 cy.get("#lecture_course_id-ts-control").type(records[0].title).type("{enter}");
                 cy.get("div#new-lecture-area").contains("Speichern").click();
-                //cy.wait('@courses');
                 cy.contains(records[0].title).should("exist");
                 cy.contains(`${records[1].season} ${records[1].year}`).should("exist");
             });
@@ -127,8 +121,8 @@ describe("Courses", function () {
                 ['create_list', 'lecture', 6, 'released_for_all']
             ]).then((records) => {
                 cy.visit("/main/start");
-                cy.contains("Veranstaltungssuche").click();
                 //cy.get('input[name="search[fulltext]"]').type(records[0][0].title)
+                cy.contains("Veranstaltungssuche").click();
                 cy.contains("Suche").click();
                 cy.get('[title="abonnieren"]').first().click();
                 cy.get('[title="abbestellen"]').should("exist");

diff --git a/spec/cypress/integration/media_spec.js → spec/cypress/e2e/media_spec.cy.js b/spec/cypress/integration/media_spec.js → spec/cypress/e2e/media_spec.cy.js
@@ -129,6 +129,7 @@ describe("Media", () => {
                 cy.visit(`lectures/${lectures[0].id}/edit`);
                 cy.contains("Medium anlegen").should("exist");
                 cy.contains("Medium anlegen").click();
+                cy.wait(1000);
                 cy.get('input[name="medium[description]"]').type("Media 1");
                 cy.wait(100);
                 cy.get('select[name="medium[sort]"]').select("Übung");

diff --git a/spec/cypress/integration/search_spec.js → spec/cypress/e2e/search_spec.cy.js b/spec/cypress/integration/search_spec.js → spec/cypress/e2e/search_spec.cy.js
diff --git a/spec/cypress/integration/simple_spec.js → spec/cypress/e2e/simple_spec.cy.js b/spec/cypress/integration/simple_spec.js → spec/cypress/e2e/simple_spec.cy.js
diff --git a/spec/cypress/integration/submissions_spec.js → spec/cypress/e2e/submissions_spec.cy.js b/spec/cypress/integration/submissions_spec.js → spec/cypress/e2e/submissions_spec.cy.js
@@ -89,8 +89,8 @@ describe("Submissions", () => {
             ]).then((assignments) => {
                 cy.visit(`lectures/${assignments[0].lecture_id}/submissions`);
                 cy.contains("Anlegen").click();
-                const yourFixturePath = 'files/manuscript.pdf';
-                cy.get('#upload-userManuscript').attachFile(yourFixturePath);
+                const yourFixturePath = 'cypress/fixtures/files/manuscript.pdf';
+                cy.get('#upload-userManuscript').selectFile(yourFixturePath,{force: true});
                 cy.get('input[type="checkbox"]').check();
                 cy.contains("Hochladen").click();
                 cy.get(".submissionFooter").contains("Speichern").click();
@@ -113,10 +113,8 @@ describe("Submissions", () => {
             ]).then((assignments) => {
                 cy.visit(`lectures/${assignments[0].lecture_id}/submissions`);
                 cy.contains("Anlegen").click();
-                const yourFixturePath = 'files/manuscript.pdf';
-                cy.get('#upload-userManuscript').attachFile(yourFixturePath);
-                cy.get('#upload-userManuscript').attachFile(yourFixturePath);
-                cy.get('#upload-userManuscript').attachFile(yourFixturePath);
+                const yourFixturePath = 'cypress/fixtures/files/manuscript.pdf';
+                cy.get('#upload-userManuscript').selectFile([yourFixturePath,yourFixturePath,yourFixturePath],{force: true});
                 cy.get('#userManuscript-merge-btn').should("exist");
                 cy.get('#userManuscript-merge-btn').click();
                 cy.get('#multiple-files-selected').should("have.attr", "style", "display: none;");

diff --git a/spec/cypress/integration/testing_spec.js → spec/cypress/e2e/testing_spec.cy.js b/spec/cypress/integration/testing_spec.js → spec/cypress/e2e/testing_spec.cy.js
diff --git a/spec/cypress/integration/thredded_spec.js → spec/cypress/e2e/thredded_spec.cy.js b/spec/cypress/integration/thredded_spec.js → spec/cypress/e2e/thredded_spec.cy.js
diff --git a/spec/cypress/integration/tutorials_spec.js → spec/cypress/e2e/tutorials_spec.cy.js b/spec/cypress/integration/tutorials_spec.js → spec/cypress/e2e/tutorials_spec.cy.js
@@ -142,9 +142,9 @@ describe("Tutorials", () => {
                 cy.contains("Akzeptieren").click();
                 cy.reload();
                 cy.get(".correction-column").contains("Hochladen").click();
-                const yourFixturePath = 'files/manuscript.pdf';
+                const yourFixturePath = 'cypress/fixtures/files/manuscript.pdf';
                 cy.get(".correction-column").contains("Datei").click();
-                cy.get(`#upload-correction-${lectures[5].id}`).attachFile(yourFixturePath);
+                cy.get(`#upload-correction-${lectures[5].id}`).selectFile(yourFixturePath,{force:true});
                 cy.contains("Upload").click();
                 cy.get('.correction-upload > .mt-2 > .col-12 > .btn-primary').contains("Speichern").click();
                 cy.reload();
@@ -256,8 +256,8 @@ describe("Tutorials", () => {
                 cy.contains("Akzeptieren").click();
                 cy.reload();
                 cy.get(".correction-column").contains("Hochladen").click();
-                const yourFixturePath = 'files/manuscript.pdf';
-                cy.get(`#upload-correction-${lectures[6].id}`).attachFile(yourFixturePath);
+                const yourFixturePath = 'cypress/fixtures/files/manuscript.pdf';
+                cy.get(`#upload-correction-${lectures[6].id}`).selectFile(yourFixturePath,{force:true});
                 cy.contains("Upload").click();
                 cy.get('.correction-upload > .mt-2 > .col-12 > .btn-primary').contains("Speichern").click();
                 cy.reload();

diff --git a/spec/cypress/integration/watchlists_spec.js → spec/cypress/e2e/watchlists_spec.cy.js b/spec/cypress/integration/watchlists_spec.js → spec/cypress/e2e/watchlists_spec.cy.js
diff --git a/spec/cypress/support/commands.js b/spec/cypress/support/commands.js
@@ -23,4 +23,3 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-import 'cypress-file-upload';
diff --git a/spec/cypress/support/e2e.js b/spec/cypress/support/e2e.js
@@ -0,0 +1,2 @@
+import './commands'
+import './on-rails'