test: Add wiremock

Author: ArneLimburg

.github/workflows/build.yaml

@@ -31,6 +31,56 @@ jobs:
       - name: Build
         run: npm run build
 
+  test-client:
+    runs-on: ubuntu-latest
+    needs: build-client
+    defaults:
+      run:
+        working-directory: customer-client
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: npm
+          cache-dependency-path: customer-client/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Start WireMock
+        run: docker compose up -d wiremock
+        working-directory: .
+
+      - name: Wait for WireMock
+        run: |
+          until curl -sf http://localhost:8080/__admin/health > /dev/null; do
+            echo "Waiting for WireMock..."
+            sleep 2
+          done
+        working-directory: .
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests with WireMock
+        run: npm run test:wiremock
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report-wiremock
+          path: customer-client/playwright-report/
+
+      - name: Stop WireMock
+        if: always()
+        run: docker compose down
+        working-directory: .
+
   build:
     runs-on: ubuntu-latest
     needs: build-client

README.md

@@ -2,7 +2,73 @@
 
 Herzlich willkommen zum Workshop API Design.
 
-## Übungen
+## Übung: Playwright Tests mit WireMock
+
+In dieser Übung werden die Playwright-Tests so angepasst, dass sie nicht mehr gegen den echten Backend-Service laufen, sondern alle HTTP-Requests über WireMock gemockt werden.
+
+### Ausgangssituation
+
+Im Verzeichnis `customer-client/test/` befinden sich drei Testdateien:
+
+- `customer-list.spec.ts` – Tests für die Kundenliste
+- `customer-detail.spec.ts` – Tests für die Kundendetailseite (Adressen anlegen und bearbeiten)
+- `create-customer.spec.ts` – Tests für das Anlegen neuer Kunden
+
+Die Tests laufen aktuell gegen den echten Backend-Service (`http://localhost:8181`).
+Im Verzeichnis `wiremock/mappings/` liegen bereits zwei WireMock-Mappings:
+
+- `get-customers.json` – Mockt `GET /customers/`
+- `options-customers.json` – Mockt `OPTIONS /customers/`
+
+WireMock wird per Docker Compose gestartet und ist auf Port `8080` erreichbar:
+
+```bash
+docker compose up wiremock
+```
+
+### Ziel
+
+Alle HTTP-Requests in den Playwright-Tests sollen durch WireMock-Mappings ersetzt werden, sodass der echte Backend-Service für die Tests nicht mehr benötigt wird.
+
+### Aufgaben
+
+1. **Playwright auf WireMock umstellen**
+   Ändere in `customer-client/playwright.config.ts` die `VITE_API_URL` so, dass sie auf den WireMock-Server (`http://localhost:8080`) zeigt.
+
+2. **WireMock-Mappings für die Kundenliste ergänzen**
+   Die Mappings für `GET /customers/` und `OPTIONS /customers/` sind bereits vorhanden.
+   Führe die Tests aus und prüfe, welche weiteren Requests fehlen.
+
+3. **WireMock-Mappings für die Kundendetailseite anlegen**
+   Für die Tests in `customer-detail.spec.ts` werden Kundendaten für `0815` (Max Mustermann) und `007` (James Bond) benötigt. Lege entsprechende Mappings an:
+   - `GET /customers/0815` – Max Mustermann mit Rechnungs- und Lieferadresse
+   - `GET /customers/007` – James Bond ohne Adressen
+   - `PUT /customers/0815/billing-address` – Rechnungsadresse speichern
+   - `PUT /customers/0815/delivery-address` – Lieferadresse speichern
+   - Adressvalidierung (PLZ-Prüfung) für die entsprechenden Testszenarien
+
+4. **WireMock-Mapping für das Anlegen neuer Kunden anlegen**
+   Für `create-customer.spec.ts` wird ein `POST /customers/` benötigt, der einen neuen Kunden anlegt.
+
+5. **Alle Tests erfolgreich ausführen**
+   Starte WireMock per Docker Compose und führe die Tests aus:
+   ```bash
+   docker compose up wiremock
+   cd customer-client
+   npm test
+   ```
+
+### Tipps
+
+- WireMock-Mappings liegen als JSON-Dateien in `wiremock/mappings/`. WireMock lädt diese Dateien beim Start automatisch.
+- Die bestehenden Mappings (`get-customers.json`, `options-customers.json`) können als Vorlage für neue Mappings genutzt werden.
+- Für das Laden neuer Mappings ohne Neustart kann die WireMock Admin API unter `http://localhost:8080/__admin/mappings` genutzt werden – oder WireMock einfach neu starten.
+- Bei einem `POST`- oder `PUT`-Request muss ggf. auch der entsprechende `OPTIONS`-Preflight-Request gemockt werden (CORS).
+- Die Adressvalidierung in `customer-detail.spec.ts` erwartet spezifische Fehlermeldungen – die Responses im Mapping müssen die exakten Fehlertexte aus den Tests zurückliefern.
+
+---
+
+## Alle Übungen
 
 ### API Design
 
@@ -12,6 +78,7 @@ Herzlich willkommen zum Workshop API Design.
 
 ### API Testing
 
+- [Playwright + WireMock](https://github.com/openknowledge/workshop-api-design/tree/playwright-wiremock)
 - [Pact](https://github.com/openknowledge/workshop-api-design/tree/pact-mock-server)
 - [Pact Pipeline](https://github.com/openknowledge/workshop-api-design/tree/pact)
 

customer-client/package.json

@@ -11,7 +11,8 @@
     "format:check": "prettier --check .",
     "preview": "vite preview",
     "test": "playwright test",
-    "test:ui": "playwright test --ui"
+    "test:ui": "playwright test --ui",
+    "test:wiremock": "playwright test --config=playwright.wiremock.config.ts"
   },
   "dependencies": {
     "@tanstack/react-form": "^1.28.0",

customer-client/playwright.wiremock.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+process.env.VITE_API_URL = 'http://localhost:8080';
+
+export default defineConfig({
+  testDir: './test',
+  testMatch: 'customer-list.spec.ts',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

docker-compose.yaml

@@ -37,3 +37,10 @@ services:
       - "3000:80"
     depends_on:
       - customer-service
+  
+  wiremock:
+    image: wiremock/wiremock:3.5.4
+    ports:
+      - "8080:8080"
+    volumes:
+      - "./wiremock:/home/wiremock"

wiremock/mappings/get-customers.json

@@ -0,0 +1,18 @@
+{
+  "request": {
+    "method": "GET",
+    "url": "/customers/"
+  },
+  "response": {
+    "status": 200,
+    "headers": {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*"
+    },
+    "jsonBody": [
+      { "number": "0815", "name": "Max Mustermann" },
+      { "number": "0816", "name": "Erika Mustermann" },
+      { "number": "007", "name": "James Bond" }
+    ]
+  }
+}

wiremock/mappings/options-customers.json

@@ -0,0 +1,14 @@
+{
+  "request": {
+    "method": "OPTIONS",
+    "url": "/customers/"
+  },
+  "response": {
+    "status": 204,
+    "headers": {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type, Accept-Language"
+    }
+  }
+}