Skip to main content

Editor Tests

The Editor page (src/pages/Editor/index.jsx) is interaction-heavy, so coverage focuses on end-to-end behavior with React Testing Library.

Current coverage​

High-value behaviors to keep covered​

  • Empty state: direct navigation shows the “No SVG data found” panel.
  • Mode switch: aria-label flips and the container class toggles between colorMode and previewMode.
  • Shape reveal: tapping a supported primitive (path, rect, circle, polygon, ellipse) adds coloredRegion and keeps it applied on repeat taps (no toggle-off).

Supplying SVG in tests​

Render the page inside a router and pass state through MemoryRouter entries:

render(
  <MemoryRouter initialEntries={[{ pathname: '/editor', state: { svg: '<svg><path /></svg>' } }]}>
    <Editor />
  </MemoryRouter>
);

This avoids mocking useLocation and matches production usage.

Pointer and wheel events (practical notes)​

  • document.elementFromPoint can be stubbed to return the shape you want to toggle; restore it after each test.
  • Pan tests should move more than the ~5px threshold to be treated as a drag.
  • Wheel zoom can be asserted by reading the inline transform on the wrapper.
  • Pinch is multi-pointer; prefer unit-testing math in a helper if the logic is extracted.

Common pitfalls​

  • Remember act(...) around pointer/wheel interactions that change React state.
  • CSS modules hash class names; check .classList.contains(styles.coloredRegion) rather than string literals.
  • Keep tests colocated under src/pages/Editor/ (page-local) for discoverability.