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, um meine Javascript-Kenntnisse zu verbessern.

In diesem Beitrag möchte ich nun zeigen, wie ich die Oberfläche und zentralen Funktionen der Anwendung mit einer stabilen Testautomatisierung abgesichert habe – von Login-Tests über Drag-and-Drop-Abläufe bis hin zur Verifikation von Projekten. Eine vollständige Testabdeckung ist hier natürlich nicht garantiert, jedoch soll das Projekt einen guten Überblick über die automatisierten Testmethoden geben, die ich in die Entwicklung 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

Im Test habe ich mit dem executeScript-Befehl eine benutzerdefinierte JavaScript-Funktion erstellt, die die Drag-and-Drop-Operation direkt im DOM simuliert. Hier möchte ich vorstellen, wie ich das gelöst habe:

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, destinationNode) {
const dragStartEvent = new DragEvent('dragstart', { bubbles: true });
sourceNode.dispatchEvent(dragStartEvent);
destinationNode.dispatchEvent(new DragEvent('dragover', { bubbles: true }));
destinationNode.dispatchEvent(new DragEvent('drop', { bubbles: true }));
sourceNode.dispatchEvent(new DragEvent('dragend', { bubbles: true }));
}


triggerDragAndDrop(source, target);


`;


await driver.executeScript(script);
});

Erklärung des Scripts

1. Zugriff auf die Elemente:
   Das Script wählt das Quell-Element (source), das das zu verschiebende Projekt darstellt, und das Ziel-Element (target), das der Container ist, in den das Projekt verschoben werden soll. Hierbei wird data-project-id="251" genutzt, um das spezifische Projekt zu identifizieren und den Zielbereich über die id="toeditContainer" als Container für das Drop-Ziel auszuwählen.

2. Simulieren der Drag-and-Drop-Ereignisse:
   Um die Drag-and-Drop-Aktion nachzuahmen, habe ich die folgenden Ereignisse erzeugt:

   • dragstart: Dieses Ereignis signalisiert den Beginn des Ziehens eines Elements.

   • dragover: Es stellt sicher, dass das Zielbereich-Element auf das „Überziehen“ des Quell-Elements reagiert.

   • drop: Dies ist das eigentliche Ablegen des Quell-Elements im Zielbereich.

   • dragend: Ein Ereignis, das das Ende des Drag-and-Drop-Vorgangs darstellt.

3. Funktion triggerDragAndDrop:
   Diese Funktion führt alle oben genannten Schritte durch, um die Drag-and-Drop-Interaktion zu simulieren. Sie wird mit den als Parameter übergebenen DOM-Elementen (source und target) aufgerufen und löst die Ereignisse nacheinander aus.

4. Ausführung des Scripts:
   Der driver.executeScript-Befehl führt das JavaScript direkt im Kontext des Browsers aus, was bedeutet, dass die Drag-and-Drop-Interaktion tatsächlich im Browser stattfindet, als ob ein Benutzer diese Aktion manuell durchführen würde.

Fazit