JasmineJS-クイックガイド

JasmineはオープンソースのJavaScriptフレームワークであり、あらゆる種類のJavaScriptアプリケーションをテストできます。Jasmineは、Behavior Driven Development（BDD）の手順に従って、JavaScriptステートメントの各行が適切に単体テストされていることを確認します。Jasmineは、BDDの手順に従うことで、アプリケーション全体をテストするのではなく、アプリケーション全体の最小単位をテストするための小さな構文を提供します。

なぜジャスミンを使うのですか？

以下は、他の利用可能なJavaScriptテストフレームワークに対するJasmineを使用する利点です。

Jasmineは他のJavaScriptフレームワークに依存していません。
ジャスミンはDOMを必要としません。
Jasmineフレームワークで使用されるすべての構文は、クリーンで明白です。
Jasmineは、Rspec、JS Spec、およびJspecの影響を強く受けています。
Jasmineはオープンソースフレームワークであり、スタンドアロン、ruby gem、Node.jsなどのさまざまなバージョンで簡単に利用できます。

ジャスミンの使い方は？

Jasmineは、あらゆる種類の開発方法論に非常に簡単に実装できます。ダウンロードする必要があるのは、公式Webサイトからのスタンドアロンライブラリファイルだけです。https://jasmine.github.io/ アプリケーションに同じものを実装します。

詳細な環境設定については、次の章「環境設定」で説明します。zipファイルを正常にダウンロードして解凍すると、そのzipファイル内に次のサブフォルダーが表示されます。

この章では、JasmineベースのBDDテストアプリケーションをセットアップする方法のステップバイステップの手順について説明します。

Step 1 −ジャスミンの公式ウェブサイトにアクセスします https://jasmine.github.io/

Step 2−バージョンリンクのいずれかをクリックします。最新バージョンの「Edge」を使用することをお勧めします。選択したバージョンのホームページにリダイレクトされます。

Step 3 −ホームページのダウンロードセクションに移動し、スタンドアロンリリースページをクリックします。

Step 4 − githubリリースページにリダイレクトされたら、そこからZipファイルをダウンロードします。

Step 5−ダウンロードしたjasmine-standalone-2.4.1フォルダーを解凍します。次のフォルダ構造が表示されます。

Step 6−次に、お気に入りのIDEでWebアプリケーションプロジェクトを作成し、このダウンロードしたライブラリファイルをアプリケーションに追加します。ここでは、netbeansIDEを使用しました。以下は、Jasmineフレームワークを追加した後のアプリケーションのディレクトリ構造です。

環境のセットアップが完了しました。これで、アプリケーションをJasmineフレームワークでテストする準備が整いました。

この章では、 hello world app これは私たちをテストします “helloworld.js”ファイル。hello worldアプリを開発する前に、前の章に戻って、Jasmineを使用して環境をテストする準備ができていることを確認してください。

Step 1 − Create a Web application in your IDE

ここでは、NetBeans 8.1を使用して、JasmineでHelloWorldアプリを開発しています。NetBeansで、「ファイル」→「新規プロジェクト」→「Html5 / JSアプリケーション」に移動し、プロジェクトを作成します。プロジェクトを作成すると、プロジェクトディレクトリは次のスクリーンショットのようになります。プロジェクトに名前を付けましたJasmine_Demo。

Step 2 − Include the Jasmine lib file into the application

デモプロジェクトを作成したら、作成したアプリケーションのユニットテストフォルダーにJasmineライブラリのunzipフォルダーを含めるだけです。すべてのライブラリファイルをアプリケーションフォルダーに追加すると、プロジェクトの構造は次のスクリーンショットのようになります。

下に与えられたファイル spec そして srcフォルダは、Jasmineチームによって提供されたデモファイルです。独自のテストファイルとテストケースを作成するため、これらのファイルを削除します。これらのJavaScriptファイルを削除する際に、出力htmlファイル内のこれらのファイルの参照を削除する必要があります。SpecRunner.html。

以下は、SpecRunner.htmlファイルのスクリーンショットです。内部のさまざまなJavaScriptファイルの参照 spec そして src 削除されます。

Step 3 − Create a JavaScript file

このステップでは、という名前のJavaScriptファイルを作成します helloworld.js 下 srcフォルダ。これは、Jasmineを介してテストするファイルです。JavaScriptファイルを作成した後、ファイル内に次のコードセットを追加します。

/*         
* This is the JavaScript file that need to be tested through jasmine   
* Below is the helloworld function that will return 'Hello World' 
*            
*/    

var helloworld = function() {   
   return 'Hello World'; 
};

Step 4 − Create a test case

このステップでは、上記のJavaScriptファイルのテストケースを含む別のJavaScriptファイルを作成します。先に進み、「Spec」フォルダの下にJavaScriptファイルを作成し、次のように名前を付けます。“HelloWorldsSpec.js”。これに次のコード行を追加しますjs ファイル。

/*            
* This is the file which will call our java script file that need to be tested. 
* Each describe block is equivalent to one test case    
*     
*/    

describe("Hello World", function() { 
   
   it("should Return Hello world",function() { 
      expect(helloworld()).toEqual('Hello World'); 
   }); 

});

Step 5 − Add reference to the output file

テストする独自のファイルと対応するテストケースを正常に作成しました。2つの異なるフォルダに保存しました。このステップでは、変更します“SpecRunner.html” これら2つの新しく作成されたファイルの参照を含めます。

<!DOCTYPE html> 
    
