jQuery on（）メソッドのジャスミンテストケースの記述方法

Question

Jasmineを初めて使用しています。見越して

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    logger.debug('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId){...} 

ありがとう：誰かが次のjQueryコードのテストケースを作成する方法について私にブリーフィングしてくださいすることができた場合に感謝！

上記のコードのためのジャスミンのテストケース：

describe('Working with transaction details component', function() { 
    beforeEach(function() { 
     spyOnEvent(document, 'startViewDetail'); 
     $(document).trigger('startViewDetail', mockDataObject.transactionId); 
    }); 
    it('test startViewTransaction', function() { 
     spyOn(document, 'startViewTransaction').and.callFake(function(e) {
   console.log("This is a spy call for startViewTransaction");
   }); 
     expect(document.startViewTransaction).toHaveBeenCalled();
   expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId); 
    }); 
}); 

Answer 1

この投稿は、広い範囲を持っているので、私は、だからここに一つのアプローチ

で始めたいあなたが望む前に依頼する必要があるいくつかのことですユニットにあなたのコードは

• あなたのコードの機能をテストまたはイベントの機能が
• もし結合されたテストjQueryがすでに完全にユニットテストしているのではないかと心配しています。

私は個人的にjQueryメソッドをテストする必要はないと感じています。これは実際の手書きコードをテストする目的を単純にそらすものです。ここにあなたのコードに基づいて準備したサンプルテストがあると言いました。

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    console.log('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId) { 
    console.log('started transaction with transactionId: ' + transactionId); 
} 

describe('sample test', function() { 
    it('test startViewTransaction', function() { 
    spyOn(window, 'startViewTransaction').and.callFake(function(e) { 
     console.log("This is a spy call for startViewTransaction"); 
    }); 
    var obj = $(document); 
    obj.trigger('startViewDetail', 1); 
    expect(window.startViewTransaction).toHaveBeenCalled(); 
    expect(window.startViewTransaction).toHaveBeenCalledWith(1); 
    }) 
}); 

EDIT： コメントに答える：

• startViewDetailが方法ではありません、それはそう、あなたのラインspyOnEvent(document, 'startViewDetail');が無効で、イベント名です。いかなる目的も果たさないので、それを取り除く。
• 私はなぜdocumentオブジェクトを覗いているのだろうと思うのですが、javascriptの迷走/スタンドアロン機能は常にウィンドウの下にあります。だから、あなたのスパイを文書化するのではなく、ウィンドウに向かって動かしてください。
• beforeEachにこの行を使用しないでください。上記のようにテストで使用してください。
• spyOn(document, 'startViewTransaction').and.callFake(function(e) {
 console.log("This is a spy call for startViewTransaction");
 });も変更する必要があります。
• 同じことがexpect(document.startViewTransaction).toHaveBeenCalled();
 expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId);
  • ジャスミンdocumentation beforeEachが、それは、afterEachブロックの仕組みを理解するための最良のソースがある場合です。