Merge pull request 'Improve groups specs and add confirmation dialog to delete action' (#288) from groups-specs into main

Reviewed-on: #288

app/ui/groups/table.tsx

@@ -21,7 +21,12 @@ export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities
 
   const actions = (group: Group) => (
     <div className="flex flex-row items-center">
-      <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
+      <TrashIcon className='size-6 cursor-pointer' onClick={() => {
+        if (window.confirm(`Are you sure you want to delete guest "${group.name}"?`)) {
+          api.destroy(serializer, group, onUpdate)
+        }
+      }}
+      />
       <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
       <AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
     </div>

tests/groups.spec.ts

@@ -52,6 +52,8 @@ test('should allow CRUD on groups', async ({ page }) => {
   await dialog.getByLabel('Name').fill("Pam's friends");
   await dialog.getByRole('button', { name: 'Create' }).click();
 
+  await expect(page.getByRole('row')).toHaveCount(4); // 1 header row + 3 data rows
+
   await expect(dialog).not.toBeVisible();
 
   await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s friends');
@@ -62,4 +64,19 @@ test('should allow CRUD on groups', async ({ page }) => {
   await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('0');
   await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('0');
   await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
+
+  // Modify the newly added group
+  await page.getByRole('row').nth(1).locator('svg').nth(2).click(); // Click edit icon
+  await expect(dialog).toBeVisible();
+  await expect(dialog.getByLabel('Name')).toHaveValue("Pam's friends");
+  await dialog.getByLabel('Name').fill('Pam\'s best friends');
+  await dialog.getByRole('button', { name: 'Update' }).click();
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s best friends');
+
+  // Delete the newly added group
+  page.on('dialog', dialog => dialog.accept());
+
+  await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click delete icon
+  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
 });

tests/mocks/groups.tsx

@@ -39,22 +39,48 @@ export default async function mockGroupsAPI({ page }: { page: Page }): Promise<v
       await route.fulfill({ json })
     } else if (route.request().method() === 'POST') {
       const json = {
-          "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
-          "name": "Pam's friends",
-          "icon": "pi pi-desktop",
-          "parent_id": null,
-          "color": "#0000ff",
-          "attendance": {
-            "total": 0,
-            "considered": 0,
-            "invited": 0,
-            "confirmed": 0,
-            "declined": 0,
-            "tentative": 0
-          }
+        "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
+        "name": "Pam's friends",
+        "icon": "pi pi-desktop",
+        "parent_id": null,
+        "color": "#0000ff",
+        "attendance": {
+          "total": 0,
+          "considered": 0,
+          "invited": 0,
+          "confirmed": 0,
+          "declined": 0,
+          "tentative": 0
         }
+      }
 
       await route.fulfill({ json })
     }
   })
+
+  page.route("*/**/api/default/groups/*", async route => {
+    if (route.request().method() === 'PUT') {
+      const json = {
+        "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
+        "name": "Pam's best friends",
+        "icon": "pi pi-desktop",
+        "parent_id": null,
+        "color": "#0000ff",
+        "attendance": {
+          "total": 0,
+          "considered": 0,
+          "invited": 0,
+          "confirmed": 0,
+          "declined": 0,
+          "tentative": 0
+        }
+      }
+
+      await route.fulfill({ json });
+    } else if (route.request().method() === 'DELETE') {
+      const json = {}
+
+      await route.fulfill({ json });
+    }
+  });
 }