fix(mosaic): resume machine actors after stop instead of resetting them

.changeset/mosaic-machine-activity-resume.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/package.json

@@ -87,7 +87,9 @@
     "playwright": "1.62.1",
     "qrcode.react": "4.2.0",
     "react": "catalog:react",
+    "react-19": "npm:react@19.2.8",
     "react-dom": "catalog:react",
+    "react-dom-19": "npm:react-dom@19.2.8",
     "tsdown": "catalog:repo",
     "vitest-axe": "^0.1.0"
   },

packages/mosaic/src/components/form/__tests__/use-form.concurrency.feature.test.tsx

@@ -0,0 +1,86 @@
+import { act, renderHook } from '@testing-library/react';
+import { Activity, type ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { deferred, tick } from '../../../__tests__/async';
+import type { FieldFeedback } from '../form-submit-error';
+import { useForm, type UseFormOptions } from '../use-form';
+
+function renderFormInActivity<TValues extends object>(options: UseFormOptions<TValues>) {
+  let mode: 'visible' | 'hidden' = 'visible';
+  const wrapper = ({ children }: { children: ReactNode }) => <Activity mode={mode}>{children}</Activity>;
+  const view = renderHook(() => useForm(options), { wrapper });
+  const setMode = (next: typeof mode) => {
+    mode = next;
+    act(() => view.rerender());
+  };
+  return { result: view.result, hide: () => setMode('hidden'), show: () => setMode('visible') };
+}
+
+describe.runIf(Activity)('useForm inside Activity', () => {
+  it('runs a submit queued behind an async check that settled while hidden', async () => {
+    const check = deferred<FieldFeedback | undefined>();
+    const onSubmit = vi.fn(() => Promise.resolve());
+    const form = renderFormInActivity({
+      initialValues: { password: '' },
+      fields: { password: { validateAsync: () => check.promise } },
+      onSubmit,
+    });
+    act(() => form.result.current.setValue('password', 'ab'));
+    act(() => form.result.current.submit());
+
+    form.hide();
+    await act(async () => {
+      check.resolve(undefined);
+      await tick();
+    });
+    form.show();
+    await act(tick);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({ password: 'ab' });
+    expect(form.result.current.isSubmitting).toBe(false);
+  });
+
+  it('finishes a submit that settled while hidden and keeps the submitted values', async () => {
+    const save = deferred<void>();
+    const onSubmit = vi.fn(() => save.promise);
+    const form = renderFormInActivity({ initialValues: { name: 'Acme' }, onSubmit });
+    act(() => form.result.current.setValue('name', 'Globex'));
+    act(() => form.result.current.submit());
+    expect(form.result.current.isSubmitting).toBe(true);
+
+    form.hide();
+    await act(async () => {
+      save.resolve();
+      await tick();
+    });
+    form.show();
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(form.result.current.isSubmitting).toBe(false);
+    act(() => form.result.current.submit());
+    expect(onSubmit).toHaveBeenCalledTimes(2);
+    expect(onSubmit).toHaveBeenLastCalledWith({ name: 'Globex' });
+  });
+
+  it('shows a submit error that arrived while hidden', async () => {
+    const save = deferred<void>();
+    const form = renderFormInActivity({
+      initialValues: { name: 'Acme' },
+      onSubmit: () => save.promise,
+      errorFallback: 'Could not save',
+    });
+    act(() => form.result.current.submit());
+
+    form.hide();
+    await act(async () => {
+      save.reject(new Error('boom'));
+      await tick();
+    });
+    form.show();
+
+    expect(form.result.current.isSubmitting).toBe(false);
+    expect(form.result.current.error).toBe('Could not save');
+  });
+});

packages/mosaic/src/features/user-profile/user-profile-email-section/__tests__/user-profile-email-section.concurrency.feature.test.tsx

@@ -0,0 +1,68 @@
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Activity } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { holdRequests, serveFapi, VERIFICATION_CODE } from '../../../../__tests__/feature/fake-fapi';
+import { fapiClient, fapiSession, fapiUser } from '../../../../__tests__/feature/fapi';
+import { renderWithClerk } from '../../../../__tests__/feature/render';
+import { UserProfileEmailSection } from '../user-profile-email-section';
+
+function signedIn() {
+  const user = fapiUser({ id: 'user_1', first_name: 'Alice', username: 'alicesmith', email_addresses: [] });
+  return { client: fapiClient([fapiSession({ id: 'sess_1', user })]) };
+}
+
+function inActivity(mode: 'visible' | 'hidden') {
+  return (
+    <Activity mode={mode}>
+      <UserProfileEmailSection />
+    </Activity>
+  );
+}
+
+describe.runIf(Activity)('the user profile email section inside Activity', () => {
+  it('keeps the code step after being hidden and shown again', async () => {
+    serveFapi(signedIn());
+    const view = await renderWithClerk(inActivity('visible'));
+    const actor = userEvent.setup();
+
+    await actor.click(screen.getByRole('button', { name: 'Add email' }));
+    await actor.type(screen.getByRole('textbox', { name: 'Email' }), 'new@example.com');
+    await actor.click(screen.getByRole('button', { name: 'Continue' }));
+    const code = await screen.findByRole('textbox', { name: 'Verification code' });
+    await waitFor(() => expect(code).not.toHaveAttribute('aria-disabled'));
+
+    act(() => view.rerender(inActivity('hidden')));
+    act(() => view.rerender(inActivity('visible')));
+
+    expect(screen.getByRole('dialog')).toBeVisible();
+    await actor.click(screen.getByRole('textbox', { name: 'Verification code' }));
+    await actor.keyboard(VERIFICATION_CODE);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.getByRole('group', { name: 'Email' })).toHaveTextContent('new@example.com');
+    expect(screen.getByRole('group', { name: 'Email' })).not.toHaveTextContent('Unverified');
+  });
+
+  it('keeps waiting for a code that was in flight when hidden', async () => {
+    serveFapi(signedIn());
+    const view = await renderWithClerk(inActivity('visible'));
+    const actor = userEvent.setup();
+    const prepare = holdRequests('post', '/v1/me/email_addresses/:id/prepare_verification');
+
+    await actor.click(screen.getByRole('button', { name: 'Add email' }));
+    await actor.type(screen.getByRole('textbox', { name: 'Email' }), 'new@example.com');
+    await actor.click(screen.getByRole('button', { name: 'Continue' }));
+    await waitFor(() => expect(prepare.requests).toHaveLength(1));
+
+    act(() => view.rerender(inActivity('hidden')));
+    prepare.release();
+    act(() => view.rerender(inActivity('visible')));
+
+    const code = await screen.findByRole('textbox', { name: 'Verification code' });
+    await waitFor(() => expect(code).not.toHaveAttribute('aria-disabled'));
+    await actor.click(code);
+    await actor.keyboard(VERIFICATION_CODE);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+});

packages/mosaic/src/features/user-profile/user-profile-phone-section/__tests__/user-profile-phone-section.concurrency.feature.test.tsx

@@ -0,0 +1,74 @@
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Activity } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { holdRequests, serveFapi, VERIFICATION_CODE } from '../../../../__tests__/feature/fake-fapi';
+import { fapiClient, fapiEnvironment, fapiSession, fapiUser } from '../../../../__tests__/feature/fapi';
+import { renderWithClerk } from '../../../../__tests__/feature/render';
+import { UserProfilePhoneSection } from '../user-profile-phone-section';
+
+function signedIn() {
+  const user = fapiUser({ id: 'user_1', first_name: 'Alice', username: 'alicesmith', phone_numbers: [] });
+  return {
+    environment: fapiEnvironment({ attributes: { phone_number: { enabled: true } } }),
+    client: fapiClient([fapiSession({ id: 'sess_1', user })]),
+  };
+}
+
+function inActivity(mode: 'visible' | 'hidden') {
+  return (
+    <Activity mode={mode}>
+      <UserProfilePhoneSection />
+    </Activity>
+  );
+}
+
+async function verify(actor: ReturnType<typeof userEvent.setup>) {
+  const code = await screen.findByRole('textbox', { name: 'Verification code' });
+  await waitFor(() => expect(code).not.toHaveAttribute('aria-disabled'));
+  await actor.click(code);
+  await actor.keyboard(VERIFICATION_CODE);
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  expect(screen.getByRole('group', { name: 'Phone' })).toHaveTextContent('+1 (801) 555-0100');
+  expect(screen.getByRole('group', { name: 'Phone' })).not.toHaveTextContent('Unverified');
+}
+
+describe.runIf(Activity)('the user profile phone section inside Activity', () => {
+  it('keeps the code step after being hidden and shown again', async () => {
+    serveFapi(signedIn());
+    const view = await renderWithClerk(inActivity('visible'));
+    const actor = userEvent.setup();
+
+    await actor.click(screen.getByRole('button', { name: 'Add phone number' }));
+    await actor.type(screen.getByRole('textbox', { name: 'Phone' }), '8015550100');
+    await actor.click(screen.getByRole('button', { name: 'Send code' }));
+    const code = await screen.findByRole('textbox', { name: 'Verification code' });
+    await waitFor(() => expect(code).not.toHaveAttribute('aria-disabled'));
+
+    act(() => view.rerender(inActivity('hidden')));
+    act(() => view.rerender(inActivity('visible')));
+
+    expect(screen.getByRole('dialog')).toBeVisible();
+    await verify(actor);
+  });
+
+  it('keeps waiting for a code that was in flight when hidden', async () => {
+    serveFapi(signedIn());
+    const view = await renderWithClerk(inActivity('visible'));
+    const actor = userEvent.setup();
+    const prepare = holdRequests('post', '/v1/me/phone_numbers/:id/prepare_verification');
+
+    await actor.click(screen.getByRole('button', { name: 'Add phone number' }));
+    await actor.type(screen.getByRole('textbox', { name: 'Phone' }), '8015550100');
+    await actor.click(screen.getByRole('button', { name: 'Send code' }));
+    await waitFor(() => expect(prepare.requests).toHaveLength(1));
+
+    act(() => view.rerender(inActivity('hidden')));
+    prepare.release();
+    act(() => view.rerender(inActivity('visible')));
+
+    expect(prepare.requests).toHaveLength(1);
+    await verify(actor);
+  });
+});