LINE2019-11-17この記事は約4分で読めます。こんばんわ、hisayukiです。ここ最近フロントまわりの作業が多く、これを期に負債の返済をしようと思いました。Componentだけで60ページくらいまで増えちゃってるんですけど、未記入のテストコードを書くことにしました・・・wそこで少しハマったことがあるので、それについて書いていこうと思います。状況StripeJSが認識されないnpmでのInstallは型定義のみ実態はScriptタグで読み込むService単体テストでは使えないテストコード大事まとめスポンサーリンク状況StripeJSが認識されないStripeの初期化をServiceのconstructorで行っています。動作そのものについては問題なく、本番環境では動いているのですがテストコードではStripe()がないと怒られました。StripeのReferenceではこう書かれてるところです。そもそも、なぜStripe()と定義しただけで使えるのだろうか?今まで気づかなかった・・・というか気にもしなかった。動いていたから/(^o^)\Service単体でテストして初めて気づきました。npmでのInstallは型定義のみStripe()がそもそもどこにあるのか調べてみた。npmでInstallしたStripeのパッケージは@Typesの直下にしかない。実際に見てみると、interfaceばかりでTypescript用の型定義しかない・・・あれ、実態どこだ・・・w実態はScriptタグで読み込むStripeのReferenceを見てるとちゃんと書かれてました。読まずにやってたのか、実装当時は読んでやったけど忘れたのか・・・wこっちが実態でJavascriptで書かれています。<script>でURLから直接読み込み、読み込み後にWindowObjectに入る挙動をします。実際に使ってるStripe()は、window.Stripe()でした。windowがグローバルオブジェクトなので、windowは省略できちゃったんですね・・・Service単体テストでは使えない画面側のLoadが完了された時に初めてwindow.Stripe()が作成されます。Serviceの単体テストでは画面側は使わないのでwindow.Stripe()は作成されない。テストでStripe()がないと怒られるComponent側のテストでもServiceを読み込む場合には同じ現象起こります。画面側のLoadが終わる前に、ServiceのconstructorでStripe()を呼び出す場合など。どのタイミングでStripe(publishableKey)を定義するか考えなおす必要ありますね。今は最初に読み込まれるAppComponentにngAfterViewInit()を定義して、その中でServiceに持たせるようにしてます。テストコード大事TDDにおいては、後追いでテストコード書くのはあまり意味がないとされています。そもそもTDDはアプリコードを書く前にテストコードを用意して、テストコード側で一切エラーが出ないようにするアプリコードを書くのがお作法です。これを逆にしてしまうと、既に出来ているアプリコードが動くテストコードを書いてしまいがちになり、何を受け渡して何を返してほしいという在るべき姿をテストするコードではなくなります。そのため、後追いでテストコードを書くのは意味がないと言われます。それでも全く無いよりマシなのと、システム規模がデカくなるほど無いことが品質的負債になります。今回も途中からとはいえ、認識していない動作を理解するきっかけになりましたので書いてよかったと思います。自動テスト大事、CI/CD大事まとめテストコードあれば気づけたことですが、それ以前に動いてるからいいやってなってたことが問題ですね。TDDの大切さをわかるきっかけになりました。加えてAngularとTypeScriptの理解を深めるいいきっかけにもなりました!今回はたまたまStripeのscriptでしたが、同じような読み込み方をするscriptを使う場合は注意しないとですね。あとは、フロントエンドのテストについての切り分けができていなかったなぁと。結局Stripeのところをどうやってテストしたのかと、フロントエンドのテストについてはまた別記事で書こうと思います。前回の記事で休み期間中に、Serverless周りの勉強しようと思いこちらを進め中。サーバサイドKotl...技術ネタCVCアタックに対してStripeでどう戦うか先日のShifterキックオフのときの会場がStripeだったので、PayPay事件の話題をお話させていただきました❗遅くなりましたが、まとめてシェアしようと思います。細かいサービスアップグレードとかはTokyoで聞いたので、今回は軽めのフィードバック...技術ネタ敗北者のTypeScriptを見てこんばんわ、hisayukiです。先日、Qiitaで非常に良記事を見つけました。...技術ネタFirebaseでチャットアプリをつくってみたこんばんわ、hisayukiです。Codelabを試してみました。今日は実際にFirebaseのサンプルを作ってみたのでそちらの内容を書いていきたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。