diff --git a/src/index.ts b/src/index.ts index 54a7f84..e2c6d2b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ import useInput from './useInput/useInput'; import useAnimation from './useAnimation/useAnimation'; import useFocusAnimation from './useFocusAnimation'; -import { useDragCarouselIndex } from './useDragIndexCarousel'; -import useDragIndexCarousel from './useDragIndexCarousel'; +import { useDragCarouselIndex } from './useDragIndexCarousel/useDragIndexCarousel'; +import useDragIndexCarousel from './useDragIndexCarousel/useDragIndexCarousel'; import useCarousel from './useCarousel/useCarousel'; import useScrollRatio from './useScrollRatio'; diff --git a/src/stories/useDragIndexCarousel/DragCarousel.tsx b/src/stories/useDragIndexCarousel/DragCarousel.tsx index af0de5e..7ccdacc 100644 --- a/src/stories/useDragIndexCarousel/DragCarousel.tsx +++ b/src/stories/useDragIndexCarousel/DragCarousel.tsx @@ -1,6 +1,4 @@ -import useDragIndexCarousel, { - useDragCarouselIndex, -} from '../../useDragIndexCarousel'; +import useDragIndexCarousel from '../../useDragIndexCarousel/useDragIndexCarousel'; import React from 'react'; export default function DragCarousel() { diff --git a/src/useDragIndexCarousel/useDragIndexCarousel.test.tsx b/src/useDragIndexCarousel/useDragIndexCarousel.test.tsx new file mode 100644 index 0000000..73ad7c2 --- /dev/null +++ b/src/useDragIndexCarousel/useDragIndexCarousel.test.tsx @@ -0,0 +1,131 @@ +import { renderHook, act } from '@testing-library/react'; +import { _useDragIndexCarousel } from './useDragIndexCarousel'; + +describe('_useDragIndexCarousel', () => { + it('초기 상태 테스트 index로 시작할 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3)); + + expect(result.current.index).toBe(0); + expect(result.current.style.transform).toBe('translateX(0px)'); + }); + + it('모바일 터치이벤트 테스트: 절대값으로 minMove보다 많이, 오른쪽으로 슬라이드하면 index를 증가시킬 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 60)); + const touchEvent = { touches: [{ clientX: 0 }] }; + const touchMove = { touches: [{ clientX: -100 }] }; + + act(() => + result.current.handleTouchStart( + touchEvent as unknown as React.TouchEvent + ) + ); + act(() => + result.current.handleTouchMove( + touchMove as unknown as React.TouchEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(1); + }); + + it('모바일 터치이벤트 테스트: 절대값으로 minMove보다 많이, 왼쪽으로 슬라이드하면 index를 감소시킬 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 60, 1)); + const touchEvent = { touches: [{ clientX: 0 }] }; + const touchMove = { touches: [{ clientX: 100 }] }; + + act(() => + result.current.handleTouchStart( + touchEvent as unknown as React.TouchEvent + ) + ); + act(() => + result.current.handleTouchMove( + touchMove as unknown as React.TouchEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(0); + }); + + it('모바일 터치이벤트 테스트: 절대값으로 minMove보다 적게, 슬라이드하면 index를 유지시킬 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 100)); + const touchEvent = { touches: [{ clientX: 0 }] }; + const touchMove = { touches: [{ clientX: -90 }] }; + + act(() => + result.current.handleTouchStart( + touchEvent as unknown as React.TouchEvent + ) + ); + act(() => + result.current.handleTouchMove( + touchMove as unknown as React.TouchEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(0); + }); + + it('PC 스크롤이벤트 테스트: 절대값으로 minMove보다 많이, 오른쪽으로 슬라이드하면 index를 증가시킬 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 60)); + const touchEvent = { pageX: 0 }; + const touchMove = { pageX: -100 }; + + act(() => + result.current.handleScrollStart( + touchEvent as unknown as React.MouseEvent + ) + ); + act(() => + result.current.handleScrollMove( + touchMove as unknown as React.MouseEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(1); + }); + + it('PC 스크롤이벤트 테스트: 절대값으로 minMove보다 많이, 왼쪽으로 슬라이드하면 index를 감소시킬수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 60, 1)); + const touchEvent = { pageX: 0 }; + const touchMove = { pageX: 100 }; + + act(() => + result.current.handleScrollStart( + touchEvent as unknown as React.MouseEvent + ) + ); + act(() => + result.current.handleScrollMove( + touchMove as unknown as React.MouseEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(0); + }); + + it('PC 스크롤이벤트 테스트: 절대값으로 minMove보다 적게 슬라이드하면 index를 유지시킬 수 있다.', () => { + const { result } = renderHook(() => _useDragIndexCarousel(3, 100, 1)); + const touchEvent = { pageX: 0 }; + const touchMove = { pageX: 60 }; + + act(() => + result.current.handleScrollStart( + touchEvent as unknown as React.MouseEvent + ) + ); + act(() => + result.current.handleScrollMove( + touchMove as unknown as React.MouseEvent + ) + ); + act(() => result.current.handleMoveEnd()); + + expect(result.current.index).toBe(1); + }); +}); diff --git a/src/useDragIndexCarousel.tsx b/src/useDragIndexCarousel/useDragIndexCarousel.tsx similarity index 99% rename from src/useDragIndexCarousel.tsx rename to src/useDragIndexCarousel/useDragIndexCarousel.tsx index cfe704e..b05f0d5 100644 --- a/src/useDragIndexCarousel.tsx +++ b/src/useDragIndexCarousel/useDragIndexCarousel.tsx @@ -12,7 +12,7 @@ export const useDragCarouselIndex = () => { ); }; -function _useDragIndexCarousel( +export function _useDragIndexCarousel( pageLimit: number, minMove = 60, startIndex = 0