やっほー
Jasmine

AngularでJasmineを使ってユニットテストをやってみた話

  • 2020年3月5日
  • 2021年3月15日
  • Angular
  • 14view

Angularをインストールすると、ユニットテストを行うための「Jasmine」がデフォルトで導入されています。

こいつを使えばコードでユニットテストができるので皆ハッピーになれます。

ってことで今回は、AngularでJasmineを使ってユニットテストをやってみマッスル

まず、Jasmineって何て読むん?

ジャスミン」です。

Jasmineを使うにあたって

まあ、さすがに何かアプリがないとあれなので、少し前に僕が作ったアプリを実験用として使ってみます。

関連記事

この前こんな記事を書きました。 [sitecard subtitle=前回記事 url=https://traveler0401.com/open-weather-map/ target=blank]   […]

悲観的な天気予報

AngularでのJasmineの使い方

デフォルトでJasmineが組み込まれているので、実行自体も簡単です。

 

Jasmineを実行するのは上記コマンドをルートで叩くだけです。

Jasmineで実行されるテストファイル

テスト対象となるファイルは「…spec.ts」というファイルです。

このファイルは「ng g c」コマンドでコンポーネントを作成すると自動的にできるファイルです。

このファイルに記載されているテストがJasmineによってすべて実行されます。

実際にJasmineを使ってみた

僕の作ったアプリは説明の都合上、specファイルは「app.component.spec.ts」のみにしています。

この後の説明で「main.component.spec.ts」が追加されているので、GitHub上にはspecファイルが2ファイルあります。

 

app.component.spec.ts」ファイルです。
デフォルトから不要なテストケースを削除した状態です。
コンポーネントがちゃんとできているか?」のテストだけが記載されています。

 

Jasmineを実行します。

 

Jasmine

実行すると、デバック用のブラウザが立ち上がり、テスト結果が表示されます。

今回は「1 specs, 0 failures」とあるので、「テストケースが1件、成功1件、失敗0件」となります。

Jasmineでユニットテストを追加してみる

僕の作ったアプリではメイン画面が存在するので、メイン画面コンポーネントのテストコードを追記してみたいと思います。

 

まずHTMLっすね。汚いコードですが勘弁。

 

元々「main.component.spec.ts」はなかったのでファイルを追加しています。
で、テストはと言うと、「コンポーネントがちゃんとできているか?」のテストと「h1タグの文言が正しいか?」のテストの2ケースになります。

※「MainComponent」を生成するにあたり、必要なモジュールを読み込まないとテストに失敗するので「imports」の箇所で読み込んでいます。

Jasmineを再実行してみる

Jasmine2

再実行すると結果は上記のようになります。

3 specs, 0 failures」なので、3ケースともテストに成功しています。

まあそりゃそうだろレベルのテスト。

見たら分かるんですが、「どのコンポーネント」の「どのテスト」が成功したかが分かるようになっています。便利。

今回はここまで!!

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

今回は使ってみるだけで終わっちゃいました。

次は、Jasmineの構文についてまとめたいところですが眠いので寝ます。

さよなら。

Jasmine
フォローしてもらえると泣いて喜びます