리액트 테스팅 라이브러리(RTL)를 사용한 TDD 적용 도전기 2편 - UI 테스트
이제 환경 설정에 대한 에러는 잡았으니 본격적으로 UI테스트를 하면서 개발했다.
내가 만들려는 페이지의 최종 UI는 크게 헤더와 칭호 리스트가 있는 UI이다. 상단 버튼과 하단 네비게이션도 있지만 이건 공통 UI이기 때문에 이미 만들어둬서 따로 테스트를 진행하지 않았다.
암튼 저번에 헤더 텍스트만 만들었으니 이제 칭호 리스트에 대한 테스트를 만들려고 한다.
근데 테스트를 하려고보니 따지고보면 UI에 대한 테스트는 너무 할게 많았다. 렌더링 테스트, 레이아웃 테스트, 글씨 크기, 배경색 등등.. 그래서 알고보니 UI테스트는 storybook 이라는 걸 사용하면 간편하다고 하는데 jest가 좀 익숙해지면 다음에 적용해봐야겠다.
지금은 모든 UI에 대해 테스트하기 어려우니 유저 입장에서 중요한 테스트만 해보려고 한다. 그래서 여기서는 칭호 리스트의 컬러가 세가지 반복해서 잘 나오는지 확인해보기로 했다.
먼저 button에 대한 테스트를 작성해준다. 닉네임, count, 칭호명 모두 임의로 텍스트를 넣어주었다. 그리고 이 테스트는 해당 role을 가진 요소가 없으니까 당연히 실패한다.
근데 그와중에 이전 테스트가 실패해서 왜그런지 봤더니 요소 사이에 <br /> 이 들어가서 그런듯했다. 그래서 할수없이 br태그를 지우고 두줄로 넣었다.
이런 이유로 테스트는 한번 성공했다고 이전 것을 안하는게 아니라 계속 누적해서 테스트하는 것인 걸 느꼈다. 이렇게 하면 내 코드에 대한 확신과 정확성이 더욱 높아진다.
이제 두번째 테스트를 작성해주고 테스트해봤다. 지금은 배경색이 입력한 대로 잘 나오는지 확인하기 위해서 배경색을 하나만 입력하고 테스트했다.
해당 테스트를 통과하기 위해 컴포넌트를 만들었다. 해당 컴포넌트는 배경색을 받아서 렌더링된다.
이제 세가지 배경색을 넣어주고 각각 role의 이름을 다르게 지정해서 각 role에 맞는 색깔이 렌더링되는지 테스트했다.
현재는 하나의 리스트만 나오고 있기 때문에 배경색이 반복해서 세가지가 나오는지에 대해서는 테스트 실패한다.
테스트 코드를 좀 수정해줬다. elementFirst, elementSecond, elementThird는 각 하나씩 추출되는 것이 아니라 role이 반복되면서 두개 이상이 될 수 있다. 따라서 배열 형태로 추출되는데 우선은 배열의 첫번째 요소만 테스트해봤다.
그리고 아까 만든 theme 변수로 배경색을 대체해줬다.
이제 리스트는 text의 길이만큼 반복문을 돌며 렌더링되도록 구현했다. text는 당연히 임의로 지정해줬다.
이렇게 만들어진 각자의 리스트에 bgColor(배경색)와 role을 입히는데 각 리스트의 배경색은 해당 인덱스를 배경색의 길이(3)로 나눈 나머지를 배경색 배열의 인덱스로 지정하면 배경색이 3개가 돌아가면서 나올 것이다.
마찬가지로 role의 이름도 해당하는 index를 role의 길이(3)로 나눈 나머지를 role 배열의 인덱스로 지정하면 role이 3개가 돌아가면서 나올 것이다.
이후에 text와 bgColor, role 배열은 props로 받아서 사용했다. 전체 코드는 이렇다.
이렇게 했더니 테스트가 통과하는 걸 볼 수 있다.
테스트 코드를 조금 더 수정해줬는데, 각 role에 해당하는 요소가 두개 이상이어서 배열 형태로 요소가 추출되기 때문에 모든 요소를 테스트하려면 각 추출된 것들을 반복문 형태로 테스트해줘야 한다. 따라서 나는 forEach 문을 사용해서 모든 요소가 각 role에 맞는 배경색인지를 테스트해줬다.
로컬에서 현재 상태는 이렇다. 이걸 원래 UI대로 height를 조금 조정해줬다.
이제 다음으로 하단의 회색 버튼을 만들어줄것이다.
해당 버튼의 텍스트가 렌더링되는지를 테스트하는 코드를 먼저 작성했다. 해당 테스트는 실패한다.
해당 버튼을 만들고 텍스트는 props로 받아서 작성해줬다.
이렇게 전체 UI를 만들어줬다. 칭호의 이미지는 api로 받아올 것이기 때문에 현재는 없다.
TDD방식으로 개발해보니 사실 개발 속도가 느려져서 좀 답답하긴 했다. 하지만 로컬 서버를 확인하지 않고도 개발이 잘 되었음을 확인할 수 있는 점은 큰 장점인 것 같다. 현재는 UI테스트여서 어느정도 한계로 인해 로컬 서버를 봐야 하긴 하다. 이 점은 유닛 테스트에서는 정말 로컬 서버가 없이도 개발이 가능 할 듯 하여 더욱 강점을 발휘할 것 같다.