Jestメモ
2021-02-22
ようやく「前回の対話IDがある時にはメニューがあり、なければない」をまともにテストすることができた
「サーバが寝てる時、1秒待ってから再挑戦」ってコードどうテストすればいいんだ
なるほど、setTimeoutを生で使うのではなくPromiseで包んで「1秒後にresolveされるPromise」を作るのか
Regroupの方をテストしようとすると、ドラッグがたくさんあるのが問題だなぁ
2021-02-25
JestでRegroup上でのドラッグなどのテストをどうやるかを悩み中…
イベントを記録してテストにつかいたいが、mousemove系を全部記録すると量が多い問題
その種のイベントは直前だけ記録するようにしておいてスペースキーを押した時だけイベント記録に直前のイベントを追加する
これで「長縄ツールで囲む」を少ないイベントで表現できるようになる
問題は「スペースキーを押した」はPCではできるけどiPadでは難しいことか…
時間で間引くか？それなら入力する時に少し止まることで記録させられる？
座標の値は取れたが、テストの中でfireEventしてるのに何も起こらない、どこで握り潰されてるのか追いかけるの難しいぞ…
テストのニーズとしては「キャンバスにmousedownした時にイベントが届く」なんてのは十分試されてるからテストしなくても良くて、イベントが届いた後のところをテストしたい
厳しい感じだけどなんとかできた
ToolEvent風に見えるオブジェクトを使って型エラーをignoreしてToolEventだよと言って渡す
ドラッグをエミュレートして「何もないところを投げ縄でかこむ」を自動化
これは「マウスダウンの時点で死ぬ」「選択はできるが変なところに線が出る」「囲まれた領域をドラッグすると移動対象がなくて死ぬ」ってバグの山だった
テストで再現した上で、囲んだ範囲に何もなかった時には囲まれる前のモードに戻すようにした、仮に同じバグが発生しても次はテストでわかるはず
無理やりテストして無理やり直した感じがあるのでリファクタしたい
本当はまずリファクタしたかったのだけど、流石にバグってるものをテストも書かずにリファクタしたら盛大に壊れると思ったので堪えた
投げ縄と選択対象の衝突判定の中で直接投げ縄を消したりバルーンメニューを消したりしてるの良くない設計
2021-02-26
付箋ドラッグのテストを書く前に画面サイズを確認してみたら600×300で、リサイズするたびに倍になるという謎の現象が…
何もせずにリサイズイベントを起こすだけでキャンバスが2倍に広がる
1ピクセルとキャンバス上の1単位が2倍ズレてたりしそうな気配
とりあえず付箋を追加したときに実際に追加される位置はこのサイズに無関係に決まってるみたいなので別の話として切り分けて進めよう
レガシーコード改善ガイドのことを思い出してる
「安全にリファクタするにはテストが必要だがテストをするためにリファクタが必要」笑
付箋をクリックしてバルーンメニューが出ることはテストできたので意外と簡単だなと思いながらドラッグのテストをしたらテストランナーが終了しなくなった、なぜ…
たぶんある種のオブジェクトをJestが画面表示用に文字列化するときに無限ループになる
循環参照というわけではないはずだが…
投げ縄選択で付箋が選択されるところまでテストできた
テストでカバーした上で、衝突判定のコードの中からメニューのUIを操作する気持ち悪い状態を解消することができた、めでたしめでたし
カバレッジは39%くらい
複数選んでグループ化するのと、まとめて移動するののテストを足して46%
まあボチボチと足していこう
jestの通常のテストランナーでテストするときにはあんなに非同期のことが気になったのにelectronを使うときには特に気にせずに書いてて問題なく動いている
ただしテストに時間はかかる
うーむ、ペンのボタンをクリックしたのにペンに切り替わらない不可解…
ペンの実装がいまマウスイベントを流し込んでる場所よりも前にイベントをつかんでるからペンに切り替えると自動化できないってことか
ペン描画のテストはできたが、ペンで描いた後にパスとそのパスを包んでるグループの両方が表示順の中に出現する…これは2回描いているバグなのでは…
カバレッジは51%になった。
二重に描画してるかもしれない問題は来週にしよう。
2021-03-01
二重描画は単純なバグだったので直した
この予期しない不整合を放置しておくと別の不具合が発生しそう
パスを選択してグループ化したり解除したりしてるとさらにおかしな状態に発展しそう
テストケースの中でPaper.jsのプロジェクトが作られて、削除されないので溜まっていた
各テストケースの後に実行されるaftereachで全部削除した
今までカバレッジの割合の小さい方から見てたけど、カバーされてないstatement数多い順はできないのかなー、それをテストすれば効率良くカバレッジが伸びるということじゃん
なかったので行数多い順で眺める、行数の一番多い赤いやつをやるか
https://gyazo.com/b795c664b893480f62eb605cabcdaf41
2021-03-02
2021-03-03
60.32% Statements 1444/2394 41.48% Branches 358/863 59.55% Functions 240/403 60.93% Lines 1421/2332
2021-03-04
タッチイベントを使ってマルチタッチ操作のテスト
二本指タップが動かないで離された場合にクリックになる問題の再現は以前と同じ「なぜかToolEventが届かない」に阻まれてできてないのだけど、謎のエラーが出る原因を追いかけていたら別のバグが見つかった
二本指タップが動かないで離された場合にズームが0になる
たぶんこれが稀に発生してた白紙になる問題の原因だな
不可解な現象
キャンバスにマウスイベントを投げても反応しない
タッチイベントを投げたら反応した
タッチなら反応するのだなと思ってテストケースを書いたが反応しない
テストケースの実行順番によって「touchstartが反応しないままtouchmoveだけ反応する」という現象が起きた
2021-03-05
elecron側で「Reactの状態更新がactで包まれてない」とという旨の警告が出ていることに気づく(jest側に中継されない)
どこに包まれてない状態更新があるのかelecronでは表示されない
console.logを入れて範囲を絞り込む
場所はわかったが状態更新をモックで差し替えたときにそれも差し代わっているはずでは？？？となってる
useStateをモックで差し替えるコードは動いている
その後、実際にその差し替えたuseStateは呼ばれている
しかし問題のuseStateの時には呼ばれてない
useState、jest.mockで差し替えても良いかも
Reactをインポートして書き換えて再エクスポートするモックモジュールを作る
setStateを直接呼ぶのではなく、それを呼ぶonClickをつけてfireEventで呼んでみる、解釈が正しければactがない旨の警告は出ないはず
コンポーネントを分けるテクニックを応用して、Promiseを使う手前と後とを分けてテストすることで非同期の問題を気にしなくて良くなる、という解決法を試す
Container/Presentation分離
そう設計することでテストしやすくなる
一方で「まだテストコードのないものにテストを追加する」時、リファクタしてからテストするのではなく、テストでカバーしてからリファクタしたい
そもそも「actで包め」って警告が出たから素直に包んだのだけど、包むと何が行われるのか理解してないな…
react-dom/test-utils
react-testing-library
act
tests
2021-03-08
useState、jest.mockで差し替えても良いかも
Do not import @jest/globals outside of the Jest test environment
なぜこのエラーになるのかよくわかってない
2021-03-09~2021-03-12