test: add client e2e test

.github/workflows/e2e_tests.yml

@@ -23,6 +23,8 @@ jobs:
       - run: cd backend && npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps chromium
+      - name: Seed/Create database
+        run: cd backend && npm run db:seed
       - name: Run Playwright tests
         run: npx playwright test
       - uses: actions/upload-artifact@v4

README.md

@@ -36,6 +36,15 @@ In the overall repo you can also run e2e and unit tests, though.
 
 Run `make test-all` to run all available tests.
 
+#### E2E Tests
+
+The following hints can help running e2e tests:
+
+- in order to run the tests against a running development environment use:
+  `PLAYWRIGHT_BACKEND_PORT=5173 npm run test:e2e`
+- in order to run tests with a UI use:
+  `PLAYWRIGHT_BACKEND_PORT=5173 npm run test:e2e -- --ui`
+
 ## Deployment
 
 The application is manually deployed via the `make deploy` command.

frontend/src/components/NavigationBar.vue

@@ -33,7 +33,7 @@ const items = ref([
 
 <template>
   <div class="card">
-    <Menubar :model="items" data-testid="navigation-bar">
+    <Menubar :model="items">
       <template #item="{ item, props }">
         <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
           <a :href="href" v-bind="props.action" @click="navigate">

frontend/src/views/ClientListView.vue

@@ -71,7 +71,7 @@ onMounted(async () => {
         v-for="client in clientsList"
         :key="client.id"
       >
-        <Card class="my-2">
+        <Card class="my-2" data-testid="client-card">
           <template #content>
             <div class="flex gap-2 flex-row justify-between items-center">
               <div>

frontend/src/views/ClientView.vue

@@ -79,6 +79,7 @@ onMounted(async () => {
   <form>
     <div class="flex flex-row justify-between">
       <Button
+        data-testid="return-button"
         @click="onClientList"
         icon="pi pi-arrow-left"
         size="small"
@@ -135,7 +136,7 @@ onMounted(async () => {
             </FloatLabel>
             <FloatLabel>
               <InputText id="city" v-model="userInfo.city" class="w-full" />
-              <label for="city font-bold">Stadt</label>
+              <label for="city">Stadt</label>
             </FloatLabel>
           </div>
         </template>

playwright.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
+const PORT = process.env.PLAYWRIGHT_BACKEND_PORT || "3001";
+
 export default defineConfig({
   testDir: "./tests/e2e",
   /* Run tests in files in parallel */
@@ -9,7 +11,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: "html",
   use: {
-    baseURL: "http://127.0.0.1:3001",
+    baseURL: `http://localhost:${PORT}`,
     httpCredentials: {
       username: "admin",
       password: "local1",
@@ -25,7 +27,7 @@ export default defineConfig({
   ],
   webServer: {
     command: "make build run-server-production",
-    url: "http://127.0.0.1:3001",
+    url: `http://localhost:${PORT}`,
     reuseExistingServer: !process.env.CI,
     stdout: process.env.CI ? "pipe" : "ignore",
   },

tests/e2e/client.spec.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "@playwright/test";
+
+test("create, edit and delete a client", async ({ page }) => {
+  await page.goto("/client");
+
+  const timestamp = String(Date.now());
+
+  // create client
+  await page.getByLabel("Neuen Kunden erstellen").click();
+
+  await page.getByLabel("Anrede").click();
+  await page.getByRole("option", { name: "Herr Dr." }).click();
+  await page.getByLabel("Vorname").fill("test first name");
+  await page.getByLabel("Nachname").fill("test last name " + timestamp);
+  await page.getByLabel("Straße und Nr.").fill("test street");
+  await page.getByLabel("PLZ").fill("test postal code");
+  await page.getByLabel("Stadt").fill("test city");
+
+  await page.getByLabel("Speichern").click();
+  await expect(page.getByText("Ein neuer Kunde wurde erstellt")).toBeVisible();
+
+  const firstClientCard = page.getByTestId("client-card").first();
+  await expect(firstClientCard).toContainText(timestamp);
+
+  // edit client
+  await firstClientCard.click();
+  await page.getByLabel("Kommentar").fill("edit comment");
+  await page.getByLabel("Speichern").click();
+  await expect(page.getByText("Die Änderung der Kundendaten wurde gespeichert")).toBeVisible();
+
+  await page.reload();
+  await expect(page.getByLabel("Kommentar")).toHaveValue("edit comment");
+
+  // delete client
+  await page.getByTestId("return-button").click();
+  await expect(page.getByText(timestamp)).toBeVisible();
+
+  await page
+    .getByTestId("client-card")
+    .filter({ hasText: timestamp })
+    .getByLabel("Löschen")
+    .click();
+
+  await page.getByRole("alertdialog").getByText("Löschen").click();
+  await expect(page.getByText("Der Kunde wurde gelöscht")).toBeVisible();
+  await expect(page.getByText(timestamp)).not.toBeVisible();
+});