Scope the task to a profile editing dialog. A user opens it, edits a nickname, and saves. Specify open, submitting, failed, and closed states and the controls available in each.
Separate React state and request behavior
Track the saved nickname, draft value, and request state separately. Use React Best Practices to inspect update boundaries and data fetching. Exercise a slow request and a failed response with fixtures. Confirm a failed save preserves the draft and a successful save updates the profile.
Run the keyboard journey
Open from the trigger using Enter. Check the initial focus and accessible dialog name. Use Tab and Shift+Tab to inspect the focus order, then close with Escape and verify focus returns to the trigger. Check whether action buttons and feedback remain visible at a narrow width.
Record regression cases
Use Webapp Testing to record opening, successful save, failed save, and cancellation. Assert visible outcomes. Reopen and check the agreed draft behavior. Record the browser, viewport, and test data.