feat:component webclient testing (#892)

* added compoinent testing * updated the test fixtures * added component testing for the footer * fixed a typing bug * formatting fixes * added a token based modal test * added component tests to the ci * fixed the package.json * removed `wait-on` * simplified actions/checkout to v4 * fixed the `working-directory` of the component test * another test of the component test * more tests * tested a different config * tested a different approach * test v5 * test v6 * test v7 * test v8 * tested different versions * tested only chrome * tested only firefox * Revert "tested only firefox" This reverts commit 7f7d3bb. * test * test * formatting * formatting
TUM-Dev · Nov 18, 2023 · 1c955a9 · 1c955a9
1 parent 4578540
commit 1c955a9
Show file tree

Hide file tree

Showing 35 changed files with 1,253 additions and 915 deletions.
diff --git a/.github/workflows/_docker-build.yml b/.github/workflows/_docker-build.yml
@@ -29,7 +29,7 @@ jobs:
     outputs:
       tags: ${{ steps.meta.outputs.tags }}
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - uses: actions/checkout@v4
       - run: cp openapi.yaml data/output
       - name: Log in to the Container registry
         uses: docker/login-action@v3

diff --git a/.github/workflows/data-cicd.yml b/.github/workflows/data-cicd.yml
@@ -15,7 +15,7 @@ jobs:
       matrix:
         python-version: ["3.10", "3.11"]
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - uses: actions/checkout@v4
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v4
         with:
@@ -30,7 +30,7 @@ jobs:
   #type-check:
   #  runs-on: ubuntu-latest
   #  steps:
-  #    - uses: actions/checkout@v3
+  #    - uses: actions/checkout@v4
   #- name: Set up Python ${{ matrix.python-version }}
   #      uses: actions/setup-python@v4
   #      with:

diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
@@ -12,7 +12,7 @@ jobs:
   linting:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           cache: 'npm'

diff --git a/.github/workflows/server-cicd.yml b/.github/workflows/server-cicd.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+        uses: actions/checkout@v4
       - name: Setup | Rust
         uses: actions-rust-lang/[email protected]
         with:
@@ -35,7 +35,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+        uses: actions/checkout@v4
       - name: Setup | Rust
         uses: actions-rust-lang/[email protected]
         with:

diff --git a/.github/workflows/webclient-cicd.yml b/.github/workflows/webclient-cicd.yml
@@ -9,18 +9,18 @@ on:
   workflow_dispatch:
 
 jobs:
-  webclient-ui-test:
+  webclient-e2e-test:
     strategy:
       matrix:
         browser:
           - chrome
           - firefox
     runs-on: ubuntu-latest
     container:
-      image: cypress/browsers:node16.16.0-chrome107-ff107
+      image: cypress/browsers:node-20.9.0-chrome-118.0.5993.88-1-ff-118.0.2-edge-118.0.2088.46-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
       - uses: pnpm/[email protected]
         with:
@@ -36,7 +36,7 @@ jobs:
   webclient-linting:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           cache: 'npm'
@@ -48,7 +48,7 @@ jobs:
     uses: ./.github/workflows/_docker-build.yml
     needs:
       - webclient-linting
-      - webclient-ui-test
+      - webclient-e2e-test
     with:
       image_suffix: webclient
       context: ./webclient

diff --git a/webclient/cypress.config.ts b/webclient/cypress.config.ts
@@ -1,5 +1,12 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  projectId: "u6fxcx",
   e2e: {},
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
 });
