mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 07:26:30 +00:00
fix(trips): the trip form drops its complaint once you edit, and the typed date hint follows your language
"Title is required" stayed on screen after the title was typed, until the next save. Any edit in the trip form, desktop and phone, now clears the last save's complaint; the next save checks again. The keyboard date field always hinted DD.MM.YYYY, while it was filled and read back in the user's own order: a Korean user saw "2026. 12. 10." under a German hint. The hint is now the locale's own pattern (YYYY. MM. DD. in Korean, MM/DD/YYYY in US English), and the field's name is translated. Refs #2604
This commit is contained in:
@@ -116,6 +116,16 @@ describe('TripFormModal', () => {
|
||||
expect(await screen.findByText('Title is required')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-009b: typing a title clears the title error (#2604)', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<TripFormModal {...defaultProps} />);
|
||||
const [submitBtn] = screen.getAllByRole('button', { name: 'Create New Trip' }).slice(-1);
|
||||
await user.click(submitBtn as HTMLElement);
|
||||
expect(await screen.findByText('Title is required')).toBeInTheDocument();
|
||||
await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'P');
|
||||
expect(screen.queryByText('Title is required')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-TRIPFORM-010: typing title and submitting calls onSave', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue({ trip: buildTrip({ id: 99 }) });
|
||||
@@ -416,7 +426,7 @@ describe('TripFormModal', () => {
|
||||
// Changing the start of a dated trip must go through the date-shift choice step (#1288).
|
||||
const changeStartDate = async (user: ReturnType<typeof userEvent.setup>, iso: string) => {
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[0]);
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const input = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(input, { target: { value: iso } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
};
|
||||
@@ -931,7 +941,7 @@ describe('TripFormModal', () => {
|
||||
|
||||
await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'Open Ended');
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[0]);
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const input = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(input, { target: { value: '2026-04-10' } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
|
||||
@@ -951,12 +961,12 @@ describe('TripFormModal', () => {
|
||||
await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'Backwards');
|
||||
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[1]);
|
||||
const endInput = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const endInput = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(endInput, { target: { value: '2026-03-01' } });
|
||||
fireEvent.keyDown(endInput, { key: 'Enter' });
|
||||
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[0]);
|
||||
const startInput = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const startInput = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(startInput, { target: { value: '2026-01-01' } });
|
||||
fireEvent.keyDown(startInput, { key: 'Enter' });
|
||||
|
||||
@@ -1283,7 +1293,7 @@ describe('TripFormModal', () => {
|
||||
render(<TripFormModal {...defaultProps} trip={trip} onSave={onSave} />);
|
||||
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[1]);
|
||||
const endInput = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const endInput = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(endInput, { target: { value: '2036-01-01' } });
|
||||
fireEvent.keyDown(endInput, { key: 'Enter' });
|
||||
|
||||
@@ -1326,7 +1336,7 @@ describe('TripFormModal', () => {
|
||||
};
|
||||
const changeEndDate = async (user: ReturnType<typeof userEvent.setup>, iso: string) => {
|
||||
await user.click(screen.getAllByRole('button', { name: 'Enter date manually' })[1]);
|
||||
const input = screen.getByPlaceholderText('DD.MM.YYYY');
|
||||
const input = screen.getByRole('textbox', { name: 'Enter date manually' });
|
||||
fireEvent.change(input, { target: { value: iso } });
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
};
|
||||
|
||||
@@ -223,7 +223,9 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
|
||||
}
|
||||
}
|
||||
|
||||
const update = (field, value) => setFormData(prev => {
|
||||
// An edit answers whatever the last save complained about, so the complaint
|
||||
// goes with it rather than standing over the fixed field until the next save.
|
||||
const update = (field, value) => { setError(''); setFormData(prev => {
|
||||
const next = { ...prev, [field]: value }
|
||||
if (field === 'start_date' && value) {
|
||||
if (!prev.end_date || prev.end_date < value) {
|
||||
@@ -235,7 +237,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
|
||||
}
|
||||
}
|
||||
return next
|
||||
})
|
||||
}) }
|
||||
|
||||
/* The dashboard's shapes, in the app's own tokens.
|
||||
`.trek-dash` deliberately scopes its palette to that page, so none of its
|
||||
|
||||
Reference in New Issue
Block a user