[FE] 달력 테스트 코드 작성 #383

hwinkr · 2024-10-04T11:34:13Z

작업 내용

현재 달력 데이터를 생성하는 모듈은 이전 달, 다음 달 데이터를 함께 생성하게 됩니다.
-> UI에서 이전 달, 다음 달 데이터를 활용할 수도 있기에 유연하게 해당 모듈을 사용하기 위해서 이 방식으로 구현했었습니다.
-> 현재 저희 서비스에서는 사용하고 있지는 않지만, 학습 겸 어떻게 더 달력 데이터를 유연하게 만들 수 있을까 하다가 이 방식을 떠올렸고 구현했습니다.

useCalendar.utils.test.ts

주, 월 별 달력 데이터를 올바르게 생성하는지 확인합니다.
생성된 달력 데이터들의 날짜가 올바른 상태(prev, current, next)를 가지는지 확인합니다.

useCalender.test.ts

달력 데이터를 변경할 수 있는 책임을 가집니다.
이전 달, 다음 달로 이동했을 때 데이터가 이에 맞게 올바르게 변경되는지 테스트 합니다.

특이 사항

달력 로직이 생각보다 복잡해서 시간이 많이 소요되었네요...원래는 스토리북도 더 직관적으로 확인할 수 있도록 날짜 상태에 따른 날짜 UI도 구분해서 UI 테스트를 진행하려고 했는데 이슈를 한 번 더 파야할 것 같아요! 테스트 초록불이 뜨니 안전한 달력을 만들었다는 느낌이 들어 안심이 되네요..ㅎ

자바스크립트는 달(Month)의 인덱스를 0부터 시작해서 테스트 코드를 작성할 때 1씩 빼주고 테스트를 진행했습니다. UI영역에서 현재 달에 +1을 해준 것을 확인할 수 있는데, 0부터 시작하는 예외를 처리해주기 위함이었습니다! 리뷰하실 때, 참고바랍니다 🙏🙏🙏

리뷰 요구사항 (선택)

github-actions · 2024-10-04T11:37:56Z

Test Results

34 tests 34 ✅ 24s ⏱️
4 suites 0 💤
1 files 0 ❌

Results for commit aa97dfe.

♻️ This comment has been updated with latest results.

Largopie

해리 테스트케이스까지 구현하니 너무 좋은 것 같아요~! 멋쨍이에요~🍀

조금 더 멋진 테스트 케이스가 되기 위한 리뷰를 남겨두었으니 해리 생각을 자유롭게 말해주세요~!
복잡한 로직에 대한 테스트케이스 구현하느라 고생 많았어요~

Largopie · 2024-10-07T07:46:21Z

frontend/src/hooks/useCalendar/useCalendar.utils.test.ts

