JavaScript/Test 검색 결과

해당 글 9건

TDD-데이터 주입

데이터 주입 이제 +버튼을 클릭하면 카운트가 올라가고 뷰가 업데이트되게 구현했다 하지만 여기서 요구사항이 늘어난다면 어떻게 될까? 만약 값이 감소하는 버튼을 만들어달라고 한다거나 값이 제곱이되는 버튼, 2의 배수로 늘어나는 버튼... 데이터를 변경하는 기능이 추가될 때마다 각 모듈이 추가되어야한다 그렇게 모듈을 추가하게 되면 모듈간에 데이터를 공유해야하는데 그렇게 하기위해선 데이터를 주입해주어야한다 테스트 코드 describe('App.ClickCounter',()=>{ ... it('초기값을 주입하지 않으면 에러를 던진다', () => { }) ... ...ClickCounter describe의 내부에 데이터를 주입하지 않았을 때 에러를 발생시키는 테스트 코드를 먼저 작성..
JavaScript/Test 2020. 12. 2. 01:40

TDD-Event

이벤트 테스트하기 처음에 만들기로 한 프로그램은 클릭했을 때 숫자가 올라가게 하는 것이었으니까 클릭 이벤트만 구현하면 되겠다 테스트 코드 클릭 이벤트는 어떻게 테스트 해야할까? button 엘리멘트가 있어야할 것 같다 그럼 뷰에 데이터를 표시하기 위해 엘리먼트를 주입해서 데이터를 출력한 것과 비슷하게 clickCountView 모듈에 버튼 엘리먼트를 주입한 뒤에 거기에 클릭 이벤트를 구현하면 될 것 같다 clickCountView 모듈의 주입 구현은 beforeEach부분에 있으니 거기서 버튼 엘리먼트에 대한 의존성을 추가해보자 let clickCounter,updateElem,clickCountView,buttonElem; beforeEach(()=>{ clickCounter = App.ClickCou..
JavaScript/Test 2020. 11. 30. 17:25

TDD-spyOn

실행 확인 테스트 실질적으로 필요한 기능의 메소드는 다 작성했다 하나하나 호출하고 있을 순 없으니까 이 메소드를 한번에 담아서 실행할 메소드 또한 필요하다 이제 그 메소드인 increaseAndUpdateView를 테스트해야한다 테스트 코드 increaseAndUpdateView에 들어가는 increase와 updateView는 앞서 이미 테스트를 끝냈기 때문에 검증할 필요가 없다 그래서 우리는 increaseAndUpdateView안에서 이 메소드들이 호출되었는지만 확인하면 되는데 spyOn(Object,'method') 라는 함수를 사용한다 인자에서 볼 수 있듯이 첫 인자는 객체를, 두번째 인자로는 실행되었는지 확인할 메소드를 적어준다 (_자세한 설명은 이곳에 https://www.tutorialsp..
JavaScript/Test 2020. 11. 29. 03:07

TDD-error

에러 기대하기 저번 포스팅에서 clickCountView에 두개의 인자를 넣어서 테스트하는 코드를 작성했다 하지만 이 때 주입된 객체들이 제대로 되었는지 확인하는 테스트가 생략되었다 이번엔 잘못된 의존성 주입을 했을 때 에러값을 기대하는 테스트 코드를 작성해보고 에러를 던져보자 테스트 코드 describe('의존성확인',()=>{ it(('clickCounter가 없다면 에러'),()=>{ const clickCounter = null; const actual = ()=> App.ClickCountView(clickCounter,updateElem); expect(actual).toThrowError(); }); it('updateElem이 없다면 에러', ()..
JavaScript/Test 2020. 11. 27. 02:02

TDD-view

view 테스트하기 이전에 우리는 데이터를 담당하는 모듈인 ClickCounter모듈을 만들었었다 이제 데이터를 화면에 출력을 담당하는 ClickCounterView모듈을 만들 차례다 테스트 코드 describe('ClickCountView 모듈', () => { describe('updateView()', () => { it('ClickCounter의 getCounter() 실행결과를 출력한다', ()=> { }); }); });테스트 코드 명세를 받긴 했는데 어떻게 짜는 걸까..? 우선 데이터는 ClickCounter모듈에서 담당하고 있으니 일단 ClickCounter에 의존해야할 것 같다 가져온 데이터를 화면에 붙이려면 돔 엘리먼트가 필요하니 엘리먼트도 하..
JavaScript/Test 2020. 11. 26. 11:51

TDD 2

increase() 이번에 구현할 기능은 increase다 increase메소드를 실행하면 value의 값이 1증가하게된다 테스트 코드 테스트 코드를 먼저 만들어 보자 describe('increase()', ()=>{ it('increase는 값을 1 증가시킨다', ()=>{ const counter = App.ClickCounter(); counter.increase(); expect(counter.getValue()).toBe(1); }); }); 저번 포스팅에 봤던 테스트 코드 바로 밑에 추가한 것 이제 실제 코드를 짜러 가 보자 실제 코드 App.ClickCounter = ()=>{ let value = 0; return { getValue() { return value; }, increase(..
JavaScript/Test 2020. 11. 25. 17:25

TDD 1

카운터 프로그램 우리는 버튼을 누르면 값이 올라가는 매우 흔하고 아주 간단한 프로그램을 만들 건데 내가 만드는 난잡하고 조잡한 코드에서 TDD강의를 보고 만들게 되면 코드가 어떻게 달라질지 한번 봐야겠다 우선은 화면에 보이지않는 부분인 데이터 부분을 만들어보자 클릭 카운터 모듈 말 그대로 클릭했을 때 데이터들의 변동을 관리하는 모듈이다 // in ClickCounter.spec.js describe('ClickCounter', ()=> { describe('getCounter()', ()=> { it('초기값이 0인 카운터 값을 반환한다', ()=> { const counter = App.ClickCounter(); expect(counter.getValue()).toBe(0); }); }) }) 위는 ..
JavaScript/Test 2020. 11. 24. 17:13

자바스크립트 TDD

테스트 주도 개발 (TDD) TDD는 대학에서 교수님이 자바를 가르쳐주실 때 잠깐 배워본게 다 였는데 '실패하고 성공하는 과정에서 성취감을 더 잘 느껴져서 그런지 초록불이 들어오는게 재미있었다'가 느낀점의 전부였다 TDD의 필요성과 효능에 대해서는 다른 블로그에서도 잘 찾아볼 수 있고 나는 아직 현업 개발을 해본적이 없기 때문에 자세히 설명하지 못하겠지만 강의를 따라가면서 잊어먹지 않기 위해 조금씩 기록을 남겨보려고 한다 프레임 워크 자스민 버전 2.7.0을 따라간다 https://github.com/jasmine/jasmine/releases/tag/v2.7.0 기본 설명 describe 는 테스트 유닛들을 모아놓는 함수 it은 테스트를 할 수 있는 가장 작은 단위 expect(기댓값)로 기댓값을 정하..
JavaScript/Test 2020. 11. 20. 16:07