From 59e27df1b2325a1a7c7e5971be582f86fba6fef7 Mon Sep 17 00:00:00 2001
From: debabin <dmitriybabinup@gmail.com>
Date: Mon, 3 Jun 2024 00:09:12 +0700
Subject: [PATCH] =?UTF-8?q?main=20=F0=9F=A7=8A=20rework=20use=20toggle=20t?=
 =?UTF-8?q?ests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useToggle/useToggle.test.ts | 65 ++++++++++++++++++---------
 src/hooks/useToggle/useToggle.ts      |  2 +-
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/hooks/useToggle/useToggle.test.ts b/src/hooks/useToggle/useToggle.test.ts
index ecd6bf9..eb62f66 100644
--- a/src/hooks/useToggle/useToggle.test.ts
+++ b/src/hooks/useToggle/useToggle.test.ts
@@ -2,40 +2,65 @@ import { act, renderHook } from '@testing-library/react';
 
 import { useToggle } from './useToggle';
 
-it('Should useToggle with boolean by default', () => {
+it('Should use toggle', () => {
   const { result } = renderHook(() => useToggle());
-  const [value, toggle] = result.current;
+  const [on, toggle] = result.current;
 
-  expect(value).toBe(false);
+  expect(on).toBe(false);
   expect(typeof toggle).toBe('function');
 });
 
+it('Should initialize the toggle with initial value', () => {
+  const { result } = renderHook(() => useToggle(['dark', 'light'] as const));
+  const [on] = result.current;
+
+  expect(on).toBe('dark');
+});
+
 it('Should toggle value', () => {
-  const themeModeVariants = ['light', 'dark'] as const;
-  const { result } = renderHook(() => useToggle(themeModeVariants));
-  const toggle = result.current[1];
+  const { result } = renderHook(() => useToggle(['dark', 'light'] as const));
+  const [, toggle] = result.current;
+
+  expect(result.current[0]).toBe('dark');
+  act(() => toggle());
+  expect(result.current[0]).toBe('light');
+});
+
+it('Should allows to set value', () => {
+  const { result } = renderHook(() => useToggle(['dark', 'light'] as const));
+  const [, toggle] = result.current;
 
+  act(() => toggle('dark'));
+  expect(result.current[0]).toBe('dark');
+
+  act(() => toggle('light'));
   expect(result.current[0]).toBe('light');
+});
 
-  act(() => {
-    toggle();
-  });
+it('Should allows to set value with callback function', () => {
+  const { result } = renderHook(() => useToggle(['dark', 'light'] as const));
+  const [, toggle] = result.current;
 
+  act(() => toggle((value) => value));
   expect(result.current[0]).toBe('dark');
 });
 
-it('Should set the first element after toggle', () => {
-  const themeVariants = ['green', 'blue', 'red'] as const;
-  const { result } = renderHook(() => useToggle(themeVariants));
-  const toggle = result.current[1];
+it('Should correctly toggles more than two values', () => {
+  const { result } = renderHook(() => useToggle(['dark', 'light', 'normal'] as const));
+  const [, toggle] = result.current;
+
+  act(() => toggle());
+  expect(result.current[0]).toBe('light');
+
+  act(() => toggle());
+  expect(result.current[0]).toBe('normal');
 
-  expect(result.current[0]).toBe('green');
+  act(() => toggle());
+  expect(result.current[0]).toBe('dark');
 
-  act(() => {
-    toggle();
-    toggle();
-    toggle();
-  });
+  act(() => toggle('normal'));
+  expect(result.current[0]).toBe('normal');
 
-  expect(result.current[0]).toBe('green');
+  act(() => toggle());
+  expect(result.current[0]).toBe('dark');
 });
diff --git a/src/hooks/useToggle/useToggle.ts b/src/hooks/useToggle/useToggle.ts
index 8456fa8..9eb7dc7 100644
--- a/src/hooks/useToggle/useToggle.ts
+++ b/src/hooks/useToggle/useToggle.ts
@@ -26,5 +26,5 @@ export const useToggle = <Value = boolean>(values: readonly Value[] = [false, tr
     values as Value[]
   );
 
-  return [option, toggle as (value?: Value) => void] as const;
+  return [option, toggle as (value?: React.SetStateAction<Value>) => void] as const;
 };