最近世の中全体がフルリモートから出社回帰になっている1。朝電車に乗るととても混んでいるし、帰りもそこそこ混んでいる。 それに合わせてなのか、リモートワークでジュニア層の育成はできないとか、できるとか結構記事を見るようになった。 自分は2年ほど…

昨年、ニンテンドーカタログチケットの期限が来てしまうけどあまり取り替えたいものがない状況になった。あまりシューティングゲーム、しかもオンライン対戦ありのゲームは忙しくて好きではないので避けていた。しかし、なんか有名だしイカちゃんが可愛いか…

speakerdeck.com はてなブックマークやxでこの資料が話題になっていた。80%くらいは同意できるが、Slackの部分は個人的にはうーんと思った。特にtimesが好きではなくて、「timesじゃなくてチケット管理システムを使え」と思ってしまった。なんで好きじゃない…

雑感です。実力は同程度、または仕事が終わる人の方が能力値が低い状態を想定しています。 仕事が終わらない人の特徴 1回目のレビューが遅い。〆切ギリギリに出てくる。仕事がほとんど終わった後に初めて出てくる。 やり直しの幅が広いので直すのに時間がか…

正確な時間は忘れたが、そういう状態になったことがあった。 ある程度自力（ベッタリではなく、短期間でレビューを挟む程度で良い）状態に持っていくには何が必要だったか整理してみる。 最初に結論 数字が若い順に最優先で何とかする。大前提として本人が改…

UIコンポーネントからイベント発火したことをテストする 親子コンポーネントの連動をテストする際、子コンポーネントでイベント発火したことを親コンポーネントに伝えたか確認したいことがある。特に小コンポーネントで状態を加工して親コンポーネントに送る…

UIコンポーネントのカタログツールStorybookを使い、コンポーネントをセットアップする方法もある。StorybookはStoriesというファイルに「どのようなコンポーネントをStorybookに描画するか」を記載する。propsに応じて描画内容を出し分けることもできる1。 …

テストランナーを動かす前に「UIコンポーネントは今どういう状態なのか」をセットアップしなければいけない。UIコンポーネントが必須のpropsを持つ場合、propsを与えなければUIコンポーネントは動作しない。また、 特定の場面で挙動が変わる場合は特定の場面…

何かを上手くなりたいときはフィードバックを早くもらえるような習慣を身につけると良い。 プログラミング初学者が陥りがちなこと 最初から完成形を作ろうとしてしまう。完成形には次のものが含まれる。 実装後にどのように動けば良いか（仕様） どのように…

OJTをやっていると方法を説明する・やって見せる機会が何回も出てくる。例えばGitでコンフリクトしたとき解消する方法だったり、エラーが起きていて解消できないため手伝う（解消する）、ツールの使い方を示すなど。ここで手順だけ教えて「次は一人でできる…

Testing Libraryで<td>要素に関するテストを書く場合、getAllByRoleで<td>タグを取得する方法と<tr>タグで一度対象の列を取得したのち<td>タグを取得する方法がある。 <td>タグを直接取得する方法 getAllByRoleでARIA roleのcellを指定して取得できる。<td>（テーブルセル）は複数存</td></td></td></tr></td></td>…

テキスト入力フォームの特徴は「入力値をユーザーが好きに編集できる点」である。テストケースもフォームの値を編集した後UIが変わることを確かめたい場合が多い（例：入力値に応じてバリデーションチェックを行う）。フォーム入力はDOMイベントになるためus…

テキスト入力を行う<input type="text">1コンポーネントはWebアプリケーション開発を行う場合ほぼ必須となる。このテストケースの記載方法を覚えておくとあらゆる面で応用が効くためTODOを挙げて記載方法を確認していく。 TODO 苗字の入力フォームと名前の入力フォームが存在す…

