2. 김코딩
스마트에디터 3.0, 프론트엔드 개발 - @네이버
기술 블로그(huns.me)에 아주 가끔 글 쓰기
페이스북 커뮤니티 프론트엔드개발그룹 운영하는 척
네이버 사내 리액트 미트업 운영하는 척
Facebook은 React를 왜 만들었을까 - @FBDG 2015
Angular2 vs React, React vs Angular2 - @Deview 2016
3. 오늘의 주제는 …
단위 테스트 어떻게 작성하나요?
TDD, 왜 해요?
TDD 하면 뭐가 좋아요?
TDD 하면 설계를 잘 할 수 있나요?
TDD 하면 클린 코드를 작성할 수 있나요?
TDD 하는 모습이 궁금해요
4. 오늘의 주제는 …
단위 테스트 어떻게 작성하나요?
TDD, 왜 해요?
TDD 하면 뭐가 좋아요?
TDD 하면 설계를 잘 할 수 있나요?
TDD 하면 클린 코드를 작성할 수 있나요?
TDD 하는 모습이 궁금해요
5. 오늘 만들 녀석은,
“막막” 간단한 Spinbox
기본값은 200
값 입력
증가 버튼을 클릭하여 값이 1 증가
감소 버튼을 클릭하면 값이 1 감소
84. it('증가 버튼을 세 번 클릭하여 값을 3 증가시킬 수 있다.', () => {
// given
const defaultValue = 200;
// when
const incrementBtn = spinbox.find('[data-name="increment"]');
incrementBtn.simulate('click');
incrementBtn.simulate('click');
incrementBtn.simulate('click');
// then
const actualValue = getValueFromInputNode(spinbox.find('input'));
expect(actualValue).toEqual(defaultValue + 3);
});
90. it('스핀박스를 생성하면 기본값은 200이어야 한다.', () => { … });
it('입력 폼에 999를 입력할 수 있다.', () => { … });
it('입력 폼에 0을 입력할 수 있다.', () => { … });
it('증가 버튼을 클릭하여 값을 1 증가시킬 수 있다.', () => { … });
it('증가 버튼을 세 번 클릭하여 값을 3 증가시킬 수 있다.', () => { … });
91. describe('기본값 >', () => {
it('스핀박스를 생성하면 기본값이 200이어야 한다.', () => { … });
});
describe('값 입력 >', () => {
it('입력 폼에 999를 입력할 수 있다.', () => { … });
it('입력 폼에 0을 입력할 수 있다.', () => { … });
});
describe('값 증가 >', () => {
it('증가 버튼을 클릭하여 값을 1 증가시킬 수 있다.', () => { … });
it('증가 버튼을 세 번 클릭하여 값을 3 증가시킬 수 있다.', () => { … });
});
92.
93. describe(‘값 입력 >', () => {
it('입력 폼에 999를 입력할 수 있다.', () => {
// given
// when
const input = spinbox.find('input');
// … 생략
});
it('입력 폼에 0을 입력할 수 있다.', () => {
// given
// when
const input = spinbox.find('input');
// … 생략
});
});
94. describe(‘값 입력 >', () => {
let input;
beforeEach(() => {
input = spinbox.find('input');
});
it('입력 폼에 999를 입력할 수 있다.', () => { … });
it('입력 폼에 0을 입력할 수 있다.', () => { … });
});
95.
96. describe(‘기본값 >', () => {
it('스핀박스를 생성하면 기본값이 200이어야 한다.', () => { … });
});
describe('값 입력 >', () => {
let input;
beforeEach(() => {
input = spinbox.find('input');
});
it('입력 폼에 999를 입력할 수 있다.', () => { … });
it('입력 폼에 0을 입력할 수 있다.', () => { … });
});
describe('값 증가 >', () => {
const defaultValue = 200;
let incrementBtn;
beforeEach(() => {
incrementBtn = spinbox.find('[data-name="increment"]');
});
it('증가 버튼을 클릭하여 값을 1 증가시킬 수 있다.', () => { … });
it('증가 버튼을 세 번 클릭하여 값을 3 증가시킬 수 있다.', () => { … });
});
97.
98. 얻는 것과 잃는 것
변경의 포인트는 집중
코드는 덜 직관적
it('증가 버튼을 세 번 클릭하여 값을 3 증가시킬 수 있다.', () => {
// given
// when
incrementBtn.simulate('click');
incrementBtn.simulate('click');
incrementBtn.simulate('click');
// then
const actualValue = getValueFromInputNode(spinbox.find('input'));
expect(actualValue).toEqual(defaultValue + 3);
});
뭘까?
99. 네 번째 요구사항
기본값은 200
값 입력
증가 버튼을 클릭하여 값이 1 증가
감소 버튼을 클릭하면 값이 1 감소
100. describe('값 증가 >', () => {
const defaultValue = 200;
let incrementBtn;
beforeEach(() => {
incrementBtn = spinbox.find('[data-name="increment"]');
});
it('증가 버튼을 클릭하여 값을 1 증가시킬 수 있다.', () => {
// given
// when
incrementBtn.simulate('click');
// then
const actualValue = getValueFromInputNode(spinbox.find('input'));
expect(actualValue).toEqual(defaultValue + 1);
});
});
101. describe('값 감소 >', () => {
const defaultValue = 200;
let decrementBtn;
beforeEach(() => {
decrementBtn = spinbox.find('[data-name="decrement"]');
});
it('감소 버튼을 클릭하여 값을 1 감소시킬 수 있다.', () => {
// given
// when
decrementBtn.simulate('click');
// then
const actualValue = getValueFromInputNode(spinbox.find('input'));
expect(actualValue).toEqual(defaultValue - 1);
});
});
109. it('감소 버튼을 세 번 클릭하여 값을 3 감소시킬 수 있다.', () => {
// given
// when
decrementBtn.simulate('click');
decrementBtn.simulate('click');
decrementBtn.simulate('click');
// then
const actualValue = getValueFromInputNode(spinbox.find('input'));
expect(actualValue).toEqual(defaultValue - 3);
});