<html>    
   <head>    
      <meta charset = "utf-8"> 
    
      <title>Jasmine Spec Runner v2.4.1</title>  
		
      <link rel = "shortcut icon" type = "image/png" href = 
      "lib/jasmine2.4.1/jasmine_favicon.png">  
      <link rel = "stylesheet" href = "lib/jasmine-2.4.1/jasmine.css"> 
		
      <script src = "lib/jasmine-2.4.1/jasmine.js"></script>
      <script src = "lib/jasmine-2.4.1/jasmine-html.js"></script>
      <script src = "lib/jasmine-2.4.1/boot.js"></script> 

      <!--Lines to be deleted  
      <script src = "src/Player.js"></script> 
      <script src = "src/Song.js"></script> 
      <script src = "spec/SpecHelper.js"></script>    
      <script src = "spec/PlayerSpec.js"></script> --> 

      <!--adding the reference of our newly created file ---> 

      <script src = "src/helloworld.js"></script> 
      <script src = "spec/HelloWorldsSpec.js"></script> 
   </head>   

   <body>   
   </body>   

</html>

Step 6 − Execute by running SpecRunner.html

これがアプリケーション開発の最終ステップです。お気に入りのブラウザでSpecRunner.htmlを実行します。結果として、次のスクリーンショットが表示されます。緑の画面は成功を示し、赤はテストケースの失敗を示します。

Step 7 − Understand the failure case

今まで私たちは見てきました successhelloworldアプリケーションのテストケース。ここで、問題が発生してテストが失敗した場合はどうなるかを見てみましょう。障害ケースを実装するには、障害テストケースを作成する必要があります。同じことをするために、私たちは修正するつもりですhelloworld.js 次のコードを使用してファイルします。

var helloworld = function () { 
   return ''; 
};  

// we are not returning any string whereas in the spec file 
//we are expecting a // string as “Hello World”

スペックファイルが期待される文字列を出力として取得していないため、上記のコードは間違いなく失敗します helloworld()。次のスクリーンショットspecRunner.html ファイルは、赤いインジケータにエラーがあることを示しています。

Jasmineは、Behavioral Driven Development（BDD）フレームワークに従います。Jasmineの動作原理を学ぶ前に、BDDフレームワークとは何かを教えてください。

次のフローチャートは、BDDフレームワークのさまざまなフェーズを示しています。

Step 1 − Start

このフェーズでは、環境をJasmineアプリケーションに対応できるようにします。

Step 2 − Write a failing test

このステップでは、初めてのテストケースを作成します。テストするファイルや関数がないため、このテストが失敗することは明らかです。

Step 3 − Write a code to make it pass

このフェーズでは、テストが必要なJavaScriptファイルまたは関数を準備します。初期段階で準備したすべてのテストケースが成功することを確認する必要があるため、このフェーズは非常に重要です。

Step 4 − Refactor

リファクタリングはBDDモデルの非常に重要なフェーズであり、特定のアプリケーションまたは機能のためにできるだけ多くのテストケースを準備する必要があります。

Step 5 − Stop

すべてが順調に進んでいる場合は、アプリケーションの準備が整っている必要があります。したがって、このステップはBDDアプリケーションの終了と見なすことができます。

例

これで、BDDフレームワークの動作原理に関する知識を収集しました。JavaScriptテストのラインでJasmineがこのBDDフレームワークにどのように従うかを見てみましょう。

スクリーンショットが示すように、Jasmineフレームワークを使用してAbc.jsをテストする必要があります。 SpecRunner.html 取る出力ファイルです Spec.js(Test case file ), Abc.js(file to be tested)、LIBを入力として使用し、スペックファイルに存在するすべてのテストケースを実行して、結果をブラウザーにレンダリングします。

Lib −これらは、プロジェクトで使用されるさまざまな関数やその他のJavaScriptファイルをテストするのに役立つ組み込みのJavaScriptファイルです。

Spec.js(Test case file)−これは、JavaScript関数またはファイルをテストするために必要なすべてのテストケースを含むJavaScriptファイルです。BDD方法論では、最初にテストを作成するため、これが最初に更新する必要のあるファイルです。テストできるファイルや関数がプロジェクトに存在しないため、これは間違いなく失敗します。このファイルは、すべての機能がテストされるまで、無制限にリファクタリングできます。

Abc.js(File to be tested) −これは、Spec.jsおよびLibファイルを使用して単体テストされる機能を含むファイルです。

SpecRunner.html − SpecRunner.htmlは、埋め込まれたJavaScriptコードを使用して単体テストの出力をレンダリングする通常のhtmlファイルです。

この章では、ジャスミンによるテストの構成要素について説明します。

スイートブロック

JasmineはJavaScriptのテストフレームワークです。 SuiteJasmineフレームワークの基本的な構成要素です。特定のファイルまたは関数用に作成された同様のタイプのテストケースのコレクションは、1つのスイートと呼ばれます。他に2つのブロックが含まれています。1つは“Describe()” もう1つは “It()”。

1つのSuiteブロックには、2つのパラメーターのみを含めることができます。 “name of that suite” と別の “Function declaration” これは、実際にテスト対象のユニット機能を呼び出します。

次の例では、ユニットテストの追加関数を使用するスイートを作成します。 add.jsファイル。この例では、JSファイルの名前が“calculator.js” これはJasmineを介してテストされ、対応するJasmineスペックファイルは “CalCulatorSpec.js”。

Calculator.js

