クライアントの単体テスト

# はじめに
直近でやりたいことは、HttpClientの単体テスト
まずは参考サイトを見ながら学習から...
※後で今やっている情報を整理!!

# フロントエンドのテスト分類というか検討
★☆★後で参考サイトをじっくり読んで方針考えないと...

## 参考サイト
◆フロントエンドのテストに真面目に向き合う
　https://qiita.com/okmttdhr/items/cc58e83c259aa0049538
◆フロントエンドのテストについて考える
　https://qiita.com/okmttdhr/items/c1e80353928e121c4761
◆フロントのテスト戦略！の知見が集まるところ
　https://zenn.dev/seya/scraps/6f930e359d6a7c
◆品質を保ちながら190時間以上あったテスト稼働を削減　フロントエンドでE2Eテストを導入して得られたもの
　https://logmi.jp/tech/articles/323523
◆フロントエンドの"ちょうどいい"自動テストのはじめかた
　https://atraetech.hatenablog.com/entry/2022/09/30/105747

◆実用的なフロントエンドのテスト戦略（1）
　https://meetup-jp.toast.com/1550
◆実用的なフロントエンドのテスト戦略（2）
　https://meetup-jp.toast.com/1757
◆実用的なフロントエンドのテスト戦略（3）
　https://meetup-jp.toast.com/1771

◆技術的負債を徹底的に解消した話 - オミカレのシステムフル刷新のためにやったことを全部教える
　https://eh-career.com/engineerhub/entry/2020/04/09/103000
◆フロントエンドの単体テストってなんだ・・・？
　https://dev.classmethod.jp/articles/what-is-frontend-unit-test/

◆フロントエンドにおける「単体テストの考え方/使い方」
　https://zenn.dev/akfm/articles/frontend-unit-testing


# トラブルシューティング
## ★☆★後で記載！！(socket timeout!?)

【参考サイト】
　◆jest で非同期関数をテストするときの注意点
　　https://qiita.com/rikegami/items/178ed17982b13535ad59
　　　※async()でawaitしていない箇所あったような...そもそもasync必要!?
　◆jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
　　https://stackoverflow.com/questions/22604644/jasmine-async-callback-was-not-invoked-within-timeout-specified-by-jasmine-defa
　　　※karma.conf.jsにtimeoutIntervalを入れてみる!?
　　　※flush/fakeAsync等...
　◆Jasmine は async/await と done() による callback の混合をサポートしない
　　https://miso-soup3.hateblo.jp/entry/2021/08/08/183800
　　　※done使っている箇所あるか確認した方がよいかも...
　◆【AngularJS, Jasmine】テストの書き方まとめ。
　　http://note.onichannn.net/archives/3247
　　　※下記記載の現象が発生しているんじゃないかと...
　　　　「Jasmineは引数を受け取るようにすると、処理を待機するようになる。よって、引数を渡したにも関わらずいつまでも`done`を実行しないとタイムアウトエラーになるので注意。」


## Disconnected, because no message in 10000 ms
　参考サイトにあるエラーが発生

```shell:unitTest.bat
REM karma.conf
    browserDisconnectTimeout : 600000,
    browserNoActivityTimeout : 600000,

REM メモリ不足対策
node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng test
```

【参考サイト】
　◆Disconnected, because no message in 10000 ms. · Issue #1413 · jasmine/jasmine · GitHub
　　https://github.com/jasmine/jasmine/issues/1413
　　　★発生していたのはここに記載されているエラー
　◆Node.js heap out of memory
　　https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory/54675887#
　◆Karma/Jasmine times out without running tests
　　https://stackoverflow.com/questions/24119506/karma-jasmine-times-out-without-running-tests
　◆Karma\jasmine timeout without any errors
　　https://stackoverflow.com/questions/59208295/karma-jasmine-timeout-without-any-errors
　◆Karma - Configuration File
　　http://karma-runner.github.io/6.3/config/configuration-file.html
　　　※karma.conf.jsのパラメータ説明あり


①An error was thrown in afterAll　Uncaught TypeError: Cannot read property 'ほげほげ' of undefined

◆Cannot read property 'toLowerCase' of undefinedのとき何を確認すべきか？
　https://qiita.com/BRSF/items/4f4e39bd82778b976392
　　※ここを参考に原因調査してみる

◆そうだったんだRxJS -Subjectのお作法-
　https://qiita.com/rena_m/items/25b0db2bfe77344612b5
　　※ここにあるcompleteを試してみる!!

◆angular - ジャスミン：「未定義のスローされたプロパティ「値」を読み取れません」
　https://tutorialmore.com/questions-2385453.htm
　　※Jasmineのramdomをfalseにすればよいらしいが...その対応は微妙

◆TestBedとJasmineを使用してNativeScriptでユニットテストを実装する方法
　https://www.it-swarm.dev/ja/angular/testbed%e3%81%a8jasmine%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6nativescript%e3%81%a7%e3%83%a6%e3%83%8b%e3%83%83%e3%83%88%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/810895489/
　　※afterAllを定義するとよいかも...!?

