main 🧊 rework use toggle tests

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');
 });

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;
 };