Tone.jsをベースにブラウザでのライブコーディングを可能にするlive tone、使えなくもないという感じにまではできそうなのでコード編集要素を標準の textarea から高機能なコードエディタに変えることにしました。代表的なコード編集用コンポーネントと言えばCodeMirror、Ace、Monaco Editorあたりかと思いますが、今回は機能とサイズのバランスからAceを採用。React用のラッパーライブラリReact-Aceを使うことで textarea からの置き換えも次を調整するだけで済みました。
onchangeイベントハンドラの引数が標準と異なるので対応する- 幅と高さを
widthheight両プロパティで与える
これだけで済めばよかったのですがそうは問屋が卸さず、単体テストが失敗する状態に。Testing Libraryのuser-eventを使った次のコードが期待どおりに動きません。
await userEvent.type(
screen.getByRole('textbox'),
'Tone.Transport.start()'
)
(対象ページには textarea はひとつしかないので要素の取得自体は問題なし)
Webを検索したところuserEvent.pasteを使いましょうという情報を見つけたので試してみたところ状況改善せず。ただ同ページのコードがuser-event v13のものだったので最新のuser-event v14対応版に書き換えようとしたところ、ひょんなことから解決策にたどり着きました。
フォーカスを明示指定すると期待通りの動作になります。
const textbox = screen.getByRole('textbox')
textbox.focus()
await userEvent.type(
textbox,
'Tone.Transport.start()'
)
Testing Libraryを使った操作シミュレーションは丁寧にやりましょうという話でした。