[Mission3] TDD 어플리케이션 만들기(+/- btn,Disable기능)

Test를 작성해주자.

첫번째 테스트 : 0부터 시작?

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

counterNum이란 아이디를 가진 요소가 0이라는 텍스트를 포함하는지 확인하는 테스트이다.

두번째 테스트 : +,-들어가있음?

// 마이너스 들어있음?
test("minus button has correct text", () => {
  render(<App />);
  const btn = screen.getByTestId("minusBtn");
  expect(btn).toHaveTextContent("-");
});

test("plus button has correct text", () => {
  render(<App />);

  const btn = screen.getByTestId("plusBtn");

  expect(btn).toHaveTextContent("+");
});

텍스트에 +,-가 들어가있는지 체크하는 테스트이다.

세번째 테스트 : +,- 버튼 기능이 잘 작동함?

Firing Events : 유저가 발생시키는 액션에 대한 테스트를 해야하는 경우 사용

// + 누르면 올라가? 
test("When the + button is pressed, the counter changes to 1", () => {
  render(<App />);
  const btn = screen.getByTestId("plusBtn");

  fireEvent.click(btn); //버튼 클릭 

  //클릭 했을때  숫자가져오기
  const counter = screen.getByTestId("countNum"); 

  // 그게 1맞음? 
  expect(counter).toHaveTextContent(1);
});

버튼엘리먼트를 파이어를 이용해 클릭 이벤트를 하고 숫자가 1이됐는지 확인하는 테스트이다.

네번째 테스트 : on/off 버튼이 파랑색인지

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

버튼을 가져오고 버튼 스타일의 배경색이 파랑색인지 확인하는 테스트이다.

다섯번째 테스트 : disable 기능작동?

// disable 가능 ?
test("Prevent the -,+ button from being pressed when the on/off button is clicked" , () => {
  render(<App />);
  const onOffBtnClick = screen.getByTestId("onOffBtn");
  fireEvent.click(onOffBtnClick);
  const plusBtnDis = screen.getByTestId("plusBtn");
  expect(plusBtnDis).toBeDisabled();
})

클릭하고, 플러스를 눌러도 반응 없는지 보는 테스트이다.

이 위에 대한 APP.js코드는 아래와 같다.

import { useState } from "react";
import "./App.css";

function App() {
  
  const [number, setNumber] = useState(0);
  const [disabled, setDisabled] = useState(false);
  
  const plus = () => setNumber(number+1);
  const minus = () => setNumber(number-1);


  return (
    <div className="App">
      <header className="App-header">

        <h3 data-testid="countNum">{number}</h3>
        
        <button
          data-testid="minusBtn"
          onClick={minus}
          disabled={disabled}
        >
          -
        </button>

        <button
          data-testid="plusBtn"
          onClick={plus}
          disabled={disabled}
        >
          +
        </button>

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

export default App;