Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20191003 classi night-04

579 views

Published on

Angularをアップデートやテストをするにあたって得た知見を書きました。

Published in: Engineering
  • Be the first to comment

20191003 classi night-04

  1. 1. アップデートとテスト
  2. 2. 自己紹介 名前:キグレアキヒコ 職業:フリーランス プログラマ サラリーマンの聖地界隈で、Angular 書いています
  3. 3. Profiee 始めました https://profiee.com/i/lifewood
  4. 4. 今日お伝えしたい事
  5. 5. • 公式ドキュメント • ソースコード これらをきちんと読もうな! ※自戒を込めて
  6. 6. V6 => v8 での分かった事
  7. 7. https://update.angular.io/ ここで手順を確認せずに・・・・ $ ng update --all --fource
  8. 8. やるなよ! 絶対に、やるなよ!
  9. 9. やって分かった事その1 関連するパッケージの最新バージョン情報が一律把握できた
  10. 10. やって分かった事その2 ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.1 was found instead. その時は、冷静にpackage.jsonの以下の修正をして、 再度 npm i "typescript": "~3.5.0" => "typescript": "~3.4.5” ※現在は、v3.5.3でも大丈夫です。
  11. 11. やって分かった事その3 ポリフィル core-jsが、v2.x => v3.x になった影響で、 tsconfig.jsonのpathsに追記が必要になりました。
  12. 12. やって分かった事その4 コードコンバート • loadChildren • v6 => v8 NG • v7 => v8 OK
  13. 13. コードコンバート • ViewChild第二引数 • v6 => v8 OK • v7 => v8 OK
  14. 14. やって分かった事その5 karma, jasmineのバージョンも 同時にアップしたので、 テストコードの修正も発生しました。
  15. 15. バージョンアップ前 spyOn(~~~, 'xxx').and.returnValue(() => of()); xxx: http系関数 バージョンアップ後 spyOn(~~~, 'xxx').and.returnValue(() => of(new HttpRespopnse())); spyOn(~~~, 'xxx').and.returnValue()
  16. 16. バージョンアップ前 const spy_scroll = spyOn(component, 'scrollEvent').and.callThrogh(); spy_scroll.calls.argsFor(0)[0].target.scrollTop; spy_method.calls.argsFor(0)[0].subscribe(() => {}): バージョンアップ後 (<HTMLElement> spy_scroll.calls.argsFor(0)[0]).target) .scrollTop (<Observable<void>> spy_method.calls.argsFor(0)[0]) ) .subscribe(() => {}) argsFor
  17. 17. やって分かった事その6 rxjs v6.3.3 => 6.5.2 Observable.create => new Observable(); https://git.io/JensD Subject.create => new Subject(); https://git.io/JensQ
  18. 18. rxjs v6.3.3 => 6.5.2 tap(undefined, () => {}) => tap( { complete(): () => {} } ) tap(undefined, () => {}) => tap( () => {} ) https://git.io/Jensd
  19. 19. rxjs v6.3.3 rxjs v6.5.2
  20. 20. やって分かった事その7 Ivy ERROR in There is no format with import statements in '/Users/lifewood/work/ng-migrate- sample/node_modules/ng-click-outside' entry-point.
  21. 21. 対処 ライブラリのgithubにissueがあるかつ ビルドエラーになった時にivyオプションの使用を 取りやめました。 追記:その後 解決されました。
  22. 22. やって分かった事その8 Swagger Code Generator コード生成後にビルドエラーになった定義 • multipart/form-data • パラメータにblobを使用
  23. 23. 対処 対象のコードを正規表現で置換するシェルを 実装して対処しました。 Before let formParams: { append(param: string, value: any): void; }; Afeter let formParams: { append(param: string, value: any): void | HttpParams; };
  24. 24. ユニットテストを実装して分かった事
  25. 25. 状況 • コンポーネント数 • テスト数: 約2400件 テスト開始当初 • jenkins 実行時間: 約60分 テスト改善後 • jenkins 実行時間: 約12分
  26. 26. テスト改善の為にやったこと • モックを作る • スタブを作る • NO_ERRORS_SCHEMA を実装する • 不要なモジュールをインポートしない • 画面系モジュールのインポート実装を削除しただけで、 2〜3秒変わった https://angular.jp/guide/testing
  27. 27. テスト実装効率化の為にやったこと *.spec.tsのみのビルドスクリプトを実装
  28. 28. 今現在の状況 • component: 406 • module: 26 • service: 57 • helper: 19 • pipe: 11 • model: 42 • enum 23 • const: 14 test 件数: 3353(skip: 158) 手元計測:約18min
  29. 29. 告知1 10/05 第11回:Angular もくもく会@グンマー
  30. 30. 告知2 11/09 第1回 ng-saitama@大宮
  31. 31. ご清聴有難うございました!

×