안녕하세요 프론트엔드 개발자 Garden, 오소현입니다:)
저는 요즘 항해 플러스 프론트엔드 3기 코스 과정에 참여하면서 공부하고 있는데요!
오늘은 그 8주차의 회고를 진행해보려고 합니다 !

[1] 과제 회고

이번주차는 지난 주에 이어서 오프 코치님의 테스트코드 마지막 발제가 시작되었습니다!
과제 내용은 TDD로 추가적인 어플리케이션의 기능을 구현하고, 자신만의 테스트 전략을 세워 테스트 코드를 작성해보는것이었는데요!
저는 저만의 전략을 세워 어플리케이션에 맞게 tdd로 기능 구현, 단위, 통합, e2e, ui 테스트를 진행해보는 과제를 진행했습니다!

이번 과제의 나만의 테스트 전략

Q. 고민한 테스트 전략과 그 이유는 무엇인가요?

0️⃣ 들어가며,

저는 이번 과제를 진행하면서 내가 이 서비스를 실제 운영하고 있는 개발자이고, 유저들이 사용하다가 어떤 액션을 취하다가 버그가 발생할지
최대한 캘린더를 사용하는 유저들의 입장에서 발생할 수 있는 다양한 테스트 코드를 작성한다고 생각했습니다.

따라서 기능을 테스트하는 것은 물론이지만, e2e에서 다양하게 벌어질 수 있는 서비스의 유저 플로우를 그려보며 테스트 시나리오를 작성했습니다. 사용자들이 이 서비스에서 에러를 겪을 수 있는 그 상황!을 생각해보고 미리 테스트코드로 대비하고자 이번 과제에서 노력했습니다.

---

1️⃣ 단위 테스트

단위 테스트는 제가 구현하려고 하는 함수 및 기능이 정상적으로 구현되는지를 위주로 테스트 코드를 작성하고자 했습니다.
따라서 필수적인 기능을 작은 단위로 각각의 테스트들이 해당 역할에 맞게 기댓값이 출력되는지를 파악했습니다.
주로 기본 과제의 필수 기능 요구 조건이었던 반복 기능 들에 관한 추가적으로 테스트 코드를 작성했습니다.

저의 단위 테스트의 목표는 단위 테스트가 깨지면 서비스를 할 수 없다! 반드시 무조건 되어야하는 기능이다! 라고 생각했습니다.

구현된 단위 테스트 시나리오

• (1) 반복 일정 생성 확인
  • 반복 일정이 생성되어 올바르게 저장된다.
  • 매주 반복되는 일정이 올바르게 생성된다.
• (2) 네트워크 오류 관련 처리
  • 이벤트 목록을 생성할 때 네트워크 오류가 발생하면 '일정 저장 실패'라는 메시지가 표시된다.
  • 네트워크 오류가 발생해도 이벤트가 삭제되지 않아야 한다.
• (3) 반복 주기별 일정 생성 확인
  • 반복 날짜가 1일마다 반복되어야 하고, 입력한 시작 날짜와 종료 날짜를 모두 포함해야 한다.
  • 반복 날짜가 1주마다 반복되어야 하고, 입력한 시작 날짜와 종료 날짜를 모두 포함해야 한다.
  • 반복 날짜가 1개월마다 반복되어야 하고, 입력한 시작 날짜와 종료 날짜를 모두 포함해야 한다.
  • 반복 날짜가 1년마다 반복되어야 하고, 입력한 시작 날짜와 종료 날짜를 모두 포함해야 한다.
• (4) 조건부 반복 일정 생성 확인
  • 반복 날짜가 2일마다 반복되어야 하고, 종료 날짜를 초과하지 않는 범위 내에서 반복되어야 한다.
  • 반복 날짜가 3주마다 반복되어야 하고, 종료 날짜를 초과하지 않는 범위 내에서 반복되어야 한다.
  • 반복 날짜가 3개월마다 반복되어야 하고, 종료 날짜를 초과하지 않는 범위 내에서 반복되어야 한다.
• (5) 특수 조건 확인
  • 반복 일정이 종료 날짜 이전까지 정확하게 생성되어야 한다.
  • 종료 날짜가 없으면 반복 일정이 2025-06-30까지 생성된다.
  • 사용자가 지정한 특정 횟수만큼 일정이 반복되어야 한다.

---

2️⃣ 통합 테스트

🎭 구현 전략

