[2기 read] TodoList E2E 테스트

[read0more]

🎯 요구사항 (투두리스트 미션 코드 활용)

• todo list에 todoItem을 키보드로 입력후 enter키를 눌러 추가하기
• todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
• todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
• todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
• todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
• todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

회고

• 요구사항 외에 팀 추가 / 삭제, 우선순위 변경도 추가해 보았습니다.
• 우선은 cypress의 Getting Started부분만 정독 한번하고 시작했는데 이게 맞나? 하고 고민하는데 시간이 제일 오래걸린거 같습니다.
• GET은 괜찮았는데, POST, PUT, DELETE 같은건 UI에 반영이 안될때가 굉장히 잦게 일어나서 cy.wait을 추가해 봤는데 괜찮아진거 같습니다.
• 어떻게 할까 고민을 꽤나 많이 했는데, 시간내서 https://github.com/cypress-io/cypress-realworld-app에서 예시를 한번 봐야겠다고 느꼈습니다...
• 처음이라 해메긴 했지만 정말 유용하게 쓸 수 있겠다고 느껴서 다음 토이프로젝트 같은걸 할 때 꼭 적용해봐야겠다고 느꼈습니다😄