1.1 테스트의 필요성
1.2 프론트엔드 테스트
1.3 도입 목표
2.1 어떤 도구로 테스트 할까?
2.2 테스트 케이스 생각해보기
2.2.1 발생가능한 시나리오
2.2.2 작성할 테스트 케이스
3.1 테스트 환경 설정하기
3.2 테스트 케이스 1,2,3번 테스트 코드 작성하기
3.3 테스트 케이스 4,5,6번 테스트 코드 작성하기
테스트는 애플리케이션이 기대한 결과대로 동작하는지 검증하는 일련의 모든 행위를 말한다.
보통 개발은 요구사항 분석- 설계 - 개발 - 배포 순으로 이뤄진다. 완벽한 초기설계는 없으므로, 이후 발생한 버그나 추가 요구사항으로 인해 재설계 및 소스코드의 수정이 이뤄짐. 이 과정에서 불필요한 코드가 추가될 가능성이 높고, 사소한 코드 수정후에도 앱의 모든 부분에 대해 테스트가 진행돼야 하는데, 테스트 코드가 없다면 버그의 원인을 찾기가 더 어려워진다. 서비스 규모가 커질수록 테스트 코드의 필요성은 더욱 높아진다. 따라서, 테스트는 앱의 안정성을 유지할 수 있고, 추가 구현한 기능에서 버그를 빠르게 파악할 수 있게 돕는다.
프론트엔드 테스트는 클라이언트 영역에 대한 사용자의 인터랙션(마우스 클릭, 키보드 입력 등)도 고려하여 올바른 결과가 나오는지 검증하는 것이 중요하다. 뿐만아니라 DOM 요소들이 원하는 위치에 지정한 크기나 여백을 가지고 적절하게 배치되는지 시각적인 부분도 검증해야한다. 그러나 아직은 사용자의 동작을 완벽하게 재현하여 테스트 할 도구가 없어 어떤 테스트가 적합할지 전략적으로 접근해야한다. 모든 상태나 동작을 단위 테스트로 검증할지, 통합테스트를 통해 여러 요소(모듈)의 상호작용이 제대로 이뤄지는지 검증할지 등 어떤 테스트방식을 선택할지 고민해야한다.
프론트엔드 테스트는 크게 단위테스트, 통합테스트, E2E 테스트 그리고 시각적 회귀 테스트로 나눌수있다.