저는 이번 과제를 진행하면서 처음 통합 테스트를 구현할 때 지금까지 해왔던 testing-library를 사용해 처음 구현을 진행하고 있었습니다.
하지만 통합 테스트 범위에 들어가는 시나리오들은 유저들이 여러개의 컴포넌트와 함수, 훅, 기능들의 변화를 직접 겪는 것을 모의하는 것이라고 생각했습니다.
결론적으로 통합 테스트는 실제 브라우저 화면을 바탕으로 테스트를 진행하는게 더 효율적이라고 생각을 했고, 기존 통합 테스트는 그대로 두고
필수 구현 기능인 반복 일정에 관한 통합테스트들은 모두 playwright를 사용해 브라우저 기반에서 테스트를 진행하는 방식으로 구현했습니다.

⭐️ 특이점

저는 통합 테스트, e2e 테스트를 할때 각 테스트가 독립적으로 실행되는 환경을 갖추는게 맞다고 생각합니다. 따라서 모든 테스트를 실행하기 전에 존재하는 이벤트 모두 삭제 기능을 먼저 실행하고, 기존에 있는 데이터가 아무것도 없는 상태에서 테스트 코드가 진행되도록 구현하였습니다.

test.describe('반복 일정 등록', () => {
    test('1. 반복 일정을 등록할 때, 유저가 설정한 올바른 반복 주기로 등록되어야한다.', async ({
      page,
    }) => {
// 본 테스트를 실행하기 전에 서비스에 남아있는 일정 데이터를 모두 삭제하는 로직이 먼저 실행됨
      await page.goto('http://localhost:5173/');
      await page.getByRole('button', { name: '모든 일정 삭제' }).click();
      await page.reload();

// 테스트 코드...
}

사용자의 입장에서 다양한 이벤트가 추가된 상태에서 테스트 코드를 작성하는데 더 신뢰있는(현실성 있는) 테스트코드라고 생각을 해봤지만,
이러한 경우는 e2e에서 여러 일정 케이스를 추가한 것을 기반으로 테스트하는 게 맞다고 생각을 했습니다.
따라서 이벤트를 계속 새로 추가해줘야하더라도, 하나의 테스트는 독립적으로 진행하게끔 하고자 위와 같이 구현하였습니다.

통합 테스트 시나리오

제가 구현한 통합 테스트 시나리오는 아래와 같습니다. 1번에서 언급한 유닛 테스트와 유사한 시나리오가 있지만 이는 화면 기반 테스트 이기 때문에 통합테스트에서도 필요하다고 생각이 들어서 필수적인 기능 테스트를 구현했습니다.

• (1) 반복 일정 생성
  • 유저가 설정한 올바른 반복 주기로 등록되어야 한다.
  • 반복 유형을 매일로 선택하면, 매일 반복되는 일정이 생성되어야 한다.
  • 반복 유형을 매주로 선택하면, 매주 반복되는 일정이 생성되어야 한다.
  • 반복 유형을 매월로 선택하면, 매월 반복되는 일정이 생성되어야 한다.
  • 반복 유형을 매년로 선택하면, 매년 반복되는 일정이 생성되어야 한다.
• (2) 반복 일정 삭제
  • 반복 일정 중 특정 하루의 일정을 삭제하면 단일 일정만 삭제된다. (단일 일정 삭제)
  • 반복 일정을 포함한 여러 일정들이 존재할 때, 모든 일정을 삭제할 수 있어야 한다. (모든 일정 삭제)
• (3) 반복 일정 관리
  • 반복 일정 중에 특정 하루의 일정만 반복을 해제하면 단일 일정으로 남아있어야 한다.
  • 반복 일정에는 반복 아이콘이 표시되어야 한다.
• (4) 반복 일정 종료
  • 반복 종료일이 시작일보다 앞선 날이면 일정이 등록되지 않아야 한다.
  • 반복 종료일을 지정한 이벤트에 대해서 반복 시작일부터 종료일까지 캘린더에 모두 일정이 존재해야 한다.
  • 반복 종료일을 지정한 이벤트에 대해서 반복 종료일 이후에는 일정이 존재하지 않아야 한다.
  • 반복 종료일을 지정하지 않고 반복 일정을 추가하면 모든 일정이 반복되어야 한다.
  • 반복 종료일을 지정하지 않았을 경우에는 25년 6월까지의 일정만 생성되고, 그 이후로는 생성되지 않는다.

통합 테스트 결과

---

3️⃣ E2E 테스트

🎭 구현 전략

저는 앞서 언급했었지만 저만의 e2e 테스트 시나리오를 선정하는 기준은 액션이 2-3개 이상, 서비스 구현 상 오류 발생 가능성이 있는, 유저가 흔히 겪을 수 있는 테스트 시나리오를 짤 수 있도록 노력했습니다.

유저 입장에서
(0) 서비스가 항상 정상적으로 접속될 수 있어야 되는 기본적인 시나리오,
(1) 반복 일정을 등록해두었다가, 특정 날짜에 새로운 일정이 생겨 수정하는 시나리오,
(2) 여러 개의 일정을 등록 할 것이므로, 이미 등록된 일정과 겹쳐서 일정을 다시 조율해야하는 시나리오,
(3) 특정 주기를 반복하는 여러개 의 일정이 중첩되는 날짜에 표시가 제대로 되는지의 시나리오

등등이 가장 많이 서비스를 사용하면서 발생할 상황이라고 생각했고, 그만큼 오류가 없어야 하는 시나리오 라고 생각해 구현했습니다.

🎬 시나리오 분석

• 1.사용자에게 웹서비스가 정상적으로 로드 되어야한다.

유저에게 항상 정상적으로 서비스가 접속되어야하기 때문에 이를 가장 1번으로 실행하도록 구현하였습니다.

• 2.사용자가 반복 일정을 추가했다가, 특정 일정의 반복을 해제하고, 해당 일정의 날짜를 수정할 수 있어야 한다.
  • 1) 첫 반복 일정 등록은 매주 도서관에서 공부하는 일정으로 등록을 해두었다.
  • 2) 등록된 반복된 일정 중 특정 날짜 하나를 수정하여 축제를 가는 일정으로 변경하기 위해 해당 날짜만 반복을 해제했다.
  • 3) 축제 내용으로 변경했지만 축제 날짜가 주말인 관계로, 날짜만 다시 2차로 변경하였다
  • 4) 2차로 날짜를 변경한 날짜로 축제 일정 표시되고, 나머지 반복 일정도 그대로 반복되고 있는 것을 확인한다.
