하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
한시도 긴장의 끈을 놓을 수 없는 상황이면서 동시에 아이와 관련된 이슈가 있을 땐 사실 머리가 복잡스럽긴 하다.
정말 막판까지 아이 어린이집 행사 참석을 보류하다가 결국 이도 저도 안되겠다는 생각에 우선 아이를 챙기기로 결정했다.
역시나 예상한 대로 거의 하루를 모두 아이에게 투입하게 되었는데, 포트폴리오 마무리를 약 이틀 앞둔 상태라 솔직히 절망적인 기분이었지만
그래도 막판까지 최선을 다하자는 마음으로 늦은 시간에 코딩도장으로 다시 돌아왔다.
오늘은 어린이집 행사 참여 전까지 계속 어드민 사이드의 테스트를 손보고 있었는데 두 가지 문제에 맞닥뜨렸다.
TIL을 쓰는 지금 이 순간에도 해결되지는 않아서... 약간 답답한 기분이지만.. 흡.
추후에 이 기록을 바탕으로 꼭 해결 포인트에 대한 글을 다시 쓸 수 있으면 좋겠다.
1. 신규 장소를 추가하기 위한 form 테스트
현재 내 어드민 사이드에서 신규 장소를 추가하기 위한 form 화면은 아래와 같다.
딱 봐도.... 정말 많은 요소들을 집어넣어야 한다.
사실 꼼수 아닌 꼼수가 있는데, 영업시간(business hours)을 입력하는 것이 form 상으로는 평일 / 주말로 나뉘어 있는데
더 정확하게 표현하려 했다면 월, 화, 수, 목, 금, 토, 일을 입력받는 게 맞다.
처음엔 그렇게 각 요일에 대한 입력 필드를 모두 적용했다가...
그걸 입력하는 나 스스로도 너무 고통스럽고;; 실제로 서비스를 사용하는 사람이라면 더더욱 입력을 포기할 것 같다는 생각이 들었다.
그렇다고 아예 받지 않을 순 없어서 우선 월~금에 해당하는 내용을 '평일'로, 토~일에 해당하는 내용을 '주말'로 받는 것으로 선회 ㅎㅎ.
근데 그렇게 줄여놓았다 하더라도 입력하는 필드 자체가 너무 많다보니 처음에 페이지단에서 내려주는 props가 정확히 19개가 되었다.
... 구조적으로 잘못된 것이라는 아주 강력한 신호일텐데 사실 어떻게 고쳐야 할지, 또는 어떻게 나눠야 할지 잘 모르겠다.
우선 페이지단에서 근 20개에 달하는 props를 내려주는 건 절대적으로 문제가 있어보였고,
어쩌다보니 엊그제였나, 어제였나. 홀맨님이 오셔서 store의 특성을 말씀해주신 덕분에 약간 마음을 놓고 component 단에서 스토어를 불러와
일부 prop를 페이지단에서 하나 내린 컴포넌트에서 직접 불러와 사용할 수 있었다.
근데 문제가 모두 해결된 것은 아니다.
결국 테스트의 비대함이 해결되지 않았기 때문이다.
내가 테스트를 잘못 짜는 것일수도 있고...ㅠ
어쨌든 일부 props를 나누긴 했지만 양 자체가 적지 않기도 하고... 후.
2번 문제로 이야기할 것이긴 하지만 '이미지 파일 업로드'에 대한 문제도 해결되지 않아 결국 이 페이지단의 테스트는 미뤄둘 수 밖에 없는 상태가 되었다.
어제 노아님께도 따로 이야기 드렸지만, 내 서비스의 복잡도가 월등히 낮다고 생각해서 좀 아쉬운데..
뎁스가 거의 없다시피 한 이 서비스에서도 테스트를 제대로 짜지 못하는 스스로에 대해 자괴감이 들기도 한다.
하지만 성장과 결과물이 없는 단순한 자괴감은 어떤 긍정적 효과도 창출할 수 없기에.
우선 남은 마감시간을 고려했을 때 이 테스트를 계속 붙잡고 있을수는 없으므로 무적의 주석처리(ㅠㅠ)를 하고. TODO.로 남겨둔다.
아 ~ 쌓여가는 투두여...
2. input type="file"은 어떻게 테스트할 수 있을까?
지금으로선 가장 난제처럼 느껴지는 부분이다.
우리가 보통 사용하는 input은 type이 text나 number, 또는 password 정도 될 것 같고 그 밖에 간혹 라디오버튼, 체크박스 등을 사용하는데
이번에는 이미지 업로드를 하기 위해 type="file"을 처음 사용해보았다.
사실 클라우디너리 서버에 이미지를 올릴 때 까지만 해도 행복했지...
테스트에 발목을 씨-게 잡혔다.
우선 input에 텍스트를 입력하는 내용과 관련하여 대체로 아래와 같이 테스트가 시작될 것이다.
fireEvent.change(screen.getByLabelText('이름 :'), {
target: { value: '전민지' },
});
fireEvent.change(screen.getByLabelText('사번 :'), {
target: { value: 1255 },
});
fireEvent.change(screen.getByLabelText('아이디 :'), {
target: { value: 'angel2635' },
});여기서 value값은 문자열 상태인 것으로 바뀌는데...
지금 내 경우는 value가 문자열도 아닐 뿐더러 바뀌는 값이 value도 아니게 되는...? 뭐 그런 상태인 것이다.
구글링으로 스택오버플로우의 사례들을 좀 확인해봤는데 보통 아래와 같은 형태로 테스트를 진행하는 것 같아서 시도해보았으나 결론적으론 실패하고 홀드한 상태이다.
const file = new File(['hello'], 'hello.png', { type: 'image/png' });
await waitFor(() => {
fireEvent.change(screen.getByLabelText('프로필 이미지'), {
target: { files: [file] },
});
});
expect(uploadProfileImage).toBeCalled();정말 솔직히 말하면 이번 포트폴리오 기간동안 테스트를 성실하게 작성하지 않아서 항상 마음이 불편했다.
시간에 쫓기고 일정에 쫓기고.. 마음이 편치 않으니 해야 할 것을 하지 않고 넘어가는 일이 다반사였는데
이런 문제에 턱 막힐 때마다 약간 테스트 공포증 같은게 생기는 것 같은 느낌이지만.
그래도 이 문제들도 천천히 해결해나가면 그 해결 과정에서 분명 얻는게 있고 테스트가 어느순간 재밌어지는 걸 넘어서서
반드시 필요하다고 느껴질 때가 오겠지!
오늘 테스트 하면서 실제로 문제가 있었던 부분을 발견하기도 했고,
나중에 구현해야지 하고 임시로 때워놨던 것을 찾아내기도 했다.
분명한 가이드이니 자꾸 미루지 말고.. 그때 그때 잘 챙겨야 겠다는 생각을 다시 한 번..!
왠지 큰 숙제 두 개를 TIL로 남겨둔 기분인데. 너무 늦어지지 않도록 적절한 시기에 해결해야겠다.
남은 이틀... 잘 마무리 해서 두 달이란 시간의 결과물에 마침표를 한 번 찍고 넘어가자!
