アップデートとテスト

169 Views

October 03, 19

スライド概要

今日お伝えしたい事
・公式ドキュメント
・ソースコード

これらをきちんと読もうな!
※自戒を込めて

profile-image

フリーランスプログラマです。 Angular, CHIRIMEN Open Hardware, MDN Web Doc 推しの人です。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

アップデートとテスト

2.

自己紹介 名前:キグレアキヒコ 職業:フリーランス プログラマ サラリーマンの聖地界隈で、Angular 書いています

3.

Profiee 始めました https://profiee.com/i/lifewood

4.

今日お伝えしたい事

5.

公式ドキュメント • ソースコード • これらをきちんと読もうな! ※自戒を込めて

6.

V6 => v8 での分かった事

7.

https://update.angular.io/ ここで手順を確認せずに・・・・ $ ng update --all --fource

8.

やるなよ! 絶対に、やるなよ!

9.

やって分かった事その1 関連するパッケージの最新バージョン情報が一律把握できた

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.

やって分かった事その3 ポリフィル core-jsが、v2.x => v3.x になった影響で、 tsconfig.jsonのpathsに追記が必要になりました。

13.

やって分かった事その4 コードコンバート • loadChildren • v6 => v8 NG • v7 => v8 OK

15.

コードコンバート • ViewChild第二引数 • v6 => v8 OK • v7 => v8 OK

16.

やって分かった事その5 karma, jasmineのバージョンも 同時にアップしたので、 テストコードの修正も発生しました。

17.

spyOn(~~~, 'xxx').and.returnValue() バージョンアップ前 spyOn(~~~, 'xxx').and.returnValue(() => of()); xxx: http系関数 バージョンアップ後 spyOn(~~~, 'xxx').and.returnValue(() => of(new HttpRespopnse()));

18.
[beta]
argsFor
バージョンアップ前
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(() => {})

19.

やって分かった事その6 rxjs v6.3.3 => 6.5.2 Observable.create => new Observable(); https://git.io/JensD Subject.create => new Subject(); https://git.io/JensQ

20.

rxjs v6.3.3 => 6.5.2 tap(undefined, () => {}) => tap( { complete(): () => {} } ) tap(undefined, () => {}) => tap( () => {} ) https://git.io/Jensd

21.

rxjs v6.3.3 rxjs v6.5.2

22.

やって分かった事その7 Ivy ERROR in There is no format with import statements in '/Users/lifewood/work/ng-migratesample/node_modules/ng-click-outside' entry-point.

23.

対処 ライブラリのgithubにissueがあるかつ ビルドエラーになった時にivyオプションの使用を 取りやめました。 追記:その後 解決されました。

24.

やって分かった事その8 Swagger Code Generator コード生成後にビルドエラーになった定義 multipart/form-data • パラメータにblobを使用 •

25.

対処 対象のコードを正規表現で置換するシェルを 実装して対処しました。 Before let formParams: { append(param: string, value: any): void; }; Afeter let formParams: { append(param: string, value: any): void | HttpParams; };

26.

ユニットテストを実装して分かった事

27.

状況 • コンポーネント数 • テスト数: 約2400件 テスト開始当初 • jenkins 実行時間: 約60分 テスト改善後 • jenkins 実行時間: 約12分

28.

テスト改善の為にやったこと • モックを作る • スタブを作る • NO_ERRORS_SCHEMA を実装する • 不要なモジュールをインポートしない • 画面系モジュールのインポート実装を削除しただけで、 2〜3秒変わった https://angular.jp/guide/testing

29.

テスト実装効率化の為にやったこと *.spec.tsのみのビルドスクリプトを実装

30.

今現在の状況 • • • • • • • • component: 406 module: 26 service: 57 helper: 19 pipe: 11 model: 42 enum 23 const: 14 test 件数: 3353(skip: 158) 手元計測:約18min

31.

告知1 10/05 第11回:Angular もくもく会@グンマー

32.

告知2 11/09 第1回 ng-saitama@大宮

33.

ご清聴有難うございました!