Repository: facebook/react
File: packages/react-dom/src/__tests__/ReactDOMForm-test.js (JavaScript)

Code before:
    //
    // The form should not reset yet because we need to update `defaultValue`
    // first. So we wait for the render to complete.
    await act(() => resolveText('Wait'));
    assertLog([]);
    // The DOM input is still dirty.
    expect(inputRef.current.value).toBe('  AcdLite  ');
    // The React tree is suspended.
    expect(divRef.current.textContent).toEqual('Current username: (empty)');

    // Unsuspend and finish rendering. Now the form should be reset.
    await act(() => resolveText('acdlite'));
    assertLog(['Current username: acdlite']);
    // The form was reset to the new value from the server.
    expect(inputRef.current.value).toBe('acdlite');
    expect(divRef.current.textContent).toEqual('Current username: acdlite');
  });

  it('multiple form submissions in rapid succession do not throw', async () => {
    const submitFormTwiceButtonRef = React.createRef();
    let actionCounter = 0;
    function App() {
      const formRef = React.createRef();
      // Submits the form twice in quick succession
      // This simulates a user clicking a button twice in rapid succession
      async function submitFormTwice() {
        formRef.current.requestSubmit();
        await new Promise(res => setTimeout(res, 1));
        formRef.current.requestSubmit();
      }

      // This is a userspace action. it must take a non-zero amount of time to
      // allow the form to be submitted again before the first one finishes.
      // Otherwise, the form transitions will be batched and will not run sepereately.
      async function submitForm() {
        actionCounter++;
        return new Promise(res => setTimeout(res, 1));
      }

      return (
        <>
          <form ref={formRef} action={submitForm}>
            <button type="submit">Submit</button>
          </form>
          <button ref={submitFormTwiceButtonRef} onClick={submitFormTwice}>
            Submit twice
          </button>
        </>
      );
    }


Review comment (suggestion):
Instead of doing this in the component, can you do it outside, like doing:

```js
await act(async () => {
      submitFormTwiceButtonRef.current.click();
      await waitFor(['Render']);
      submitFormTwiceButtonRef.current.click();
});
```

And a `Scheduler.log('Render');` in render.

This will test closer to what a real user interaction would be like.

Code after:
    //
    // The form should not reset yet because we need to update `defaultValue`
    // first. So we wait for the render to complete.
    await act(() => resolveText('Wait'));
    assertLog([]);
    // The DOM input is still dirty.
    expect(inputRef.current.value).toBe('  AcdLite  ');
    // The React tree is suspended.
    expect(divRef.current.textContent).toEqual('Current username: (empty)');

    // Unsuspend and finish rendering. Now the form should be reset.
    await act(() => resolveText('acdlite'));
    assertLog(['Current username: acdlite']);
    // The form was reset to the new value from the server.
    expect(inputRef.current.value).toBe('acdlite');
    expect(divRef.current.textContent).toEqual('Current username: acdlite');
  });

  it('parallel form submissions do not throw', async () => {
    const formRef = React.createRef();
    let resolve = null;
    function App() {
      async function submitForm() {
        Scheduler.log('Action');
        if (!resolve) {
          await new Promise(res => {
            resolve = res;
          });
        }
      }
      return <form ref={formRef} action={submitForm} />;
    }
    const root = ReactDOMClient.createRoot(container);
    await act(() => root.render(<App />));

    // Start first form submission
    await act(async () => {
      formRef.current.requestSubmit();
    });
    assertLog(['Action']);

    // Submit form again while first form action is still pending
    await act(async () => {
      formRef.current.requestSubmit();
      resolve(); // Resolve the promise to allow the first form action to complete
    });
    assertLog(['Action']);
  });

  it(
    'requestFormReset works with inputs that are not descendants ' +