Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Add browser test suite

Aperta
  • Qualcosa non va?
#39 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
github-actions, react, typescript
Ambito
testing-qa

Direzione di ricerca

Start with the hook source and the contentEditable editing paths it drives, then copy the browser-test setup from react-live (vitest.browser.mts and its stories/ folder). Add the npm run test script, keep it out of npm run check, and add a CI job that installs Chromium and runs the suite on the React 18.0.0 leg. Done when the checklist items are covered, the caret regression test for #37 passes, and CONTRIBUTING.md explains how to run the suite.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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 #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.

Lingua principale
TypeScript
Stelle
620
Fork
16
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di FormidableLabs/use-editable

Tutte le issue di FormidableLabs/use-editable

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.