Merge branch '37-fix-ci-e2e'

test(webapp): fix CI test E2E

Closes #37

See merge request team-raclette/project-softweng!22

.env.template

@@ -10,3 +10,4 @@ REST_USERNAME=
 REST_PASSWORD=
 REST_URL=
 REST_PAGE=
+CYPRESS_TEST_URL=

web-app/.gitlab-ci.yml

@@ -40,17 +40,14 @@ web-app-unit-tests:
 web-app-e2e-tests:
   image: $NODE_IMAGE
   stage: web-app-tests
-
-  # services:
-  #   - name: $DOCKER_IMAGE
-  #     alias: app
   script:
+    - export CYPRESS_TEST_URL=$TEST_URL
     - echo "Running e2e tests"
     - apt-get update
     - apt-get install curl
     - cd ./web-app
     - npm install --include=dev
     - echo "Wait web-app app is running"
-    - for i in {1..6}; do curl -f https://app.mse.kb28.ch/ && break || sleep 5; done
+    - for i in {1..6}; do curl -f $CYPRESS_TEST_URL && break || sleep 5; done
     - echo "App is running"
     - npm run test:e2e

web-app/README.md

@@ -65,7 +65,10 @@ npm run build
 
 <p align="center"> ![Class Diagram](docs/class-diagramm-web-app.svg)
 
-### Links
+## Tests
+Details in [web-app/test.md](web-app/test.md)
+
+# Links
 See [Configuration Reference](https://cli.vuejs.org/config/).\
 See [Vue.js](https://vuejs.org/guide/introduction.html).\
 See [chartjs](https://www.chartjs.org/docs/latest/).\

web-app/cypress/e2e/fetch_process.cy.ts

@@ -2,7 +2,7 @@
 
 describe("Test fetch measurments button in the main page", () => {
   beforeEach(() => {
-    cy.visit("https://app.mse.kb28.ch");
+    cy.visit(Cypress.env("TEST_URL"));
   });
 
   it("Fetch timeseries with valid user-room-device", () => {

web-app/test.md

@@ -25,6 +25,16 @@ cd ./web-app
 npm install --inlude=dev
 ```
 
+### Before Running Tests
+A test url is needed to perform the tests in local:
+```bash
+export CYPRESS_TEST_URL=http://your-test-url.com
+```
+Note: most of the time, if you are testing in local, you can use:
+```bash
+export CYPRESS_TEST_URL=http://localhost:8080/
+```
+
 ### Run unit Tests
 ```bash
 npm run test:unit
@@ -55,9 +65,6 @@ npx cypress open
   - Tests fetching timeseries data with a valid user-room-device selection, ensuring the main chart is displayed and no "no data" message appears.
   - Tests fetching timeseries data with an invalid user-room-device selection (e.g., changing the user to "Sylvan"), ensuring the main chart is not displayed and the "no data" message is shown.
 
-#### Important Notes
-The E2E tests use a web-app development image deployed on https://app.mse.kb28.ch/ for the moment. Because there is a problem with the service image in the CI. The environment variables cannot be set correctly to the job's service. An issue is opened to fix this problem: [#37].
-
 ### Unit Tests
 
 - **Serie Component**:
@@ -66,3 +73,9 @@ The E2E tests use a web-app development image deployed on https://app.mse.kb28.c
   - Ensures the label "Unknown" is returned for unknown types.
   - Verifies that temperature and humidity data are formatted correctly by `getSerie()`, including label, color, and data structure.
   - Ensures unknown types are handled appropriately in `getSerie()`, defaulting to the correct color and axis.
+
+## Test in CI
+
+All test are covered by the CI pipeline.
+The unit tests are run on every commit and doesn't require any specific resources.
+The E2E tests are run too on every commit, but they require a test URL to be set in the environment variable `CYPRESS_TEST_URL` which provide an access to a test instance of the web-app. Actually, these tests are running on the test development instance at `https://app-dev.mse.kb28.ch/`.