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 ? (
-        <ul data-testid="field-errors">
+        errors.length === 1 ? (
-          {errors.map((error, index) => {
+          <span data-testid="field-error">{errors[0]}</span>
-            return <li key={index}>{error}</li>
+        ) : (
-          })}
+          <ul data-testid="field-errors">
-        </ul>
+            {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 =
+  const isSingleError = errors.length === 1
-    errors.length === 1
+  const message = isSingleError
-      ? 'The following field is invalid:'
+    ? 'The following field is invalid:'
-      : `The following fields are invalid (${errors.length}):`
+    : `The following fields are invalid (${errors.length}):`
-  await expect(
+
-    page.locator('.payload-toast-container li').filter({ hasText: message }),
+  // Check the intro message text
-  ).toBeVisible()
+  await expect(page.locator('.payload-toast-container')).toContainText(message)
-  for (let i = 0; i < errors.length; i++) {
+
-    const error = errors[i]
+  // Check single error
-    if (error) {
+  if (isSingleError) {
-      await expect(
+    await expect(page.locator('.payload-toast-container [data-testid="field-error"]')).toHaveText(
-        page.locator('.payload-toast-container [data-testid="field-errors"] li').nth(i),
+      errors[0]!,
-      ).toHaveText(error)
+    )
+  } else {
+    // Check multiple errors
+    const errorItems = page.locator('.payload-toast-container [data-testid="field-errors"] li')
+    for (let i = 0; i < errors.length; i++) {
+      await expect(errorItems.nth(i)).toHaveText(errors[i]!)
     }
   }