gitea
122480cd46
Brings in the A4 (millimetre) report designer alongside the existing matrix editor, migrates the frontend from react-scripts to Vite/Vitest, and fixes four defects found while using the A4 band tools. Layout — layout.js now implements the standard banded-report model: everything prints where it was drawn, and a band growing per data row is the only thing that moves anything. Previously `paginate` re-flowed every band from the top margin, so a band placed halfway down the page previewed at the top, and `header` was treated as a page header and hoisted above the statics drawn before it. A header is a COLUMN header: it prints in place and repeats only on a continuation page. Statics now take part too — one drawn below a band keeps its drawn gap as that band grows, and follows onto the next page rather than vanishing when pushed past the bottom margin. The displacement is keyed on the band's design bottom, not on an instance's laid-out y: every row of a band shares one design position, so keying on the instance measured the gap from row 1 and let the static overlap rows 2..n. Band children — a child's x is relative to its band, as its y already was. layout() emitted it raw, so a field printed measured from the paper edge instead of the band's left margin. Instances now carry bandX. Band placement — a band's x comes from the page margins, so creation takes only the click's Y (the factory's x was being overwritten by the spread order) and dragging is locked to the vertical axis. Bands render as a strip, with top/bottom rules only, matching the matrix editor. fromApiReport reflows on load so reports saved with a stray x straighten themselves. Matrix bands are constrained to vertical too. Drag lifecycle — useElementDrag re-subscribed its document listeners on every render during a drag, because the effect depended on an unmemoized onDrag. Each re-subscribe removed the mouseup listener before adding the next, measured as add/remove/add/remove/add across two mousemoves, and a release landing in that gap was lost: the element kept following the cursor until the next click. Snapping made it routine, since a held guide stops x/y changing and leaves the guide overlay's render sitting between the move and the release. onDrag and dragData now go through refs so the effect depends on [isDragging] alone. Note: the matrix editor has no test coverage, so its band constraint is verified by reading only. The A4 suite is 201 passing tests. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2.8 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| vite-vitest-migration | Frontend build is Vite + Vitest (not CRA/Jest) — the JSX-in-.js trap, why axios no longer needs stubbing, and the jsdom border assertion gotcha |
|
The frontend migrated from Create React App / Jest to Vite + Vitest. Config
lives in frontend/vite.config.mjs (.mjs, not .js — Vite's native config
loader warns about ESM in a .js config).
Replaces the old jest-axios-esm note, which is now obsolete.
Vitest transforms axios fine, so the old blanket jest.mock('axios') hack is
gone. Three of the six a4 suites dropped it entirely. a4EntryPoints still
mocks axios, but for a behavioural reason: it drives the report auto-load via
api.get.mockResolvedValue(...), so the instance services/api.js builds at
import time must be a mock. Distinguish the two reasons before deleting a mock.
The JSX-in-.js trap — this one fails at BUILD time only. CRA's Babel
parsed JSX inside .js files; Vite does not by default. Setting
oxc: { include: /\.(m?ts|[jt]sx|js)$/, lang: 'jsx' } fixes the dev server and
Vitest, but not vite build: the bundled path (Rolldown,
builtin:vite-transform) derives the language from the file extension and
ignores lang. So a .js file containing JSX will pass tests and the dev
server, then fail the production build.
How to apply: any new production file containing JSX must be named .jsx.
The oxc override exists only so the existing a4 __tests__/*.test.js files
keep working. Importers use extensionless specifiers, so renaming a file
.js → .jsx needs no import changes (this is how print/printReport.jsx was
renamed without touching the dynamic import() in Main.jsx).
Env vars are import.meta.env.VITE_*, not process.env.REACT_APP_*;
process.env does not exist in the browser. The || 'http://localhost:…'
fallbacks are the offline-deployment safety net — keep them. The dev-server
port (5172, in vite.config.mjs) must match Django's CORS_ALLOWED_ORIGINS.
Renaming these vars means touching Dockerfile, docker-compose.yml,
.env.docker and the gitignored root .env too, or the deployed bundle
silently falls back to localhost.
Newer jsdom round-trips border: none. It now reports
borderStyle === 'none' with borderWidth === 'medium' (the CSS initial
keyword). Assert on borderStyle, not borderWidth === '' — the latter was
written around an old-jsdom quirk and passed vacuously. Two a4Elements tests
had to be corrected for this during the migration; the components were correct.
global.IS_REACT_ACT_ENVIRONMENT = true is no longer required (Vitest's
jsdom environment sets it), but it is harmless and still present in all six
suites.
Related: testing-react, a4-print-path, a4-entry-points