From 7b5dd34a1c68ba4ce14a6a35d4d17bed6b52118e Mon Sep 17 00:00:00 2001 From: d0422 Date: Mon, 20 May 2024 09:48:39 +0900 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20getSliderWidth=20if=EB=AC=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCarousel/useCarousel.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/useCarousel/useCarousel.tsx b/src/useCarousel/useCarousel.tsx index 467556d..c8b5f7b 100644 --- a/src/useCarousel/useCarousel.tsx +++ b/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) => { From 79e32472355b08074ba2199e8abe916801b3c129 Mon Sep 17 00:00:00 2001 From: d0422 Date: Mon, 20 May 2024 09:49:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?test:=20useCarousel=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BB=A4=EB=B2=84=EB=A6=AC=EC=A7=80=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/useCarousel/useCarousel.test.tsx | 125 +++++++++++++++++++++------ 1 file changed, 100 insertions(+), 25 deletions(-) diff --git a/src/useCarousel/useCarousel.test.tsx b/src/useCarousel/useCarousel.test.tsx index 150f906..4b4527c 100644 --- a/src/useCarousel/useCarousel.test.tsx +++ b/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 ( + <> + + {DATA.map((num) => ( +
+ {num} +
+ ))} + + + +
{index}
+ + ); + }; + + it('Carousel Wrapper컴포넌트를 통해 prev, next 기능을 수행할 수 있다.', async () => { + render(); + 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(); + 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 ( + <> + + {DATA.map((num) => ( +
+ {num} +
+ ))} + + + +
{index}
+ + ); + }; + + it('index 제한을 넘어가는 경우, prev와 next함수가 index를 적절하게 변환할 수 있다.', async () => { + render(); + 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'); }); }); From 0a3fd845101a19b42f885569b40028dfc34a52e5 Mon Sep 17 00:00:00 2001 From: d0422 Date: Mon, 20 May 2024 09:49:48 +0900 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20package=20=EB=B2=84=EC=A0=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD,=20npmignore=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmignore | 6 +++++- package.json | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.npmignore b/.npmignore index abce592..681401f 100644 --- a/.npmignore +++ b/.npmignore @@ -12,4 +12,8 @@ build-storybook.log storybook-static .github rollup.config.cjs.js -rollup.config.js \ No newline at end of file +rollup.config.js +coverage +.husky +.eslintrc.cjs +.prettierrc \ No newline at end of file diff --git a/package.json b/package.json index 554e182..dc7302a 100644 --- a/package.json +++ b/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", From a923c64598a99b29e3a3564d21526a40cc872c04 Mon Sep 17 00:00:00 2001 From: d0422 Date: Mon, 20 May 2024 10:10:25 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20npm=20prepublish=20=EC=BB=A4?= =?UTF-8?q?=EB=A7=A8=EB=93=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dc7302a..6947e9d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rapiders/react-hooks", - "version": "1.2.3", + "version": "1.2.4", "description": "react hooks for fast development", "main": "dist/esm/index.js", "types": "dist/esm/index.d.ts", @@ -12,7 +12,7 @@ "homepage": "https://github.com/rapiders/react-hooks", "scripts": { "test": "jest", - "prepublish": "npm run build", + "prepublishOnly": "npm run build", "build": "sh build.sh", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", From 914a199ba3d6177bb6e9e5f4c9fd69040c7186f4 Mon Sep 17 00:00:00 2001 From: d0422 Date: Mon, 20 May 2024 10:12:58 +0900 Subject: [PATCH 5/6] =?UTF-8?q?chore:=20npmignore=EC=97=90=20cache?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.npmignore b/.npmignore index 681401f..7c8b78a 100644 --- a/.npmignore +++ b/.npmignore @@ -16,4 +16,5 @@ rollup.config.js coverage .husky .eslintrc.cjs -.prettierrc \ No newline at end of file +.prettierrc +.cache \ No newline at end of file From 059f73dc83ba1b9b651d828d26cd7f7d070c4143 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 21 May 2024 11:13:43 +0900 Subject: [PATCH 6/6] =?UTF-8?q?chore:=20useRadio=20=EB=B0=B0=ED=8F=AC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B9=A0=EC=A7=84=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/index.ts | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6947e9d..2262c96 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rapiders/react-hooks", - "version": "1.2.4", + "version": "1.2.5", "description": "react hooks for fast development", "main": "dist/esm/index.js", "types": "dist/esm/index.d.ts", diff --git a/src/index.ts b/src/index.ts index 9dd1f15..ef0151c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,5 +6,16 @@ import useCarousel from './useCarousel/useCarousel'; import useScrollRatio from './useScrollRatio'; import useInterval from './useInterval/useInterval'; import useAfterMountEffect from './useAfterMountEffect/useAfterMountEffect'; +import useRadio from './useRadio/useRadio'; -export { useInput, useAnimation, useFocusAnimation, useDragIndexCarousel, useCarousel, useScrollRatio, useInterval, useAfterMountEffect }; +export { + useInput, + useAnimation, + useFocusAnimation, + useDragIndexCarousel, + useCarousel, + useScrollRatio, + useInterval, + useAfterMountEffect, + useRadio, +};