window.Calculator = { 
   
   currentVal:0,  
   varAfterEachExmaple:0, 
   
   add:function (num1) { 
      this.currentVal += num1; 
      return this.currentVal;    
   },     
   
   addAny:function () {    
      var sum = this.currentVal; 
		
      for(var i = 0; i < arguments.length; i++) { 
         sum += arguments[i]; 
      } 
      
      this.currentVal = sum; 
      Return  this.currentVal; 
   }, 
};

CalCulatorSpec.js

describe("calculator",function() { 
   
   //test case: 1  
   it("Should retain the current value of all time", function () {
      expect(Calculator.currentVal).toBeDefined();
      expect(Calculator.currentVal).toEqual(0);  
   }); 
   
   //test case: 2  
   it("should add numbers",function() {
      expect(Calculator.add(5)).toEqual(5); 
      expect(Calculator.add(5)).toEqual(10);  
   });         
    
   //test case :3   
   it("Should add any number of numbers",function () {
      expect(Calculator.addAny(1,2,3)).toEqual(6); 
   }); 
});

上記の関数では、2つの関数を宣言しました。関数add その関数と別の関数に引数として指定された2つの数値を追加します addAny 引数として指定された数値を追加する必要があります。

このファイルを作成したら、このファイルをに追加する必要があります “SpecRunner.html”ヘッドセクションの内側。コンパイルが成功すると、結果として次の出力が生成されます。

ネストされたスイートブロック

スイートブロックは、別のスイートブロック内に多くのスイートブロックを持つことができます。次の例は、別のスイートブロック内に別のスイートブロックを作成する方法を示しています。2つのJavaScriptファイルを作成します。1つは次の名前です。“NestedSpec.js” と別の名前 “nested.js”。

NestedSpec.js

describe("nested",function() { 
   
   // Starting of first suite block  
   // First block    
	
   describe("Retaining values ",function () {
   
      //test case:1    
      it ("Should retain the current value of all time", function () { 
         expect(nested.currentVal).toBeDefined();   
         expect(nested.currentVal).toEqual(0);   
      });    
   }); //end of the suite block   

   //second suite block 
   describe("Adding single number ",function () {     
   
      //test case:2 
      it("should add numbers",function() { 
         expect(nested.add(5)).toEqual(5); 
         expect(nested.add(5)).toEqual(10); 
      });         
   }); //end of the suite block  

   //third suite block 
   describe("Adding Different Numbers",function () {  
   
      //test case:3 
      it("Should add any number of numbers",function() {  
         expect(nested.addAny(1,2,3)).toEqual(6);  
      });    
   }); //end of the suite block 
});

Nested.js

window.nested = { 
   
   currentVal: 0,
	
   add:function (num1) {  
      this.currentVal += num1;     
      return this.currentVal;    
   },
   
   addAny:function () { 
      Var sum = this.currentVal; 
		
      for(var i = 0;i < arguments.length; i++) { 
         sum += arguments[i]; 
      } 
		
      this.currentVal = sum; 
      return this.currentVal;    
   }  
};

上記のコードは、実行の結果として次の出力を生成します specRunner.html このファイルをheadセクション内に追加した後のファイル。

ブロックの説明

前に説明したように、describeブロックはSuiteブロックの一部です。Suiteブロックと同様に、2つのパラメーターが含まれています。“the name of the describe block” と別の “function declaration”。今後の例では、Jasmineスイートブロックの動作フローを理解するために、多くのdescribeブロックを実行します。以下は、完全なdescribeブロックの例です。

describe("Adding single number ",function () { 
   
   it("should add numbers",function() { 
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10); 
   });     
}

ITブロック

記述ブロックと同様に、ITブロックも紹介されています。それはdescribeブロック内に入ります。これは、実際に各単体テストケースを含むブロックです。次のコードには、IT 1つの中のブロック describe ブロック。

describe("Adding single number ",function () { 
   
   // test case : 1   
   it("should add numbers",function() {  
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10); 
   });         
    
   //test case : 2 
   it("should add numbers",function() { 
      expect(nested.addAny(1,2,3)).toEqual(6); 
   });     
}

ブロックを期待する

ジャスミン Expect必要な関数またはJavaScriptファイルから期待値を書き込むことができます。それは下に来るITブロック。1つのITブロックに複数のExpectブロックを含めることができます。

以下はExpectブロックの例です。このexpectブロックは、JavaScript関数またはJavaScriptファイルを単体テストするためのさまざまなメソッドを提供します。各Expectブロックは、matcher。マッチャーには2つの異なるタイプがあります。1つはinbuilt matcher と別の user defined matchers。

describe("Adding single number ",function () {   
   
   // test case : 1 
   it("should add numbers",function() {
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10);
   });          
   
   //test case : 2 
   it("should add numbers",function() {
      expect(nested.addAny(1,2,3)).toEqual(6); 
   });     
}

次の章では、Expectブロックのさまざまな組み込みメソッドのさまざまな使用法について説明します。

Jasmineはテストフレームワークであるため、JavaScriptファイルまたは関数の結果を期待される結果と比較することを常に目的としています。マッチャーは、Jasmineフレームワークでも同様に機能します。

Matchers実際の出力と期待される出力の間でブール比較を行うJavaScript関数です。マッチャーには2つのタイプがありますInbuilt matcher そして Custom matchers。

作り付けのマッチャー

Jasmineフレームワークに組み込まれているマッチャーは inbuilt matcher。ユーザーはそれを簡単に使用できますimplicitly。

次の例は、JasmineフレームワークでInbuiltMatcherがどのように機能するかを示しています。前の章ですでにいくつかのマッチャーを使用しました。

