2014-11-17 5 views
9

자스민 (테스트 브라우저는 PhantomJS)에서 키 누르기를 시뮬레이션하려고하므로 키 누름을 사용하는 일부 기능을 단위 테스트 할 수 있습니다. 불행히도, 나는 오류가 발생하기 때문에 Jasmine으로 제대로 테스트 할 수 없습니다. 여기 jasmine의 가짜 키 누르기 시뮬레이션

코드는 내가 테스트를 시도하고있다 :

function Controls() { 
    'use strict'; 
    this.codes = { 
    37: 'left', 
    39: 'right', 
    38: 'forward', 
    40: 'backward' 
    }; 
    this.states = { 
    'left': false, 
    'right': false, 
    'forward': false, 
    'backward': false 
    }; 
    document.addEventListener('keydown', function() { this.onKey.bind(this, true); }, false); 
    document.addEventListener('keyup', function() { this.onKey.bind(this, false); }, false); 
} 

Controls.prototype.onKey = function(val, e) { 
    var state = this.codes[e.keyCode]; 

    if (typeof state === 'undefined') return false; 

    this.states[state] = val; 

    // Stop the key press from repeating 
    e.preventDefault(); 
    e.stopPropagation(); 

    return true; 
}; 

controls = new Controls(); 

(참고 :. 재스민은 실제로 내 테스트를 실행하려고 수 있도록 위의 코드는 익명없이 익명의 기능에서 addEventListener의 기능을 래핑 . TypeError: 'undefined' is not a function (evaulating 'this.onKey.bind(this, true)'이 문제를 해결하는 것은 너무 큰 것 )

을 그리고이 테스트에서 내 시도 : 랩, 이것은 또 다른 오류가 발생

function keyPress(key) { 
    var pressEvent = document.createEvent('KeyboardEvent'); 
    pressEvent.initKeyEvent('keydown', true, true, window, 
          false, false, false, false, 
          0, key); 
    document.dispatchEvent(pressEvent); 
} 

describe("Controls", function() { 
    var controls; 

    it("should initialize properly", function() { 
    controls = new Controls(); 
    expect(controls).not.toBe(null); 
    }); 

    it("should reflect changes in state when arrow keys are used", function() { 
    keyPress(37); 
    expect(controls.states[state]).toBe(37); 
    }); 
}); 

이 재스민에서 오류가 발생합니다

TypeError: 'undefined' is not a function (evaluating 'pressEvent.initKeyEvent('keydown', true, true, window, false, false, false, false, 0, key)') 

난 아직도 재스민 아주 새로운 해요 (그리고 그 문제, 자바 스크립트 위해) 때문에, 일반적으로 어떤 도움을 주시면 감사하겠습니다.

답변

15

귀하의 문제는 귀하의 일정 작성 방법과 같습니다.

아래 예제 코드는 이벤트가 생성, 트리거 및 가로채는 방법을 보여줍니다. http://plnkr.co/edit/TxGXcT0DnPa44C0PkHkN?p=preview

+0

실제 문제가 해결되었으므로이 답변을 수락했습니다. 크리스 감사합니다! 그러나 내 원래의 질문은 내가 묻고 있어야만했던 것이 아니기 때문에 이에 대한 자세한 내용을 아래에 제공 할 것입니다. – emmabukacek

+2

안녕하세요, 이것은 오래된 게시물이지만'''keyCode'''가 이제는 더 이상 사용되지 않습니다. [MDN 기사보기] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode). 그래서 코드는'''''''''''''''''코드''를 사용해야하므로 약간 다릅니다. – ollie314

3

편집 :

var keyPressed = null; 

function keyPress(key) { 
    var event = document.createEvent('Event'); 
    event.keyCode = key; 
    event.initEvent('keydown'); 
    document.dispatchEvent(event); 
} 

document.addEventListener('keydown', function(e){ 
    keyPressed = e.keyCode; 
}); 

keyPress(37) 
alert(keyPressed); 

여기 너무 plunker의이 문제는 2. 상세 정보 아래의 문제에 PhantomJS의로 해결해야한다. 이 게시물의 날짜를 기준으로, PhantomJS 아직 바인드를 지원하지 않기 때문에

this.onKey.bind(this, true) 

오류를 반환 그래서 이유

이다. 당신은 여기에 대한 자세한 정보를 찾을 수 있습니다 :

https://github.com/ariya/phantomjs/issues/10522

여기 ariya에서 더 이상 설명 :

https://groups.google.com/forum/#!msg/phantomjs/r0hPOmnCUpc/uxusqsl2LNoJ

이 문제가 creationix에 의해 제안으로 polyfill을 만드는 것입니다 주위에 방법 :

https://github.com/c9/smith/blob/master/tests/public/test.js#L2-L7

이 나는 ​​모두를 감안할 때 그것은 프로토 타입 문제를 피할 수 있다는 것을 조금 더 쉽게 관리 할 수있는 테스트를해야합니다. 모든 도움에 감사드립니다!

관련 문제