• 3. 사용자가 2일, 3일 간격의 일정을 등록했을 때, 두 개의 일정이 겹치는 날짜는 서로 최소공배수 날짜 간격으로 겹쳐야하고 해당 날짜에 두 일정이 모두 표시되어야 한다.
  • 1) 첫 반복 일정 등록은 2일 간격으로 발생하는 반복 일정을 등록해두었다.
  • 2) 두 번째 일정 등록은 3일 간격으로 발생하는 반복 일정을 등록해두었다.
  • 3) 두 반복 일정이 겹치는 날짜의 특징은 서로의 최소 공배수 날짜 간격으로 겹치고 있고, 두 일정 다 잘 표시되는 것을 확인한다.
• 4. 사용자가 첫 일정을 등록 후 일정이 겹치게 두 번째 일정을 등록해 경고창이 떴지만 그대로 일정을 등록하고, 겹치는 날짜에 특정 일정 중에 하나 수정해 겹치지 않도록 일정을 조율할 수 있어야한다
  • 1) 첫 반복 일정 등록은 3일 간격으로 발생하는 정원이와 놀기 반복 일정을 등록해두었다.
  • 2) 두 번째 일정 등록할때 기존에 있는 첫 번째 일정과 겹치는 다은이와 놀기 단일 일정을 등록하려고 했다.
  • 3) 두 일정이 겹치는 날짜와, 시간대라 경고창 모달이 떴지만 이와 상관없이 두 번째 일정을 우선 등록했다.
  • 4) 우선 일정이 겹치지만 두 일정 다 등록되어있고, 둘 중에 어떤 것을 수정할 지 선택한다.
  • 5) 반복되는 첫 번째 일정을 수정하여 단일 일정인 두 번째 일정과 겹치지 않도록 시간대를 변경하였다.
  • 6) 해당 날짜에 첫 번째 일정과 두 번째 일정이 있지만 서로 일정이 겹치지 않도록 하였다.

E2E 테스트 결과

---

4️⃣ 시각적 회귀 테스트 (UI 테스트) 🎨

