Merge branch 'main' into feat/visual-regression-testing

.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

.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:

.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'

.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:

.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

webclient/README.md

@@ -77,43 +77,41 @@ Each of those files are similar but differ in some aspects.
 If you serve the release build with a webserver (such as Nginx) you need to select the correct files based on the request URL and headers.
 
 ```plain
-<theme>-<lang>.html
-   ↑       ↑
-   │       └── The page language. Either "de" or "en" at the moment.
-   │           It should be selected based on the "lang" Cookie or else the "Accept-Language" header.
+<theme>.html
+   ↑
    └── The page theme. Either "light" or "dark" at the moment.
        It should be selected based on the "theme" Cookie ("light" by default).
 ```
 
 The language-selector is working in development and this differentialtion is only happening in the build.  
 For the theme we can not do so for some reason (If you know of a better way, hit us up).  
-To test a different theme, you can change `$theme` [here](./src/assets/variables.scss). Values are `light` and `dark`.
+To test a different theme, you can change `$theme` [here](./src/assets/variables.scss) and `theme='...'` [here](./index.html). Values are `light` and `dark`.
 
 ## Architecture
 
 The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/).  
-For state management we use [pinia](https://pinia.vuejs.org/) and our CSS framework is [Spectre.css](https://picturepan2.github.io/spectre/).
+For state management we use [pinia](https://pinia.vuejs.org/).
+Our CSS framework is currently being migrated from [Spectre.css](https://picturepan2.github.io/spectre/) to [Tailwind](https://tailwindcss.com/). (if you're interested in helping out, please contact us ^^)
 
 ### Directory structure (only the important parts)
 
 ```plain
 webclient
 ├── public/         # 🠔 Static assets such as icons, which cannot get inlined
 ├── src/
-│   ├── codegen/    # 🠔 code generated via openapi.yaml for typechecking reasons
+│   ├── api_types/  # 🠔 code generated via openapi.yaml for typechecking reasons
 │   ├── assets/     # 🠔 Static assets such as icons
 │   │   ├── md/                 # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
 │   │   ├── variables.scss      # 🠔 Include-script for Spectre.CSS
 │   │   ├── main.scss           # 🠔 Sass CSS code for all non-view parts
 │   │   ├── spectre-all.scss    # 🠔 Include-script for Spectre.CSS
 │   │   └── logos               # 🠔 The Logos used by the app
 │   ├── components/ # 🠔 Vue components, which are used in views.
-│   ├── views/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
-│   ├── router.ts   # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── pages/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── router.ts   # 🠔 The routes of our app. This is where the views are loaded.
 │   ├── App.vue     # 🠔 Main view
-│   └── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated Views/Components are loaded
+│   └── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated views/components are loaded
 ├── vite.config.ts  # 🠔 Build configuration
-├── gulpfile.js     # 🠔 Gulp configuration
 └── package.json    # 🠔 Node package definition and dependencies
 ```
 
@@ -130,24 +128,38 @@ The reason behind these tests is that they fundamentally increase the future pro
 
 There are a few ways of running cypress
 
-#### Running headless
+#### e2e tests
 
-For running headless, it is assumed, that you are on a normal machine (not a mac) and have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed.
+For running e2e tests, it is assumed, that you
+
+- are on a normal machine (not a mac)
+- have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed.
+- have the webclient running on `http://localhost:3000` (i.e. `npm run dev`)
+
+The interface for interacting with cypress can be opened via
+
+```bash
+pnpm run cy:open
+```
+
+##### Running headless
 
 ```bash
 pnpm run test
 ```
 
 There are also some subtargets preconfigured like `cy:run:chrome` and `cy:run:firefox`, but likely for debugging you want the second mode.
 
-#### Running headed
-
-The interface for interacting with cypress can be opened via
+#### component tests
 
 ```bash
-pnpm run cy:open
+pnpm run test:components
 ```
 
+Currently, these are not run in CI, as I could not get cypress to behave in [#892](https://github.com/TUM-Dev/NavigaTUM/pull/892)
+
+#### Running headed
+
 ### Writing Tests
 
 Our Cypress test suite is located in the cypress directory, organized into different files and folders based on the features and components being tested.

webclient/build.sh

@@ -7,8 +7,9 @@ rm -fr ../dist
 
 for THEME in light dark
 do
-  # make sure we are really only building the right theme and language
+  # make sure we are really only building the right theme
   sed -i "s/\$theme: .*/\$theme: \"${THEME}\";/" src/assets/variables.scss
+  sed -i 's/class="light"/class="${THEME}"/' index.html
 
   echo "Building ${THEME}"
   npm run build-only

webclient/cypress.config.ts

@@ -8,5 +8,10 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       initPlugin(on, config);
     },
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
   },
 });

webclient/cypress.d.ts

@@ -0,0 +1,8 @@
+import type { mount } from "cypress/vue";
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: mount;
+    }
+  }
+}

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 {};

webclient/cypress/e2e/frontpage.cy.ts

@@ -1,10 +1,10 @@
 describe("Check if navigating from the frontpage works as expected", () => {
-  it("navigating to the mi", () => {
+  it("navigating to the mri", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });
     cy.visit("http://localhost:3000/");
     cy.intercept("GET", "/api/get/mi?lang=de", { fixture: "get/mi.de.json" });
-    cy.contains("Informatik").click();
-    cy.url().should("include", "/building/mi");
+    cy.contains("MRI").click();
+    cy.url().should("to.match", /(site|campus|view)\/mri/);
   });
   it("navigating to an initally hidden entry", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });

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": [
               {