refactor: useBoardName, useInputValidation 테스트 코드 추가

src/__tests__/hooks/useBoardName.spec.ts

@@ -0,0 +1,47 @@
+import { act, renderHook } from '@testing-library/react'
+import { useBoardName } from '@/hooks/useBoardName'
+
+describe('useBoardName()', () => {
+  it('description', () => {
+    // Given
+    const { result } = renderHook(() => useBoardName())
+
+    // When
+    act(() => {
+      result.current.setBoardName('board name')
+    })
+
+    // Then
+    expect(result.current.description).toEqual('10/15자')
+  })
+
+  describe('errorMessage', () => {
+    it('should return error message on empty string', () => {
+      // Given
+      const { result } = renderHook(() => useBoardName())
+
+      // When
+      act(() => {
+        result.current.setBoardName('')
+      })
+
+      // Then
+      expect(result.current.errorMessage).toEqual(
+        '최소 한글자 이상 입력해주세요',
+      )
+    })
+
+    it('should return error message on value longer than max length', () => {
+      // Given
+      const { result } = renderHook(() => useBoardName())
+
+      // When
+      act(() => {
+        result.current.setBoardName('abcdefghijklmnop')
+      })
+
+      // Then
+      expect(result.current.errorMessage).toEqual('15자 이내로 입력 가능해요')
+    })
+  })
+})

src/__tests__/hooks/useInputValidation.spec.ts

@@ -0,0 +1,182 @@
+import { act, renderHook } from '@testing-library/react'
+import { useInputValidation, Validation } from '@/hooks/useInputValidation'
+
+describe('useInputValidation()', () => {
+  describe('value', () => {
+    it('should return initialValue as value', () => {
+      // Given
+      const initialValue = 'initialValue'
+
+      // When
+      const { result } = renderHook(() => useInputValidation(initialValue))
+
+      // Then
+      expect(result.current.value).toEqual(initialValue)
+    })
+
+    it('should set value to the new value when setValue is called', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const { result } = renderHook(() => useInputValidation(initialValue))
+
+      // When
+      const newValue = 'newValue'
+      act(() => {
+        result.current.setValue(newValue)
+      })
+
+      // Then
+      expect(result.current.value).toEqual(newValue)
+    })
+  })
+  describe('isDirty', () => {
+    it('should set isDirty to false before the value is changed', () => {
+      // Given
+      const initialValue = 'initialValue'
+
+      // When
+      const { result } = renderHook(() => useInputValidation(initialValue))
+
+      // Then
+      expect(result.current.isDirty).toBeFalsy()
+    })
+
+    it('should set isDirty to true when the value is changed', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const { result } = renderHook(() => useInputValidation(initialValue))
+
+      // When
+      const newValue = 'newValue'
+      act(() => {
+        result.current.setValue(newValue)
+      })
+
+      // Then
+      expect(result.current.isDirty).toBeTruthy()
+    })
+
+    it('should set isDirty to false when the value is not changed', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const { result } = renderHook(() => useInputValidation(initialValue))
+
+      // When
+      const newValue = 'initialValue'
+      act(() => {
+        result.current.setValue(newValue)
+      })
+
+      // Then
+      expect(result.current.isDirty).toBeFalsy()
+    })
+  })
+
+  describe('isInvalid', () => {
+    it('should set isInvalid to true when a validation fails', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const validations: Validation<string>[] = [
+        {
+          validator: () => false,
+          errorMessage: 'error message1',
+        },
+        {
+          validator: () => true,
+          errorMessage: 'error message2',
+        },
+      ]
+
+      // When
+      const { result } = renderHook(() =>
+        useInputValidation(initialValue, validations),
+      )
+
+      // Then
+      expect(result.current.isInvalid).toBeTruthy()
+    })
+
+    it('should set isInvalid to false when all validations pass', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const validations: Validation<string>[] = [
+        {
+          validator: () => true,
+          errorMessage: 'error message1',
+        },
+        {
+          validator: () => true,
+          errorMessage: 'error message2',
+        },
+        {
+          validator: () => true,
+          errorMessage: 'error message3',
+        },
+      ]
+
+      // When
+      const { result } = renderHook(() =>
+        useInputValidation(initialValue, validations),
+      )
+
+      // Then
+      expect(result.current.isInvalid).toBeFalsy()
+    })
+  })
+
+  describe('errorMessage', () => {
+    it('should set errorMessage to the first validation that fails ', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const validations: Validation<string>[] = [
+        {
+          validator: () => false,
+          errorMessage: 'error message1',
+        },
+        {
+          validator: () => false,
+          errorMessage: 'error message2',
+        },
+        {
+          validator: () => false,
+          errorMessage: 'error message3',
+        },
+      ]
+
+      // When
+      const { result } = renderHook(() =>
+        useInputValidation(initialValue, validations),
+      )
+
+      // Then
+      expect(result.current.errorMessage).toEqual('error message1')
+    })
+
+    it('should set errorMessage to empty string when all validations pass', () => {
+      // Given
+      const initialValue = 'initialValue'
+      const validations: Validation<string>[] = [
+        {
+          validator: () => true,
+          errorMessage: 'error message1',
+        },
+        {
+          validator: () => true,
+          errorMessage: 'error message2',
+        },
+        {
+          validator: () => true,
+          errorMessage: 'error message3',
+        },
+      ]
+
+      // When
+      const { result } = renderHook(() =>
+        useInputValidation(initialValue, validations),
+      )
+
+      // Then
+      expect(result.current.errorMessage).toEqual('')
+    })
+  })
+})

src/hooks/useInputValidation.ts

@@ -7,7 +7,7 @@ export type Validation<T> = {
 
 export const useInputValidation = <T>(
   initialValue: T,
-  validations: Validation<T>[],
+  validations: Validation<T>[] = [],
 ) => {
   const [value, setValue] = useState<T>(initialValue)
   const [isDirty, setIsDirty] = useState(false)