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 = (values: readonly Value[] = [false, tr values as Value[] ); - return [option, toggle as (value?: Value) => void] as const; + return [option, toggle as (value?: React.SetStateAction) => void] as const; };