Skip to content

Add browser test suite #39

Open
Open

Description

@ryan-roemer

use-editable has no tests. Add a browser test suite, following react-live's setup (vitest + @vitest/browser-playwright, stories run in real Chromium).

jsdom can't stand in here: it has no contentEditable editing model, so typing, selection, and caret behavior have to be exercised in a real browser.

Coverage to aim for

  • Typing: characters land in the right place, and onChange receives the right text and Position
  • Caret position: preserved across re-renders, including an unrelated parent re-render mid-keystroke (regression test for fix: don't restore a stale caret position onto content it wasn't computed against #37)
  • Undo / redo: Cmd/Ctrl+Z and Shift+Cmd/Ctrl+Z history
  • Indentation: opts.indentation Tab/Shift+Tab and backspace behavior
  • Edit API: update, insert (including negative offsets), move (offset and { row, column }), getState
  • opts.disabled: toggling it on and off
  • Line breaks: Enter, <br> handling, trailing newline

Setup

  • vitest browser config + Playwright Chromium (see react-live's vitest.browser.mts and stories/)
  • npm run test script (kept out of npm run check, like react-live, so the main check stays fast)
  • CI job that installs Chromium and runs the suite, including the React 18.0.0 compat leg
  • Document in CONTRIBUTING.md

Related: #38 (oxlint). Its hooks-order fix would benefit from these tests landing first.

Activity

  1. added a commit that references this issue on Oct 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions