kobotoolbox / kpi / 29409608300

82%

master: 76%

Build Type

push

github

Committed by web-flow

Commit Message

test(frontend): use orval to generate MSW mocks DEV-2232 (#7219)

### 📣 Summary

Migrates from manually maintained API mocks to Orval-generated ones for
type-safe mocking in Storybook stories and tests. Ensures OpenAPI schema
is the single source of truth for both API types and mock data.

### 💭 Notes

Changes in this branch are quite extensive. Unfortunatelly enabling mock
generation through Orval spilled into type inconsistencies that needed
to be addressed.

**Orval MSW Integration**
- Configured Orval to generate TypeScript types and MSW v2 mock handlers
from OpenAPI schema
- Generated TypeScript model files in `jsapp/js/api/models/`
- Generated complete MSW handlers with mock factories in
`jsapp/js/api/react-query/`
- Updated all existing `.mocks.ts` files to use Orval-generated
factories instead of manual mocks

**Mock Generation Strategy**
- `mode: 'tags-split'` - Generates mocks in separate files to prevent
bundling faker/msw (~600KB) in production
- Structure: `react-query/module-name/index.ts` (runtime) +
`react-query/module-name/msw.ts` (mocks)
- Enables proper tree-shaking - production code never imports test
dependencies
- Mock imports: `from '#/api/react-query/module-name/msw'`
- Runtime imports unchanged: `from '#/api/react-query/module-name'`

**Post-Processing Scripts** (6 scripts run after Orval generation)
1. `orval-rename-to-index.js` - Renames `module/module.ts` →
`module/index.ts`, `module/module.msw.ts` → `module/msw.ts` for clean
imports
2. `orval-fix-referenced-additional-properties.js` - Fixes Orval bug
with `$ref` in `additionalProperties` ([issue
#1077](https://github.com/orval-labs/orval/issues/1077))
3. `orval-fix-mock-factory-type-assertions.js` - Adds `as TypeName` for
types with conflicting index signatures (updated for new file structure)
4. `orval-make-trailing-slash-optional.js` - Makes trailing slashes
optional in MSW URL patterns (Django REST Framework compatibility)
5. `orval-remove-mock-delays.js` - Removes `awa... (continued)

Coverage Stats

9363 of 12697 branches covered (73.74%)

23 of 41 new or added lines in 5 files covered. (56.1%)

4 existing lines in 2 files now uncovered.

30422 of 37321 relevant lines covered (81.51%)

5.52 hits per line