diff --git a/webclient/cypress.d.ts b/webclient/cypress.d.ts
@@ -0,0 +1,8 @@
+import type { mount } from "cypress/vue";
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: mount;
+    }
+  }
+}
diff --git a/webclient/cypress/e2e/feedback.cy.ts b/webclient/cypress/e2e/feedback.cy.ts
@@ -25,48 +25,10 @@ describe("Check if opening the feedback form works from every subview", () => {
 });
 
 function checkFeedbackForm(selector_which_should_open_the_modal: string) {
-  // mock the feedback api
-  cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
-  cy.intercept("POST", "/api/feedback/feedback", { statusCode: 201, fixture: "feedback/feedback.json" });
-  // open the modal
   cy.get('[data-cy="feedback-modal"]').should("not.exist");
+  cy.intercept("POST", "/api/feedback/get_token", { statusCode: 201, fixture: "feedback/get_token.json" });
   cy.get(selector_which_should_open_the_modal).click({ scrollBehavior: false });
-
-  // check that the modal is opened
   cy.get('[data-cy="feedback-modal"]').should("exist");
-  cy.get('[data-cy="feedback-error"]').should("be.empty");
-  cy.get("#feedback-privacy").should("not.be.checked");
-  cy.get("#feedback-delete").should("not.be.checked");
-
-  // make shure that the modal is empty
-  cy.get("#feedback-subject").clear();
-  cy.get("#feedback-body").clear();
-
-  // fill out the form, but don't accept the privacy policy
-  cy.get('[data-cy="feedback-send"]').click();
-  cy.get('[data-cy="feedback-error"]').contains("musst die Datenschutzerklärung akzeptiert haben");
-  cy.get("#feedback-privacy").parent().click();
-
-  // try to submit without filling out the form
-  cy.get('[data-cy="feedback-send"]').click();
-  cy.get('[data-cy="feedback-error"]').contains("Betreff fehlt");
-
-  // fill out the form partially
-  cy.get("#feedback-subject").type("A catchy title");
-  cy.get('[data-cy="feedback-send"]').click();
-  cy.get('[data-cy="feedback-error"]').contains("Nachricht fehlt");
-
-  // successful feedback
-  cy.get("#feedback-body").type("A clear description what happened where and how we should improve it");
-  cy.get('[data-cy="feedback-modal"] .modal-body').scrollTo("bottom");
-  cy.get('[data-cy="feedback-send"]').click();
-
-  // check that the next page is loaded correctly
-  cy.get('[data-cy="feedback-modal"]', { timeout: 10_000 }).should("not.exist"); // wait for the site to be interactive
-  cy.get('[data-cy="feedback-success-modal"]').should("exist");
-  cy.contains("Vielen Dank für dein Feedback!");
-  cy.contains("OK").click();
-  cy.get('[data-cy="feedback-success-modal"]').should("not.exist");
 }
 
 export {};
diff --git a/webclient/cypress/fixtures/get/5502.U1.234M.de.json b/webclient/cypress/fixtures/get/5502.U1.234M.de.json
@@ -12,7 +12,7 @@
       "available": [
         {
           "coordinates": [
-            [11.667617801785777, 48.26719015728],
+            [11.667617801785775, 48.26719015728],
             [11.67160725799323, 48.26672188711042],
             [11.670921198214224, 48.264131842720005],
             [11.66693174200677, 48.26460011288958]
@@ -77,10 +77,10 @@
       "mvg": [
         [
           {
-            "distance": 151.78735095918518,
-            "lat": 48.264861448458,
-            "lon": 11.6712265832549,
-            "name": "Garch.,Forschungsz.",
+            "distance": 151.68967369397032,
+            "lat": 48.2648576635194,
+            "lon": 11.6712180818262,
+            "name": "Garching, Forschungszentrum",
             "station_id": "de:09184:460",
             "sub_stations": [
               {
@@ -98,10 +98,10 @@
             ]
           },
           {
-            "distance": 371.9601320484891,
-            "lat": 48.26754040849,
-            "lon": 11.6655043148943,
-            "name": "Garching, Lichtenbergstra\u00dfe",
+            "distance": 372.836588151467,
+            "lat": 48.2675391261317,
+            "lon": 11.6654896055231,
+            "name": "Technische Universit\u00e4t",
             "station_id": "de:09184:2070",
             "sub_stations": [
               {
@@ -113,10 +113,10 @@
             ]
           },
           {
-            "distance": 536.2865825745195,
-            "lat": 48.2611537274888,
-            "lon": 11.6684777384851,
-            "name": "Garching, Boltzmannstra\u00dfe",
+            "distance": 536.4514806807185,
+            "lat": 48.261153584156,
+            "lon": 11.6684673014264,
+            "name": "Boltzmannstra\u00dfe",
             "station_id": "de:09184:2073",
             "sub_stations": [
               {
@@ -128,10 +128,10 @@
             ]
           },
           {
-            "distance": 734.139257166537,
-            "lat": 48.2619251948158,
-            "lon": 11.6619380032158,
-            "name": "Garching, Ludwig-Prandtl-Str.",
+            "distance": 734.5577320501662,
+            "lat": 48.2619259866443,
+            "lon": 11.6619300467174,
+            "name": "Ludwig-Prandtl-Stra\u00dfe",
             "station_id": "de:09184:2071",
             "sub_stations": [
               {