Vitest

Übungsaufgaben zu Fahrer-Sicht und Coding Standards in Vue: eigene Mitfahrgesuche verwalten

In der Web-App des Mitfahrlabors sollen Mitfahrende ihre eigenen Gesuche sehen und offene Gesuche zurückziehen können. In diesen Übungen ordnest Du Regeln und Befunde den Werkzeugen Prettier, ESLint und vue-tsc sowie dem Backend zu. Danach entwickelst Du die Regeln für eigene Gesuche als reine Funktionen und das Zurückziehen per PATCH mit einer Komponente, jeweils mit Tests. Zum Schluss behebst Du die Lint- und Typbefunde in der Komponente eines anderen Paars und begründest jede Änderung.

Übungsaufgaben zur Anmeldung mit Keycloak in Vue: Mitfahrgesuche mit Token

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen nur für angemeldete Personen erreichbar sein. In diesen Übungen bringst Du die Schritte des Authorization Code Flows mit PKCE in die richtige Reihenfolge und ordnest Tokens ihren Empfängern zu. Danach schützt Du die Seite „Meine Gesuche“ mit dem Navigation Guard und schickst ein neues Gesuch mit Access Token an die API, jeweils mit Tests. Zum Schluss findest Du anhand von Fehlermeldungen heraus, was bei der Anmeldung eines anderen Paars schiefläuft, und nimmst Stellung zu zwei Vorschlägen für mehr Bequemlichkeit.

Übungsaufgaben zu Refactoring mit Composables und Pinia: Mitfahrgesuche aufräumen

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen aufgeräumt werden. In diesen Übungen findest Du Code Smells in einer Seite für Gesuche, ordnest Zustände Props, Composables und Stores zu und sagst voraus, was beim Zerlegen eines Stores passiert. Danach baust Du test-first einen Pinia-Store für Gesuche und schließt eine Seite „Meine Gesuche“ mit useLaden() an. Zum Schluss findest Du heraus, warum die Tests eines anderen Paars nach dem Umzug in Pinia mal grün und mal rot sind, und bewertest ihren Umbau mit den Regeln von Simple Design.

Refactoring mit Testnetz in Vue: Composables, Pinia und Simple Design

Bevor die Web-App des Mitfahrlabors eine Anmeldung bekommt, räumt das Team auf. Der Artikel zeigt Refactoring als Praktik aus Extreme Programming: Code Smells im eigenen Code finden, das Testnetz prüfen und mit einem Charakterisierungstest flicken, dann in kleinen Schritten umbauen, nach denen alle Tests grün sind. Doppelte Ladezustände wandern in ein Composable, die gewählte Testperson in einen Store mit Pinia. Unterwegs findet das Team einen Fehler und behebt ihn erst danach, mit dem anderen Hut. Die vier Regeln von Simple Design entscheiden, was in den Store gehört und was nicht.

TypeScript für Java-Entwickler*innen: Typen, Union-Typen, Promises und Test-first mit Vitest

Wer Java kann, liest TypeScript schnell, stolpert aber an anderen Stellen: Typen gibt es nur beim Übersetzen, Objekte passen zu einem Interface allein über ihre Form, statt Enums nimmt man Union-Typen aus Textwerten, null und undefined muss man ausdrücklich zulassen, und asynchroner Code arbeitet mit Promises und async/await. Im Mitfahrlabor entstehen so die Typen für Fahrtangebote aus dem API-Vertrag und die Filterfunktion für die Suche, test-first im Zyklus Rot, Grün, Refactor mit Vitest.

Suchen und Buchen mit Vue 3 und TypeScript: das Projekt im Überblick

In zwölf Artikeln entsteht die Web-App der Mitfahr-App Mitfahrlabor: Auszubildende suchen Fahrten und fragen Plätze an, Fahrer*innen bestätigen die Anfragen. Die App ist eine Single-Page-App mit Vue 3 und TypeScript, die mit der REST-Schnittstelle des Spring-Boot-Backends spricht und die Anmeldung über Keycloak abwickelt. Das Team arbeitet nach Extreme Programming: test-first, in kurzen Iterationen und mit kleinen Releases. Hier findest Du Architektur, Fahrplan und Voraussetzungen.