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

Merge pull request 'Fix minor UI bugs and test guest CRUD' (#281) from improve-specs-guests into main
All checks were successful
Check usage of free licenses / build-static-assets (push) Successful in 46s
Details
Playwright Tests / test (push) Successful in 4m14s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 4m46s
Details

Browse Source 
Reviewed-on: #281
This commit is contained in:
bustikiller 2025-06-14 06:35:14 +00:00
commit 2ebd9796e3
4 changed files with 89 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/[slug]/dashboard/guests/page.tsx
View File

@ -100,7 +100,20 @@ export default function Page() {
key={guestBeingEdited?.id}
groups={groups}
onCreate={(newGuest) => {
setGuests([newGuest!, ...guests]);
setGuests(prevGuests => {
const index = prevGuests.findIndex(g => g.id === newGuest?.id);
if (index !== -1) {
// Replace existing guest
return [
newGuest!,
...prevGuests.slice(0, index),
...prevGuests.slice(index + 1)
];
} else {
// Add new guest at the start
return [newGuest!, ...prevGuests];
}
});
setGuestBeingEdited(undefined) ;
}}
guest={guestBeingEdited}

7
app/api/abstract-api.tsx
View File

@ -41,7 +41,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
});
}
update(serializable: Serializable<T>, object: T, callback: () => void): void {
update(serializable: Serializable<T>, object: T, callback: (updatedObject: T) => void): void {
const endpoint = object.id ? `/api/${getSlug()}/${serializable.apiPath()}/${object.id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
fetch(endpoint, {
@ -52,7 +52,10 @@ export class AbstractApi<T extends Entity> implements Api<T> {
'Accept': 'application/json',
'X-CSRF-TOKEN': getCsrfToken(),
}
}).then(callback)
}).then((response) => response.json())
.then((data) => {
callback(serializable.fromJson(data));
})
.catch((error) => console.error(error));
}

8
app/ui/components/guest-form-dialog.tsx
View File

@ -44,9 +44,9 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
guest.group!.id = group;
guest.status = status;
api.update(serializer, guest, () => {
api.update(serializer, guest, (updatedGuest) => {
resetForm();
onCreate && onCreate(guest);
onCreate && onCreate(updatedGuest);
});
} else {
api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
@ -62,8 +62,8 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
<Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
<div className="card flex justify-evenly py-5">
<FloatLabel>
<InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
<label htmlFor="username">Username</label>
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
<label htmlFor="name">Name</label>
</FloatLabel>
<FloatLabel>
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={

87
tests/guests.spec.ts
View File

@ -10,8 +10,8 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
"status": "tentative",
"name": "Kristofer Rohan DVM",
"group": {
"id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
"name": "Childhood friends",
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
"name": "Pam's family",
}
},
{
@ -19,8 +19,8 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
"status": "invited",
"name": "Olevia Quigley Jr.",
"group": {
"id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
"name": "Work",
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
"name": "Pam's work",
}
},
];
@ -32,14 +32,33 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
"name": "John Snow",
"status": "invited",
"group": {
"id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
"name": "Work",
"id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
"name": "Pam's work",
}
};
await route.fulfill({ json });
}
})
page.route("*/**/api/default/guests/*", async route => {
if (route.request().method() === 'PUT') {
const json = {
"id": "ff58aa2d-643d-4c29-be9c-50e10ae6853c",
"name": "John Fire",
"status": "declined",
"group": {
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
"name": "Pam's family",
}
}
await route.fulfill({ json });
} else if (route.request().method() === 'DELETE') {
const json = {}
await route.fulfill({ json });
}
});
}
const mockGroupsAPI = ({ page }: { page: Page }) => {
@ -81,8 +100,9 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
})
}
test('should display the list of guests', async ({ page }) => {
test('should allow CRUD on guests', async ({ page }) => {
await mockGuestsAPI({ page });
await mockGroupsAPI({ page });
await page.goto('/default/dashboard/guests');
@ -92,49 +112,64 @@ test('should display the list of guests', async ({ page }) => {
await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
await expect(page.getByRole('tab', { name: 'Invitations' })).toBeVisible();
// List all guests
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: "Pam's family" })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
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: "Pam's work" })).toBeVisible();
await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
});
test('should allow creating a new guest', async ({ page }) => {
await mockGuestsAPI({ page });
await mockGroupsAPI({ page });
await page.goto('/default/dashboard/guests');
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
// Add a new guest
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.locator('#group').click();
await page.getByRole('option', { name: "Pam's work" }).click();
await page.keyboard.press('Tab');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await page.locator('#status').click();
await page.getByRole('option', { name: 'Invited' }).click();
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Work' })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam\'s work" })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Invited' })).toBeVisible();
await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
// Edit the just-added John Snow
await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click edit icon
const dialog = page.getByRole('dialog');
await expect(dialog.getByLabel('Name')).toHaveValue('John Snow');
await dialog.getByLabel('Name').fill('John Fire');
await dialog.locator('#group').click();
await page.getByRole('option', { name: "Pam's family" }).click();
await dialog.locator('#status').click();
await page.getByRole('option', { name: 'Declined' }).click();
await dialog.getByRole('button', { name: 'Update' }).click();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Fire' })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Pam\'s Family' })).toBeVisible();
await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Declined' })).toBeVisible();
await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
// Delete John Fire
await page.getByRole('row').nth(1).locator('svg').nth(0).click(); // Click delete icon
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
});
test('should display the list of groups', async ({ page }) => {