자바스크립트 테스트 더블을 설명합니다. 발표 동영상 : http://youtu.be/0LGD_Z20tPk

1. Sinon.js
part2

2. May I
Believe?

3. GITHUB STARS
JQUERY27,053
UNDERSCORE10,015
ZEPTO5,957
REQUIRE4,969
HIGHCHARTS 1,472
EJS1,224

4. GITHUB STARS
JQUERY27,053
UNDERSCORE10,015
ZEPTO5,957
SINON 1,206
REQUIRE4,969
HIGHCHARTS 1,472
EJS1,224

5. Who made ​it?

6. Christian
Johansen
노르웨이 오슬로에 살고있는
노르웨이 출신의 개발자
Shortcut AS에서 근무 중
정보 과학과 수학 그리고
디지털 신호 처리를 전공
노르웨이 최고 기업들의 고문으로
활동한 프론트엔드 기술 전문가

7. Christian Johansen
의 저서
Part I : Test-Driven Development
Part II : Javascript for Programmers
Part III : Real-World Test-Driven
Development in Javascript
Part IV : Testing Patterns

8. 전통적인 Test Double 객체 정의와
Sinon.js의 Test Double 객체 정의는
미세하게 다를 수 있다.

9. Test Double
테스트하기 어려운 컴포넌트의 Test Double의 이름은 우리나라에서 흔히
스턴트맨
역할을 대체하는 기능을 가진 이라고 부르는 스턴트 대역을 뜻하는 Stunt
객체를 사용 하여 테스트하기 Double
에서 유래했다. 유래를 빗대어 해석하면
쉽게 한다
테스트 대역이된다.
Test Double의 종류로는 Spy, Stub, Mock,
FakeObject
등이 있다.
이들은 각각 용도가 다르기 때문에 상황에
맞게
적절히 잘 사용해야 한다.

10. Test Double
Spy
Stub
Mock
FakeObject

11. Sinon.js
자바스크립트 테스트 더블
라이브러리
Sinon.js는 주로 테스트 대상이 의존하는
모듈과 자
원의 대역의 용도로 사용한다. 특정 테스트
프레임
워크를 의존하지 않기 때문에 QUnit 이 외의
테스트
프레임워크와도 함께 사용할 수 있다.
Sinon이라는 철자는 ‘시논’ 또는 ‘시농’이라고
발음
하며 이름은 트로이 전쟁에서 활약한 스파이의
이름
에서 유래했다.
복잡한 비동기나 동시 다발적인 이벤트 그리고
애니메이션등 작성 하기 어려운 테스트 타입을
Spy, Stub,
Mock, FikeTimer, FakeXmlHttpRequest,

12. TRADITIONALSTUB
아직 개발되지 않은 클래스나 메소드가 처리 후 리턴해야
하는
값을 전달해 주는 역할을 한다. 대부분 그 값은
하드코딩되어
있다.
자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

13. SINONSTUB
어떤 함수의 동작을 변경하거나 예외를 발생시킬 수 있다.
보통 어떤
기능을 테스트하기 위해 필요한 함수의 대역으로써 사용한다.
Stub 객체는 익명 함수로 생성할 수 있고 기존 함수를 덮어쓸
수도 있다.

14. SINONSTUBanonymous
QUnit.test('Anonymous stub', function(){
expect(3);
var stub = sinon.stub();
stub.withArgs(42).returns(1);
stub.withArgs(1).throws('error', '에러');
try {
stub(1);
}catch(e){
ok(true);
}
equal(stub(), undefined);
equal(stub(42), 1);
});

15. SINONSTUBoverride
QUnit.test('Stub', function(){
var stub = sinon.stub(Talk.prototype, 'greeting'),
talk = new Talk();
stub.withArgs('hello').returns(true);
stub.withArgs('apple').returns(false);
equal(talk.greeting('hello'), true);
equal(talk.greeting('apple'), false);
stub.restore();
});

16. TRADITIONALSPY
Stub과 비슷하지만, 어떤 작업을 수행했는지에 대한
이력을
남긴다는 점이 다르다. 다시 말해서 Stub 과 같은 역할을
하는
척 하지만 이름 그대로 스파이 같은 짓을 한다고
생각하면
된다.
자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

17. SINONSPY
메서드의 대체재 역할을 하는 Spy는 호출 될 때 인수,
반환 값,
this, exception등을 기록할 수 있다. Stub과 다르게 특정
함수의
동작을 변경할 수 없다.
Spy 객체는 익명 함수로 생성할 수 있고 기존 함수를 랩핑 할
수 있다.

18. SINONSPYexample
QUnit.test('Spy', function(){
var spy = sinon.spy($, 'ajax');
$.getJSON('/some/resource');
ok(spy.calledOnce, 'method is called once');
});

19. TRADITIONALMOCK
Stub, Spy 를 통합해 놓은 것과 비슷하다. 하지만
Mock 은 보통 라이브러리를 사용하여 동적으로
데이터를 처리해줄 부분을 생성한다는 점이 다르다.
자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

20. SINONMOCK
Mock은 Spy, Stub과 비슷하다. Spy, Stub과와 다른 점은
메서드의
행동과 수행 결과의 값을 미리 설정하고 설정한 기대치 대로
메서드가
실행되었는지 검증하는 기능이 있다. 만약 예상한 결과와
다르다면
테스트는 실패하게된다.
보통 Mock은 아직 구현되지 않은 기능을 정의하거나 원래의
기능에서 일어날 수 없는 시나리오를 시뮬레이션 하려고 할 때
사용한다.

21. SINONMOCK example
QUnit.test('Mock', function(){
var talk = new Talk(),
mock = sinon.mock(talk);
mock.expects('greeting').twice();
talk.greeting('hello');
talk.greeting('apple');
equal(mock.verify(), true);
mock.restore();
});

22. TRADITIONALFAKE
테 스 트 에 직 접 적 인 연 관 은 없 지 만 테 스트하고자 하는
시스템
과 연계되는 시스템이 너무 느리거나, DB가 아직
구성되지 않
았을 경우에 해당 부분이 실제 존재하는 것처럼
처리하는 부
분을 말한다.
자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

23. SINONFAKETIMER
FakeTimer를 이용해 setTimeout (), clearTimeout (),
setInterval (),
clearInterval ()과 Date 객체의 시간을 조작 할 수 있다. 마치
시간을
컨트롤 할 수있는 것처럼 작성이 가능하다.

24. SINONFAKETIMERexample
QUnit.test('FakeTimer', function(){
var clock = sinon.useFakeTimers(),
el = jQuery('div');
el.appendTo(document.body);
el.animate({height : '200px', width : '200px'}, 1000);
clock.tick (1000);
equal('200px', el.css('height'));
equal('200px', el.css('width'));
});