月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

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

 

僕のプロフィールはこちら

 

 

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

ジャスミン」です。

 

 

Jasmineを使うにあたって

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

 

■GitHub

URL:「https://github.com/izumin0401/pessimistic-weather」

↑今回の記事内容も反映されているので見てみてね。

 

 

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件」となります。

 

 

Advertisement

 

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

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

 

まずHTMLっすね。

汚いコードですが勘弁。

 

 

元々「main.component.spec.ts」はなかったのでファイルを追加しています。

で、テストはと言うと、「コンポーネントがちゃんとできているか?」のテストと「h1タグの文言が正しいか?」のテストの2ケースになります。

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

 

 

Jasmineを再実行してみる

Jasmine2

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

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

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

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

 

今回はここまで!!

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

さよなら。

Travelerを知らないの?