WIP specs for guest creation

.github/workflows/playwright.yml

@@ -9,7 +9,6 @@ concurrency:
   cancel-in-progress: true
 jobs:
   test:
-    if: false
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:

package.json

@@ -26,7 +26,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.46.0",
+    "@playwright/test": "^1.52.0",
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.15.29",
     "@types/react": "18.3.23",

playwright.config.ts

@@ -43,11 +43,6 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',

pnpm-lock.yaml

@@ -61,10 +61,10 @@ importers:
         version: 11.1.0
       zod:
         specifier: ^3.23.8
-        version: 3.25.46
+        version: 3.25.45
     devDependencies:
       '@playwright/test':
-        specifier: ^1.46.0
+        specifier: ^1.52.0
         version: 1.52.0
       '@types/bcrypt':
         specifier: ^5.0.2
@@ -1417,8 +1417,8 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
-  zod@3.25.46:
+  zod@3.25.45:
-    resolution: {integrity: sha512-IqRxcHEIjqLd4LNS/zKffB3Jzg3NwqJxQQ0Ns7pdrvgGkwQsEBdEQcOHaBVqvvZArShRzI39+aMST3FBGmTrLQ==}
+    resolution: {integrity: sha512-kv1swJBZqv98NQibL0oVvkQE8rXT+6qGNM1FpZkFcJG2jnz4vbtu48bgaitp85CaBPLSKXibrEsU7MzJoVoZAA==}
 
 snapshots:
 
@@ -2765,4 +2765,4 @@ snapshots:
 
   yaml@2.4.3: {}
 
-  zod@3.25.46: {}
+  zod@3.25.45: {}

tests/guests.spec.ts

@@ -1,7 +1,9 @@
 import { test, expect, Page } from '@playwright/test'
+import { mock } from 'node:test';
 
 const mockGuestsAPI = ({ page }: { page: Page }) => {
   page.route('*/**/api/default/guests', async route => {
+    if (route.request().method() === 'GET') {
       const json = [
         {
           "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
@@ -24,6 +26,11 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
       ];
 
       await route.fulfill({ json })
+    } else if (route.request().method() === 'POST') {
+      const json = {};
+
+      await route.fulfill({ json });
+    }
   })
 }
 
@@ -34,27 +41,31 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
         "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
         "name": "Pam's family",
         "icon": "pi pi-users",
-        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "parent_id": null,
         "color": "#ff0000",
+        "attendance": {
           "total": 3,
           "considered": 2,
           "invited": 1,
           "confirmed": 0,
           "declined": 0,
           "tentative": 0
+        }
       },
       {
         "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
         "name": "Pam's work",
         "icon": "pi pi-desktop",
-        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "parent_id": null,
         "color": "#00ff00",
+        "attendance": {
           "total": 2,
           "considered": 0,
           "invited": 0,
           "confirmed": 0,
           "declined": 0,
           "tentative": 2
+        }
       },
     ];
 
@@ -67,24 +78,47 @@ test('should display the list of guests', async ({ page }) => {
 
   await page.goto('/default/dashboard/guests');
 
-  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
+
   await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Invitations' })).toBeVisible();
 
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
 
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Confirm' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
-  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Decline' })).toBeVisible();
 
 
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Confirm' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
+});
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
+
+test('should allow creating a new guest', async ({ page }) => {
+  await mockGuestsAPI({ page });
+  await mockGroupsAPI({ page });
+
+  await page.goto('/default/dashboard/guests');
+  await page.getByRole('button', { name: 'Add new' }).click();
+
+  await page.getByRole('dialog').getByLabel('Name').fill('John Snow');
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+
+  await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
 });
 
 test('should display the list of groups', async ({ page }) => {
@@ -93,8 +127,38 @@ test('should display the list of groups', async ({ page }) => {
   await page.goto('/default/dashboard/guests');
   await page.getByRole('tab', { name: 'Groups' }).click();
 
-  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();
+
+  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
+
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(0)).toHaveText('Name');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(1)).toHaveText('Color');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(2)).toHaveText('Confirmed');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(3)).toHaveText('Tentative');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(4)).toHaveText('Pending');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(5)).toHaveText('Declined');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(6)).toHaveText('Considered');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(7)).toHaveText('Total');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(8)).toHaveText('Actions');
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s family');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('1');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('2');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('3');
+  await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
+
+
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(0)).toContainText('Pam\'s work');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(2)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(3)).toHaveText('2');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(4)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(5)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(6)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(7)).toHaveText('2');
+  await expect(page.getByRole('row').nth(2).locator('svg:visible')).toHaveCount(3);
 
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
 });