[TDD] 테스트코드 작성 후 기능 구현하기

기능단위로 테스트코드 작성해보기

TDD(테스트 주도 개발)은 작은 기능 단위로 쪼개서 테스트를 한다.
내가 실습한 테스트는 다음과 같다.

참고 ! 테스트코드 작성하는 이유에 대해 전에 썼던 글은 이 링크에 있다.
TDD란 무엇인가?

구현할 기능 및 테스트 목록 정리

1. Counter는 0부터 시작해야 한다.
2. 마이너스 버튼에 '-' 텍스트가 적혀있어야 한다.
3. 플러스 버튼에 '+' 텍스트가 적혀있어야 한다.
4. 플러스 버튼을 누를 때, Counter가 1씩 추가되어야 한다.
5. on/off 버튼의 색은 'blue'이다.
6. on/off 버튼을 누르면 '-', '+' 버튼은 눌리지 않아야 한다.

---

1. Counter는 0부터 시작해야 한다.

먼저 0부터 시작할 카운터의 테스트코드를 입력한다.
테스트할 내용을 적어주고 <App /> 컴포넌트를 렌더링 해준 뒤,
Counter 가 0인지 테스트한다. (아직 카운터를 생성하기 전이기 때문에 당연히 결과는 실패!)

// App.test.js
	test("the counter starts at 0", () => {
  	render(<App />);
  	const counterElement = screen.getByTestId("counter");
  	expect(counterElement).toHaveTextContent(0);
});

그리고 테스트코드에 맞게 useState 를 이용해서 0부터 시작하는 카운트를 하나 만들어 준다.

// App.js
  	const [count, setCount] = useState(0);	
	<h3 data-testid="counter">{count}</h3>

---

2. 마이너스 버튼에 '-' 텍스트가 적혀있어야 한다.

마찬가지로 마이너스 버튼에 "-"이 포함되는지에 대한 테스트코드 작성

// App.test.js
	test("minus button has correct text", () => {
  	render(<App />);
	const buttonElement = screen.getByTestId("minus-button");
  	expect(buttonElement).toHaveTextContent("-");
});

그리고나서, 마찬가지로 테스트코드에 맞는 기능 구현하기!

// App.js
        <button
          data-testid="minus-button"
          onClick={() => setCount((prev) => prev - 1)}
          disabled={disabled} 
        >

플러스 버튼은 코드가 같아서 생략했다.

---

3. on/off 버튼의 색은 'blue' 이고, on/off버튼 클릭시 나머지 버튼 클릭이 막혀야 한다.

• on/off 버튼의 색이 'blue' 인지 확인하려면 toHaveStyle 로 체크한다.

// App.test.js
	test("on/off button has blue color", () => {
  	render(<App />);
 	const buttonElement = screen.getByTestId("on/off-button");
  	expect(buttonElement).toHaveStyle({ backgroundColor: "blue" });
});

• on/off 버튼 클릭시 나머지 버튼 막기

// App.test.js
	test("prevent the -,+ button from being pressed when the on/off button is clicked", () => {
	render(<App />);
  	const onOffButtonElement = screen.getByTestId("on/off-button");
	fireEvent.click(onOffButtonElement);
  	const plusButtonElement = screen.getByTestId("plus-button");
	expect(plusButtonElement).toBeDisabled();
});

테스트코드 작성 후 useState 하나 더 생성해서,
나머지 버튼에도 disabled 속성을 넣어서 누르면 false, true가 바뀌도록 설정했다

// App.js
	const [disabled, setDisabled] = useState(false);

	<button
	style={{ backgroundColor: "blue" }}
	data-testid="on/off-button"
	onClick={() => setDisabled((prev) => !prev)}
	>
		on/off
	</button>

이렇게 테스트코드를 작성하고 기능을 구현하는 식으로 단계가 진행됐다.
그리고 npm test를 입력해서 테스트해보면 모두 성공!

---

이제야 좀 테스트코드 작성에 대한 감이 잡힌다 ..
확실히 이렇게 테스트를 하고 기능을 구현하는식으로 개발을 하면
훨씬 더 안정적일 것 같다는게 직접 입력해보니 느껴진다.
계속 열심히 공부해 봐야겠다!