指定されたセレクタからのnodeListのジャスミンテストイベントリスナー関数

Question

nodeListの指定された配列のキーダウンイベントをリッスンする次のコードがあります。

var obj = { 
method: function(nodeSelector) { 
    var nodeContainers = document.querySelectorAll(nodeSelector); 
    var keyListenerFunc = this.keyListener.bind(this); 

    this.bindListener(nodeContainers, keyListenerFunc); 
    }, 
    isListNode: function (evt){ 
    return evt.target.nodeName.toLowerCase() === 'li'; 
    }, 
    isContainer: function(evt){ 
    return evt.target.parentNode.classList.contains(this.indicatorClass); 
    }, 
    keyListener: function(evt) { 
    if (evt.keyCode === 32 && (this.isContainer(evt) && this.isListNode(evt))) { 
     evt.preventDefault(); 
     evt.target.click(); 
    } 
    }, 
    bindListener: function(targets, callbackFunc) { 
    [].forEach.call(targets, function(item) { 
     item.addEventListener('keydown', callbackFunc); 
    }); 
    }, 
    indicatorClass: 'indicator' 
}; 

私はそれが好きで使っています：obj.method('.someClassNames'); をしかし、今、私は完全にはKeyDownイベントのトリガを含む、それをテストしたいです。ジャスミンテストが機能するように、イベントリスナーを接続し、特定のdomノードでkeydownイベントをトリガーするにはどうすればよいですか？ここでダミーのHTMLコードを作成してイベントをトリガーする方法はありますか？私は私のマークアップが

var html = '<div class="someClassNames">'+ 
    '<div class="indicator">'+ 
     '<li>text</li>'+ 
    '</div>' 
    '</div>'; 

私はKeyDownイベントイベント次トリガする必要がありますするつもりですが、私はするとして確認していないと仮定していますが>

it('It should put event listeners on each carousel passed to the service', function(){}); 
it('It should call event.preventDefault', function(){}); 
it('It should call event.target.click', function(){}); 

follwingさ=このタイプのテストを書くことを期待していますトリガする方法は、指定されたマークアップにあり、テストの記述をチェックインします。

var e = new window.KeyboardEvent('keydown', { 
     bubbles: true 
}); 
Object.defineProperty(e, 'keyCode', {'value': 32}); 

私はJasmineでテストするのが非常に新しく、このシナリオのテストに役立つ例は見つかりませんでした。私の例はそれをはっきりさせることを望む。

Answer 1

少数の観測：callbackFuncが実際に要素のonkeydownを
属性に割り当てられていることを

• は注意してください。したがって、あなたはスペックが して実行を持っていた後、時々、UI要素のレンダリングが行われてもよい
  element.onkeydownではなくobj.keyListener

• をスパイすることができます。ですから、要素がある持っていることを確認するために、私はあなたが本当にあなたのobk.keyListenerをテストしたい場合は、here

よう 匿名関数を使用してみてくださいジャスミン clock
• で のsetTimeoutを使用しました

ここで私はそれをどのように実行しています。

<div class="someClassNames"> 
    <div class="indicator"> 
    <li>text</li> 
    <br/> </div> 
</div> 

：私は:)

var obj = { 
    testVar : "Object", 
    method: function(nodeSelector) { 
    var nodeContainers = document.querySelectorAll(nodeSelector); 
    var keyListenerFunc = this.keyListener.bind(this); 
    this.bindListener(nodeContainers, keyListenerFunc); 
    }, 
    isListNode: function(evt) { 
    return evt.target.nodeName.toLowerCase() === 'li'; 
    }, 
    isContainer: function(evt) { 
    return evt.target.parentNode.classList.contains(this.indicatorClass); 
    }, 
    keyListener: function(evt) { 
    console.log('Yo! You hovered!');  
    }, 
    bindListener: function(targets, callbackFunc) { 
    targets.forEach(function(item) { 
     item.addEventListener('mouseover', callbackFunc, false); 
    }); 
    }, 
    indicatorClass: 'indicator' 
}; 

describe('Sample tests', function() { 
//this ensures you have the element set up 
    beforeEach(function() { 
    jasmine.clock().install(); 
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 200; 
    setTimeout(function() { 
     obj.method('div.indicator'); 
    }, 0); 
    }); 

    it('It should put event listeners', function() { 
    jasmine.clock().tick(10); 
    var ele= document.getElementsByClassName("indicator")[0]; 
    spyOn(ele, 'onmouseover').and.callThrough();  
    $('.indicator').trigger('mouseover');  
    expect(ele.onmouseover).toHaveBeenCalled(); 
    expect(typeof ele.onmouseover).toBe('function'); 
    }); 
}); 

HTMLコンテンツ怠け者だと私はマウスオーバーを使用しました