+  const testDate = new Date(TEST_YEAR, TEST_MONTH, TEST_DATE);
+
+  describe('Calendar Base util functions test', () => {
+    it('getYear 함수는 올바른 년도를 반환한다.', () => {


[P2]

기본적으로 Date 객체에 내장되어있는 메서드만 활용하는 것이기 때문에 테스트하지 않아도 되지 않을까 생각이 드네요!

getFullYear(), getMonth(), getDate 등..

따라서, getYear, getMonth, getDay와 같은 함수는 테스트하지 않아도 괜찮다고 생각하는데 해리 생각은 어떠하신가요?

getYear, getDate 함수는 2024, 31일 처럼 예상되는 값을 반환해 주는데,

getMonth: 현재 달에서 1을 뺀 값을 반환

getDay: 일요일을 인덱스 0으로 설정, 각 요일마다 인덱스를 부여한 후 숫자를 반환

해당 두 메서드는 처음 사용할 때 많이 당황스러웠던 부분이었어요. 그래서, 테스트를 통해서 혼란을 줄여보고자 했습니다. 그래서 getMonth, getDay 함수 테스트는 남겨놓았으면 하는데 어떠신가요?

그런 이유라면 좋아요 :)

Largopie · 2024-10-07T07:50:15Z

frontend/src/hooks/useCalendar/useCalendar.utils.test.ts

+    });
+  });
+
+  describe('serFirstDate', () => {


[P1] 오타가 있네요!

Suggested change

describe('serFirstDate', () => {

describe('setFirstDate', () => {

Largopie · 2024-10-07T07:57:27Z

frontend/src/hooks/useCalendar/useCalendar.utils.test.ts

+      const calendarStartDate = getCalendarStartDate(testDate);
+
+      const firstWeeklyDate = getWeeklyDate(calendarStartDate, getMonth(testDate));
+      const { status } =


[P2]
find함수를 사용하면 포함되어 있는 모든 이전 달에 대한 검사가 아닌, 발견된 하나의 이전 달 날짜에 대해서만 테스트가 이루어진다고 생각합니다. filter 함수를 이용해서 모두 검사하는 것은 어떨까요?

'한 주 데이터에 다음 달이 포함되어 있으면, 해당 날짜의 상태는 next여야 한다.',
'한 주 데이터에 현재 달이 포함되어 있으면, 해당 날짜의 상태는 current여야 한다.'

두 테스트 케이스에 대해서도 동일한 제안입니다.

다시보니, 가장 하단에 구현되어 있네요! 하단에 있는 전체 테스트를 진행한다면, 해당 테스트케이스는 없어도 될 것 같다는 것이 저의 의견입니다 :)

해당 테스트 케이스들은 getWeeklyDate 함수를 테스트하기 위한 목적이라서 전체 테스트를 한다기 보다는 전체를 만들기 위한 조각을 테스트한다고 생각해 주시면 될 것 같습니다!

filter를 사용하는 것으로 수정하고, 모든 날짜들이 예상되는 상태를 가지는지 테스트해 보도록 할게요~

Largopie · 2024-10-07T08:13:23Z

frontend/src/hooks/useCalendar/useCalendar.test.ts

+
+  describe('현재 달력 데이터 계산', () => {
+    it('현재 년도, 월을 올바르게 계산해서 반환한다.', () => {
+      jest.setSystemTime(new Date(TEST_YEAR, TEST_MONTH, TEST_DATE));


[P3]

반복되는 로직이므로 beforeAll에 추가시켜도 좋겠네요 :)

저도 초반에는 그렇게 구현을 했었는데요. 달력 년도 이동을 테스트 하는 코드를 잘 보면 모든 테스트 케이스에서 같은 날짜를 사용하지 않는 것을 확인할 수 있습니다. 그래서 beforeAll 메서드는 사용할 수 없게 되었습니다.

Largopie · 2024-10-07T08:16:48Z

frontend/src/hooks/useCalendar/useCalendar.test.ts

+  });
+
+  describe('달력 년도 이동 기능', () => {
+    it('다음 년도로 이동하면, 년도가 변경되어야 한다.', async () => {


[P3]
"이전 년도로 이동한다"라고 되어있는데 moveNextMonth로 다음 달로 이동하고 있기 때문에 구체적으로 명시하면 좋을 것 같아요!🙌

"마지막 달이 되었을 때, 다음 달로 이동하면 년도가 1년 추가된다"와 같이 구체적인 테스트케이스 명세는 어떨까요?
바로 아래 테스트케이스인 "이전 년도 이동하면, 년도가 변경되어야 한다."도 비슷합니다.

Largopie · 2024-10-07T08:18:24Z

frontend/src/hooks/useCalendar/useCalendar.test.ts

+  });
+
+  describe('달력 월 이동 기능', () => {
+    it('이전 달로 이동하면, 달 데이터가 변경되어야 한다.', () => {


[Q]
async가 붙은 테스트케이스도 있고, 안붙은 테스트케이스도 있는데 어떤 차이가 있을까요?

실수입니다~

Yoonkyoungme

해리~~ 풍부한 테스트 코드 작성하느라 고생 많았어요!

[P2]
2월, 윤년, 연말 등 경계 날짜에서도 테스트가 잘 돌아가는지 확인해보면 좋을 것 같아요 :)

Yoonkyoungme · 2024-10-07T08:32:05Z

frontend/package.json

@@ -12,7 +12,7 @@
    "build:dev": "NODE_ENV=production USE_BUNDLE_ANALYZER=false webpack --config webpack.prod.js",
    "sentry:sourcemaps": "sentry-cli sourcemaps inject ./dist && sentry-cli sourcemaps upload -o momo2024 -p momo-harry-test /dist",
    "lint:css": "stylelint '**/*.styles.ts' --fix",
-    "test": "jest",
+    "test": "jest --watch",


박수👏👏👏👏👏👏👏

Yoonkyoungme · 2024-10-07T08:34:56Z

frontend/src/hooks/useCalendar/useCalendar.utils.ts

-    const newDate = new Date(monthlyStartDate);
-    newDate.setDate(getDate(monthlyStartDate) + CALENDAR_PROPERTIES.daysInOneWeek * i);
+    const newDate = new Date(monthStartDate);
+    newDate.setDate(getDate(monthStartDate) + CALENDAR_PROPERTIES.daysInOneWeek * i);


[P3]
정말 정말 * 1000000000 가벼운 제안입니다!
monthStartDate → startDateOfMonth 로 바꿔보는 것도 괜찮을 것 같네요! 뭔가 확 눈에 띄는 느낌입니다 ㅎㅎ

Yoonkyoungme · 2024-10-07T08:40:47Z

frontend/src/hooks/useCalendar/useCalendar.utils.test.ts

+  describe('serFirstDate', () => {
+    it('날짜 객체를 해당 달의 첫 번째 날짜로 변경한다.', () => {
+      const result = setFirstDate(testDate);
+      expect(getDate(result)).not.toBe(TEST_DATE);


[P3]
제 생각에는 getDate(result)가 not.toBe(TEST_DATE)인지를 검사하는 부분은 큰 의미가 없어 보입니당!
setFirstDate(testDate)는 첫 번째 날짜로 변경하는 함수이므로 테스트의 본질은 그 날짜가 1이 되는지를 확인하는 것이라고 생각합니다.

동의합니다.

hwinkr · 2024-10-10T04:14:18Z

해리~~ 풍부한 테스트 코드 작성하느라 고생 많았어요!

[P2] 2월, 윤년, 연말 등 경계 날짜에서도 테스트가 잘 돌아가는지 확인해보면 좋을 것 같아요 :)

연말, 1월에 대한 테스트는 진행되어 있습니다.

윤년의 경우, 날짜가 29일까지 있는지 확인하는 것으로 테스트를 진행해 볼게요!

Yoonkyoungme

고생하셨어요 해리! 리뷰 반영해줘서 고마워용🍀

Largopie

반영 잘 해주셧네요 해리~ 감사합니다~!!! 👍👍👍👍

- 달, 년 이동시 달력 데이터가 올바르게 변경 되는지 테스트 - 현재 달력 데이터를 생성할 때, 빈 공간을 prev & next 상태를 가진 날짜들로 만들어서 같이 계산해 주기 때문에 이와 관련된 로직 테스트 추가

- 자바스크립트 Date 객체 동작을 확인하는 테스트 제거 - 오타 수정 - 윤년 테스트 추가 - 특정 날짜의 상태를 테스트하는 로직 개선

hwinkr requested review from Yoonkyoungme and Largopie as code owners October 4, 2024 11:34

Largopie assigned hwinkr Oct 4, 2024

Largopie added 🐈 프론트엔드 프론트엔드 관련 이슈에요 :) 🧪 테스트 테스트를 해요 :) labels Oct 4, 2024

Largopie added this to the 6차(최종) 데모데이 milestone Oct 4, 2024

Largopie requested changes Oct 7, 2024

View reviewed changes

Yoonkyoungme requested changes Oct 7, 2024

View reviewed changes

Yoonkyoungme approved these changes Oct 11, 2024

View reviewed changes

Largopie approved these changes Oct 13, 2024

View reviewed changes

hwinkr added 10 commits October 13, 2024 21:12

chore: 변경사항이 있을 때마다 테스트를 다시 실행할 수 있도록 --watch 속성 추가

dadc877

chore: @utils 절대 경로를 인식할 수 있도록 설정 추가

c4cfc58

refactor: 달력 데이터의 첫 날짜를 설정하는 코드를 함수로 분리, jsDoc 제거

69626ba

test: 달력 데이터를 생성하는 유틸 모듈 테스트 추가

2fc8dae

chore: 변수명, 함수명을 더 직관적으로 수정

99d08f3

chore: watch 속성 제거

cbbcdc9

chore: 특정 달의 첫 번째 날을 표현하는 변수명을 더 직관적으로 수정

1608639

chore: 테스트 케이스를 더 직관적으로 개선

c319e14

test: 달력 데이터를 생성하는 유틸 함수 테스트 개선

aa97dfe

- 자바스크립트 Date 객체 동작을 확인하는 테스트 제거 - 오타 수정 - 윤년 테스트 추가 - 특정 날짜의 상태를 테스트하는 로직 개선

hwinkr force-pushed the test/382-calendar-test branch from 3269e04 to aa97dfe Compare October 13, 2024 12:12

hwinkr merged commit a68817b into develop Oct 13, 2024
5 checks passed

ikjo39 deleted the test/382-calendar-test branch October 19, 2024 08:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 달력 테스트 코드 작성 #383

[FE] 달력 테스트 코드 작성 #383

hwinkr commented Oct 4, 2024

github-actions bot commented Oct 4, 2024 •

edited

Loading

Largopie left a comment

Largopie Oct 7, 2024

hwinkr Oct 10, 2024

Largopie Oct 13, 2024

Largopie Oct 7, 2024

Largopie Oct 7, 2024

hwinkr Oct 10, 2024

hwinkr Oct 10, 2024

Largopie Oct 7, 2024

hwinkr Oct 10, 2024

Largopie Oct 7, 2024

Largopie Oct 7, 2024

hwinkr Oct 10, 2024

Yoonkyoungme left a comment

Yoonkyoungme Oct 7, 2024

Yoonkyoungme Oct 7, 2024

Yoonkyoungme Oct 7, 2024 •

edited

Loading

hwinkr Oct 10, 2024

hwinkr commented Oct 10, 2024

Yoonkyoungme left a comment

Largopie left a comment

	describe('serFirstDate', () => {
	describe('setFirstDate', () => {

[FE] 달력 테스트 코드 작성 #383

[FE] 달력 테스트 코드 작성 #383

Conversation

hwinkr commented Oct 4, 2024

관련 이슈

작업 내용

useCalendar.utils.test.ts

useCalender.test.ts

특이 사항

리뷰 요구사항 (선택)

github-actions bot commented Oct 4, 2024 • edited Loading

Test Results

Largopie left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yoonkyoungme left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yoonkyoungme Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwinkr commented Oct 10, 2024

Yoonkyoungme left a comment

Choose a reason for hiding this comment

Largopie left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 4, 2024 •

edited

Loading

Yoonkyoungme Oct 7, 2024 •

edited

Loading