Mein Kanban-Board Canbano

Mein kleines (und sicher ausbaufähiges), digitales Projektmanagement-Anwendung Cabano basiert auf dem agilen Kanban-Ansatz und erlaubt es, Projekte zu erstellen und diese strukturiert zu planen. Ich habe das Board vor einigen Jahren entwickelt.

In diesem Beitrag zeige ich, wie ich die Oberfläche und zentrale Funktionen von Canbano mit automatisierten Tests abgesichert habe – von Login-Checks über Drag-&-Drop bis zur Projektverifikation. Eine vollständige Testabdeckung soll hier nicht von Bedeutung sein, aber das Projekt vermittelt einen guten Überblick über die Testmethoden, die ich integriert habe.

Folgende Technologien habe ich verwendet

• Selenium WebDriver (JavaScript)

• Mocha & Chai für die Testspezifikation

• MochaAwesome für die HTML-Testberichte

• Jenkins zur lokalen, automatischen Testausführung

• Custom Drag & Drop Tests per DOM-Scripting

Struktur meiner Tests

Die Struktur der Tests in diesem Projekt wurde so gewählt, dass eine saubere Trennung der verschiedenen Anwendungsfälle und Funktionen der Kanban-Anwendung gewährleistet ist. Ich habe die Tests in verschiedene Verzeichnisse unterteilt, um sowohl die Wartbarkeit als auch die Lesbarkeit der Testfälle zu erhöhen. Durch die Modularität können neue Tests später leichter hinzugefügt werden und bestehende Tests gezielt angepasst werden, ohne dass sie sich gegenseitig beeinflussen.

• Login-Tests sorgen dafür, dass die Authentifizierung funktioniert.

• Navigations-Tests stellen sicher, dass alle Menüpunkte vorhanden sind und die Benutzeroberfläche korrekt und benutzerfreundlich ist.

• Projektmanagement-Tests garantieren die Funktionsfähigkeit der zentralen Prozesse wie die angesprochene Drag & Drop -Funktion.

tests
├── login
│ ├── kanbanLoginInvalidLogin.js
│ └── kanbanLoginValid.js
├── navigation-structure
│ ├── checkNavigation.js
│ ├── showSummary.js
│ └── structureCheck.js
└── project-management
├── dragAnddrop.js
├── projectCreate.js
├── projectDeleteAll.js
└── verifyProjectinTableView.js

Testausführung & Reporting

Die Tests laufen automatisiert über Jenkins, mit visuellem Reporting durch MochaAwesome. So habe ich jederzeit einen Überblick über den aktuellen Qualitätsstatus meines Tools.

Jenkins-Integration

Um die Tests in meinem Projekt kontinuierlich ausführen zu können, habe ich wie gesagt Jenkins verwendet. Die Tests können automatisch bei jedem neuen Commit ausgeführt werden, und ich erhalte sofortiges Ergebnisse für jede Testsuite.

Jeder Job ist so konfiguriert, dass er automatisch den neuesten Code von meinem GitHub-Repository abruft und die Tests ausführt. Ich verwende Mocha als Test-Runner und Mochawesome als Reporter, um detaillierte und leicht verständliche Testberichte zu erstellen.

Nach jedem Testdurchlauf werden die Ergebnisse automatisch archiviert und sind über die Jenkins-Oberfläche in Form eines HTML-Berichts zugänglich.

Mein persönliches Testhighlight: Drag-and-Drop

Ein besonderes Highlight in meinem Projekt war der automatisierte Test des Drag-and-Drop-Features. Der Test wurde so entwickelt, dass er das Drag-and-Drop-Verhalten im Browser simuliert, um sicherzustellen, dass Projekte korrekt von einem Zustand (z.B. „Offen“) in einen anderen Zustand (z.B. „In Bearbeitung“) verschoben werden.

Die Herausforderung bestand darin, diese Interaktion zu automatisieren, da Drag-and-Drop-Operationen im Webbrowser normalerweise mit Maus- und Touch-Ereignissen verbunden sind, die ich so noch nicht automatisiert getestet hatte.

Der Lösungsweg

Um Drag & Drop zu testen, habe ich executeScript genutzt, um die Aktion direkt im DOM zu simulieren

describe("Projekt per Drag & Drop verschieben", function () {
it("verschiebt 'Bäcker Müller' in 'In Bearbeitung'", async function () {
const script = `
const source = document.querySelector('[data-project-id="251"]');
const target = document.getElementById('toeditContainer');

function triggerDragAndDrop(sourceNode, targetNode) {
['dragstart', 'dragover', 'drop', 'dragend'].forEach(eventType => {
const event = new DragEvent(eventType, { bubbles: true });
(eventType === 'dragover' || eventType === 'drop') ? targetNode.dispatchEvent(event) : sourceNode.dispatchEvent(event);
});
}

triggerDragAndDrop(source, target);
`;
await driver.executeScript(script);
});
});

• source = das zu verschiebende Projekt

• target = Ziel-Container

• triggerDragAndDrop() simuliert nacheinander dragstart, dragover, drop und dragend

• Damit wird Drag & Drop ohne echte Mausbewegungen getestet

Fazit