TOAST UI

자바스크립트 세계에서 E2E 테스트는 신나는 한 때를 보내고 있다. 지난 몇 년 동안, 자바스크립트 커뮤니티에서 cypress와 Puppeteer와 같은 도구들이 쏟아져나왔고 빠르게 채택되어 왔다. 오늘은 Puppeteer에 관해서 이야기할 것이다.

테스트 자동화와 테스트 전략의 중요성, 시각적 테스트를 자동화하는 것이 어려운 이유 등을 살펴보았다. 사실 시각적 테스트를 자동화하는 것이 불가능하지는 않지만, 현재 우리가 가진 도구로는 기대하는 만큼 효용을 얻기가 어렵다. 이 글은 "실용적인" 테스트 전략을 다루고 있으므로, 한발 물러서서 다른 접근 방식을 시도해 보도록 하겠다. 즉, 결과물을 시각적으로 검증하는 행위는 자동화하지 않고 "사람의 눈"에 맡기되, 검증을 위한 준비 작업을 최대한 자동화하는 것이다. 이러한 작업을 위한 가장 효과적인 도구가 바로 스토리북이다.

바야흐로 자바스크립트의 시대이다. 최근 2~3년 동안 자바스크립트는 가장 인기있는 언어 순위 1위를 유지하고 있고, 여전히 빠른 속도로 성장하고 있다. 10여년 전, 웹 표준이라는 개념조차 없을 때부터 프론트엔드 개발을 해 오던 나 같은 개발자에게는 정말 감개무량한 시대가 아닐까 싶다. 당시에는 개발 환경이라는 단어조차 부끄러울만큼 척박한 환경이었는데, 지금 쏟아져나오는 새로운 기술과 개발 도구를 바라보고 있으면 가히 풍요의 시대라고도 할 수 있을 것 같다.

Redux Saga는 테스트가 쉽기로 유명하다. 하지만, 더 간단해질 수 있다면 어떨까? Jeremy Fairbank는 더 간단한 테스트를 위해 redux-saga-test-plan을 디자인했다.

로컬 PC 내에서 브라우저 자동화 테스트를 수행하는 테스트의 경우 `karma-chrome-launcher`가 현재 karma 실행 환경에 설치된 Chrome 브라우저를 실행한다. 로컬 PC 내에서 다른 브라우저들을 동시에 테스트하려면 Firefox, OSX인 경우 Safari, Windows의 경우 Internet Explorer 나 Edge의 karma launcher를 추가로 등록하여 테스트를 수행할 수 있다. 하지만 이런 경우 OSX에서 Internet Explorer 테스트, Windows에서 Safari 테스트는 수행할 수 없다는 한계가 있다.

이 글에서는 간단하게 Front-End 테스트 환경을 구축하는 방법에 대해 공유하고자 한다. 참고) 본 글은 Karma 설정과 Jasmine의 API에 대해서는 깊게 다루지 않는다. 우선 Front-End 테스트를 실행할 수 있는 환경을 빠르게 구축함을 목적으로 작성되었다. 자세한 API와 설정에 대해서는 글 최하단의 참조의 각 Github Page에서 확인할 수 있다.

이 글은 커플링을 Javascript기반 예제를 통해 설명한다. 먼저 커플링이란 서로 다른 객체 또는 모듈간의 관계를 뜻한다. 그리고 그 관계의 방법은 조금씩은 다르지만 거의 유사한 패턴이므로 측정도 가능하다. Norman Fenton과 Shari Lawrence Pfleeger가 1996년도에 저술한 "A Rigorous & Practical Approach, 2nd Edition" 에 따르면 커플링은 6단계가 있고 각 단계에 점수를 매기는 것으로 측정할 수 있다.