Softwarequalität - Abgabe

.devcontainer/docker-compose.yml

@@ -33,4 +33,4 @@ services:
     # (Adding the "ports" property to this file will not forward from a Codespace.)
 
 volumes:
-  mongodb-data:
+  mongodb-data:

.github/workflows/workflow.yml

@@ -0,0 +1,126 @@
+name: Build
+
+on:
+  push:
+    branches: [ "main", "develop", "peters" ]
+  pull_request:
+    branches: [ "main", "develop" ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        working-directory: ./backend
+        run: npm install
+
+      - name: Run Jest tests
+        working-directory: ./backend
+        run: npm run test -- --coverage
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: jest-code-coverage
+          path: backend/coverage
+          overwrite: true
+          retention-days: 7
+    services:
+      mongodb:
+        image: mongo:latest
+        ports:
+          - 27017:27017
+
+  cypress:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        working-directory: ./backend
+        run: npm install
+
+      - name: Run app
+        working-directory: ./backend
+        run: | 
+          npm run start > nodemon.log &
+          while ! nc -z localhost 3000; do 
+            sleep 1 
+          done
+
+      - name: Test
+        working-directory: ./backend
+        run: npx cypress run --headless
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: nodemon logs
+          path: backend/nodemon.log
+          overwrite: true
+          retention-days: 7
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Cypress screenshots
+          path: backend/cypress/screenshots
+          overwrite: true
+          retention-days: 7
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Cypress videos
+          path: backend/cypress/videos
+          overwrite: true
+          retention-days: 7
+
+      - name: check for crash
+        run: |
+          if grep -q "crash" backend/nodemon.log; then
+            echo "Crash detected. See nodemon.log"
+            exit 1
+          else
+            echo "No crash detected"
+          fi
+    services:
+      mongodb:
+        image: mongo:latest
+        ports:
+          - 27017:27017
+
+  sonarqube:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Analyze with SonarQube
+        uses: sonarsource/sonarqube-scan-action@v4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on SonarQube, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
+          SONAR_HOST_URL: ${{ vars.SONAR_HOST_URL }}
+        with:
+          args:
+            -Dsonar.verbose=false
+    services:
+      mongodb:
+        image: mongo:latest
+        ports:
+          - 27017:27017
+

.gitignore

@@ -129,4 +129,10 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-sonar-scanner-5.0.1.3006-linux/**/*
+sonar-scanner-5.0.1.3006-linux/**/*
+
+.idea
+backend/cypress/screenshots
+backend/cypress/videos
+nodemon.log
+coverage/

BERICHT.md

@@ -0,0 +1,57 @@
+# Projektbericht für die Todo Anwendung
+Diese Datei enthält den Projektbericht für die Todo Anwendung. Der Bericht wird im Rahmen des Moduls `Softwarequalität` an der [Fachhoschule Südwestfalen](www.fh-swf.de) erstellt.
+
+## Gruppenmitglieder
+* Christian Peters
+* Kevin Hillebrand
+* Tim Tomczek
+
+## Vorgehensweise
+Zuerst wurde eine Build-Pipeline mit GitHub-Actions erstellt, in der die Anwendung gebaut und mit Cypress, für End-to-End (E2E) Tests, und Jest, für Unit-Tests, getestet wird. Anschließend wurden die Funktionen der Anwendung untersucht und mit E2E Tests abgedeckt. Für die Unit-Tests wurde geprüft ob für jede Funktion ein Test vorhanden ist. Die Überprüfung der Vollständigkeit der Tests erfolgte durch die Analyse der Code-Coverage durch Jest. Durch weitere Tests wurde die Abdeckung erhöht. Danach fand die Analyse der SonarQube Ergebnisse statt. Nach der Testphase wurden die gefundenen Bugs dokumentiert und Lösungen für diese erarbeitet. Abschließend gab es einen Vergleich der Ergebnisse nach den Korrekturen mit den Ergebnissen vor den Korrekturen.
+
+
+## Lösungen
+Für die Unit-Tests wird das Test-Framework Jest verwendet. Für die End-to-End Tests wird das Test-Framework Cypress verwendet. Dieses wurde in den devDependencies des Backend-Servers hinzugefügt, da dieser Server die gesamte Anwendung bereitstellt.
+
+## Probleme
+### Unit-Tests benötigen eine Datenbank (TODO)
+    Die Unit-Tests benötigen eine Datenbank, um die Funktionalität zu testen. Dadurch handelt es sich nicht mehr um Unit-Tests sondern um Integrationstests. Für Unit-Tests sollten die index.js und die DB-Klass einzeln getestet werden und es sollte kein externes System benötigt werden. Uns ist es nicht gelungen einen die Datenbank zu mocken, sodass die Tests ohne eine echte Datenbank laufen. Die Tests sind daher als Integrationstests zu betrachten.
+
+### Anwendung stürzt ab, wenn ein Todo gelöscht wird
+    Wenn ein Todo gelöscht wird, stürzt die Anwendung ab. Dies sorgt dafür, dass die nachfolgenden E2E-Tests nicht mehr ausgeführt werden können. Dieses Problem wurde dadurch behoben, dass die Anwendung bei einem Absturz automatisch durch nodemon neugestartet wird. Dazu werden Events von nodemon verwendet. Dadurch können die einzelnen Tests noch ausgeführt werden. Um einen Absturz der Anwendung zu bemerken, wird die Ausgabe des npm run start Befehls in einer Log-Datei gesichert und in der CI/CD-Pipeline auch archiviert. In der Pipeline wird diese Datei zusätzlich noch nach Hinweisen auf einen Absturz durchsucht. Wird dort ein Absturz gefunden, wird der Job als fehlgeschlagen markiert.
+
+### Keycloak ist nicht erreichbar
+    Der Keycloak-Server ist nicht erreichbar. Als Lösung wird die Authentifizierung nur simuliert, in dem nur das vorhandensein eine Authorization Headers geprüft wird. Der Header wurde den Requests in der todo.js hinzugefügt.
+
+## Ergebnisse der QS
+### Jest Analyse
+Durch die Jest-Tests sind einige Fehler bei der Behandlung von Fehlern aufgefallen, die nun behoben werden müssen. Durch diese Fehler ist es ohne Änderungen an der Anwendung nicht möglich eine 100%-ige Code-Abdeckung zu erreichen.
+
+Die aktuelle Code-Abdeckung ist im nachfolgenden Screenshot zu sehen:
+![Code-Abdeckung](./images/jest-code-coverage-before-fixes.png)
+
+### Cypress Analyse
+Durch die End-to-End-Tests sind einige Fehler bei der Behandlung der Id der Todos und dem Umgang mit Fehlern der API Aufrufen aufgefallen. 
+
+### Gefundene Bugs
+| Verhalten                                                                         | Erwartetes Verhalten                                                                                                                       |
+|-----------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| Das Löschen eines Todo lässt die Anwendung abstürzen                              | Das Löschen eines Todos sollte das Todo aus der Liste und der Datenbank entfernen                                                          |
+| Das Ändern des Namens eines Todos hängt den neuen Namen an den alten an           | Der Name des Todos sollte überschrieben werden                                                                                             |
+| Die Anwendung verügt über keine Authentifizierung                                 | Bei dem Aufruf der Seite wird eine Anmeldemaske angezeigt. Aufrufe der Enpunkte ohne gültiges Token werden mit dem Status 401 beantwortet  |
+| Die Anwendung verfügt über keine Validierung ob ein gültiges Todo übergeben wurde | Ein Todo mit einem Namen der weniger als 3 Zeichen lang ist, wird abgelehnt                                                                |
+| Todos bekommen eine Id bestehend aus dem aktuellen Datum, wenn keine Id vorhanden ist, somit landen ungültige Ids in der Datenbank | Die Ids sollten leer an den Server übergeben werden, damit dieser ein neues Todo erstellt und nicht verucht ein bestehendens zu bearbeiten |
+| Der Client versucht die Id als Number zu parsen, die führt zu Fehlern, da die Ids hexadezimal sind | Die Ids sollen als String behandelt werden                                                                                                 |
+
+### SonarQube Analyse
+Die SonarQube Analyse zeigt zwei mittlere Reliability Probleme einmal ein fehlendes lang-Attribut in der todo.html und die Verwendung eines let statt eines const in der index.js. Beide Probleme können ohne großen Aufwand behoben werden.
+Außerdem gibt es 44 Maintainability Probleme. Davon einer mit einer hohen Stufe und 43 mit einer niedrigen Stufe. Das Problem mit der hohen Stufe kann auch wieder durch die Verwendung von const anstatt let behoben werden. Bei den Problemen mit niedriger Stufe sind viele falsche Probleme. Da hier die Wörter Todo als noch zu erledigende Aufgabe markiert werden. Außerdem wird dabei auf ungenutzte Imports aufmerksam gemacht. Dadurch ist aufgefallen das die definierte Validierung der Todos nicht genutzt wird.
+Bei den doppelten Codezeilen scheint es sich um Vergleiche mit anderen Repos zu handeln, die das gleiche Projekt geforkt haben, daher wird dieser Punkt ignoriert.
+Außerdem gibt es ein Security Hotspot in einer Testdatei, da dort ein Passwort im Klartext gespeichert ist.
+
+## Vergleich der Ergebnisse
+Nach dem alle Fehler behoben wurde, die zu Testfehlern führten, wurde die Code-Abdeckung durch Jest erneut analysiert. Die Abdeckung beträgt nun über 85% in der schlechtesten Kategorie (Branches). Die Ergebnisse sind im nachfolgenden Screenshot zu sehen:
+![Code-Abdeckung](./images/jest-code-coverage-after-fixes.png)
+
+Dies ist eine Steigerung von 10% im Vergleich zu den vorherigen Ergebnissen.
+Die von SonarQube gefundenen Probleme wurden ebenfalls behoben. Es gibt nun keine Reliability Probleme mehr und die Maintainability Probleme wurden auf 0 reduziert. Ein Security Hotspot wurde ebenfalls behoben. Ein zweiter wurde als falsch positiv markiert, da es sich um ein Testpasswort handelt.

README.md

@@ -1,3 +1,16 @@
 # ToDo-Anwendung
 
-Diese Anwendung dient als Beispiel für das [Modul Softwarequalität](https://elearning.fh-swf.de/course/view.php?id=19693).
+Diese Anwendung dient als Beispiel für das [Modul Softwarequalität](https://elearning.fh-swf.de/course/view.php?id=19693).
+
+[![Build](https://github.com/Ranea-D/todo/actions/workflows/workflow.yml/badge.svg?branch=peters)](https://github.com/Ranea-D/todo/actions/workflows/workflow.yml)
+
+## Links
+* [Aufgabe](https://github.com/fhswf/softwarequalitaet/tree/main/Exercises/CI_ToDo)
+* [SonarQube](https://hopper.fh-swf.de/sonarqube/dashboard?id=peters_todo)
+* [GitHub Actions](https://github.com/Ranea-D/todo/actions)
+* [GitHub](https://github.com/Ranea-D/todo)
+
+
+## Todos
+* Validierung der Post und PUT Requests mit todoValidationRules
+* 

README_Aufgabe2.md

@@ -0,0 +1,8 @@
+# Teammitglieder
+* Kevin Hillebrand
+* Christian Peters
+* Tim Tomczek
+
+
+# Vorgehen
+Die Aufgabe wurde gemeinsam in einem Sprachchat bearbeitet. Dabei wurden die Aufgaben in technische Themen (GitHub Actions, SonarQube, Einrichtung Cypress), End-To-End-Tests und Unit-Tests unterteilt. Jedes Teammitglied hat sich um ein Thema gekümmert. Die Aufgaben wurden dann lokal gesammelt und gepusht.

backend/cypress.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+const PORT = process.env.PORT || 3000;
+
+export default defineConfig({
+    e2e: {
+        baseUrl: `http://localhost:${PORT}`,
+        screenshotOnRunFailure: true,
+        screenshotsFolder: 'cypress/screenshots',
+        videosFolder: 'cypress/videos',
+        video: true
+    },
+})

backend/cypress/e2e-test-utils.js

@@ -0,0 +1,43 @@
+export function fillInForm(chain, name, duedate, status) {
+    let statusNum;
+    switch (status) {
+        case 'offen':
+            statusNum = 0;
+            break;
+        case 'in Bearbeitung':
+            statusNum = 1;
+            break;
+        case 'erledigt':
+            statusNum = 2;
+            break;
+        default:
+            throw new Error('Status is invalid. Must be one of: offen, in Bearbeitung, erledigt');
+    }
+
+    return chain
+        .get('input#todo').type(name)
+        .get('input#due').type(duedate)
+        .get('select#status').select(statusNum)
+        .get('input[type=submit]').click();
+}
+
+export function findTodoByTitle(chain, title) {
+    return chain.get('div.todo').find('.title').contains(title).first().parent();
+}
+
+export function expectTodoToBe(chain, title, dueDate, status) {
+    const expectedDate = new Date(dueDate).toLocaleDateString();
+    return findTodoByTitle(chain, title)
+        .find('.title').should('contain', title).parent()
+        .find('.due').should('contain', expectedDate).parent()
+        .find('button.status').should('contain', status);
+}
+
+export function getCurrentTodoCount() {
+    return cy.get('div.todo').should('have.length.above', -1).its('length');
+}
+
+export function deleteTodoByTitle(chain, title) {
+    return findTodoByTitle(chain, title)
+    .find('button.delete').click();
+}

backend/cypress/e2e/e2e.cy.js

@@ -0,0 +1,67 @@
+import {deleteTodoByTitle, expectTodoToBe, fillInForm, findTodoByTitle} from "../e2e-test-utils.js";
+
+describe('ToDo App End-to-End Tests', () => {
+    let chain;
+    beforeEach(async () => {
+        chain = cy;
+        chain = chain.visit('todo.html').wait(1000);
+    });
+
+    it('sollte ein neues ToDo erstellen', () => {
+        chain = fillInForm(chain, 'sollte ein neues ToDo erstellen', '2022-11-12', 'in Bearbeitung');
+        chain = expectTodoToBe(chain, 'sollte ein neues ToDo erstellen', '2022-11-12', 'in Bearbeitung');
+        chain = deleteTodoByTitle(chain, 'sollte ein neues ToDo erstellen');
+    });
+
+    it('sollte ein todo bearbeiten', () => {
+        chain = fillInForm(chain, 'Todo_2', '2024-11-12', 'in Bearbeitung');
+        chain = expectTodoToBe(chain, 'Todo_2', '2024-11-12', 'in Bearbeitung');
+
+        chain = findTodoByTitle(chain, 'Todo_2')
+            .find('button.edit').click();
+        chain = fillInForm(chain, 'Todo_2_bearbeitet', '2024-11-12', 'erledigt');
+        chain = expectTodoToBe(chain, 'Todo_2_bearbeitet', '2024-11-12', 'erledigt');
+        chain = deleteTodoByTitle(chain, 'Todo_2_bearbeitet');
+    });
+
+    it('sollte ein todo löschen', () => {
+        chain = fillInForm(chain, 'sollte ein todo löschen', '2025-11-12', 'erledigt');
+        chain = expectTodoToBe(chain, 'sollte ein todo löschen', '2025-11-12', 'erledigt');
+        chain = deleteTodoByTitle(chain, 'sollte ein todo löschen');
+    });
+
+    it('sollte ein todo ohne Namen nicht erstellen', () => {
+        chain = chain.get('input#todo').invoke('attr', 'value', '')
+            .get('input#due').type('2026-11-12')
+            .get('select#status').select(1)
+            .get('input[type=submit]').click()
+            .get('div.todo').should('have.length', 0);
+    });
+
+    it('sollte den status eines todos ändern', () => {
+        chain = fillInForm(chain, 'sollte den status eines todos ändern', '2026-11-12', 'offen');
+        chain = findTodoByTitle(chain, 'sollte den status eines todos ändern');
+        chain = chain.find('button.status').should('contain', 'offen').click();
+        chain = expectTodoToBe(chain, 'sollte den status eines todos ändern', '2026-11-12', 'in Bearbeitung');
+        chain = deleteTodoByTitle(chain, 'sollte den status eines todos ändern');
+    });
+
+    it('sollte todos laden', () => {
+        chain = fillInForm(chain, 'sollte todos laden', '2026-11-12', 'offen');
+        chain = expectTodoToBe(chain, 'sollte todos laden', '2026-11-12', 'offen');
+        chain.reload().wait(1000);
+        chain = expectTodoToBe(chain, 'sollte todos laden', '2026-11-12', 'offen');
+        chain = deleteTodoByTitle(chain, 'sollte todos laden');
+    });
+
+    it('sollte heutiges Datum + 3 Tage als Standarddatum setzen', () => {
+        // Datum in das richtige Format bringen (YYYY-MM-DD)
+        const today = new Date();
+        today.setDate(today.getDate() + 3); // 3 Tage hinzufügen
+
+        // Datum im richtigen Format (YYYY-MM-DD)
+        const formattedDate = today.toISOString().split('T')[0];
+
+        cy.get('input#due').should('have.value', formattedDate);
+    });
+});

backend/cypress/e2e/responsive.cy.js

@@ -0,0 +1,17 @@
+describe('Responsive Design Tests', () => {
+    const viewports = [
+      { name: 'mobile', width: 375, height: 667 },
+      { name: 'tablet', width: 768, height: 1024 },
+      { name: 'desktop', width: 1280, height: 720 },
+    ];
+
+    viewports.forEach((viewport) => {
+      it(`should render correctly on ${viewport.name}`, () => {
+        cy.viewport(viewport.width, viewport.height);
+        cy.visit('/todo.html');
+        cy.get('#todo').should('be.visible');
+        cy.get('#due').should('be.visible');
+        cy.get('#status').should('be.visible');
+      });
+    });
+  });

backend/cypress/support/e2e.js

@@ -0,0 +1,5 @@
+Cypress.on('uncaught:exception', (err, runnable) => {
+    // returning false here prevents Cypress from
+    // failing the test
+    return false
+})