이전 글에서 사용자 시나리오 & 테스트 코드 작성에 대해 이야기하였다, 이 글에서는 3번 테스트 코드를 활용하여 코드 리팩토링을 한 경험에 대해 써보고자 한다! 기존 코드 & 기획서를 참고하여 사용자 시나리오를 작성한다. 테스트 코드를 작성한다. 테스트를 돌려보며 안전하게 코드 리팩토링를 한다. 총 3개의 테스트 파일이 있고, 이는 시나리오대로 나눈 것이다. 모든 파일에 대한 테스트를 돌려보면 아래와 같이 나온다 (all passed!) 2개 이상에서 똑같이 쓰이고 있는 코드가 있는데, 이를 공통 컴포넌트로 빼서 코드 리팩토링을 하려고 한다. 원래 같았으면 코드수정을 한 뒤, 하나하나 눌러보며 UI 테스트를 했었는데, 간단한 화면이면 테스트도 금방 끝나겠지만 이번엔 유저 이벤트에 따라 체크해야 하는 사항..

계기 개발하고 있는 화면에서 유저의 이벤트에 따라 체크를 해야 하는 케이스들이 점점 늘어남에 따라 테스트 코드에 대한 필요성을 느꼈다. 화면 내부는 위처럼 크게 4개 컴포넌트로 구성되어 있다. 그리고 컴포넌트 내부에서 발생하는 유저의 이벤트에 따라 다른 컴포넌트에 영향이 간다. 예를 들어, component 1에 있는 내용에 따라 component 3에 있는 셀렉박스 선택지가 바뀌는 등.. 유저의 시나리오가 많아지면서 코드를 수정할 때마다 직접 일일이 테스트해야하는 케이스들이 늘어났다. 🥲 (하나하나 눌러보느라 아픈 내 손가락..) 테스트 코드 작성에 대한 필요성을 느껴질 때쯤, 아래의 글을 보게 되었다. https://techblog.woowahan.com/8942/ 단위 테스트로 복잡한 도메인의 프론..

소개 puppeteer은 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있다. * headless? 백그라운드에서 작동하는 브라우저이다. 때문에 일반 사용자가 브라우저를 사용할 때처럼 화면에 창이 시각적으로 보이지 않는다. 보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트를 할 수 있다. puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있다. const browser = await puppeteer.launch({ headless: false }); // default is true 우리는 puppeteer를 통해 다음과 같은 것들을 할 수 있다 : - 화면을 스크린샷하거..