◆Angular SPAのカルマ+ジャスミンテストがランダムに失敗する
　https://www.366service.com/jp/qa/2117fd3759287d92ad5a8d4dfca095d1
　　※「すべてのテストのメイン状態をリセットするbeforeEach()がないようです。」⇒思い当たる節がある...全テストを1つで発生しないか確認しても良いかも!!

②【msSaveBlob】のルート確認

```typescript:msSaveBlob.ts

// service.ts
test(): void {
  const content = 'あいうえお';
  const blob = new Blob([content], { type: 'text/plain' });
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, 'test.csv');
    console.log('test!!');
  } else {
    console.log('だめか...');
  }
}

// service.spec.ts
//  'test!!'
const dummy1 = {
  msSaveBlob: function (blob: any, defaultName?: string) {
    expect(blob).toEqual(new Blob(['あいうえお'], { type: 'text/plain' }));
    expect(defaultName).toEqual('test.csv');
    return true;
  }
};
const spyobj = spyOnProperty(window, 'navigator', 'get').and.returnValue(dummy1);

service.test();

expect(spyobj).toHaveBeenCalledTimes(2);

//  'だめか...'
const dummy2 = {
  msSaveOrOpenBlob: () => { }
};
const spyobj = spyOnProperty(window, 'navigator', 'get').and.returnValue(dummy2);

service.test();

expect(spyobj).toHaveBeenCalledTimes(1);

```

③その他
◆angular テスト作成前エラー解決メモ
　https://qiita.com/mokkos/items/a6e982f6b798383fb353
◆Angular8 ユニットテストが動かねぇ！
　https://qiita.com/ringtail003/items/79c5d14b76a690321114
◆Angular jasmine 使い方メモ
　https://qiita.com/mokkos/items/95f07b443aeeab19f53b
◆Angularの単体テストの書き方試行錯誤したのを残しておく
　https://qiita.com/eguhiryo_tg/items/f71bda926a2350eff599
◆AngularもJasmineもまったく分からんし単体テストもあんまやったことないマンが学んだAngular5でのテスト
　https://qiita.com/wamekukyouzin/items/15bd3676319b08f6bfcd

# 参考サイト
◆Angular 日本語ドキュメンテーション - テスト
　https://angular.jp/guide/testing

◆Angularのテストガイドを読みながらテストコードを書いていった際のメモ
　https://qiita.com/gaaamii/items/c41f5d8b7bb5cae43f93


◆AngularのHttpClientModuleの使い方
　https://christina04.hatenablog.com/entry/2017/07/31/193000
◆GitHub - jun06t/angular-sample
　https://github.com/jun06t/angular-sample

◆Angular unit test helpers and samples · GitHub
　https://gist.github.com/kaplan81/a97662f5909867aa64852122c58e64af

◆Unit testing HttpClientModule in Angular 4.3: undefined return value from HttpTestingController.expectOne(url)
　https://stackoverrun.com/ja/q/12475745

◆Testing HttpClient Requests in Angular
　https://www.digitalocean.com/community/tutorials/angular-testing-httpclient

◆How to mock HttpClient in a provided service in a component test in Angular?
　https://stackoverflow.com/questions/46930581/how-to-mock-httpclient-in-a-provided-service-in-a-component-test-in-angular

◆Mocking Http Request with HttpClient in Angular
　https://www.syntaxsuccess.com/viewarticle/mocking-http-request-with-httpclient-in-angular

◆Angular 8 Tutorial: REST API and HttpClient Examples
　https://www.djamware.com/post/5d8d7fc10daa6c77eed3b2f2/angular-8-tutorial-rest-api-and-httpclient-examples
　　※多分、ここベースにやればできそう

◆サーバーからデータの取得
　https://angular.jp/tutorial/toh-pt6#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B
　　※公式サイトのこれがいいかも

◆Angular v4.3 で追加された HttpClient を使ってみた
　https://neos21.hatenablog.com/entry/2017/08/09/080000
◆AngularのHttpClientメモ
　https://ryotah.hatenablog.com/entry/2017/08/01/211947
　　※よくわからないときはこれらの解説見ながら理解...

◆angular.io Guide: HttpClient
　https://qiita.com/mixplace/items/887cd5e79d9d08c3e7e8
　　※本来は公式サイト見て理解しないとなんですが...

◆GitHub - gilsdav/HttpClient-mock: How you can mock a service with Angular HttpClient
　https://github.com/gilsdav/HttpClient-mock

◆Angular in-memory-web-api はどのような仕組みで動作しているか
　https://www.techscore.com/blog/2019/08/23/angular-in-memory-web-api-%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A7%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B/

◆Angular In Memory Web API を使ってモックサーバを立てる
　https://neos21.hatenablog.com/entry/2018/02/09/080000

◆Angular8 ユニットテストが動かねぇ！
　https://qiita.com/ringtail003/items/79c5d14b76a690321114