✅ test: RSS 등록 컴포넌트 테스트 코드 추가

[junyeokk]

🔨 테스크

• 프론트엔드 테스트 환경 구축 (Vitest + React Testing Library)
• RSS 등록 모달 컴포넌트 테스트 코드 작성

📋 작업 내용

왜 테스트를 도입했는가?

컴포넌트를 개발하면서 특정 동작을 검증하기 위해 필요한 입력값과 상태를 매번 수동으로 만드는 과정이 비효율적이라는 점을 발견했다. 첫 테스트 도입은 PostCard 컴포넌트의 제목 크기 검증을 위해서였다. 제목의 길이와 관계없이 항상 2줄 크기로 고정되어야 했는데, 이를 확인하기 위해서는 매번 블로그 글을 작성하거나 개발자 도구로 제목 태그의 크기를 수정해야 했다. 개발이 끝날 때마다 테스트용 데이터를 넣었다 지우는 작업을 반복하는 것은 번거로웠다.

그 뿐만이 아니라 추후에 다른 컴포넌트에서도 번거로운 과정은 계속되었다. 폼 검증 로직을 테스트하기 위해서는 여러 입력 필드에 올바른 값을 입력하고, 제출 버튼을 클릭하는 등 여러 단계를 거쳐야 한다. 이런 과정을 개발 중에 반복하는 것은 시간이 많이 소요되고 생산성을 저하시킴을 느꼈다.

테스트 코드를 작성함으로써 이러한 반복 작업을 자동화할 수 있다. 테스트는 컴포넌트가 필요로 하는 상태와 props를 프로그래밍 방식으로 제공하고, 사용자의 상호작용을 시뮬레이션해 예상한 결과가 제대로 나오는지 확인한다.

왜 테스트 시나리오를 작성했는가?

테스트 시나리오 작성은 '컴포넌트의 명세를 문서화해야겠다'는 생각에서 시작했다. 프로젝트에서는 Figma로 디자인을 진행했고 shadcn/ui 컴포넌트를 활용해 빠르게 개발할 수 있었지만, 각 컴포넌트의 세부 동작과 요구사항은 명확하게 문서화되어 있지 않았다. 개발 단계에서는 이것이 큰 문제가 되지 않았지만, 테스트를 작성하려고 하니 어떤 동작을 검증해야 하는지 파악하기 어려웠다.

테스트 시나리오 작성은 이런 파악 용도의 문제를 어느 정도 보완할 수 있었고, 예상하지 못한 이점도 가져왔다. 시나리오 문서를 통해 작업량을 가시화할 수 있었다. 각 시나리오에 대한 테스트 완료 여부를 표시하면서 진행 상황을 팀과 공유하기 용이했고, 남은 작업량을 한눈에 파악할 수 있었다.

테스트 시나리오 링크 > Denamu 테스트 시나리오

📷 스크린 샷(선택 사항)

테스트 시나리오 (components/RssRegistrationModal)

테스트 커버리지

All Files

components/RssRegistrationModal

[jungmyunggi]

테스트 시나리오에 들어갔으면 하는 부분이 몇개 있네요
p4) rss 등록시 폼에 사용자명을 사용자에게 입력받는식으로 데이터를 받아오는데 티스토리나 벨로그같은 플렛폼에 사용자명 길이 제한을 확인하고 해당 길이 이하인지 검증하는 로직이 있었스면 좋겠습니다.
p3) 현재 테스트에는 유효성 검사만 진행하고 있는것으로 보이는데 같은 데이터로 중복신청했을 때 실패 메시지가 나오는 시나리오도 추가했으면 좋을것 같습니다.

[jungmyunggi]

테스트 코드를 가독성있게 너무 잘 작성해주셨네요!!
코멘트 남긴거 확인해주시고 머지해주셔도 될것같아요!

[junyeokk]

테스트 시나리오에 들어갔으면 하는 부분이 몇개 있네요 p4) rss 등록시 폼에 사용자명을 사용자에게 입력받는식으로 데이터를 받아오는데 티스토리나 벨로그같은 플렛폼에 사용자명 길이 제한을 확인하고 해당 길이 이하인지 검증하는 로직이 있었스면 좋겠습니다. p3) 현재 테스트에는 유효성 검사만 진행하고 있는것으로 보이는데 같은 데이터로 중복신청했을 때 실패 메시지가 나오는 시나리오도 추가했으면 좋을것 같습니다.

코멘트 감사합니다. 사용자명 길이 제한 같은 경우 관련 문서나 설정 시 안내 문구라도 있으면 좋은데, 정확한 기준을 찾을 수 없네요. 나중에 기준을 찾게 되면 적용해놓겠습니다.

중복 체크는 나중에 저희 블로그 주소 입력 컴포넌트 리팩토링 때 서버 검증과 함께 처리할 예정이라 해당 작업 때 테스트 케이스로 추가하겠습니다!