kobotoolbox / kpi / 27300886731

82%

master: 76%

push

github

refactor(deleteAccountBanner): make stories more stable DEV-2264 (#7144)

### 💭 Notes

Fixed flaky Storybook test for DeleteAccountBanner that randomly failed
in CI.

Changes here:
- `DeleteAccountBanner.tsx`
- Swapped out the manual `useEffect` + `fetchGet` pattern for
Orval/react-query `useAssetsList` hook (works better with MSW in
Storybook)
- Fixes the race condition where tests would sometimes run before the
mock API responded
- Added proper `isPending` handling so the button's disabled state is
consistent
- `DeleteAccountBanner.stories.tsx`
- Added `play` functions to all 4 stories (Default, UserHasAssets,
UserHasNoAssets, UserOwnsMMO)
  - Each one waits for auth AND data loading before running assertions
- Actually tests the UI behavior (button states, messages) instead of
just "did it render?"

AI joke: No more Schrödinger's test – it's either passing or failing,
never both! 🐱

The bug: the component fetched user assets async, but tests could run
before that finished. Sometimes the mock was fast, sometimes slow. React
Query + explicit waits = no more flaky tests.

### 👀 Preview steps

1. Run `npm run test:storybook` locally
2. 🟢 All DeleteAccountBanner stories pass consistently across chromium,
firefox, and webkit
3. 🟢 No more random CI failures on this component (try rerunning the
successful job?)

8053 of 12198 branches covered (66.02%)

27307 of 36241 relevant lines covered (75.35%)

3.41 hits per line