ドロップダウンには複数の<option>を選択できるパターンが存在する。これをテストする例は探しても中々出てこないため、記載する。 複数要素は<select>にmultiple属性を設定することで実現できる。 export default function StayExtensionMultipleSelectBox() { return ( // </select></option>…

クリックすると複数の選択肢が表示され、一つまたは複数を選ぶことができるUIパーツを「ドロップダウン」「プルダウン」「セレクトボックス」などと表現する。HTML選択要素とも表現される。HTMLタグは<select>1と表現する。ここではMDN日本語ドキュメントに合わせt「</select>…

ラジオボタンやセレクトボックスのように、valueを持つHTMLタグがある。 UIコンポーネントテストを書く際、valueが意図通り設定できていることをテストしたい場面がある。 ハマってしまいやすいのでメモする。 ラジオボタンの値を取得したい場合 こういう実…

ラジオボタンやチェックボックスなど、クリックしたときchecked属性を切り替えてON・OFFを表現するUIコンポーネントがある。 これのテスト方法を毎回探し回っていたため、記録しておく。 ラジオボタンをクリックしたとき選択状態が切り替わるかテストする ラ…

ボタンクリックで表示・非表示を切り替えたい UIを開発しているとボタンをクリックすると指定要素の表示・非表示を切り替えたい場面が出てくる。これをUIコンポーネントテストに落とし込む場合、少し注意が必要となる。 理由は「見た目上は消えているがレン…

Testing Libraryで<button>要素に関するテストケースを書く場合、ボタン要素の取得はgetByRole()1を使うことをおすすめする。 getByRoleを使うと「〇〇ラベルのボタン要素」に対するテストであることを一目で例示できるためである。 getByRole()は各要素に紐づくWAI-</button>…

仕事の進め方や技術面など、何かを教えた後は「わかりました」と言われる。 しかし一度言われた程度で習慣が改善されたり、技術が身につくことはほとんどない。 額面通りに受け取ってしまうとこちらが勝手に期待してがっかりした…。みたいなことになる。 完…

テストランナーにはマッチャー（Matcher）1というAPIが存在する。これは、テストを実行するライブラリ（テストランナー）に「こんな検証をしてほしい」と伝えてテストを実行してもらうための関数である。マッチャーの使い方を知っていると、初めて出てくる仕…

UIコンポーネントテストでは「ボタンをクリックするとテキストが表示されることを確かめたい」など、ユーザーの操作を再現したい場面が出てくる。 ユーザー操作の種類は無限にあるように見えるが、考え方を身につけていればUIコンポーネントテストを書ける。…

UIコンポーネントテストで鬼門となるのは「テスト対象の要素を取得する」ことである。 要素が取得できないとそもそもテストしようがないのである。UIコンポーネントパーツはお決まりのパターンがあるので真似れば良いが、100%参考にできるわけでもない。また…

ここでの初期状態とはUIコンポーネントテストを書くとき設定するpropsのことである。 propsが複数ある場合、全てのパターンを網羅しようとすると組み合わせの数次第ではテスト数が膨大になる。 すると、テストケースの維持やメンテナンスが難しくなる。 自動…

UIコンポーネントテストをいきなり書くのは難しい。最初にテストを書く流れを抑えたあと書き始めると良い。 テスト用ライブラリの思想を理解する（最初の1回のみ） UIコンポーネントの仕様を言語化する 言語化したものを元にTODOリストを作る TODOリストを元…

UIコンポーネントテストを書く行為は後回しになりやすい。それは難しさが要因に含まれているからと考えられる。 どのような部分が難しいのだろうか。 セットアップが難しいから UIコンポーネントを動かすためにはブラウザ環境を擬似的に再現する必要がある。…

UIコンポーネントテストは単体テストと似ている面もありつつ、異なる点も存在する。両者の違いを明確にすることで更に理解を深めたい。 単体テストとは 『【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第２版]』1によると、単体テストは次…

普段何気なく書いているUIコンポーネントテストについてまとめた。 UIコンポーネントテストは、「UIコンポーネント」の動作を自動的にテストするプロセスである。「UIコンポーネント」について、Reactの公式ドキュメント1では以下のように説明されている。 R…

これからはじめるReact実践入門 を読んだ。感想メモをまとめる。 全体の感想 これからReact.jsを始める人におすすめできる一冊だなと思った。一番最初にJavaScriptの登場からなぜReact.jsが出てきたのか？を説明している項があるため、React.jsは何が嬉しい…