describe("Adding single number ", function () {  

   //example of toEqual() matcher    
   it("should add numbers",function() { 
      expect(nested.add(5)).toEqual(5); 
      expect(nested.add(5)).toEqual(10); 
   });   
   
   it("should add numbers",function() { 
      expect(nested.addAny(1,2,3)).toEqual(6); 
   });
}

例では、toEqual（）は、の結果を比較する組み込みのマッチャーです。 add() そして addAny() に渡された引数を持つメソッド toEqual() マッチャー。

カスタムマッチャー

ジャスミンの組み込みシステムライブラリに存在しないマッチャーは、次のように呼ばれます。 custom matcher。カスタムマッチャーを定義する必要がありますexplicitly()。次の例では、カスタムマッチャーがどのように機能するかを確認します。

describe('This custom matcher example', function() {
   
   beforeEach(function() { 
      // We should add custom matched in beforeEach() function. 
      jasmine.addMatchers ({ 
         validateAge: function() { 
            Return {    
               compare: function(actual,expected) {
                  var result = {}; 
                  result.pass = (actual > = 13 && actual < = 19);
                  result.message = 'sorry u are not a teen ';
                  return result; 
               }   
            };   
         }    
      });    
   }); 
    
   it('Lets see whether u are teen or not', function() { 
      var myAge = 14; 
      expect(myAge).validateAge();         
   });   
    
   it('Lets see whether u are teen or not ', function() { 
      var yourAge = 18;
      expect(yourAge).validateAge();  
   });
});

上記の例では、 validateAge()ある範囲であなたの年齢を実際に検証しているマッチャーとして機能します。この例では、validateAge（）はカスタムマッチャーとして機能します。このJSファイルをに追加しますSpecRunner.html同じように実行します。次の出力が生成されます。

Jasmineを使用すると、開発者は1つまたは複数のテストケースをスキップすることもできます。これらの技術は、Spec level または Suite level。アプリケーションのレベルに応じて、このブロックは次のように呼び出すことができます。Skipping Spec そして Skipping Suite それぞれ。

次の例では、特定のスキップ方法を学習します Spec または Suite を使用して “x” キャラクター。

仕様をスキップ

前の例を使用して変更します “x” 直前 it ステートメント。

describe('This custom matcher example ', function() { 
   
   beforeEach(function() { 
      // We should add custom matched in beforeEach() function. 
      
      jasmine.addMatchers({ 
         validateAge: function() { 
            return { 
               compare: function(actual,expected) { 
                 var result = {}; 
                 result.pass = (actual > = 13 && actual < = 19); 
                 result.message = 'sorry u are not a teen ';  
                 return result; 
               }  
            };   
         }    
      });    
   });  
    
   it('Lets see whether u are teen or not', function() { 
      var myAge = 14; 
      expect(myAge).validateAge();  
   });
   
   xit('Lets see whether u are teen or not ', function() {  
      //Skipping this Spec 
      var yourAge = 18; 
   });
});

このJavaScriptコードを実行すると、ブラウザに次の出力が表示されます。ジャスミン自体がユーザーに特定のことを通知しますit ブロックは disabled 一時的に使用 “xit”。

スイートをスキップ

同様に、次の手法を実装するために、describeブロックを無効にすることができます。 Skipping Suite。次の例では、スイートブロックをスキップするプロセスについて学習します。

xdescribe('This custom matcher example ', function() {  
   
   //Skipping the entire describe  block  
   beforeEach(function() {  
   
      // We should add custom matched in beforeEach() function.  
      jasmine.addMatchers({  
         validateAge: function() {  
            return {   
               compare: function(actual,expected) {  
                 var result = {}; 
                 result.pass = (actual >=13 && actual<=19); 
                 result.message ='sorry u are not a teen '; 
                 return result;  
               }   
            };   
         }   
      });   
   });

   it('Lets see whether u are teen or not', function() {  
      var myAge = 14; 
      expect(myAge).validateAge(); 
   });  

   it('Lets see whether u are teen or not ', function() {  
      var yourAge = 18; 
      expect(yourAge).validateAge(); 
   });
});

上記のコードは、次のスクリーンショットを出力として生成します。

メッセージバーに表示されているように、保留状態の2つのスペックブロックが表示されます。これは、これら2つのスペックブロックが “x”キャラクター。次の章では、さまざまなタイプのジャスミンテストシナリオについて説明します。

Jasmineは、JavaScript関数とファイルの同等性をチェックするのに役立つ多くのメソッドを提供します。以下は、同等条件をチェックするためのいくつかの例です。

ToEqual（）

ToEqual()ジャスミンの組み込みライブラリに存在する最も単純なマッチャーです。このメソッドの引数として指定された操作の結果がその結果と一致するかどうかだけが一致します。

次の例は、このマッチャーがどのように機能するかを理解するのに役立ちます。テストするファイルが2つあります。“expectexam.js” そして私たちがテストする必要があるもう一つは “expectSpec.js”。

Expectexam.js

window.expectexam = {    
   currentVal: 0,   
};

ExpectSpec.js

describe("Different Methods of Expect Block",function () { 
   
   it("The Example of toEqual() method",function () {   
      //this will check whether the value of the variable  
      // currentVal is equal to 0 or not.  
      expect(expectexam.currentVal).toEqual(0);  
   });
});

正常に実行されると、これらのコードは次の出力を生成します。これらのファイルをのヘッダーセクションに追加する必要があることを忘れないでくださいspecRunner.html 前の例で指示されたようにファイル。

not.toEqual（）

not.toEqual() toEqual（）とは正反対に機能します。 not.toEqual() 値がどの関数の出力とも一致しないかどうかを確認する必要がある場合に使用されます。

上記の例を変更して、これがどのように機能するかを示します。

ExpectSpec.js

describe("Different Methods of Expect Block",function () { 

   it("The Example of toEqual() method",function () {
      expect(expectexam.currentVal).toEqual(0);  
   });   
   
   it("The Example of not.toEqual() method",function () {  
      //negation  testing expect(expectexam.currentVal).not.toEqual(5); 
   }); 
});

Expectexam.js

window.expectexam = { 
   currentVal: 0,  
};

2番目のexpectブロックでは、の値が currentVal currentValの値がゼロであるため、は5に等しくなります。したがって、テストに合格し、緑色の出力が得られます。

することが（）

toBe()マッチャーはtoEqual（）と同じように機能しますが、技術的には異なります。toBe（）マッチャーはオブジェクトのタイプと一致しますが、toEqual() 結果の同等性と一致します。

次の例は、toBe（）マッチャーの動作原理を理解するのに役立ちます。このマッチャーはJavaScriptの「===」演算子とまったく同じですが、toEqual（）はJavaScriptの「==」演算子に似ています。

ExpectSpec.js

describe("Different Methods of Expect Block",function () {  

   it("The Example of toBe() method",function () { 
      expect(expectexam.name).toBe(expectexam.name1);     
   });
});

Expectexam.js

window.expectexam = {
   currentVal: 0, 
   name:"tutorialspoint", 
   name1:tutorialspoint  
};

少し変更します expectexamJavaScriptファイル。2つの新しい変数を追加しました。name そして name1。追加されたこれら2つの変数の違いを見つけてください。1つは文字列型で、もう1つは文字列型ではありません。

次のスクリーンショットは、赤十字がこれら2つの値が等しくないことを示しているのに対し、等しいと予想されるテスト結果です。したがって、テストは失敗します。

両方の変数を回してみましょう。 name そして name1 文字列型変数として同じように実行します SpecRunner.html再び。次に、出力を確認します。toBe（）が変数の同等性と一致するだけでなく、変数のデータ型またはオブジェクト型とも一致することを証明します。

not.toBe（）

前に見たように、toBe（）メソッドの否定に他なりません。期待される結果が関数またはJavaScriptファイルの実際の出力と一致する場合は失敗します。

以下は、not.toBe（）マッチャーがどのように機能するかを理解するのに役立つ簡単な例です。

describe("Different Methods of Expect Block",function () { 
   it("The Example of not.toBe() method",function () { 
      expect(true).not.toBe(false);    
   });
});

ここで、ジャスミンは真と偽を一致させようとします。trueはfalseと同じにすることはできないため、このテストケースは有効でパススルーされます。

等価性チェックとは別に、Jasmineはブール条件もチェックするためのいくつかのメソッドを提供します。以下は、ブール条件をチェックするのに役立つメソッドです。

ToBeTruthy（）

このブールマッチャーは、結果がtrueまたはfalseに等しいかどうかをチェックするためにJasmineで使用されます。

次の例は、toBeTruthy（）関数の動作原理を理解するのに役立ちます。

ExpectSpec.js

describe("Different Methods of Expect Block",function () {
   it("The Example of toBeTruthy() method",function () {   
      expect(expectexam.exampleoftrueFalse(5)).toBeTruthy();    
   });
});

Expectexam.js

window.expectexam = {  
   exampleoftrueFalse: function (num) {  
      if(num < 10)    
         return true;  
      else   
         return false;  
   },  
};

10よりも小さい番号5を渡すので、このテストケースは合格し、次の出力が得られます。

10より大きい数値に合格すると、この緑のテストは赤に変わります。2番目のスクリーンショットでは、10より大きい値を渡すと、期待されるテストケースが失敗し、「期待される偽が真実である」ことを示す赤い出力が生成されることがわかります。

toBeFalsy（）

toBeFalsy（）もtoBeTruthy（）メソッドと同じように機能します。これは出力と一致してfalseになりますが、toBeTruthyは出力と一致してtrueになります。次の例は、toBeFalsy（）の基本的な動作原理を理解するのに役立ちます。

ExpectSpec.js

describe("Different Methods of Expect Block",function() { 
   it("The Example of toBeTruthy() method",function () {
      expect(expectexam.exampleoftrueFalse(15)).toBeFalsy();   
   });
});

Expectexam.js

window.expectexam = {  
   exampleoftrueFalse: function (num) {  
      if(num < 10)    
         Return true;  
      else   
         return false; 
   },
};

上記のコードは、10を超える値を渡し、出力がfalseであると予想されるため、Jasmineテストケースに合格します。したがって、ブラウザには、合格したことを意味する緑色の記号が表示されます。

Jasmineは、JS出力のシーケンシャルを提供するためのさまざまなメソッドも提供します。次の例は、Jasmineを使用してシーケンシャルチェックを実装する方法を示しています。

含有すること（）

toContain()マッチャーは、要素が同じ配列または他のシーケンシャルオブジェクトの一部であるかどうかを確認する機能を提供します。次の例は、Jasmine toContain（）メソッドの作業方法を理解するのに役立ちます。以前に作成したコードに次のコードを追加しましょうcustomerMatcherSpec.js ファイル。

describe("Different Methods of Expect Block",function () {  
   it("The  Example of toContain() method",function () { 
      expect([1,2, 3, 4]).toContain(3);
   });
});

上記の例では、その配列に3が存在するかどうかを確認しています。配列に3が存在するため、緑色の出力が得られます。

上記の例では、値3を15に変更して、仕様を再実行してみましょう。15はその関数のパラメーターとして渡した配列に属していないため、次の赤い画面が表示されます。

ToBeCloseTo（）

toBeCloseTo()マッチャーは、実際の値が期待値に近いかどうかを照合します。次の例では、customerMatcherSpec.js ファイルを作成して、これが実際にどのように機能するかを確認してください。

describe("Different Methods of Expect Block", function () {  
   it("Example of toBeCloseTo()", function () { 
      expect(12.34).toBeCloseTo(12.3, 1);    
   });
});

上記のDescribeブロックでは、実際の結果「12.3」が期待される出力「12.34」に近いかどうかを確認しています。これは要件を満たしているため、出力として次の緑色のスクリーンショットが表示されます。このメソッドの2番目のパラメーターは、比較する小数点以下の桁数です。

上記のコードで、期待値を15に変更して実行しましょう SpecRunner.html。

describe("Different Methods of Expect Block",function () { 
   it("Example of  toBeCloseTo()", function () { 
      expect(12.34).toBeCloseTo(15, 1);
   });
});

このシナリオでは、15は15に近くないため、エラーが生成され、エラーとして赤いスクリーンショットが表示されます。

合わせる（）

ToMatch()マッチャーは文字列型変数で機能します。特定の文字列が期待される出力に存在するかどうかを確認すると便利です。以下は私たちのcustomerMatcherSpec.js のように見えます。

describe("Different Methods of Expect Block",function () { 
   it("Example of toMatch()", function () { 
      expect("Jasmine tutorial in tutorials.com").toMatch(/com/);   
   });
});

このコードは、 “com”指定された期待される文字列に存在します。なのでcom 文字列に存在する場合、緑色のスクリーンショットが生成され、テスト条件に合格します。

次に、出力を、期待値に存在しない他の文字列に変更しましょう。次に、customerMatcherSpec.js 次のようになります。

describe("Different Methods  of Expect Block",function () { 
   it("Example of toMatch()", function () { 
      expect("Jasmine tutorial in tutorials.com").toMatch(/XYZ/);
   });
});

上記のコードは、期待値に「XYZ」文字列を見つけます。予期された文字列に存在しないため、エラーがスローされ、それに応じて出力画面が赤になります。

Jasmineは、実際の出力がNull、定義済み、または未定義かどうかを確認するためのさまざまな方法を提供します。この章では、上記のシナリオを確認するためにさまざまなJasmineメソッドを実装する方法を学習します。

定義します（）

このマッチャーは、コード内の変数が事前定義されているかどうかを確認するために使用されます。変更しましょうcustomerMatcherSpec.js この例によるファイル。

currentVal = 0;  

describe("Different Methods  of Expect Block",function () { 
   it("Example of  toBeDefined", function () {
      expect(currentVal).toBeDefined();
   });
});

上記のコードでは、toBeDefined（）は変数が currentVal システムで定義されているかどうか。currentValは最初は0に定義されているため、このテストは合格し、出力として緑色のスクリーンショットを生成します。

上記の例でも、最初の行を削除して、実際に「currentVal」を定義して再実行します。次に、赤い画面が表示されます。これは、未定義の値が定義されることを期待しているため、テストが実際に失敗することを意味します。次のスクリーンショットは出力ファイルになります。

ToBeUndefined（）

このマッチャーは、変数が以前に未定義であるかどうかを確認するのに役立ちます。基本的には、toBeDefinedである以前のマッチャーとは逆に機能します。次の例では、このマッチャーの使用方法を学習します。スペックファイルを変更しましょう。customerMatcher.js 次のエントリを持つファイル。

describe("Different Methods of Expect Block",function () { 
   it("Example of toBeUndefine()", function () { 
      var undefineValue; 
      expect(undefineValue).toBeUndefined(); 
   });
});

上記のセクションでは、変数が “undefineValue”実際には未定義かどうか。このファイルをSpecRunnerに追加すると、出力として緑色のスクリーンショットが表示されます。これは、この値が実際には以前に定義されていないことを示しています。

ここでも、事前定義された値を使用して変数を定義し、エラーがスローされるかどうかを確認します。新しいcustomerMatcher.js 次のようになります。

describe("Different Methods of Expect Block",function () {
   it("Example oftoBeUndefine()", function () { 
      var undefineValue = 0;
      expect(undefineValue).toBeUndefined();
   });
});

上記のコードはエラーをスローし、赤色のスクリーンショットを生成します。これは、 “undefineValue” の値 “0”そしてそれが定義されていないことを期待しています。次のスクリーンショットは実行時に生成されますSpecRunner.html ファイル。

toBeNull（）

名前が示すように、このマッチャーはnull値をチェックするのに役立ちます。もう一度変更しましょうcustomerMatcherSpec.js 次のコードを含むファイル。

describe("Different Methods of Expect Block",function () { 
   var value = null; 
	
   it("Example of toBeNull()", function () { 
      expect(value).toBeNull();
   });
});

上記のコードでは、1つの変数について言及しました ”value”そして、この値をnullとして明示的に言及しました。期待ブロックでは、toBeNull（）マッチャーがこの値をチェックし、それに応じて結果を提供します。以下は、SpecRunner.htmlファイルを使用して実行した場合の上記のコードの出力です。

次に、null以外の定義済みの値を指定してテストします。変更してくださいcustomerMatcher.js それに応じてファイルします。

describe("Different Methods of Expect Block",function () {
   var value = "TutorialsPoint"; 
	
   it("Example of  toBeNull()", function () { 
      expect(value).toBeNull();
   });
});

上記の例では、null値ではない「TutorialsPoint」で変数値を変更しました。したがって、このテストは失敗し、出力として赤いスクリーンショットが生成されます。

これまで、要件に基づいてさまざまなシナリオをテストするのに役立つ、Jasmineのさまざまな方法について説明してきました。この章では、JSファイルの不等式条件をチェックするのに役立つさまざまなマッチャーについて学習します。以下は、この目的で使用されるマッチャーです。

ToBeGreaterThan（）

名前が示すように、このマッチャーは大なり記号のチェックに役立ちます。変更しましょうcustomerMatcher.js 次のコードを使用します。

describe("Different Methods of Expect Block",function () { 
   var exp = 8;  
	
   it("Example of  toBeGreaterThan()", function () {
      expect(exp).toBeGreaterThan(5);
   });
});

上記のコードでは、変数の値が “exp” 変数「exp」の値が「8」であり、「5」より大きいため、このコードは緑色のスクリーンショットを生成します。

ここで、変数の値を「4」に変更して、このテストを失敗させましょう。これを行うには、を変更する必要がありますjs 次のコードを使用してファイルします。

describe("Different Methods of Expect Block",function () {  
   var exp = 4;  
	
   it ("Example of toBeGreaterThan()", function () {
      expect(exp).toBeGreaterThan(5); 
   });
});

値4は5より大きくできないため、このコードは失敗します。したがって、次の出力が生成されます。

ToBeLessThan（）

このマッチャーは、テストシナリオの未満の状態をチェックするのに役立ちます。toBeGreaterThan（）マッチャーとは正反対の動作をします。ここで、このマッチャーがどのように機能するかを見てみましょう。変更しましょうcustomerMatcher.js それに応じてファイルします。

describe("Different Methodsof Expect Block",function () { 
   var exp = 4;  
	
   it("Example of toBeLessThan()", function() { 
      expect(exp).toBeLessThan(5);    
   });
});

前の例のように、値が「4」の変数が1つあります。このコードでは、この変数の値が5未満であるかどうかを確認しています。このコードは、次の出力を生成します。

これを失敗させるには、変数expにさらに大きな数値を割り当てる必要があります。それを実行して、アプリケーションをテストしましょう。値として25を割り当てます。exp、これは間違いなくエラーをスローし、次のスクリーンショットを赤で表示します。

Jasmineは、この特別なタイプのテストシナリオをチェックするための特別なマッチャーを提供しています。 toBeNaN()。

変更しましょう customerMatcher.js 次のコードで。

describe("Different Methods of Expect Block",function () { 
   it("Example of toBeNaN()", function () { 
      expect(0 / 0).toBeNaN(); 
   });
});

ここでは、決定できない「0/0」の値をテストします。したがって、このコードは次の緑色のスクリーンショットを生成します。

ここで、次のロジックを使用してコードを再度変更します。ここで、1つの変数を割り当てます。 exp 25になり、結果が5で割るナンバーワンではないことを期待します。

describe("Different Methods of Expect Block",function () { 
   var exp = 25; 
	
   it("Example of toBeNaN()", function () { 
      expect(exp/5).toBeNaN(); 
   });
});

このコードは、次の出力を生成します。

さまざまな計算マッチャーとは別に、Jasmineはプログラムの例外をチェックするためのいくつかの便利なマッチャーを提供します。次の一連のコードを使用してJavaScriptを変更してみましょう。

var throwMeAnError = function() {   
   throw new Error(); 
};  

describe("Different Methods of Expect Block", function() {  
   var exp = 25; 

   it ("Hey this will throw an Error ", function() { 
      expect(throwMeAnError).toThrow(); 
   }); 
});

上記の例では、そのメソッドから意図的に例外をスローする1つのメソッドを作成し、expectブロックでエラーをキャッチすることを期待しています。すべてがうまくいけば、このコードは次の出力を生成します。

ここで、このテストケースが失敗するためには、関数でそのthrowステートメントを省略する必要があります。 throwMeAnError。以下は、コードが要件を満たしていないため、出力として赤いスクリーンショットを生成するコードです。

var throwMeAnError = function() {   
   //throw new Error(); 
};   

describe("Different Methods of Expect Block",function() {  
   var exp = 25; 
   
   it("Hey this will throw an Error ", function() {  
      expect(throwMeAnError).toThrow();    
   }); 
});

ご覧のとおり、メソッドが例外をスローしていた場所からその行にコメントしました。以下は、SpecRunner.htmlが正常に実行されたときの上記のコードの出力です。

Jasmine.Any（）

Any出力がわからないときに使用される特別なマッチャーです。次の例では、これがどのように機能するかを学習します。変更しましょうcustomerMatcher.js 次のコードで。

var addAny = function() {
   var sum = this.currentVal; 
	
   for (var i = 0; i < arguments.length; i++) { 
      sum += arguments[i]; 
   } 
	
   this.currentVal = sum;  
   return this.currentVal; 
} 

describe("Different Methods of Expect Block",function () { 
   
   it("Example of any()", function() { 
      expect(addAny(9,9)).toEqual(jasmine.any(Number)); 
   });
});

ここでは、引数として提供された数値の合計を与える1つの関数を宣言しました。期待ブロックでは、結果は何でもかまいませんが、数値である必要があります。

合計利回り18の後の9と9は両方とも数値であるため、このテストは合格し、次の緑色のスクリーンショットが出力として生成されます。

次に、次のコードに従ってコードを変更します。ここでは、関数の出力として文字列型変数が必要です。 AddAny()。

var addAny = function() { 
   var sum = this.currentVal; 
	
   for(var i = 0; i < arguments.length; i++) { 
      sum += arguments[i]; 
   } 
	
   this.currentVal = sum; 
   return this.currentVal; 
}  

describe("Different Methodsof Expect Block",function () { 
   it("Example of any()", function () { 
      expect(addAny(9,9)).toEqual(jasmine.any(String));    
   });
});

上記のコードの出力は次のとおりです。

ジャスミンのもう1つの注目すべき機能は、各機能の前後です。これらの2つの機能を使用して、各仕様の実行の前後にいくつかのコードを実行できます。この機能は、アプリケーションで一般的なコードを実行するのに非常に役立ちます。次のような1つのスペックファイルを作成しましょう。

var currentVal = 0; 

beforeEach(function() { 
   currentVal = 5; 
});  

describe("Different Methods of Expect Block",function() { 
   it("after each function ", function() {
      expect(currentVal).toEqual(5);     
   });
});

ここでは、最初に1つの変数を「0」として宣言しましたが、この値は期待値ブロックで5に等しいはずです。上記のコードは、次の出力を生成します。

上記のコードでは、5が変数に割り当てられます currentVal期待ブロックの実行前。したがって、エラーなしで緑色のスクリーンショットが生成されます。

beforeEach（）と同様に、afterEach（）もまったく同じように機能します。スペックブロックの実行後に実行されます。次のコードを使用して、前の例を変更してみましょう。

var currentVal = 0; 

afterEach(function() { 
   currentVal = 5;  
});  

describe("Different Methods of Expect Block",function() { 
   it("first call ", function() { 
      expect(currentVal).toEqual(0);     
   });     
   
   it("second call ",  function() { 
      expect(currentVal).toEqual(5);     
   });
});

上記の例では、最初のスペックブロックを実行している間、 currentVal したがって、テストケースに合格しますが、最初のitブロックを実行した後、JasmineコンパイルでafterEach（）ブロックが実行され、currentValの値が5になります。したがって、2番目のケースも満たし、緑色のスクリーンショットが生成されます。出力として。

ジャスミンスパイは、その名前が指定するのとまったく同じことを行う別の機能です。これにより、アプリケーションの関数呼び出しをスパイすることができます。ジャスミンで利用可能なスパイ技術には2つのタイプがあります。最初の方法論は、を使用して実装できますspyOn() 2番目の方法論は、 createSpy()。この章では、これら2つの方法論について詳しく学習します。

spyOn（）

spyOn（）はJasmineライブラリに組み込まれているため、特定のコードをスパイすることができます。新しいスペックファイル「spyJasmineSpec.js」と別のファイルを作成しましょうjs「spyJasmine.js」という名前のファイル。以下は、これら2つのファイルのエントリです。

SpyJasmine.js

var Person = function() {}; 

Person.prototype.sayHelloWorld = function(dict) { 
   return dict.hello() + " " + dict.world(); 
}; 

var Dictionary = function() {}; 

Dictionary.prototype.hello = function() { 
   return "hello"; 
}; 

Dictionary.prototype.world = function() { 
   return "world"; 
};

SpyJasmineSpec.js

describe("Example Of jasmine Spy using spyOn()", function() { 
  
   it('uses the dictionary to say "hello world"', function() { 
      var dictionary = new Dictionary; 
      var person = new Person; 
		
      spyOn(dictionary, "hello");  // replace hello function with a spy 
      spyOn(dictionary, "world");  // replace world function with another spy 
		
      person.sayHelloWorld(dictionary);
      expect(dictionary.hello).toHaveBeenCalled();  
      // not possible without first spy 
  
      expect(dictionary.world).toHaveBeenCalled();  
      // not possible withoutsecond spy 
   }); 
});

上記のコードでは、personオブジェクトに「Helloworld」と表示させますが、personオブジェクトが辞書オブジェクトと参照して出力リテラル「Helloworld」を取得する必要もあります。

スペックファイルを見てください。ここでは、spyOn（）関数を使用していることがわかります。これは、実際にはの機能を模倣しています。 hello そして world関数。したがって、実際には関数を呼び出すのではなく、関数呼び出しを模倣しています。それがスパイの得意分野です。上記のコードは、次の出力を生成します。

createSpy（）

スパイ機能を取得する別の方法は、createSpy（）を使用することです。2つを変更しましょうjs 次のコードを使用してファイル。

SpyJasmine.js

var Person = function() {};    

Person.prototype.sayHelloWorld = function(dict) { 
   return dict.hello() + " " + dict.world(); 
}; 

var Dictionary = function() {}; 

Dictionary.prototype.hello = function() { 
   return "hello"; 
}; 

Dictionary.prototype.world = function() { 
   return "world"; 
};

SpyJasmineSpec.js

describe("Example Of jasmine Spy using Create Spy", function() { 
   
   it("can have a spy function", function() { 
      var person = new Person(); 
      person.getName11 = jasmine.createSpy("Name spy"); 
      person.getName11(); 
      expect(person.getName11).toHaveBeenCalled(); 
   }); 
});

スペックファイルを見てください、私たちは getName11() の Personオブジェクト。この関数は、の人物オブジェクトには存在しませんがspy Jasmine.js、エラーは発生していないため、出力は緑色で正です。この例では、createSpy（）メソッドは実際にはgetName11（）の機能を模倣しています。

上記のコードは、次の出力を生成します。