저는 제 서비스 코드에서 컴포넌트로 분리한 UI들을 직접 보며 테스트할 수 있는 시각적 회귀 테스트를 위해 스토리북을 도입했습니다.
스토리북을 사용하면 UI 테스트 뿐만 아니라 어떤 컴포넌트가 있는지 한 번에 파악할 수 있는 UI 문서의 역할도 한다고 생각해 시각적 회귀 테스트로서 많은 역할을 한다고 생각해 도입하게 되었습니다.

제 컴포넌트들에 대한 스토리북 배포는 8주차 과제 스토리북 배포 URL 에서 직접 확인하실 수 있습니다.
chromatic을 사용해 스토리북 프로젝트를 외부 배포 하였습니다!

특히 스토리북을 도입하면서 발제에서 기본적으로 구현된 Chakra UI에 어떤 컴포넌트들이 있는지 파악하기 쉬웠고,
저는 반복 일정에 대해 다음과 같이 유저들에게 좋은 UI를 추가하였습니다.

(1) 캘린더 뷰에 있는 반복일정에 해서는 아이콘 호버시 간단하게 몇일 주기의 반복, 종료일은 언제 인지 표시하도록 해 편리함을 높였습니다.

(2) 일정 리스트에 있는 반복 일정에 대해서는 반복 일정에 대한 자세한 정보를 담기 위해 모달로 구현해 사용자들이 쉽게 파악 할 수 있도록 노력하였습니다.

• 1. 단일 일정을 보여주는 EventFrom 컴포넌트(Default 상태)
• 2. 단일 일정을 보여주는 EventFrom 컴포넌트와 검색 창이 같이 보여지는 EventList 컴포넌트
     • 1) 여러개의 일정이 보여지는 Default 상태
     • 2) 존재하는 이벤트가 없어 "검색 결과가 없습니다." 텍스트만 보여지는 No Event 상태
     • 3) 검색 창에 검색어를 입력해둔 상태로 검색어와 해당하는 이벤트 목록들과 함께 보여지는 With Search Team 상태
• 3. 알람창 목록이 보여지는 NotificationList컴포넌트(Default 상태)
• 4. 일정이 겹치는 경우에 경고를 발생하는 경고 알람 모달 OverlapAlertModal 컴포넌트
     • 1) 겹치는 일정 목록들이 함께 보여지는 Default 상태
     • 2) 겹치지 않는데 모달이 오픈 될때, 겹치는 일정 목록이 보여지지 않는 No Overlap 상태
• 5. 이벤트 목록에서 반복 일정에 대해 상세 정보를 보여주는 RepeatEventModal 컴포넌트
     • 1) 반복 주기와 종료 날짜가 포함된다면 함께 보여지는 Default 상태
     • 2) 반복이 없는데 모달이 오픈 될 때, 반복이 없는 것을 보여주는 No Repeat 상태
     • 3) 모달이 닫혔을 때의 상태를 보여주는 close 상태

[2] 과제 결과

기본, 심화 과제 둘다 best를 받을 수 있엇습니다 ㅠㅠ
이번주차에는 성호 코치님께 멘토링을 받았는데 정말 감사했습니다...!

ㅎㅎ 그리고 오프 코치님과 저희팀 학습메이트 현우님 께서 제 PR에 좋아요를,,,! 너무 영광이었어요 ㅠㅠ(무한 감동)

[4] 다음 주를 맞이하며,,

다음주부터는 s3, cdn 등등을 배우는데요,, 회사에서 뭔지만 듣고 해볼기회가 없었는데 열심히 배우려고요!!!

[5] 항해 플러스 다음 기수 합류하기

저는 현재 9주차를 진행하고 있지만 정말 열심히 몰입해서 공부하고 있는데요!
바로 다음 기수인 항해 플러스 프론트엔드 코스 4기를 모집하고 있다고 하여 공유드립니다!

저도 3기 입과할때 슈퍼 얼리버드 기간에 합류해 추천인 할인까지해서 제일 최대 할인된 가격에 합류할 수 있었습니다 ㅎㅎ

또한 추천인 제도로 [추천인] 코드에 “fWHY9o”를 입력하시면 20만 원 추가 할인 혜택이 있으니 결제하실때 꼭 추천인 할인 코드도 함께 입력해주세요!

제 항해 플러스 프론트엔드 후기 글을 보고 궁금한 사항이 있으시다면 댓글이나, 벨로그 프로필 이메일, 링크드인으로 문의주세요 :)