アップデートとテスト

アップデートとテスト

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

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

• https://profiee.com/i/lifewood

今日お伝えしたい事

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

V6 => v8 での分かった事

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

• https://update.angular.io/

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

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

やって分かった事その２ 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でも大丈夫です。

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

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

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

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

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

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(() => {})

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

• https://git.io/JensD
• https://git.io/JensQ

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

• https://git.io/Jensd

rxjs v6.3.3 rxjs v6.5.2

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

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

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

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

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

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

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

• https://angular.jp/guide/testing

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

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

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

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

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