FE TEST
Vol.1
DALI
다들 좋다하니
왜 안 할까 ?.?
일단 어떻게 하는지나 좀 알자...
그래서 공부해봤다 FE TEST
시작 !!!
왜??
안정성+ 협업
스펙리스트 문서
왜 안함 ??
시간 + 리소스
프론트 UI 영역 , 어디까지 테스트 어렵 테스트해야되나? -> 테스트 가능하게 짜는 훈련이 안되어 있다.
테스트코드는 린 하게 + 테스트 코드는 비용
테스트 비용
비지니스 관련된 버그를 낼 가능성이 낮다
테스트를 유지하는 비용이 이익 보다 더 들때
사용자에게 중요한 가치를 주는 것이 아닐때
Unit Test
Integration Test
테스트 가능한 작은 단위의 코드를
독립적 테스트
사용자가 직접 사용하는 것 처럼 동작을 테스트
E2E Test end to end, 기능
두가지 이상의 요소를 함께 작용할때에 동작 테스트
cypress, testcafe, nightwatch
실용적인 프론트엔드 테스트 전략 https://www.youtube.com/watch?v=q9d631Nl0_4
용어정리
Monkey Patching
테스트 중에 지정한 데이터를 동적으로 대체해서 사용하는 것?
https://stackoverflow.com/questions/5626193/what-is-monkey-patching
Why?
Subtitle
시각적요소 검증
시각적 테스트 기능 테스트 분리
단위 테스트 통합 테스트
스냅샷 테스트
신뢰성 ? 리팩토링 ?
Visual Regesion Test
도구의 발전 !
신뢰성 ? 리팩토링 ?
Visual Regesion Test
TO BE CONTINUED ... ㅜ
다음 발표때 설정 직접 한 부분을 보여드릴게요
시각적 테스트
실행속도 느림-> 생산성 ...
너무 많은 것들 테스트
스펙 문서화 기능 X
실패 원인 파악 어려움
ㅇ_ㅇ !!!
시각적 기능적 잘 분리해놓자!
data-test-id
CLASS 와 분리
? -> 테스트만을 위해 코드가지 않나 ?
시각적 테스트 -> 스토리북 (컴포넌트)
스토리북
디자인 시스템
컴포넌트 공유 문서화
시각적 모듈
단위 확인
applietools, percy 같은 도구와 연동
스토리북
스텝 단위 상태 확인 용이
ex) Stepper 3, 결제 실패
상태 값 변화 에 따른 부분
ex) disable, 영어, 일본어 ...
add On ViewPort
유닛테스트, 통합테스트
불필요한 테스트를 최소화
테스트는 비용
유닛테스트, 통합테스트
컴포넌트의 하나의 동작을 묶어서
단위로 보자.
브라우저 안에서 돌아서 빠른 도구
각 이력의 상태 추적하기 좋아서 디버깅에 용이
-> 프론트엔드 TDD 가능
끝
다음에...
REF
2020 Prelog +
- 사내 기술 블로그 글 2편 이상 쓰기
- DB 부터 Node Ts로 간단한 TODO or 게시판 Service 정도 구축해보기
- Git, Docker 책 1권 이상 씩 읽고 공부하기
- 2주일에 블로그 글 1편 씩 쓰기
- 개인 프로젝트 서비스 분기 별로 하나씩 내보기
- 운동습관 ->지금 거의 체지방률 20%... -> 13%
- 새로운 취미 활동 하기
- 영어공부 시작하기 -> 일주일에 한 번 meetup 알아보기
- 서울 살이 -> 연말에는 집 알아보기
끝