test(ui): a refused form submit is said once, by its banner

Co-authored-by: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L9qibxQtKRyLyL6eK14pgY

Author: claude

ui/packages/components/src/renderers/form/__tests__/fieldtab-visiblewhen-6237.test.tsx

@@ -238,8 +238,9 @@ describe('#6237 — a tab predicate gates the whole tab', () => {
     fireEvent.click(submitBtn());
 
     await waitFor(() => expect(screen.getByText(message)).toBeTruthy());
-    expect(toastError).toHaveBeenCalledTimes(1);
-    expect(String(toastError.mock.calls[0][0])).toBe(message);
+    // Said once, by the banner (objectstack-ai/objectstack#27520).
+    expect(screen.getByRole('alert').textContent).toBe(message);
+    expect(toastError).not.toHaveBeenCalled();
     // The hidden tab is never activated to "reveal" a field it cannot draw.
     expect(trigger()).toBeNull();
     expect(screen.getByRole('tab', { name: /basics/i })).toHaveAttribute('data-state', 'active');

ui/packages/components/src/renderers/form/__tests__/form-invalid-toast-joiner.test.tsx

@@ -87,11 +87,16 @@ function renderFormIn(language: string) {
   );
 }
 
+/**
+ * The refusal as the form says it: its banner, the one message a refused
+ * submit raises (objectstack-ai/objectstack#27520 retired the toast copy).
+ */
 async function toastTextAfterSubmit(language: string): Promise<string> {
   renderFormIn(language);
   fireEvent.click(screen.getByRole('button', { name: /create/i }));
-  await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
-  return String(toastErrorSpy.mock.calls[0][0]);
+  const banner = await screen.findByRole('alert');
+  expect(toastErrorSpy).not.toHaveBeenCalled();
+  return banner.textContent ?? '';
 }
 
 describe('form renderer — refused-submit field list joiner (objectstack#5407)', () => {

ui/packages/components/src/renderers/form/__tests__/form-one-toast-per-refusal-13340.test.tsx

@@ -7,18 +7,17 @@
  */
 
 /**
- * A refused save raises ONE error toast (objectui#13340).
+ * A refused save is said ONCE (objectui#13340, objectstack-ai/objectstack#27520).
  *
  * The console's record form (`ModalForm`, `RecordFormPage`'s `ObjectForm`)
  * hands this renderer an `onSubmit` that writes through the data source and,
  * on a refusal, rethrows it. This renderer is the one that reports it: the
- * banner above the fields, plus a toast for when the banner has scrolled out
- * of view. The toast is raised under the form's own outcome id, so a retry
- * that is refused again REPLACES the previous toast instead of stacking a
- * second copy beside it.
+ * banner above the fields, brought into view each time it is raised, and no
+ * error toast repeating it. A retry that is refused again keeps that one
+ * banner rather than stacking a second message beside it.
  *
  * Pinned on the toast calls themselves (every `toast.error` this form makes,
- * undeduplicated), not on what sonner ends up showing, so a second raiser here
+ * undeduplicated), not on what sonner ends up showing, so a raiser here
  * cannot hide behind sonner's id replacement.
  */
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
@@ -33,12 +32,14 @@ import '../../../renderers';
 const REFUSAL = 'A record with this value already exists';
 
 let toastErrorSpy: ReturnType<typeof vi.spyOn>;
+let scrolled: Element[];
 
 beforeEach(() => {
   toastErrorSpy = vi.spyOn(toast, 'error').mockImplementation(() => 'id' as any);
-  if (!(Element.prototype as any).scrollIntoView) {
-    (Element.prototype as any).scrollIntoView = () => {};
-  }
+  scrolled = [];
+  (Element.prototype as any).scrollIntoView = function (this: Element) {
+    scrolled.push(this);
+  };
 });
 
 afterEach(() => {
@@ -70,30 +71,33 @@ function renderRefusingForm() {
 
 const create = () => fireEvent.click(screen.getByRole('button', { name: /create/i }));
 
-describe('form renderer — one refusal, one error toast (objectui#13340)', () => {
-  it('a refused submit raises exactly one error toast, with the server`s sentence', async () => {
+describe('form renderer — one refusal, one message (objectui#13340, objectstack-ai/objectstack#27520)', () => {
+  it('a refused submit draws one banner, scrolled into view, and raises no error toast', async () => {
     renderRefusingForm();
     create();
 
     await waitFor(() => expect(refuse).toHaveBeenCalledTimes(1));
-    // The banner is the settle signal: it is set in the same catch as the toast.
-    await screen.findByText(REFUSAL);
-    expect(toastErrorSpy).toHaveBeenCalledTimes(1);
-    expect(toastErrorSpy.mock.calls[0][0]).toBe(REFUSAL);
+    // The banner is the settle signal: it is set in the same catch.
+    const banner = (await screen.findByText(REFUSAL)).closest('[role="alert"]');
+    expect(banner).not.toBeNull();
+    expect(screen.getAllByRole('alert')).toHaveLength(1);
+    await waitFor(() => expect(scrolled).toContain(banner));
+    expect(toastErrorSpy).not.toHaveBeenCalled();
   });
 
-  it('a refused retry raises one more, under the same id, so it replaces the first', async () => {
+  it('a refused retry keeps one banner, brings it into view again, and still raises no toast', async () => {
     refuse.mockClear();
     renderRefusingForm();
     create();
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalledTimes(1));
+    await screen.findByText(REFUSAL);
+    await waitFor(() => expect(scrolled.length).toBe(1));
 
     create();
     await waitFor(() => expect(refuse).toHaveBeenCalledTimes(2));
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(scrolled.length).toBe(2));
 
-    const [first, second] = toastErrorSpy.mock.calls.map((c: unknown[]) => (c[1] as { id?: unknown } | undefined)?.id);
-    expect(first).toBeDefined();
-    expect(second).toBe(first);
+    expect(screen.getAllByText(REFUSAL)).toHaveLength(1);
+    expect(screen.getAllByRole('alert')).toHaveLength(1);
+    expect(toastErrorSpy).not.toHaveBeenCalled();
   });
 });

ui/packages/components/src/renderers/form/__tests__/form-refusal-lines-28053.test.tsx

@@ -80,20 +80,13 @@ function bannerLines(container: HTMLElement): string[] {
   return items.length > 0 ? items.map((li) => li.textContent ?? '') : [banner.textContent ?? ''];
 }
 
-/** The toast's content, drawn, as text lines. */
-function toastLines(): string[] {
-  const content = toastErrorSpy.mock.calls.at(-1)![0] as React.ReactNode;
-  if (typeof content === 'string') return [content];
-  const { container } = render(<>{content}</>);
-  return Array.from(container.querySelectorAll('li')).map((li) => li.textContent ?? '');
-}
 
 const AMOUNT = 'Amount must be positive.';
 const NAME = 'Name is required for a forecast.';
 const BEST = 'Best case must be at least the amount.';
 
 describe('form renderer — one entry per failed validation rule (#28053)', () => {
-  it('two record-level rules: two banner lines and two toast lines, no joined summary', async () => {
+  it('two record-level rules: two banner lines, no joined summary, and no toast repeating them', async () => {
     const onSubmit = vi.fn().mockRejectedValue(
       ruleRefusal([{ field: '_record', message: AMOUNT }, { field: '_record', message: NAME }]),
     );
@@ -103,7 +96,8 @@ describe('form renderer — one entry per failed validation rule (#28053)', () =
 
     await waitFor(() => expect(container.querySelector('[role="alert"]')).toBeTruthy());
     expect(bannerLines(container)).toEqual([AMOUNT, NAME]);
-    expect(toastLines()).toEqual([AMOUNT, NAME]);
+    // The banner is the refusal's one message (objectstack-ai/objectstack#27520).
+    expect(toastErrorSpy).not.toHaveBeenCalled();
     expect(container.textContent).not.toContain('; ');
   });
 
@@ -119,7 +113,7 @@ describe('form renderer — one entry per failed validation rule (#28053)', () =
     await waitFor(() => expect(bestWrap.textContent).toContain(BEST));
     expect(bestWrap.querySelector('[aria-invalid="true"]')).toBeTruthy();
     expect(bannerLines(container)).toEqual([AMOUNT]);
-    expect(toastLines()).toEqual([AMOUNT]);
+    expect(toastErrorSpy).not.toHaveBeenCalled();
   });
 
   it('a single record-level rule is unchanged: its message, once', async () => {
@@ -128,9 +122,9 @@ describe('form renderer — one entry per failed validation rule (#28053)', () =
 
     submit();
 
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
-    expect(toastErrorSpy.mock.calls[0][0]).toBe(AMOUNT);
+    await waitFor(() => expect(container.querySelector('[role="alert"]')).toBeTruthy());
     expect(bannerLines(container)).toEqual([AMOUNT]);
+    expect(toastErrorSpy).not.toHaveBeenCalled();
     expect(container.querySelector('[aria-invalid="true"]')).toBeNull();
   });
 });

ui/packages/components/src/renderers/form/__tests__/form-server-field-errors.test.tsx

@@ -150,8 +150,10 @@ describe('form renderer — server-rejected fields', () => {
 
     submit();
 
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
-    expect(toastErrorSpy.mock.calls[0][0]).toBe('Owner is required');
+    // The banner is the refusal's one message (objectstack-ai/objectstack#27520).
+    const banner = await screen.findByRole('alert');
+    expect(banner.textContent).toBe('Owner is required');
+    expect(toastErrorSpy).not.toHaveBeenCalled();
   });
 
   it('a later client-side refusal retires the previous refusal`s banner and toast (objectstack#25874)', async () => {
@@ -196,7 +198,7 @@ describe('form renderer — server-rejected fields', () => {
 
     submit();
 
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
+    await screen.findByRole('alert');
     // Nothing is attributable to a field, so no input is marked or scrolled to.
     expect(scrollSpy).not.toHaveBeenCalled();
   });
@@ -242,8 +244,9 @@ describe('form renderer — unique-index refusal', () => {
 
     submit();
 
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
-    expect(String(toastErrorSpy.mock.calls[0][0])).toMatch(/A record with this value already exists/);
+    const banner = await screen.findByRole('alert');
+    expect(banner.textContent).toMatch(/A record with this value already exists/);
+    expect(toastErrorSpy).not.toHaveBeenCalled();
     expect(container.querySelector('[aria-invalid="true"]')).toBeNull();
   });
 });

ui/packages/components/src/renderers/form/__tests__/visibleWhen-fault-refuses-submit-8069.test.tsx

@@ -98,7 +98,13 @@ function renderForm(
 }
 
 const submit = () => fireEvent.click(screen.getByRole('button', { name: /create/i }));
-const lastToast = () => String(toastError.mock.calls.at(-1)?.[0] ?? '');
+/**
+ * The refusal as the form says it: its banner, the one message a refused
+ * submit raises; a toast repeating it is none of its business any more
+ * (objectstack-ai/objectstack#27520), so any toast call reads as a mismatch.
+ */
+const refusalText = () =>
+  toastError.mock.calls.length > 0 ? '(toasted)' : (screen.queryByRole('alert')?.textContent ?? '');
 
 /** A predicate the engine cannot parse: a fault whatever the record holds. */
 const BROKEN = 'record.stage ==';
@@ -116,7 +122,7 @@ describe('objectui#8069 — a faulted visibleWhen refuses the submit', () => {
 
     submit();
 
-    await waitFor(() => expect(lastToast()).toMatch(/visibleWhen rule of Discount could not be evaluated/));
+    await waitFor(() => expect(refusalText()).toMatch(/visibleWhen rule of Discount could not be evaluated/));
     expect(screen.getByText(/visibleWhen rule of Discount could not be evaluated/)).toBeTruthy();
     expect(onSubmit).not.toHaveBeenCalled();
   });
@@ -133,7 +139,7 @@ describe('objectui#8069 — a faulted visibleWhen refuses the submit', () => {
 
     submit();
 
-    await waitFor(() => expect(lastToast()).toMatch(/visibleWhen rule of Discount/));
+    await waitFor(() => expect(refusalText()).toMatch(/visibleWhen rule of Discount/));
     expect(toastError.mock.calls.some((c: unknown[]) => /check the highlighted fields/.test(String(c[0])))).toBe(false);
     expect(onSubmit).not.toHaveBeenCalled();
   });
@@ -153,7 +159,7 @@ describe('objectui#8069 — a faulted visibleWhen refuses the submit', () => {
     renderForm(base({ visibleWhen: '' }), onSubmit);
     expect(screen.getByLabelText('Discount')).toBeTruthy();
     submit();
-    await waitFor(() => expect(lastToast()).toMatch(/visibleWhen rule of Discount could not be evaluated/));
+    await waitFor(() => expect(refusalText()).toMatch(/visibleWhen rule of Discount could not be evaluated/));
     expect(onSubmit).not.toHaveBeenCalled();
     expect(warn.mock.calls.some((c: unknown[]) => String(c[0]).includes('[blank]'))).toBe(true);
   });
@@ -184,7 +190,7 @@ describe('objectui#8069 — a faulted visibleWhen refuses the submit', () => {
     const onSubmit = vi.fn().mockResolvedValue(undefined);
     renderForm(base({ visibleWhen: "previous.stage == 'won'" }), onSubmit);
     submit();
-    await waitFor(() => expect(lastToast()).toMatch(/visibleWhen rule of Discount/));
+    await waitFor(() => expect(refusalText()).toMatch(/visibleWhen rule of Discount/));
     expect(onSubmit).not.toHaveBeenCalled();
   });