From a5377436adde36a7c904ea4fd60b73090f4f618f Mon Sep 17 00:00:00 2001
From: hiroro-work <hiroro@sonicgarden.jp>
Date: Fri, 12 Jul 2024 21:10:38 +0900
Subject: [PATCH] =?UTF-8?q?useCustomCompareEffect/useDeepCompareEffect?=
 =?UTF-8?q?=E3=81=AE=E3=83=86=E3=82=B9=E3=83=88=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_tests/useCustomCompareEffect.test.ts     | 44 +++++++++++++++
 .../_tests/useDeepCompareEffect.test..ts      | 53 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 src/utils/_tests/useCustomCompareEffect.test.ts
 create mode 100644 src/utils/_tests/useDeepCompareEffect.test..ts

diff --git a/src/utils/_tests/useCustomCompareEffect.test.ts b/src/utils/_tests/useCustomCompareEffect.test.ts
new file mode 100644
index 0000000..005b48f
--- /dev/null
+++ b/src/utils/_tests/useCustomCompareEffect.test.ts
@@ -0,0 +1,44 @@
+import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { describe, afterEach, it, expect, vi } from 'vitest';
+import { useCustomCompareEffect } from '../useCustomCompareEffect';
+import type { DependencyList } from 'react';
+
+const isEqual = (prevDeps: DependencyList, nextDeps: DependencyList) =>
+  prevDeps.every((dep, index) => dep === nextDeps[index]);
+
+describe('useCustomCompareEffect', () => {
+  afterEach(cleanup);
+
+  it('should call the effect when deps change and isEqual returns false', () => {
+    const effect = vi.fn();
+    const isEqual = vi.fn().mockReturnValue(false);
+    const { rerender } = renderHook(({ deps }) => useCustomCompareEffect(effect, deps, isEqual), {
+      initialProps: { deps: [1, 2, 3] },
+    });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [1, 2, 4] });
+    expect(effect).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not call the effect when deps change but isEqual returns true', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(({ deps }) => useCustomCompareEffect(effect, deps, isEqual), {
+      initialProps: { deps: [1, 2, 3] },
+    });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [1, 2, 3] });
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle empty deps array', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(() => useCustomCompareEffect(effect, [], isEqual));
+
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender();
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/utils/_tests/useDeepCompareEffect.test..ts b/src/utils/_tests/useDeepCompareEffect.test..ts
new file mode 100644
index 0000000..6b3be4b
--- /dev/null
+++ b/src/utils/_tests/useDeepCompareEffect.test..ts
@@ -0,0 +1,53 @@
+import { renderHook, cleanup } from '@testing-library/react-hooks';
+import { describe, afterEach, it, expect, vi } from 'vitest';
+import { useDeepCompareEffect } from '../useDeepCompareEffect';
+
+describe('useDeepCompareEffect', () => {
+  afterEach(cleanup);
+
+  it('should call the effect when deps change shallowly', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), {
+      initialProps: { deps: [1, 2, 3] },
+    });
+
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [1, 2, 4] });
+    expect(effect).toHaveBeenCalledTimes(2);
+  });
+
+  it('should call the effect when deps change deeply', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), {
+      initialProps: { deps: [{ a: 1, b: 2, c: { d: 3 } }] },
+    });
+
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [{ a: 1, b: 2, c: { d: 4 } }] });
+    expect(effect).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not call the effect when deps do not change', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), {
+      initialProps: { deps: [{ a: 1, b: 2, c: { d: 3 } }] },
+    });
+
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [{ a: 1, b: 2, c: { d: 3 } }] });
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle empty deps array', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(() => useDeepCompareEffect(effect, []));
+
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender();
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+});