From b962122f0ce704921d6c27eac22e0e25eae4dc28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?=
 <64779472+ssi02014@users.noreply.github.com>
Date: Sat, 28 Oct 2023 01:12:45 +0900
Subject: [PATCH] test(react): add useTimeout test case (#268)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #265

# Overview
@manudeli 👏

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <jonghyeon.ko@wesang.com>
---
 .changeset/chilly-owls-buy.md                |  5 +++
 packages/react/src/hooks/useTimeout.spec.ts  | 22 ---------
 packages/react/src/hooks/useTimeout.spec.tsx | 47 ++++++++++++++++++++
 3 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/chilly-owls-buy.md
 delete mode 100644 packages/react/src/hooks/useTimeout.spec.ts
 create mode 100644 packages/react/src/hooks/useTimeout.spec.tsx

diff --git a/.changeset/chilly-owls-buy.md b/.changeset/chilly-owls-buy.md
new file mode 100644
index 000000000..94dd7bdf4
--- /dev/null
+++ b/.changeset/chilly-owls-buy.md
@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+test(react): add useTimeout test case
diff --git a/packages/react/src/hooks/useTimeout.spec.ts b/packages/react/src/hooks/useTimeout.spec.ts
deleted file mode 100644
index e131c85cc..000000000
--- a/packages/react/src/hooks/useTimeout.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MS_100 } from '@suspensive/test-utils'
-import { act, renderHook } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-import { useTimeout } from '.'
-
-vi.useFakeTimers()
-
-describe('useTimeout', () => {
-  it('should run given function once after given timeout', () => {
-    const fn = vi.fn()
-    const rendered = renderHook(() => useTimeout(fn, MS_100))
-    expect(fn).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
-    expect(fn).toHaveBeenCalledTimes(1)
-    act(() => vi.advanceTimersByTime(MS_100))
-    expect(fn).toHaveBeenCalledTimes(1)
-    rendered.rerender()
-    expect(fn).toHaveBeenCalledTimes(1)
-    act(() => vi.advanceTimersByTime(MS_100))
-    expect(fn).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/packages/react/src/hooks/useTimeout.spec.tsx b/packages/react/src/hooks/useTimeout.spec.tsx
new file mode 100644
index 000000000..85f57032c
--- /dev/null
+++ b/packages/react/src/hooks/useTimeout.spec.tsx
@@ -0,0 +1,47 @@
+import { MS_100 } from '@suspensive/test-utils'
+import { act, render, renderHook, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { useTimeout } from '.'
+
+vi.useFakeTimers()
+
+const TestComponent = () => {
+  const [number, setNumber] = useState(0)
+
+  useTimeout(() => {
+    setNumber(number + 1)
+  }, MS_100)
+
+  return <div>{number}</div>
+}
+
+describe('useTimeout', () => {
+  it('should run given function once after given timeout', () => {
+    const fn = vi.fn()
+    const rendered = renderHook(() => useTimeout(fn, MS_100))
+    expect(fn).toHaveBeenCalledTimes(0)
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(fn).toHaveBeenCalledTimes(1)
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(fn).toHaveBeenCalledTimes(1)
+    rendered.rerender()
+    expect(fn).toHaveBeenCalledTimes(1)
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not re-call callback reveived as argument even if component using this hook is rerendered', () => {
+    const { rerender } = render(<TestComponent />)
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(screen.getByText('1')).toBeInTheDocument()
+
+    rerender(<TestComponent />)
+
+    act(() => vi.advanceTimersByTime(MS_100))
+    expect(screen.getByText('1')).toBeInTheDocument()
+  })
+})