fix(post form): show validation errors inline

This commit is contained in:
Tommaso Casaburi
2026-05-16 16:30:32 +07:00
parent a86c523d17
commit 4acd4449ea
2 changed files with 27 additions and 12 deletions
@@ -379,7 +379,8 @@ describe('PostForm', () => {
expect(testState.handleUploadMock).toHaveBeenCalledTimes(1);
await clickByText(table as HTMLTableElement, 'post');
expect(globalThis.alert).toHaveBeenCalledWith('empty_comment_alert');
expect(globalThis.alert).not.toHaveBeenCalled();
expect(container.textContent).toContain('error: empty_comment_alert');
const textInputs = table?.querySelectorAll<HTMLInputElement>('input[type="text"]') || [];
const nameInput = textInputs[0];
@@ -395,12 +396,11 @@ describe('PostForm', () => {
expect(textarea).toBeTruthy();
expect(select).toBeTruthy();
(globalThis.alert as ReturnType<typeof vi.fn>).mockClear();
await dispatchInput(linkInput as HTMLInputElement, 'not-a-url');
await clickByText(table as HTMLTableElement, 'post');
expect(globalThis.alert).toHaveBeenCalledWith('invalid_url_alert');
expect(globalThis.alert).not.toHaveBeenCalled();
expect(container.textContent).toContain('error: invalid_url_alert');
(globalThis.alert as ReturnType<typeof vi.fn>).mockClear();
await dispatchInput(textarea as HTMLTextAreaElement, 'A valid body');
await dispatchInput(linkInput as HTMLInputElement, 'https://i.4cdn.org/gif/file.jpg');
await clickByText(table as HTMLTableElement, 'post');
@@ -410,7 +410,8 @@ describe('PostForm', () => {
await dispatchInput(linkInput as HTMLInputElement, '');
await clickByText(table as HTMLTableElement, 'post');
expect(globalThis.alert).toHaveBeenCalledWith('no_board_selected_warning');
expect(globalThis.alert).not.toHaveBeenCalled();
expect(container.textContent).toContain('error: no_board_selected_warning');
await dispatchChange(select as HTMLSelectElement, 'music-posting.eth');
await dispatchInput(nameInput as HTMLInputElement, 'Alice Cooper');
@@ -501,6 +502,20 @@ describe('PostForm', () => {
expect(textarea).toBeTruthy();
expect(container.textContent).toContain('offline board');
await clickByText(table as HTMLTableElement, 'post');
expect(globalThis.alert).not.toHaveBeenCalled();
expect(container.textContent).toContain('error: empty_comment_alert');
const textInputs = table?.querySelectorAll<HTMLInputElement>('input[type="text"]') || [];
const linkInput = textInputs[1];
expect(linkInput).toBeTruthy();
await dispatchInput(linkInput as HTMLInputElement, 'not-a-url');
await clickByText(table as HTMLTableElement, 'post');
expect(globalThis.alert).not.toHaveBeenCalled();
expect(container.textContent).toContain('error: invalid_url_alert');
await dispatchInput(linkInput as HTMLInputElement, '');
await dispatchInput(textarea as HTMLTextAreaElement, 'Reply body');
await clickByText(table as HTMLTableElement, 'post');
+7 -7
View File
@@ -382,11 +382,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
setFormError(null);
if (!currentTitle && !currentContent && !currentUrl) {
alert(t('empty_comment_alert'));
setFormError(`${t('error')}: ${t('empty_comment_alert')}`);
return;
}
if (currentUrl && !isValidPublishURL(currentUrl)) {
alert(t('invalid_url_alert'));
setFormError(`${t('error')}: ${t('invalid_url_alert')}`);
return;
}
const expiringMediaLinkAlert = currentUrl ? getExpiringMediaLinkAlert(currentUrl, t) : null;
@@ -396,12 +396,12 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
}
if (currentContent.length > 2000) {
alert(t('error') + ': ' + t('field_too_long'));
setFormError(`${t('error')}: ${t('field_too_long')}`);
return;
}
if ((isInAllView || isInSubscriptionsView || isInModView) && !publishPostOptions.communityAddress) {
alert(t('no_board_selected_warning'));
setFormError(`${t('error')}: ${t('no_board_selected_warning')}`);
return;
}
@@ -443,12 +443,12 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
setFormError(null);
if (!currentContent && !currentUrl) {
alert(t('empty_comment_alert'));
setFormError(`${t('error')}: ${t('empty_comment_alert')}`);
return;
}
if (currentUrl && !isValidPublishURL(currentUrl)) {
alert(t('invalid_url_alert'));
setFormError(`${t('error')}: ${t('invalid_url_alert')}`);
return;
}
const expiringMediaLinkAlert = currentUrl ? getExpiringMediaLinkAlert(currentUrl, t) : null;
@@ -458,7 +458,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
}
if (currentContent.length > 2000) {
alert(t('error') + ': ' + t('field_too_long'));
setFormError(`${t('error')}: ${t('field_too_long')}`);
return;
}