3주차
어느새 3주차. 이번 주차는 e2e 테스트와 시각적 회귀 테스트를 중점으로 진행했다.
1, 2주차에 유닛, 통합 테스트를 작성해보며 테스트의 맛을 봐왔는데, 이번에는 e2e와 시각적 회귀 테스트를 작성하는 주차였다.
- 기본 과제로 e2e, 시각적 회귀를 작성해보고,
- 심화 과제로는 앞서 배운 유닛, 통합 테스트와 더불어 어떤 부분은 어떤 테스트를 쓰면 좋을지에 대해 팀원들과 토론하고, 작성하는 과제였다.
기본 과제에서 e2e, 시각적 회귀와 더불어 간단한(?) feature 기능도 만들어보는 부분이 있었는데, 나는 기존의 내용을 시각적 회귀 테스트 하는걸 먼저 시도했다.
시각적 회귀
시각적 회귀 테스트는 웹 애플리케이션의 시각적 요소가 변경되지 않았는지 확인하는 테스트 방법
시각적 회귀 테스트를 시도하는 방법으로 스토리북 + 크로마틱을 사용하여 작성하는걸 배웠다.
시각적 회귀 필수 테스트
1. 타입에 따른 캘린더 뷰 렌더링
2. 일정 상태별 시각적 표현
3. 다이얼로그 및 모달
4. 폼 컨트롤 상태
5. 각 셀 텍스트 길이에 따른 처리
아주 예전에 스토리북 강의를 들으며 공통 컴포넌트 보여주는 정도로가볍게 사용해 본 기억이 있었는데, 이게 테스트로 활용이 된다고? 하면서 준비했다.
작업해보면서 신기했던 게 내 컴포넌트가 시각적으로 변동이 있는 부분을 code diff처럼 비교해주고 배포된 내용을 모든 팀원과 공유할 수도 있는 점이다.
최근 회사에서 반응형 관련한 이슈가 있었는데, 이럴때 시각적 회귀를 쓰면 되지 않을까? 생각이 들었다.
e2e 테스트
End-to-End 테스트는 사용자의 관점에서 소프트웨어의 전체 시스템을 테스트하는 과정이다. 사용자의 실제 사용 사례를 모방하여 소프트웨어의 모든 구성 요소와 그 상호작용이 의도한 대로 작동하는지 확인한다.
함수나 메서드를 테스트하는 유닛테스트, 그리고 조금 더 큰 부분, 컴포넌트 단위로 제대로 동작하는지를 테스트하는 통합테스트를 넘어, e2e는 전체 시나리오에 가깝게 테스트한다.
이 테스트가 앞서 유닛, 통합 테스트보다 조금 더 쉽게 작성할 수 있었던 이유는 애초에 테스트를 제대로 짜본적이 없었다가 2주정도 공부를 했었기 때문일수도 있지만, 좋은 익스텐션도 한 몫했다.
https://chromewebstore.google.com/detail/playwright-crx/jambeljnbnfbkcpnoiaedcabbgmnnlcd
요 playwright-crx로 요긴하게 테스트 코드를 작성했다.
이런 실제 작업하는 코드 이외에도, 앞서 말한 심화과제를 위한 팀원과의 소통도 빼놓지 않았다.
이런 식으로 거의 하루를 다 써가며 회의를 한 듯하다.
덕분에 테스트에대해 조금 더 생각해보는 시간이었다.
3주차 후기
매 주차 제출날인 목요일만 되면 거의 밤을 새게 된다.
그러고 싶지 않은데도 그렇게 되더라.
최소한은 해야된다는 혼자만의 생각이 있는가보다.
확실히 돈내고 하는거는 조금이라도 뽕뽑으려는 마인드..
이번주차를 끝으로 테스트코드에 대해 마무리됐다.
여전히 작성에는 어려움을 느끼지만, 테스트가 그래서 왜 필요한데?에 대한 의문은 조금 해소됐다.
간단히 말하자면 심리적 안정감이랄까?
이 키워드를 들고가는 것도 중요하다 생각했다.
이것들을 항해가 끝난 이후에도 잘 챙겨놓고, 더 배워가며 내 것으로 만들어야겠다.
썸네일은 맛있게 먹은 오리도리탕, 진짜 맛있당
