mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
Maurice
1ad2e92142
The bulk of what SonarQube still had open on the reliability side, read site by
site rather than swept. Two clusters are worth calling out because they are
defects, not lint.
**Four regexes could be made to hang the process.** The worst is
`/.+@.+\..+/` in the forgot-password path: three unbounded `.+` that all
overlap, unanchored, on an endpoint that needs no login and whose schema is a
bare z.string() under a 100kb body cap. A thousand '@' characters had not
finished after 100 seconds — one request pins the event loop, and Node has one.
EMAIL_REGEX in auth.helpers is the same shape on register and profile update
(310ms for 8kb). The two tag strippers over an uploaded KML description and over
Commons metadata took 0.52s on a 16k run of '<'. Each rewrite was proven
equivalent by brute force against the original — millions of strings for the
coordinate patterns, 671,876 for the tag stripper — because a subtly different
regex on a parsing path is worse than the finding.
`<[^>]+>` could not be fixed in the pattern: `[^>]` matches `<` too, so the only
unambiguous form changes what happens to malformed markup. It is now a scan in
common/stripHtmlTags.ts, quirks included — `<>` is left alone, `<a<b>` is one
tag — with the equivalence pinned by a test that compares against the old regex
over every string up to length six.
**And roughly 500 places could only be reached with a mouse.** Clickable divs
became real buttons where the markup allowed (52 of them), took
role + tabIndex + Enter/Space where they had to stay divs, and modal backdrops
took role="presentation" — the honest role, since a backdrop is a mouse shortcut
for a Cancel control that is already in the tab order, and making it a button
plants a nameless full-screen tab stop around its own contents.
Alongside those: `.sort()` calls that now say the order they always had, `{n &&
<X/>}` guards that rendered a literal "0" for a zero-byte file and for a place at
latitude 0, an optimistic budget write that stored a boolean where the contract
and both transports use 0/1, and the Number statics.
sonar-project.properties documents the six that were deliberately left: two wiki
patterns with no overlapping quantifier pair whose "fix" would stop parsing
`[see [1]](url)`, four tar header fields bounded at 12-155 bytes by the format,
two djb2 hashes where the 32-bit wrap is the algorithm, two `| 0` that are also
coercing undefined to 0 on a path where the API sends no user_id, and the MCP
session maps Sonar reads as empty because they are filled from another module.
821 lines
34 KiB
TypeScript
821 lines
34 KiB
TypeScript
// FE-ADMIN-PKG-001 to FE-ADMIN-PKG-032
|
|
import { render, screen, waitFor, within } from '../../../tests/helpers/render';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { http, HttpResponse } from 'msw';
|
|
import { server } from '../../../tests/helpers/msw/server';
|
|
import { resetAllStores } from '../../../tests/helpers/store';
|
|
import PackingTemplateManager from './PackingTemplateManager';
|
|
import { ToastContainer } from '../shared/Toast';
|
|
|
|
const tmpl1 = { id: 1, name: 'Beach Trip', item_count: 5, category_count: 2, created_by_name: 'admin' }
|
|
const tmpl2 = { id: 2, name: 'City Break', item_count: 3, category_count: 1, created_by_name: 'admin' }
|
|
|
|
const cat1 = { id: 10, template_id: 1, name: 'Clothing', sort_order: 0 }
|
|
const item1 = { id: 100, category_id: 10, name: 'T-shirt', sort_order: 0 }
|
|
const item2 = { id: 101, category_id: 10, name: 'Shorts', sort_order: 1 }
|
|
|
|
beforeEach(() => {
|
|
resetAllStores();
|
|
});
|
|
|
|
/** Template rows carry [chevron, name, edit, delete]; category headers [add item, edit, delete]. */
|
|
function rowButtons(name: string, selector: string): HTMLElement[] {
|
|
const row = screen.getByText(name).closest(selector) as HTMLElement;
|
|
return within(row).getAllByRole('button');
|
|
}
|
|
|
|
const templateButtons = (name: string) => rowButtons(name, '.px-5.py-3');
|
|
const categoryButtons = (name: string) => rowButtons(name, '.bg-slate-50');
|
|
const itemButtons = (name: string) => rowButtons(name, '.group');
|
|
|
|
/** Expands the single fixture template and waits for its content. */
|
|
async function expandBeachTrip(user: ReturnType<typeof userEvent.setup>, firstChild: string) {
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText(firstChild);
|
|
}
|
|
|
|
describe('PackingTemplateManager', () => {
|
|
it('FE-ADMIN-PKG-001: shows loading spinner on mount', async () => {
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', async () => {
|
|
await new Promise(r => setTimeout(r, 100));
|
|
return HttpResponse.json({ templates: [] });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
expect(document.querySelector('.animate-spin')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-002: shows empty state when no templates', async () => {
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('No templates created yet');
|
|
expect(screen.queryAllByRole('button', { name: /chevron/i })).toHaveLength(0);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-003: template list renders names and counts', async () => {
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1, tmpl2] })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
expect(screen.getByText('City Break')).toBeInTheDocument();
|
|
// tmpl1 has 2 categories and 5 items
|
|
expect(screen.getByText(/2 categories · 5 items/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-004: clicking "+" shows create input', async () => {
|
|
const user = userEvent.setup();
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('No templates created yet');
|
|
const createBtn = screen.getByRole('button', { name: /new template/i });
|
|
await user.click(createBtn);
|
|
expect(screen.getByPlaceholderText('Template name (e.g. Beach Holiday)')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-005: creates template on Enter and shows success toast', async () => {
|
|
const user = userEvent.setup();
|
|
let postCalled = false;
|
|
server.use(
|
|
http.post('/api/admin/packing-templates', async () => {
|
|
postCalled = true;
|
|
return HttpResponse.json({ template: { id: 99, name: 'New Template' } });
|
|
})
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await screen.findByText('No templates created yet');
|
|
await user.click(screen.getByRole('button', { name: /new template/i }));
|
|
const input = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)');
|
|
await user.type(input, 'New Template{Enter}');
|
|
await waitFor(() => expect(postCalled).toBe(true));
|
|
// "New Template" may appear both as the button label and the new list item
|
|
await waitFor(() => expect(screen.getAllByText('New Template').length).toBeGreaterThanOrEqual(1));
|
|
await screen.findByText('Template created');
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-006: Escape dismisses create input without API call', async () => {
|
|
const user = userEvent.setup();
|
|
let postCalled = false;
|
|
server.use(
|
|
http.post('/api/admin/packing-templates', async () => {
|
|
postCalled = true;
|
|
return HttpResponse.json({ template: { id: 99, name: 'Should Not Appear' } });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('No templates created yet');
|
|
await user.click(screen.getByRole('button', { name: /new template/i }));
|
|
const input = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)');
|
|
await user.type(input, 'Test{Escape}');
|
|
await waitFor(() => {
|
|
expect(screen.queryByPlaceholderText('Template name (e.g. Beach Holiday)')).not.toBeInTheDocument();
|
|
});
|
|
expect(postCalled).toBe(false);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-007: expanding a template loads and displays its categories and items', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [item1, item2] })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
expect(screen.getByText('T-shirt')).toBeInTheDocument();
|
|
expect(screen.getByText('Shorts')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-008: collapsing an expanded template hides its content', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [item1, item2] })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
// Collapse by clicking again
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await waitFor(() => {
|
|
expect(screen.queryByText('Clothing')).not.toBeInTheDocument();
|
|
expect(screen.queryByText('T-shirt')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-009: deleting a template removes it from the list and shows toast', async () => {
|
|
const user = userEvent.setup();
|
|
let deleteCalled = false;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1, tmpl2] })
|
|
),
|
|
http.delete('/api/admin/packing-templates/1', () => {
|
|
deleteCalled = true;
|
|
return HttpResponse.json({ success: true });
|
|
})
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await screen.findByText('Beach Trip');
|
|
expect(screen.getByText('City Break')).toBeInTheDocument();
|
|
|
|
// Find all Trash2 (delete) buttons — there are 2 (one per template)
|
|
const deleteButtons = screen.getAllByRole('button').filter(b =>
|
|
b.className.includes('hover:bg-red-50') || b.querySelector('svg')
|
|
);
|
|
// Click the delete button for "Beach Trip" (first template row's trash button)
|
|
// The buttons layout in each row: [chevron, edit, delete]
|
|
// We find rows first
|
|
const beachTripRow = screen.getByText('Beach Trip').closest('div');
|
|
const trashBtn = beachTripRow!.parentElement!.querySelector('button.hover\\:bg-red-50') as HTMLElement | null;
|
|
if (trashBtn) {
|
|
await user.click(trashBtn);
|
|
} else {
|
|
// Fallback: find all red-hover buttons and click first
|
|
const allBtns = screen.getAllByRole('button');
|
|
const redBtns = allBtns.filter(b => b.className.includes('hover:bg-red-50'));
|
|
await user.click(redBtns[0]);
|
|
}
|
|
await waitFor(() => expect(deleteCalled).toBe(true));
|
|
await waitFor(() => expect(screen.queryByText('Beach Trip')).not.toBeInTheDocument());
|
|
expect(screen.getByText('City Break')).toBeInTheDocument();
|
|
await screen.findByText('Template deleted');
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-010: renaming a template inline updates the list', async () => {
|
|
const user = userEvent.setup();
|
|
let putCalled = false;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.put('/api/admin/packing-templates/1', async () => {
|
|
putCalled = true;
|
|
return HttpResponse.json({ success: true });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
|
|
// Find the Edit2 button on the template row
|
|
const beachTripText = screen.getByText('Beach Trip');
|
|
const row = beachTripText.closest('div')!.parentElement!;
|
|
const editBtn = row.querySelector('button.hover\\:bg-slate-100') as HTMLElement | null;
|
|
if (editBtn) {
|
|
await user.click(editBtn);
|
|
} else {
|
|
// Fallback: find all slate-100-hover buttons
|
|
const allBtns = screen.getAllByRole('button');
|
|
const editBtns = allBtns.filter(b => b.className.includes('hover:bg-slate-100'));
|
|
await user.click(editBtns[0]);
|
|
}
|
|
|
|
const input = screen.getByDisplayValue('Beach Trip');
|
|
await user.clear(input);
|
|
await user.type(input, 'Summer Packing{Enter}');
|
|
await waitFor(() => expect(putCalled).toBe(true));
|
|
await screen.findByText('Summer Packing');
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-011: adding a category to an expanded template', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [], items: [] })
|
|
),
|
|
http.post('/api/admin/packing-templates/1/categories', async () =>
|
|
HttpResponse.json({ category: { id: 20, template_id: 1, name: 'Electronics', sort_order: 1 } })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
// Wait for expanded state (Add category button should appear)
|
|
await screen.findByText('Add category');
|
|
await user.click(screen.getByText('Add category'));
|
|
const catInput = screen.getByPlaceholderText('Category name (e.g. Clothing)');
|
|
await user.type(catInput, 'Electronics{Enter}');
|
|
expect(await screen.findByText('Electronics')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-012: adding an item to a category', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [] })
|
|
),
|
|
http.post('/api/admin/packing-templates/1/categories/10/items', async () =>
|
|
HttpResponse.json({ item: { id: 102, category_id: 10, name: 'Sandals', sort_order: 2 } })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
|
|
// Click the "+" button on the Clothing category row
|
|
const clothingHeader = screen.getByText('Clothing').closest('div')!;
|
|
const addItemBtn = clothingHeader.querySelector('button') as HTMLElement;
|
|
await user.click(addItemBtn);
|
|
|
|
const itemInput = screen.getByPlaceholderText('Item name');
|
|
await user.type(itemInput, 'Sandals');
|
|
// Submit via Enter key (the input's onKeyDown handler triggers handleAddItem)
|
|
await user.type(itemInput, '{Enter}');
|
|
expect(await screen.findByText('Sandals')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-013: renaming a category inline updates its name', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [] })
|
|
),
|
|
http.put('/api/admin/packing-templates/1/categories/10', async () =>
|
|
HttpResponse.json({ success: true })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
|
|
// Find the Edit2 button in the Clothing category header
|
|
const clothingHeader = screen.getByText('Clothing').closest('div')!;
|
|
const editBtns = Array.from(clothingHeader.querySelectorAll('button')).filter(
|
|
b => b.className.includes('hover:text-slate-700')
|
|
);
|
|
// Second button (after Plus) is Edit2
|
|
await user.click(editBtns[1]);
|
|
|
|
const catInput = screen.getByDisplayValue('Clothing');
|
|
await user.clear(catInput);
|
|
await user.type(catInput, 'Shoes{Enter}');
|
|
expect(await screen.findByText('Shoes')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-014: deleting a category removes it and its items', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [item1, item2] })
|
|
),
|
|
http.delete('/api/admin/packing-templates/1/categories/10', () =>
|
|
HttpResponse.json({ success: true })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
expect(screen.getByText('T-shirt')).toBeInTheDocument();
|
|
|
|
// Find the Trash2 button in the Clothing category header
|
|
const clothingHeader = screen.getByText('Clothing').closest('div')!;
|
|
const trashBtn = clothingHeader.querySelector('button.hover\\:text-red-500') as HTMLElement;
|
|
await user.click(trashBtn);
|
|
|
|
await waitFor(() => {
|
|
expect(screen.queryByText('Clothing')).not.toBeInTheDocument();
|
|
expect(screen.queryByText('T-shirt')).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-015: renaming an item inline updates its name', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [item1] })
|
|
),
|
|
http.put('/api/admin/packing-templates/1/items/100', async () =>
|
|
HttpResponse.json({ success: true })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('T-shirt');
|
|
|
|
// Find the Edit2 button in the T-shirt item row (opacity-0 group-hover buttons)
|
|
const itemRow = screen.getByText('T-shirt').closest('div')!;
|
|
const editBtn = Array.from(itemRow.querySelectorAll('button')).find(
|
|
b => b.className.includes('opacity-0')
|
|
) as HTMLElement | undefined;
|
|
if (editBtn) {
|
|
await user.click(editBtn);
|
|
} else {
|
|
// Directly click the first button in the item row
|
|
const btns = itemRow.querySelectorAll('button');
|
|
await user.click(btns[0] as HTMLElement);
|
|
}
|
|
|
|
const input = screen.getByDisplayValue('T-shirt');
|
|
await user.clear(input);
|
|
await user.type(input, 'Tank Top{Enter}');
|
|
expect(await screen.findByText('Tank Top')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-016: deleting an item removes it from the list', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [item1, item2] })
|
|
),
|
|
http.delete('/api/admin/packing-templates/1/items/100', () =>
|
|
HttpResponse.json({ success: true })
|
|
)
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('T-shirt');
|
|
expect(screen.getByText('Shorts')).toBeInTheDocument();
|
|
|
|
// Find the Trash2 button in the T-shirt row
|
|
const itemRow = screen.getByText('T-shirt').closest('div')!;
|
|
const trashBtns = Array.from(itemRow.querySelectorAll('button')).filter(
|
|
b => b.className.includes('opacity-0')
|
|
);
|
|
// Second opacity-0 button is the delete (trash) button
|
|
const trashBtn = trashBtns[1] || trashBtns[0];
|
|
await user.click(trashBtn as HTMLElement);
|
|
|
|
await waitFor(() => expect(screen.queryByText('T-shirt')).not.toBeInTheDocument());
|
|
expect(screen.getByText('Shorts')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-017: Escape cancels add category without saving', async () => {
|
|
const user = userEvent.setup();
|
|
let postCalled = false;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [], items: [] })
|
|
),
|
|
http.post('/api/admin/packing-templates/1/categories', async () => {
|
|
postCalled = true;
|
|
return HttpResponse.json({ category: { id: 20, template_id: 1, name: 'Ignored', sort_order: 1 } });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Add category');
|
|
await user.click(screen.getByText('Add category'));
|
|
const catInput = screen.getByPlaceholderText('Category name (e.g. Clothing)');
|
|
await user.type(catInput, 'Test{Escape}');
|
|
await waitFor(() =>
|
|
expect(screen.queryByPlaceholderText('Category name (e.g. Clothing)')).not.toBeInTheDocument()
|
|
);
|
|
expect(postCalled).toBe(false);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-018: Escape cancels add item without saving', async () => {
|
|
const user = userEvent.setup();
|
|
let postCalled = false;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.get('/api/admin/packing-templates/1', () =>
|
|
HttpResponse.json({ categories: [cat1], items: [] })
|
|
),
|
|
http.post('/api/admin/packing-templates/1/categories/10/items', async () => {
|
|
postCalled = true;
|
|
return HttpResponse.json({ item: { id: 102, category_id: 10, name: 'Ignored', sort_order: 2 } });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
await screen.findByText('Clothing');
|
|
|
|
const clothingHeader = screen.getByText('Clothing').closest('div')!;
|
|
const addItemBtn = clothingHeader.querySelector('button') as HTMLElement;
|
|
await user.click(addItemBtn);
|
|
|
|
const itemInput = screen.getByPlaceholderText('Item name');
|
|
await user.type(itemInput, 'Test{Escape}');
|
|
await waitFor(() =>
|
|
expect(screen.queryByPlaceholderText('Item name')).not.toBeInTheDocument()
|
|
);
|
|
expect(postCalled).toBe(false);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-019: Escape cancels template rename without saving', async () => {
|
|
const user = userEvent.setup();
|
|
let putCalled = false;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () =>
|
|
HttpResponse.json({ templates: [tmpl1] })
|
|
),
|
|
http.put('/api/admin/packing-templates/1', async () => {
|
|
putCalled = true;
|
|
return HttpResponse.json({ success: true });
|
|
})
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
|
|
const beachTripText = screen.getByText('Beach Trip');
|
|
const row = beachTripText.closest('div')!.parentElement!;
|
|
const editBtn = row.querySelector('button.hover\\:bg-slate-100') as HTMLElement | null;
|
|
if (editBtn) {
|
|
await user.click(editBtn);
|
|
} else {
|
|
const allBtns = screen.getAllByRole('button');
|
|
const editBtns = allBtns.filter(b => b.className.includes('hover:bg-slate-100'));
|
|
await user.click(editBtns[0]);
|
|
}
|
|
|
|
const input = screen.getByDisplayValue('Beach Trip');
|
|
await user.type(input, '{Escape}');
|
|
await waitFor(() => expect(screen.queryByDisplayValue('Beach Trip')).not.toBeInTheDocument());
|
|
expect(putCalled).toBe(false);
|
|
// Original name should be restored
|
|
expect(screen.getByText('Beach Trip')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-020: X button on create template input dismisses it', async () => {
|
|
const user = userEvent.setup();
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('No templates created yet');
|
|
await user.click(screen.getByRole('button', { name: /new template/i }));
|
|
expect(screen.getByPlaceholderText('Template name (e.g. Beach Holiday)')).toBeInTheDocument();
|
|
|
|
// Find the X (cancel) button in the create row — it's the last button in the create row
|
|
const createRow = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)').closest('div')!;
|
|
const createRowButtons = Array.from(createRow.querySelectorAll('button'));
|
|
const cancelBtn = createRowButtons[createRowButtons.length - 1] as HTMLElement;
|
|
await user.click(cancelBtn);
|
|
|
|
await waitFor(() =>
|
|
expect(screen.queryByPlaceholderText('Template name (e.g. Beach Holiday)')).not.toBeInTheDocument()
|
|
);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-021: a failing template list toasts and shows the empty state', async () => {
|
|
server.use(http.get('/api/admin/packing-templates', () => HttpResponse.error()));
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
|
|
expect(await screen.findByText('Failed to load templates')).toBeInTheDocument();
|
|
expect(screen.getByText('No templates created yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-022: a failing expand toasts and leaves the template without content', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.error()),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await screen.findByText('Beach Trip');
|
|
|
|
await user.click(screen.getByText('Beach Trip'));
|
|
|
|
expect(await screen.findByText('Failed to load templates')).toBeInTheDocument();
|
|
expect(screen.getByText('Add category')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-023: an empty name is not submitted and a failing create toasts', async () => {
|
|
const user = userEvent.setup();
|
|
let posts = 0;
|
|
server.use(
|
|
http.post('/api/admin/packing-templates', () => {
|
|
posts += 1;
|
|
return HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await screen.findByText('No templates created yet');
|
|
|
|
await user.click(screen.getByRole('button', { name: /new template/i }));
|
|
const input = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)');
|
|
await user.type(input, ' {Enter}');
|
|
expect(posts).toBe(0);
|
|
|
|
await user.clear(input);
|
|
await user.type(input, 'Ski trip{Enter}');
|
|
expect(await screen.findByText('Failed to create template')).toBeInTheDocument();
|
|
expect(posts).toBe(1);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-024: deleting the expanded template collapses it, a failing delete toasts', async () => {
|
|
const user = userEvent.setup();
|
|
let calls = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [item1] })),
|
|
http.delete('/api/admin/packing-templates/1', () => {
|
|
calls += 1;
|
|
return calls === 1
|
|
? HttpResponse.json({ error: 'in use' }, { status: 500 })
|
|
: HttpResponse.json({ success: true });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'Clothing');
|
|
|
|
await user.click(templateButtons('Beach Trip')[3]);
|
|
expect(await screen.findByText('Failed to delete template')).toBeInTheDocument();
|
|
expect(screen.getByText('Clothing')).toBeInTheDocument();
|
|
|
|
await user.click(templateButtons('Beach Trip')[3]);
|
|
await screen.findByText('Template deleted');
|
|
await waitFor(() => expect(screen.queryByText('Clothing')).not.toBeInTheDocument());
|
|
expect(screen.getByText('No templates created yet')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-025: a blank rename closes the editor, a failing rename toasts, blur commits', async () => {
|
|
const user = userEvent.setup();
|
|
let puts = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.put('/api/admin/packing-templates/1', () => {
|
|
puts += 1;
|
|
return HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await screen.findByText('Beach Trip');
|
|
|
|
await user.click(templateButtons('Beach Trip')[2]);
|
|
await user.clear(screen.getByDisplayValue('Beach Trip'));
|
|
await user.type(screen.getByRole('textbox'), '{Enter}');
|
|
await waitFor(() => expect(screen.getByText('Beach Trip')).toBeInTheDocument());
|
|
expect(puts).toBe(0);
|
|
|
|
// Blurring the field commits the pending name — here the request fails
|
|
await user.click(templateButtons('Beach Trip')[2]);
|
|
const input = screen.getByDisplayValue('Beach Trip');
|
|
await user.clear(input);
|
|
await user.type(input, 'Winter');
|
|
await user.tab();
|
|
expect(await screen.findByText('Failed to save')).toBeInTheDocument();
|
|
expect(puts).toBe(1);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-026: a blank category is not posted, a failing add toasts and X cancels', async () => {
|
|
const user = userEvent.setup();
|
|
let posts = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [], items: [] })),
|
|
http.post('/api/admin/packing-templates/1/categories', () => {
|
|
posts += 1;
|
|
return HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'Add category');
|
|
|
|
await user.click(screen.getByText('Add category'));
|
|
const catInput = screen.getByPlaceholderText('Category name (e.g. Clothing)');
|
|
await user.type(catInput, ' {Enter}');
|
|
expect(posts).toBe(0);
|
|
|
|
await user.clear(catInput);
|
|
await user.type(catInput, 'Electronics{Enter}');
|
|
expect(await screen.findByText('Failed to save')).toBeInTheDocument();
|
|
|
|
const cancel = within(catInput.parentElement as HTMLElement).getAllByRole('button')[1];
|
|
await user.click(cancel);
|
|
await waitFor(() =>
|
|
expect(screen.queryByPlaceholderText('Category name (e.g. Clothing)')).not.toBeInTheDocument(),
|
|
);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-027: a blank category rename closes the editor and a failing rename toasts', async () => {
|
|
const user = userEvent.setup();
|
|
let puts = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [] })),
|
|
http.put('/api/admin/packing-templates/1/categories/10', () => {
|
|
puts += 1;
|
|
return HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'Clothing');
|
|
|
|
await user.click(categoryButtons('Clothing')[1]);
|
|
await user.clear(screen.getByDisplayValue('Clothing'));
|
|
await user.tab();
|
|
await waitFor(() => expect(screen.getByText('Clothing')).toBeInTheDocument());
|
|
expect(puts).toBe(0);
|
|
|
|
await user.click(categoryButtons('Clothing')[1]);
|
|
const catInput = screen.getByDisplayValue('Clothing');
|
|
await user.clear(catInput);
|
|
await user.type(catInput, 'Shoes{Enter}');
|
|
expect(await screen.findByText('Failed to save')).toBeInTheDocument();
|
|
expect(puts).toBe(1);
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-028: a failing category delete toasts and keeps the category', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [item1] })),
|
|
http.delete('/api/admin/packing-templates/1/categories/10', () => HttpResponse.error()),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'Clothing');
|
|
|
|
await user.click(categoryButtons('Clothing')[2]);
|
|
|
|
expect(await screen.findByText('Failed to delete category')).toBeInTheDocument();
|
|
expect(screen.getByText('Clothing')).toBeInTheDocument();
|
|
expect(screen.getByText('T-shirt')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-029: the add-item button posts the item, a failing add toasts and X closes the row', async () => {
|
|
const user = userEvent.setup();
|
|
let posts = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [] })),
|
|
http.post('/api/admin/packing-templates/1/categories/10/items', () => {
|
|
posts += 1;
|
|
return posts === 1
|
|
? HttpResponse.json({ item: { id: 102, category_id: 10, name: 'Sandals', sort_order: 0 } })
|
|
: HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'Clothing');
|
|
|
|
await user.click(categoryButtons('Clothing')[0]);
|
|
const itemInput = screen.getByPlaceholderText('Item name');
|
|
const addRow = itemInput.parentElement as HTMLElement;
|
|
expect(within(addRow).getAllByRole('button')[0]).toBeDisabled();
|
|
|
|
await user.type(itemInput, 'Sandals');
|
|
await user.click(within(addRow).getAllByRole('button')[0]);
|
|
await screen.findByText('Sandals');
|
|
|
|
await user.type(screen.getByPlaceholderText('Item name'), 'Towel');
|
|
await user.click(within(addRow).getAllByRole('button')[0]);
|
|
expect(await screen.findByText('Failed to save')).toBeInTheDocument();
|
|
|
|
await user.click(within(addRow).getAllByRole('button')[1]);
|
|
await waitFor(() => expect(screen.queryByPlaceholderText('Item name')).not.toBeInTheDocument());
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-030: the item editor commits on the check button, cancels on X and ignores a blank name', async () => {
|
|
const user = userEvent.setup();
|
|
let puts = 0;
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [item1] })),
|
|
http.put('/api/admin/packing-templates/1/items/100', () => {
|
|
puts += 1;
|
|
return puts === 1
|
|
? HttpResponse.json({ success: true })
|
|
: HttpResponse.json({ error: 'nope' }, { status: 500 });
|
|
}),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'T-shirt');
|
|
|
|
// A blank name just closes the editor
|
|
await user.click(itemButtons('T-shirt')[0]);
|
|
const blank = screen.getByDisplayValue('T-shirt');
|
|
await user.clear(blank);
|
|
await user.click(within(blank.parentElement as HTMLElement).getAllByRole('button')[0]);
|
|
await waitFor(() => expect(screen.getByText('T-shirt')).toBeInTheDocument());
|
|
expect(puts).toBe(0);
|
|
|
|
// X discards the pending name
|
|
await user.click(itemButtons('T-shirt')[0]);
|
|
const editing = screen.getByDisplayValue('T-shirt');
|
|
await user.clear(editing);
|
|
await user.type(editing, 'Discarded');
|
|
await user.click(within(editing.parentElement as HTMLElement).getAllByRole('button')[1]);
|
|
await waitFor(() => expect(screen.getByText('T-shirt')).toBeInTheDocument());
|
|
expect(puts).toBe(0);
|
|
|
|
// The check button commits
|
|
await user.click(itemButtons('T-shirt')[0]);
|
|
const editing2 = screen.getByDisplayValue('T-shirt');
|
|
await user.clear(editing2);
|
|
await user.type(editing2, 'Tank Top');
|
|
await user.click(within(editing2.parentElement as HTMLElement).getAllByRole('button')[0]);
|
|
await screen.findByText('Tank Top');
|
|
expect(puts).toBe(1);
|
|
|
|
// A failing rename keeps the editor open and toasts
|
|
await user.click(itemButtons('Tank Top')[0]);
|
|
const editing3 = screen.getByDisplayValue('Tank Top');
|
|
await user.clear(editing3);
|
|
await user.type(editing3, 'Vest{Enter}');
|
|
expect(await screen.findByText('Failed to save')).toBeInTheDocument();
|
|
expect(screen.getByDisplayValue('Vest')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-031: a failing item delete toasts and keeps the item', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [item1] })),
|
|
http.delete('/api/admin/packing-templates/1/items/100', () => HttpResponse.error()),
|
|
);
|
|
render(<><ToastContainer /><PackingTemplateManager /></>);
|
|
await expandBeachTrip(user, 'T-shirt');
|
|
|
|
await user.click(itemButtons('T-shirt')[1]);
|
|
|
|
expect(await screen.findByText('Failed to delete item')).toBeInTheDocument();
|
|
expect(screen.getByText('T-shirt')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-ADMIN-PKG-032: the chevron button expands and collapses the template', async () => {
|
|
const user = userEvent.setup();
|
|
server.use(
|
|
http.get('/api/admin/packing-templates', () => HttpResponse.json({ templates: [tmpl1] })),
|
|
http.get('/api/admin/packing-templates/1', () => HttpResponse.json({ categories: [cat1], items: [item1] })),
|
|
);
|
|
render(<PackingTemplateManager />);
|
|
await screen.findByText('Beach Trip');
|
|
|
|
await user.click(templateButtons('Beach Trip')[0]);
|
|
await screen.findByText('Clothing');
|
|
|
|
await user.click(templateButtons('Beach Trip')[0]);
|
|
await waitFor(() => expect(screen.queryByText('Clothing')).not.toBeInTheDocument());
|
|
});
|
|
});
|