ユニットテストとE2Eテストを demoしたい件 Angular もくもく会 in Fukuoka #10 2020.1.30

自己紹介 福岡のおじさんエンジニアです。 現役で客先常駐しています。 COBOL → VB6.0 → VB.net → Spring BootなIT人生。 他 jQuery → AngularJS → Angular 定年後の夢は、年金をもらいながら自称IT発明家になることです。 ふるてつ@tetsufuru19681 https://tetsufuru.hatenablog.com/ ちょくちょく参加するコミュニティ

今日のおはなし 正月休みにユニットテストを頑張ったのでdemoしたいです。 E2Eテストも作ったのでそちらもdemoします。

内容 架空の業務システムです（バックオフィス側） 5画面です。 商品登録/商品一覧の参照がメインです。 在庫登録も少し。購入履歴の参照もできます。 テスト用購入画面もあります（管理者のみ）

では実物をお見せします。

こだわりポイント マルチ言語、マルチタイムゾーンです。 インターセプターを2つ追加しました（ログイン、csrf用） カスタムのPipeを2つ追加、それをDirectiveにしました。 Inputのフォーカスが外れると通貨フォーマットになるなど。 カスタムのバリデーションを3つ追加 複数項目の相対的なチェック。在庫がないと購入できないなど。

ではユニットテストを動かします。

難易度（個人的感想） 種類 難易度 難しいポイント 備考 Service 1 Custom Pipe 2 Custom Validator 2 Component（部品） 3 Interceptor 3 やり方が最初は全然わか らず Component（ページ） 4 Directive 4 やり方が最初は全然わか らず specテストファイルの中 にtemplateを書く その他難しい部品 File Readerのモック 5 ファイルリーダーをモッ ク化した時にonloadイベ ントのカバレッジが通ら ない。 モック化したリーダーに イベントリスナを追加す る。

E2Eテストについて 登場ユーザ3人 User01：メインユーザ。商品の管理と購入履歴を参照（日本語、東京） User02：商品の在庫管理をするユーザ（英語、ロサンゼルス） User99：システム管理者（日本語、東京） シナリオ４つ ① User01：商品を登録、一覧で検索し修整する。 ② User02：商品の在庫を登録する。 ③ User99：商品を購入する（管理者でテスト用画面を使って登録する） ④ User01：購入履歴を検索する。

ではE2Eテストを動かします。

結果 正月休みにユニットテストを頑張ったのでdemoしてみました。 まとめてユニットテストを書いたのすごく時間がかかりました（3週間） E2Eテストはすこし軽めです。疎通テストくらいの感じになりました。 E2Eテストは休日1日で書けました。

以上、ユニットテストとE2Eテストを demoしたい件でした。 ほぼおじさんの自己満足的な内容でしたが、 ご清聴ありがとうございました。