bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

Improve groups specs and add confirmation dialog to delete action #288

Merged
bustikiller merged 2 commits from groups-specs into main 2025-06-17 18:45:57 +00:00
Conversation 0 Commits 2 Files Changed 3 +62 -14
3 changed files with 62 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/ui/groups/table.tsx
View File

@ -21,7 +21,12 @@ export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities
const actions = (group: Group) => ( const actions = (group: Group) => (
<div className="flex flex-row items-center"> <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)} /> <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
<AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} /> <AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
</div> </div>

17
tests/groups.spec.ts
View File

@ -52,6 +52,8 @@ test('should allow CRUD on groups', async ({ page }) => {
await dialog.getByLabel('Name').fill("Pam's friends"); await dialog.getByLabel('Name').fill("Pam's friends");
await dialog.getByRole('button', { name: 'Create' }).click(); 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(dialog).not.toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s friends'); 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(6)).toHaveText('0');
await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).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); 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
}); });

52
tests/mocks/groups.tsx
View File

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