パッケージ開発担当のよみです。

「ピクルス ザ フロッグ」かわいいですね。
近くに売っていなかったので、少し遠いファンシーショップまで足を延ばして購入してきました、
ファンシーショップってありそうで結構ないものなんですね。。。

今回はJasmineです。歌手でもプリンセスでも花でもないJasmineです。
TypeScript + Jasmineを触る機会があり、色々なサイトを見て回ったのですが、
Jasmineの機能をまとめて書いてある所がなく、複数のサイトを開いて確認する必要がありメンドウだったので
自分のためにも、適当によく使うモノをまとめておきたいと思います。

はじめに

  • TypeScript
    コンパイル結果がJavaScriptコードになる、静的型付けの言語。
  • Jasmine
    JavaScript用のオブジェクトの振る舞いを記述するスペックフレームワーク。
  • TypeScriptよりJasmineを使用するには

    DefinitelyTypedより「jasmine.d.ts」を取得してください。(「t」を押すと検索できます)
    その後、型定義ファイルを適当な箇所に配置し、以下のように参照してください。

    /// <reference path="./jasmine/jasmine.d.ts" />
    

    基本

  • describe(“Test”, () => {});
    テストをまとめます。
  • it(“Test”, () => {});
    1つのテストを現します。
  • beforeEach(() => {});
    itの度に呼び出されます。
  • afterEach(() => {});
    itを通し終わる度に呼び出されます。
  • xit(“Test”, () => {}); and xdescribe(“Test”, () => {});
    実行されません。
  • expect

    基本となる比較です、色々ありますが、よく使うのもを。

    expect(A).toEqual(B) AとBが等しいか
    expect(A).toBe(B) AとBが同オブジェクトか
    expect(A).toContain(B) A内にBが含まれるか
    expect(A).toBeCloseTo(B) AがBに近い数値であるか
    expect(A).toMatch(|B|) AとBが正規表現でマッチするか
    expect(A).toBeGreaterThan(B) AはBより大きいか
    expect(A).toBeLessThan(B) AはBより小さいか
    expect(A).toBeTruthy() Aがtrueであるか
    expect(A).toBeFalsy() Aがfalseであるか
    expect(A).toBeDefined() Aが定義されているか
    expect(A).toBeUndefined() Aが定義されていないか
    expect(A).toBeNull() AがNullであるか
    expect(A).toThrow() Aを行った際、エラーが発生するか

    ※「expect(A).not.toEqual(B)」のように「not」を付けることで、否定形になります。

    spyOn

    モックの役割をしてくれます。

    spyOn(A,”B”).andReturn(C) AオブジェクトのBメソッドの戻り値をCにする
    spyOn(A,”B”).andCallFake(C) AオブジェクトのBメソッドの代わりにCを実行する
    spyOn(A,”B”).andThrow(C) AオブジェクトのBメソッドが実行された場合、Cメッセージのエラーを発生させる
    spyOn(A,”B”).reset() AオブジェクトのBメソッドの変数を初期化する

    ついでに

    Jasmineとは関係ないですが、ブラウザによって取得される値が違う場合が多々あったので

    var userAgent = window.navigator.userAgent.toLowerCase();
    if(userAgent.indexOf("chrome") != -1){}
    if(userAgent.indexOf("safari") != -1){}
    if(userAgent.indexOf("firefox") != -1){}
    

    上記で各ブラウザの判別が可能なので処理を分けることができます。

     

    /// <reference path="./jasmine/jasmine.d.ts" />
    //テスト対象
    class TestA {
       add(a:number,b:number):number{
          return a + b;
       }
    }
    
    //実際のテスト記述
    describe("TestAオブジェクト", () => {
       var testa;
       beforeEach(() => {
          testa = new TestA();
       });
       describe("addメソッドのテスト", () => {
          it("2+3は5",() => {
             expect(testa .add(2,3)).toEqual(5);
          });
       });
       describe("spyOnで値を強制的に変更", () => {
          beforeEach(() => {
             spyOn(testa ,"add").andReturn(72);
          });
          it("spyOnで戻り値が72で変更されている",() => {
             expect(testa .add(2,3)).toEqual(72);
          });
       });
    });
    
    

    こんな感じになります。テストするメソッドをspyOnすることは無いですが雰囲気だけでも^^;