fix: refactors toast error rendering (#13252)

Fixes #13191

- Render a single html element for single error messages
- Preserve ul structure for multiple errors
- Updates tests to check for both cases

packages/ui/src/elements/Toasts/fieldErrors.tsx

@@ -63,11 +63,15 @@ export function FieldErrorsToast({ errorMessage }) {
     <div>
       {message}
       {Array.isArray(errors) && errors.length > 0 ? (
+        errors.length === 1 ? (
+          <span data-testid="field-error">{errors[0]}</span>
+        ) : (
           <ul data-testid="field-errors">
             {errors.map((error, index) => {
               return <li key={index}>{error}</li>
             })}
           </ul>
+        )
       ) : null}
     </div>
   )

test/helpers/assertToastErrors.ts

@@ -11,19 +11,24 @@ export async function assertToastErrors({
   errors: string[]
   page: Page
 }): Promise<void> {
-  const message =
-    errors.length === 1
+  const isSingleError = errors.length === 1
+  const message = isSingleError
     ? 'The following field is invalid:'
     : `The following fields are invalid (${errors.length}):`
-  await expect(
-    page.locator('.payload-toast-container li').filter({ hasText: message }),
-  ).toBeVisible()
+
+  // Check the intro message text
+  await expect(page.locator('.payload-toast-container')).toContainText(message)
+
+  // Check single error
+  if (isSingleError) {
+    await expect(page.locator('.payload-toast-container [data-testid="field-error"]')).toHaveText(
+      errors[0]!,
+    )
+  } else {
+    // Check multiple errors
+    const errorItems = page.locator('.payload-toast-container [data-testid="field-errors"] li')
     for (let i = 0; i < errors.length; i++) {
-    const error = errors[i]
-    if (error) {
-      await expect(
-        page.locator('.payload-toast-container [data-testid="field-errors"] li').nth(i),
-      ).toHaveText(error)
+      await expect(errorItems.nth(i)).toHaveText(errors[i]!)
     }
   }