test: useCarousel test coverage 개선

.npmignore

@@ -12,4 +12,8 @@ build-storybook.log
 storybook-static
 .github
 rollup.config.cjs.js
-rollup.config.js
+rollup.config.js
+coverage
+.husky
+.eslintrc.cjs
+.prettierrc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapiders/react-hooks",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "react hooks for fast development",
   "main": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

src/useCarousel/useCarousel.test.tsx

@@ -1,35 +1,110 @@
-import { renderHook, act } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import useCarousel from './useCarousel';
+import React from 'react';
+
+const DATA = [1, 2, 3, 4];
 
-const DATA_LENGTH = 3;
 describe('useCarousel 기능 테스트', () => {
-  it('next 함수를 통해 index를 1증가시킬 수 있다.', () => {
-    const { result } = renderHook(() => useCarousel(DATA_LENGTH));
-    expect(result.current.isStart).toBe(true);
-    expect(result.current.index).toBe(0);
-    act(() => result.current.next());
-    expect(result.current.index).toBe(1);
-  });
+  const TestComponent = () => {
+    const { CarouselWrapper, prev, next, index, ref } = useCarousel(DATA.length);
+    return (
+      <>
+        <CarouselWrapper
+          ref={ref}
+          style={{
+            width: 100,
+            height: 100,
+          }}
+        >
+          {DATA.map((num) => (
+            <div
+              key={num}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              {num}
+            </div>
+          ))}
+        </CarouselWrapper>
+        <button onClick={prev} role="prev"></button>
+        <button onClick={next} role="next"></button>
+        <div role="index">{index}</div>
+      </>
+    );
+  };
+
+  it('Carousel Wrapper컴포넌트를 통해 prev, next 기능을 수행할 수 있다.', async () => {
+    render(<TestComponent />);
+    const next = await screen.findByRole('next');
+    const prev = await screen.findByRole('prev');
 
-  it('next 함수 실행시 dataLength와 index가 같아지는 경우 초기 index로 이동한다.', () => {
-    const { result } = renderHook(() => useCarousel(DATA_LENGTH, { startIndex: DATA_LENGTH - 1, infinity: true }));
-    expect(result.current.index).toBe(DATA_LENGTH - 1);
-    expect(result.current.isEnd).toBe(true);
-    act(() => result.current.next());
-    expect(result.current.index).toBe(0);
+    fireEvent.click(next);
+    const indexElement = await screen.findByRole('index');
+    expect(indexElement.textContent).toBe('1');
+
+    fireEvent.click(prev);
+    expect(indexElement.textContent).toBe('0');
   });
 
-  it('prev 함수를 통해 index를 1감소시킬 수 있다.', () => {
-    const { result } = renderHook(() => useCarousel(DATA_LENGTH, { startIndex: DATA_LENGTH - 1, infinity: true }));
-    expect(result.current.index).toBe(DATA_LENGTH - 1);
-    act(() => result.current.prev());
-    expect(result.current.index).toBe(DATA_LENGTH - 2);
+  it('index 제한을 넘어가는 경우, prev와 next함수가 index를 변화시키지 않을 수 있다.', async () => {
+    render(<TestComponent />);
+    const next = await screen.findByRole('next');
+    const prev = await screen.findByRole('prev');
+
+    Array.from({ length: 10 }).forEach(() => fireEvent.click(next));
+
+    const indexElement = await screen.findByRole('index');
+    expect(indexElement.textContent).toBe('3');
+
+    Array.from({ length: 10 }).forEach(() => fireEvent.click(prev));
+    expect(indexElement.textContent).toBe('0');
   });
+});
+
+describe('useCarousel(infinity) 기능 테스트', () => {
+  const TestComponent = () => {
+    const { CarouselWrapper, prev, next, index, ref } = useCarousel(DATA.length, { infinity: true });
+    return (
+      <>
+        <CarouselWrapper
+          ref={ref}
+          style={{
+            width: 100,
+            height: 100,
+          }}
+        >
+          {DATA.map((num) => (
+            <div
+              key={num}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              {num}
+            </div>
+          ))}
+        </CarouselWrapper>
+        <button onClick={prev} role="prev"></button>
+        <button onClick={next} role="next"></button>
+        <div role="index">{index}</div>
+      </>
+    );
+  };
+
+  it('index 제한을 넘어가는 경우, prev와 next함수가 index를 적절하게 변환할 수 있다.', async () => {
+    render(<TestComponent />);
+    const next = await screen.findByRole('next');
+    const prev = await screen.findByRole('prev');
+
+    Array.from({ length: 5 }).forEach(() => fireEvent.click(next));
+
+    const indexElement = await screen.findByRole('index');
+    expect(indexElement.textContent).toBe('1');
 
-  it('prev 함수 실행시, index가 0인경우, 마지막 값으로 이동한다.', () => {
-    const { result } = renderHook(() => useCarousel(DATA_LENGTH, { infinity: true }));
-    expect(result.current.index).toBe(0);
-    act(() => result.current.prev());
-    expect(result.current.index).toBe(DATA_LENGTH - 1);
+    Array.from({ length: 2 }).forEach(() => fireEvent.click(prev));
+    expect(indexElement.textContent).toBe('3');
   });
 });

src/useCarousel/useCarousel.tsx

@@ -36,10 +36,9 @@ export default function useCarousel(dataLength: number, options?: useCarouselOpt
   }, [index]);
 
   const getSliderWidth = () => {
-    if (ref.current) {
-      return ref.current.clientWidth;
-    }
-    return window.innerWidth;
+    // getSliderWidth는 상단의 useEffect에서 호출하는데, 여기서 ref.current를 확인하므로
+    // ref.current가 반드시 존재한다.
+    return ref!.current!.clientWidth;
   };
 
   const getNext = (index: number) => {