[FE] Test/#369 Jest 커스텀 훅 테스트 추가

[semnil5202]

작업 대상

useFormValues 커스텀 훅에 대한 테스트를 보강합니다. validation 기능 또한 테스트합니다.

📄 작업 내용

• useFormValues 커스텀 훅 validation 기능 테스트 추가
• useFormValues 커스텀 훅 에러메시지 생성 등 전반적인 테스트 보강

🙋🏻 주의 사항

원래는 jest ui test를 위한 이슈이며 PR일 예정이었으나, 환경 설정이 잘 안되는 이슈..로 인해서 우선 커스텀 훅 테스트 로직부터 올리겠습니다.

스크린샷

📎 관련 이슈

close #369

레퍼런스

[GC-Park]

굿 궁금한 사항들은 코멘트로 남겼습니다 !!!

[GC-Park]

오 덕분에 @testing-library/react의 renderHook의 용도를 알 수 있었습니다! 👍

[jiwonh423]

👍

[GC-Park]

오 result.current.errorMessages 이것이 { name: '', description: '' }처럼 key값만 유지된채로 출력이 되는걸까요?!

[semnil5202]

넴 useFormValues 훅 안에 initErrorMessage 함수의 역할이 초기값으로 설정된 key에 맞게 에러 객체를 생성하는 것입니다. (+타입까지)

[GC-Park]

이게 이렇게 REG_EXP_CURSES.test만 붙이면 알아서 정규표현식 처리를 해주는 건가요?! 신기하네요 허헣

[semnil5202]

정규표현식 - 세인

test 외에도 여러 메서드가 있습니다. (깨알 개인 블로그 어필해봅니다 😇)

[GC-Park]

위에 남긴 질문이랑 비슷한 것 같은데 result.current.errorMessages의 값이 어떤 것일까요?!

[semnil5202]

초기 값은 formValues와 동일하며 아래와 같습니다.

{
    name: '',
    desciption: '',
}

validation을 통과하지 못한다면 (예를 들어 욕설을 입력했거나 필수 값인데 비워두었거나 등이 있겠죠) 다음과 같이 바뀝니다.

{
    name: '잘못된 값이 포함되어있습니다.',
    desciption: '',
}

그 이후 hasErrorMessage 함수를 거치는데 이 함수는 에러 객체의 value 중 단 한 값이라도 length 가 0이상이면 true를 반환합니다. 에러 객체의 value 중 string.length가 단 하나라도 0이상이면 validation에 실패했다는 뜻이 되겠죠. 이런 방식으로 동작합니다.

[GC-Park]

result.current.onChangeInput(userInput, true, 20); 어떻게 input 되는걸까요?!

[semnil5202]

onChangeInput 함수는 실제로 DOM Textarea, Input 태그에 사용되어야 정상적으로 동작을하는데요. 그래서 as 키워드를 사용하여 userInput 객체가 textarea, input 태그를 통해서 입력받은 것처럼 흉내낸것입니다.

두 번째 true는 필수값임을 나타낸 것이며 세 번째 20은 maxLength 입니다. 이 값들은 validation 에 사용됩니다.

[jiwonh423]

패트릭이 먼저 물어봐주셔놔가지고 중복이라 우선 어프로브 눌렀습니다~

[GC-Park]

상세한 설명 감사합니다 세인 !

approve 할게요 ~!