Test the display of groups

tests/guests.spec.ts

@@ -33,6 +33,41 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
   })
 }
 
+const mockGroupsAPI = ({ page }: { page: Page }) => {
+  page.route('*/**/api/groups', async route => {
+    const json = [
+      {
+        "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
+        "name": "Pam's family",
+        "icon": "pi pi-users",
+        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "color": "#ff0000",
+        "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",
+        "color": "#00ff00",
+        "total": 2,
+        "considered": 0,
+        "invited": 0,
+        "confirmed": 0,
+        "declined": 0,
+        "tentative": 2
+      },
+    ];
+
+    await route.fulfill({ json })
+  })
+}
+
 test('should display the list of guests', async ({ page }) => {
   await mockGuestsAPI({ page });
 
@@ -71,4 +106,16 @@ test('should allow changing the name of a guest', async ({ page }) => {
   await page.getByRole('textbox').evaluate(e => e.blur());
 
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
+});
+
+test('should display the list of groups', async ({ page }) => {
+  await mockGroupsAPI({ page });
+
+  await page.goto('/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('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
 });