Sinon.js part2

May IBelieve?

GITHUB STARS

JQUERY27,053

ZEPTO5,957

UNDERSCORE10,015

REQUIRE4,969

EJS1,224

HIGHCHARTS 1,472

GITHUB STARS

JQUERY27,053

ZEPTO5,957

UNDERSCORE10,015

REQUIRE4,969

EJS1,224

HIGHCHARTS 1,472

SINON 1,206

Who made it?

ChristianJohansen

노르웨이 오슬로에 살고있는

노르웨이 출신의 개발자

Shortcut AS에서 근무 중

정보 과학과 수학 그리고

디지털 신호 처리를 전공

노르웨이 최고 기업들의 고문으로

활동한 프론트엔드 기술 전문가

Christian Johansen

의 저서

Part I : Test-Driven Development

Part II : Javascript for Programmers

Part III : Real-World Test-DrivenDevelopment in Javascript

Part IV : Testing Patterns

전통적인 Test Double 객체 정의와

Sinon.js의 Test Double 객체 정의는

미세하게 다를 수 있다.

Test Double테스트하기 어려운 컴포넌트의

역할을 대체하는 기능을 가진

객체를 사용 하여 테스트하기

쉽게 한다

Test Double의 이름은 우리나라에서 흔히

스턴트맨

이라고 부르는 스턴트 대역을 뜻하는 Stunt

Double

에서 유래했다. 유래를 빗대어 해석하면

테스트 대역이된다.

Test Double의 종류로는 Spy, Stub, Mock,

FakeObject

등이 있다.

이들은 각각 용도가 다르기 때문에 상황에

맞게

적절히 잘 사용해야 한다.

Test Double

Spy Stub Mock FakeObject

Sinon.js자바스크립트 테스트 더블

라이브러리

Sinon.js는 주로 테스트 대상이 의존하는

모듈과 자

원의 대역의 용도로 사용한다. 특정 테스트

프레임

워크를 의존하지 않기 때문에 QUnit 이 외의

테스트

프레임워크와도 함께 사용할 수 있다.

Sinon이라는 철자는 ‘시논’ 또는 ‘시농’이라고

발음

하며 이름은 트로이 전쟁에서 활약한 스파이의

이름

에서 유래했다.

복잡한 비동기나 동시 다발적인 이벤트 그리고

애니메이션등 작성 하기 어려운 테스트 타입을

Spy, Stub,

Mock, FikeTimer, FakeXmlHttpRequest,

FakeServere

TRADITIONALSTUB

아직 개발되지 않은 클래스나 메소드가 처리 후 리턴해야

하는

값을 전달해 주는 역할을 한다 . 대부분 그 값은

하드코딩되어

있다 .

자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

SINONSTUB

어떤 함수의 동작을 변경하거나 예외를 발생시킬 수 있다.

보통 어떤

기능을 테스트하기 위해 필요한 함수의 대역으로써 사용한다.

Stub 객체는 익명 함수로 생성할 수 있고 기존 함수를 덮어쓸

수도 있다.

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);

});

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();

});

TRADITIONALSPY

Stub과 비슷하지만 , 어떤 작업을 수행했는지에 대한

이력을

남긴다는 점이 다르다 . 다시 말해서 Stub과 같은 역할을

하는

척 하 지 만 이 름 그 대 로 스 파 이 같 은 짓 을 한 다 고

생 각 하 면

된다 .

자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

SINONSPY

메서드의 대체재 역할을 하는 Spy는 호출 될 때 인수 ,

반환 값 ,

this, exception등을 기록할 수 있다. Stub과 다르게 특정

함수의

동작을 변경할 수 없다 .

Spy 객체는 익명 함수로 생성할 수 있고 기존 함수를 랩핑 할

수 있다.

SINONSPYexample

QUnit.test('Spy', function(){

var spy = sinon.spy($, 'ajax');

$.getJSON('/some/resource');

ok(spy.calledOnce, 'method is called once');

});

TRADITIONALMOCK

Stub, Spy를 통합해 놓은 것과 비슷하다 . 하지만

Mock은 보통 라이브러리를 사용하여 동적으로

데이터를 처리해줄 부분을 생성한다는 점이 다르다 .

자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

SINONMOCK

Mock은 Spy, Stub과 비슷하다. Spy, Stub과와 다른 점은

메서드의

행동과 수행 결과의 값을 미리 설정하고 설정한 기대치 대로

메서드가

실행되었는지 검증하는 기능이 있다. 만약 예상한 결과와

다르다면

테스트는 실패하게된다.

보통 Mock은 아직 구현되지 않은 기능을 정의하거나 원래의

기능에서 일어날 수 없는 시나리오를 시뮬레이션 하려고 할 때

사용한다.

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();

});

TRADITIONALFAKE

테스트에 직접적인 연관은 없지만 테스트하고자 하는

시스템

과 연계되는 시스템이 너무 느리거나 , DB가 아직

구성되지 않

았을 경우에 해당 부분이 실제 존재하는 것처럼

처리하는 부

분을 말한다 .

자바 개발자도 쉽고 즐겁게 배우는 테스팅 이야기에서 발췌

SINONFAKETIMER

FakeTimer를 이용해 setTimeout (), clearTimeout (),

setInterval (),

clearInterval ()과 Date 객체의 시간을 조작 할 수 있다. 마치

시간을

컨트롤 할 수있는 것처럼 작성이 가능하다.

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'));

});