Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユニットテストとE2Eテストをdemoしたい件
Search
ふるてつ
January 27, 2020
Technology
0
280
ユニットテストとE2Eテストをdemoしたい件
正月休みにユニットテストを頑張ったのでdemoしたいです。
E2Eテストも作ったのでそちらもdemoします。
ふるてつ
January 27, 2020
Tweet
Share
More Decks by ふるてつ
See All by ふるてつ
Angularで簡単な画面を単体テストまで一通り作った件
furutetsu
1
1.3k
はじめてのSpringBoot
furutetsu
0
470
AngularとBootstrapを使った業務システムの設計について考えた。
furutetsu
1
2.3k
Other Decks in Technology
See All in Technology
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
570
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.5k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
9
4.6k
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
510
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
160
React19.2のuseEffectEventを追う
maguroalternative
0
190
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A designer walks into a library…
pauljervisheath
209
24k
Typedesign – Prime Four
hannesfritz
42
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Designing for Performance
lara
610
69k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
ユニットテストと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:システム管理者(日本語、東京) シナリオ4つ ① User01:商品を登録、一覧で検索し修整する。 ② User02:商品の在庫を登録する。
③ User99:商品を購入する(管理者でテスト用画面を使って登録する) ④ User01:購入履歴を検索する。
ではE2Eテストを動かします。
結果 正月休みにユニットテストを頑張ったのでdemoしてみました。 まとめてユニットテストを書いたのすごく時間がかかりました(3週間) E2Eテストはすこし軽めです。疎通テストくらいの感じになりました。 E2Eテストは休日1日で書けました。
以上、ユニットテストとE2Eテストを demoしたい件でした。 ほぼおじさんの自己満足的な内容でしたが、 ご清聴ありがとうございました。