My Forms

Form2の構成はForm1とほとんど同じです。違う点は、テキストボックスに文字を入力した後で文字を全て削除すると、「文字が入力されていません」というエラーメッセージが表示される点です。

onChangeイベントハンドラーで入力された文字数をカウントし、0になった時にエラーメッセージのstateを変化させ表示させます。

テストコードはこちらです。テストは、

1. 初回レンダリング時、変換結果が表示されるエリアに何も表示されていないこと
2. 初回レンダリング時、エラーメッセージが表示されていないこと
3. テキストボックスに文字が入力されていない時、ボタンがdisabledになっていること
4. テキストボックスに文字が入力されている時、ボタンがdisabledになっていないこと
5. テキストボックスに文字を入力してから削除した時、エラーメッセージが表示されること
6. フォームに名前を入力し送信ボタンをクリックした時、大文字になった名前が表示されること

を行っています。