マンガ読んだ！！にシステムテストを導入したくて、モブプロでアドバイスを頼んだ話の第2回

システムテストを導入したい。前回の宿題

マンガ読んだ！！というサービスを作っています。第1回に続き、モブレビューしながらプログラミングの第2回です。先ずは前回の宿題を調べた結果の共有。1つはBlazorでSeleiniumを作った時にExpectedConditionsが出る件。これはstackoverflowとかを見てもわりとこの方法でした。また例外で出るNoSuchElementExceptionを自分で握り潰している方法もありました。ExpectedConditionsのままだと警告が出るため、これは一枚ラップして、いずれ例外を握りつぶす方に変えるつもりだけど一旦は現状維持にしました。もう一つの開発環境の方はVSを「デバッグなしで開始」すればその間はサーバーが立ち上がっていて、かつこの状態でテストを書いてもロックはされなかったので、この方法で進めることとしました。ただ、でも何でロックしないんだろう？という話になって、考えてみるとロックされない理由は説明できなかったので少し謎が残ってしまいました。

Azure DevOpsの設定

あと宿題にはなっていなかったですが、Azure DevOpsでの設定も確認しておきました。Seleinumの設定など特に何もしなくてもNugetで入れておけば、それだけで勝手に動くという目論見でした。ただ実際に、DevOpsで設定すると他の部分で大苦戦しました。。というのも、大分前に設定した時、まだ.net coreではなくて、yamlでもない時は特に悩んだ覚えがなかったので、今回もサクッと行けるだろうと思っていたのです。ところがVSTestでテストの設定をしてもエラーが続く続く。色々調べて回避方法を見つけても実際に試してみてもエラー。何十回も設定を変えても結局上手くいきません。結論としてはVS Testを使わず、DotNetCoreCLIのTestを使えば、デフォルトのままでちゃんとテストが動き、かつSeleniumも問題なく動きました。何故VSTestが動かないかは分かっていません。

テキストエディタトーク

で、その後、どんな感じでテストを作っていくかの話になって、マンガ読んだ！！はベースとなるページはわりと少なくて、スタートページ、マンガ、作者、シリーズの個別と詳細、後はログインした後の読んだ一覧画面の8画面がテスト出来れば十分ではないかとなりました。マンガの詳細画面はマンガによって違うので実質20万ページ以上ありますが、それは全ページやっても意味が薄いだろうと話しました。ここまで何となくテキストエディタを起動して書きながら話をしていました。書いているテキストは文章としてのあまり意味はなしていない、後から見直しても意味は分からないような走り書きですが、単語単語は意味があるものです。例えばマンガ、作者、シリーズのように単語が書いてあって走り書きしているような状態です。じゃあ、今書いたものを少し整理して、あとはそれを日本語のテスト名にすれば完成だと言われました。ほぉ。なるほど。そういうアプローチがあるのかと感心してしまいました。

人間の動きに合わせたシステムテスト

で、実際に「TOP→詳細」というメモから「トップ画面から移動してシリーズ画面を表示」というテストメソッドを作りました。この名前になるまでもモブでちゃちゃが入ります。例えば、「「表示する」と「表示」とどっちが良い」？とか、「表示は自明だから必要かな」とか。こういうのはなかなか自分だと思いつかないものもあり結構楽しいです。で、一応8個のテストメソッドを作りました。前回はトップ画面までの移動だったので、今回はここからシリーズ画面への移動を作りました。その際は、人間が移動する、つまりは僕自身が普段どうやってその移動をしているかをテストとして書くべきと言われました。なんとなく分かってはいてけれど、明確に言葉となって進行がとてもクリアになりました。現状移動に使っているボタンには一意となるclassはありますが、意味がある名前が付いていなかったので、ここも新たにidを定義しました。

ダーティでも書ききる方針

これで前回作ったwaitというidのdate-stateの番号を変えていけばその都度待ったことに出来ます。stateを0や1はどうかなと思ったのですが、一旦コードのリファクタリングとかは置いておいて、ダーティでも良いのでさっき作った8個のテストをそろえることを目標としました。この辺も定義が明確な方が進めやすいモブならではかもしれません。この方針にしたので、パッと思いつかなかった時に超久しぶりにSetState2というクソみたいなメソッドも作ってしまいましたw。ただページの切り替わりに関してのアプローチは、フレームワークで変更をとれるパラメータのようなものが用意されていればそれが一番良いだろうとなりました。Reactとかにはフレームワークにそういうものがあるという話になったので、Blazorにもそういうものがあるか調べるのは宿題となりました。

まとめ

で、「トップ画面から移動してシリーズ画面を表示」と「トップ画面からシリーズ画面に移動してシリーズ詳細画面を表示」するメソッドまで作ったところで、他のページもと思っていたら、結構いい時間になったので今回はここまでとしました。白状すると、開始までにプログラム以外での雑談に結構時間を使ったりしていますｗ。と言うわけでまた2週後に第3回をやります。