Javascript Test Double Sinon.js
Upcoming SlideShare
Loading in...5
×
 

Javascript Test Double Sinon.js

on

  • 894 views

자바스크립트 테스트 더블을 설명합니다.

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

Statistics

Views

Total Views
894
Views on SlideShare
894
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 안녕하세요. 프론트엔드개발팀 주우영입니다. 저번 주간세미나 때 김훈민님께서 ‘Javascript의 테스트 더블’인 Sinon.js를 잠깐 소개했었죠. 그 후 저는 Sinon.js를 써오고 있는데요. 생각보다 멋진 기능들로 편리한 테스트 코드 작성이 가능했었습니다. 그래서 여러분때 조금 더 Sinon.js의 구체적인 내용을 전해드리고자 파트2를 준비했습니다. 원래는 전통적인 것 테스트 더블의 개념과 sinon.js의 개념이 무엇이 어떻게 다른가를 핵심으로 준비하려고 했으나 준비 부족으로 인해서 sinonjs을 다시 복습하는 세미나를 준비하게 되어 버렸습니다. 이미 저희팀의 김훈민님이 다 설명해주신거라 알고 계실 수 있지만 끝까지 재미있게 들어주세요.
  • 라이브러리를 선택할때 가장 신경 쓰이는 점 중 하나가 믿을만 하냐는 것 이죠. 혹시 중간에 버전업이 중단되진 않을지, 시장에서 뒤쳐지진 않을지, 즉각적인 버그 대응을 잘 해주는지 그리고 기술적으로 신뢰할 만한 것인지 여러가지 걱정이 앞서게 됩니다.
  • Github에는 starts라는 수치가 있습니다. 페이스북에 좋아요랑 비슷한 것인데요. 보통 자기에게 유용 했거나 관리가 잘되는 라이브러리에 부여합니다.300개 에서 400개 이상이면 어느정도 믿고 써도 된다고 판단해도 무방합니다. 제이쿼리 플러그인들은 대게 100개 이상을 못넘기는 경우가 허다하죠. 제이쿼리 같은 필수 라이브러리들은 2만개 이상의 스타를 보유하고 있고하이차트나 이제이에스 같은 라이브러리는 1000개 이상의 스타즈를 보유하고 있네요.
  • 차트를 그릴때 하이차트 사용을 고려하시나요? 만약 사용하신다면 꺼리낌 없이 믿고 쓰실텐데요. 시농은 시농은1206개로 하이차트 그리고 이제이에스와 비슷한 스타를 보유하고 있습니다. 적당히 믿고 쓸만하고 어느 정도 유명한 라이브러리라고 판단하시면 되겠습니다.
  • 시농은 누가 만들었을까요? 누가 만들었냐가 라이브러리의 기술적 신뢰도를 계산하는 척도가 될 수 있습니다.
  • 크리스티앙 조한센, 노르웨이 출신의 개발자입니다. 정보 과학과 수학 그리고 디지털 신호 처리를 전공 하였고 노트웨이의 최고 IT 기업들의 고문으로 활동한 프론트엔드 기술 전문가라고 합니다.
  • 그가 쓴 저서로는 Test-Driven Javascript Development 가 있습니다. 총 4장으로 분류된 책이라고 하고요 자료를 좀 찾아 보니까 재밌다는 평이 지배적이었습니다. 잘 썼나봅니다. 영어되시는 분은 시간 투자해서 읽어봐도 좋을 것 같습니다. 한국은 내년에 번역되어 출시될 예정이라고 하네요.
  • 본격적으로 Sinon.js를 보기전에 하나 알아두어야 할 것은 Sinon.js는 자바스크립트의 여러 문제를 위해서 발전해왔기 때문에 전통적인 테스트 더블의 객체 정의와 Sinon.js 테스트 더블의 객체 정의는 미세하게 다를 수 있다는 것입니다. 저는 전통적인 테스트 더블의 정의를 간단하게 소개하고 Sinon.js에서 제공하는 테스트 더블을 이야기할 것입니다. 여러분은 어떤 점이 전통적인 정의와 다른건지 그리고 자바스크립트 테스트에서 Sinon.js을 어떻게 사용할 수 있을지 오늘 발표를 듣고 상상해보세요.
  • Sinon.js는 자바스크립트 테스트 더블 라이브러리라고 했습니다. 그럼 테스트 더블이 무엇인지 알아야겠습니다. 테스트 더블이란 무엇일까요? 일단 테스트 더블의 목적은 테스트하기 어려운 컴포넌트의 역할을 대체할만한 기능을 가진 객체를 사용 하여 테스트하기 쉽게하는데 있습니다. 테스트 더블이라는 이름은 우리나라에서 흔히 스턴트맨이라고 브르는 스턴트 대역을 뜻하는 Stunt Double에서 유래됐습니다. 스턴트맨이 무슨일을 하나요? 일반 배우가 하기 힘든 액션 같은걸 대신해주는 일을 하죠? 테스트 더블도 유래에 빗대어 보면 알 수 있습니다. 바로 테스트 대역이니까 스턴트맨 처럼 테스트 구현시에 어떤 문제를 가진 부분을 대신해주는 역할을 하겠네요.
  • 테스트 더블의 종류로는 SPY, STUB, MOCK, FAKEOBJECT 등이 있습니다. 이들의 역할을 각각 다르기 때문에 상황에 따라 적절히 사용해야 합니다. 그러니까 선대 개발자들이 이들을 어디에 사용하기로 약속했기 때문에 우리도 그 약속에 맞춰야 아무래도 협업할때 코드에서 나타나는 커뮤니케이션이 오염되지 않겠죠.
  • Sinon.js는 주로 테스트 대상이 의존하는 모듈과 자원의 대역의 용도로 사용합니다. 특정 프레임워크를 의존하는 것이 아니기 때문에 여러 테스트 프레임워크와 함께 사용할 수 있습니다.Sinon은 트로이 전쟁에서 활약한 스파이의 이름에서 유래했다고 하네요.
  • 제가 준비한건 여기까지 입니다. 감사합니다.

Javascript Test Double Sinon.js Javascript Test Double Sinon.js Presentation Transcript

  • Sinon.js part2
  • May I Believe?
  • GITHUB STARS JQUERY27,053 UNDERSCORE10,015 ZEPTO5,957 REQUIRE4,969 HIGHCHARTS 1,472 EJS1,224
  • GITHUB STARS JQUERY27,053 UNDERSCORE10,015 ZEPTO5,957 SINON 1,206 REQUIRE4,969 HIGHCHARTS 1,472 EJS1,224
  • Who made ​it?
  • Christian Johansen 노르웨이 오슬로에 살고있는 노르웨이 출신의 개발자 Shortcut AS에서 근무 중 정보 과학과 수학 그리고 디지털 신호 처리를 전공 노르웨이 최고 기업들의 고문으로 활동한 프론트엔드 기술 전문가
  • 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
  • 전통적인 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,
  • 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')); });