@addev-be/ui 2.7.3 → 2.7.5

package/src/hooks/useMutableState.test.ts

@@ -1,410 +1,410 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { act, renderHook } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { isDispatchFunction, useMutableState } from './useMutableState';
-
-describe('isDispatchFunction', () => {
-  it('should return true for functions', () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const fn = (state: any) => state;
-    expect(isDispatchFunction(fn)).toBe(true);
-  });
-
-  it('should return false for objects', () => {
-    expect(isDispatchFunction({ key: 'value' })).toBe(false);
-  });
-
-  it('should return false for primitives', () => {
-    expect(isDispatchFunction('string')).toBe(false);
-    expect(isDispatchFunction(123)).toBe(false);
-    expect(isDispatchFunction(null)).toBe(false);
-    expect(isDispatchFunction(undefined)).toBe(false);
-  });
-});
-
-describe('useMutableState', () => {
-  describe('initialization', () => {
-    it('should initialize with default value', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', age: 30 })
-      );
-      const [state] = result.current;
-
-      expect(state).toEqual({ name: 'John', age: 30 });
-    });
-
-    it('should initialize with empty object when no value is provided', () => {
-      const { result } = renderHook(() => useMutableState());
-      const [state] = result.current;
-
-      expect(state).toEqual({});
-    });
-
-    it('should initialize with function result', () => {
-      const { result } = renderHook(() =>
-        useMutableState(() => ({ count: 0, items: [] }))
-      );
-      const [state] = result.current;
-
-      expect(state).toEqual({ count: 0, items: [] });
-    });
-
-    it('should return tuple with three elements', () => {
-      const { result } = renderHook(() => useMutableState({ value: 1 }));
-
-      expect(result.current).toHaveLength(3);
-      expect(typeof result.current[0]).toBe('object');
-      expect(typeof result.current[1]).toBe('function');
-      expect(typeof result.current[2]).toBe('function');
-    });
-  });
-
-  describe('setValue (full state update)', () => {
-    it('should update entire state with new value', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', age: 30 })
-      );
-
-      act(() => {
-        const [, setValue] = result.current;
-        setValue({ name: 'Jane', age: 25 });
-      });
-
-      expect(result.current[0]).toEqual({ name: 'Jane', age: 25 });
-    });
-
-    it('should update state using function', () => {
-      const { result } = renderHook(() => useMutableState({ count: 0 }));
-
-      act(() => {
-        const [, setValue] = result.current;
-        setValue((prev) => ({ count: prev.count + 1 }));
-      });
-
-      expect(result.current[0]).toEqual({ count: 1 });
-    });
-
-    it('should replace entire state object', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', age: 30, city: 'Paris' })
-      );
-
-      act(() => {
-        const [, setValue] = result.current;
-        setValue({ name: 'Jane', age: 22, city: 'London' });
-      });
-
-      expect(result.current[0]).toEqual({
-        name: 'Jane',
-        age: 22,
-        city: 'London',
-      });
-    });
-  });
-
-  describe('setPartialValue (partial state update)', () => {
-    it('should merge partial object with existing state', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', age: 30, city: 'Paris' })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ age: 31 });
-      });
-
-      expect(result.current[0]).toEqual({
-        name: 'John',
-        age: 31,
-        city: 'Paris',
-      });
-    });
-
-    it('should merge partial object using function', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ count: 0, total: 100 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue((state) => ({ count: state.count + 5 }));
-      });
-
-      expect(result.current[0]).toEqual({ count: 5, total: 100 });
-    });
-
-    it('should handle deep nested objects', () => {
-      const { result } = renderHook(() =>
-        useMutableState({
-          user: {
-            name: 'John',
-            address: {
-              city: 'Paris',
-              country: 'France',
-            },
-          },
-          settings: {
-            theme: 'dark',
-          },
-        })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({
-          user: {
-            address: {
-              city: 'Lyon',
-            },
-          },
-        });
-      });
-
-      expect(result.current[0]).toEqual({
-        user: {
-          name: 'John',
-          address: {
-            city: 'Lyon',
-            country: 'France',
-          },
-        },
-        settings: {
-          theme: 'dark',
-        },
-      });
-    });
-
-    it('should add new properties to state', () => {
-      const { result } = renderHook(() =>
-        useMutableState<{ name: string; age?: number }>({ name: 'John' })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ age: 30 });
-      });
-
-      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
-    });
-
-    it('should handle multiple consecutive updates', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ count: 0, value: 10 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ count: 1 });
-        setPartialValue({ value: 20 });
-        setPartialValue({ count: 2 });
-      });
-
-      expect(result.current[0]).toEqual({ count: 2, value: 20 });
-    });
-
-    it('should handle empty partial object', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', age: 30 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({});
-      });
-
-      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
-    });
-
-    it('should preserve arrays correctly', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ items: [1, 2, 3], count: 0 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ count: 5 });
-      });
-
-      expect(result.current[0]).toEqual({ items: [1, 2, 3], count: 5 });
-    });
-
-    it('should update arrays when provided', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ items: [1, 2, 3], count: 0 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ items: [4, 5, 6] });
-      });
-
-      expect(result.current[0]).toEqual({ items: [4, 5, 6], count: 0 });
-    });
-  });
-
-  describe('referential stability', () => {
-    it('should maintain stable setPartialValue reference', () => {
-      const { result, rerender } = renderHook(() =>
-        useMutableState({ count: 0 })
-      );
-
-      const [, , firstSetPartial] = result.current;
-
-      act(() => {
-        const [, setValue] = result.current;
-        setValue({ count: 1 });
-      });
-
-      rerender();
-
-      const [, , secondSetPartial] = result.current;
-
-      expect(firstSetPartial).toBe(secondSetPartial);
-    });
-
-    it('should trigger new reference when state changes', () => {
-      const { result, rerender } = renderHook(() =>
-        useMutableState({ count: 0 })
-      );
-
-      const [firstState] = result.current;
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ count: 1 });
-      });
-
-      rerender();
-
-      const [secondState] = result.current;
-
-      expect(firstState).not.toBe(secondState);
-    });
-  });
-
-  describe('complex types', () => {
-    interface ComplexState {
-      id: number;
-      user: {
-        name: string;
-        email: string;
-        preferences: {
-          notifications: boolean;
-          theme: 'light' | 'dark';
-        };
-      };
-      items: string[];
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      metadata?: Record<string, any>;
-    }
-
-    it('should handle complex nested types', () => {
-      const initialState: ComplexState = {
-        id: 1,
-        user: {
-          name: 'John',
-          email: 'john@example.com',
-          preferences: {
-            notifications: true,
-            theme: 'dark',
-          },
-        },
-        items: ['item1', 'item2'],
-      };
-
-      const { result } = renderHook(() => useMutableState(initialState));
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({
-          user: {
-            preferences: {
-              theme: 'light',
-            },
-          },
-          metadata: { lastUpdated: Date.now() },
-        });
-      });
-
-      const [state] = result.current;
-
-      expect(state.user.name).toBe('John');
-      expect(state.user.email).toBe('john@example.com');
-      expect(state.user.preferences.notifications).toBe(true);
-      expect(state.user.preferences.theme).toBe('light');
-      expect(state.metadata).toBeDefined();
-      expect(state.items).toEqual(['item1', 'item2']);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('should handle null values', () => {
-      const { result } = renderHook(() =>
-        useMutableState<{ value: string | null }>({ value: 'test' })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ value: null });
-      });
-
-      expect(result.current[0]).toEqual({ value: null });
-    });
-
-    it('should handle undefined values', () => {
-      const { result } = renderHook(() =>
-        useMutableState<{ value?: string }>({ value: 'test' })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ value: undefined });
-      });
-
-      // defaultsDeep doesn't override with undefined, so original value remains
-      expect(result.current[0].value).toBe('test');
-    });
-
-    it('should handle state with boolean false', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ isActive: true, isEnabled: true })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ isActive: false });
-      });
-
-      expect(result.current[0]).toEqual({ isActive: false, isEnabled: true });
-    });
-
-    it('should handle state with number zero', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ count: 10, total: 100 })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ count: 0 });
-      });
-
-      expect(result.current[0]).toEqual({ count: 0, total: 100 });
-    });
-
-    it('should handle state with empty string', () => {
-      const { result } = renderHook(() =>
-        useMutableState({ name: 'John', description: 'Test' })
-      );
-
-      act(() => {
-        const [, , setPartialValue] = result.current;
-        setPartialValue({ name: '' });
-      });
-
-      expect(result.current[0]).toEqual({ name: '', description: 'Test' });
-    });
-  });
-});
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { isDispatchFunction, useMutableState } from './useMutableState';
+
+describe('isDispatchFunction', () => {
+  it('should return true for functions', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fn = (state: any) => state;
+    expect(isDispatchFunction(fn)).toBe(true);
+  });
+
+  it('should return false for objects', () => {
+    expect(isDispatchFunction({ key: 'value' })).toBe(false);
+  });
+
+  it('should return false for primitives', () => {
+    expect(isDispatchFunction('string')).toBe(false);
+    expect(isDispatchFunction(123)).toBe(false);
+    expect(isDispatchFunction(null)).toBe(false);
+    expect(isDispatchFunction(undefined)).toBe(false);
+  });
+});
+
+describe('useMutableState', () => {
+  describe('initialization', () => {
+    it('should initialize with default value', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+      const [state] = result.current;
+
+      expect(state).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should initialize with empty object when no value is provided', () => {
+      const { result } = renderHook(() => useMutableState());
+      const [state] = result.current;
+
+      expect(state).toEqual({});
+    });
+
+    it('should initialize with function result', () => {
+      const { result } = renderHook(() =>
+        useMutableState(() => ({ count: 0, items: [] }))
+      );
+      const [state] = result.current;
+
+      expect(state).toEqual({ count: 0, items: [] });
+    });
+
+    it('should return tuple with three elements', () => {
+      const { result } = renderHook(() => useMutableState({ value: 1 }));
+
+      expect(result.current).toHaveLength(3);
+      expect(typeof result.current[0]).toBe('object');
+      expect(typeof result.current[1]).toBe('function');
+      expect(typeof result.current[2]).toBe('function');
+    });
+  });
+
+  describe('setValue (full state update)', () => {
+    it('should update entire state with new value', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ name: 'Jane', age: 25 });
+      });
+
+      expect(result.current[0]).toEqual({ name: 'Jane', age: 25 });
+    });
+
+    it('should update state using function', () => {
+      const { result } = renderHook(() => useMutableState({ count: 0 }));
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue((prev) => ({ count: prev.count + 1 }));
+      });
+
+      expect(result.current[0]).toEqual({ count: 1 });
+    });
+
+    it('should replace entire state object', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30, city: 'Paris' })
+      );
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ name: 'Jane', age: 22, city: 'London' });
+      });
+
+      expect(result.current[0]).toEqual({
+        name: 'Jane',
+        age: 22,
+        city: 'London',
+      });
+    });
+  });
+
+  describe('setPartialValue (partial state update)', () => {
+    it('should merge partial object with existing state', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30, city: 'Paris' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ age: 31 });
+      });
+
+      expect(result.current[0]).toEqual({
+        name: 'John',
+        age: 31,
+        city: 'Paris',
+      });
+    });
+
+    it('should merge partial object using function', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 0, total: 100 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue((state) => ({ count: state.count + 5 }));
+      });
+
+      expect(result.current[0]).toEqual({ count: 5, total: 100 });
+    });
+
+    it('should handle deep nested objects', () => {
+      const { result } = renderHook(() =>
+        useMutableState({
+          user: {
+            name: 'John',
+            address: {
+              city: 'Paris',
+              country: 'France',
+            },
+          },
+          settings: {
+            theme: 'dark',
+          },
+        })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({
+          user: {
+            address: {
+              city: 'Lyon',
+            },
+          },
+        });
+      });
+
+      expect(result.current[0]).toEqual({
+        user: {
+          name: 'John',
+          address: {
+            city: 'Lyon',
+            country: 'France',
+          },
+        },
+        settings: {
+          theme: 'dark',
+        },
+      });
+    });
+
+    it('should add new properties to state', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ name: string; age?: number }>({ name: 'John' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ age: 30 });
+      });
+
+      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should handle multiple consecutive updates', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 0, value: 10 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 1 });
+        setPartialValue({ value: 20 });
+        setPartialValue({ count: 2 });
+      });
+
+      expect(result.current[0]).toEqual({ count: 2, value: 20 });
+    });
+
+    it('should handle empty partial object', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({});
+      });
+
+      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should preserve arrays correctly', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ items: [1, 2, 3], count: 0 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 5 });
+      });
+
+      expect(result.current[0]).toEqual({ items: [1, 2, 3], count: 5 });
+    });
+
+    it('should update arrays when provided', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ items: [1, 2, 3], count: 0 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ items: [4, 5, 6] });
+      });
+
+      expect(result.current[0]).toEqual({ items: [4, 5, 6], count: 0 });
+    });
+  });
+
+  describe('referential stability', () => {
+    it('should maintain stable setPartialValue reference', () => {
+      const { result, rerender } = renderHook(() =>
+        useMutableState({ count: 0 })
+      );
+
+      const [, , firstSetPartial] = result.current;
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ count: 1 });
+      });
+
+      rerender();
+
+      const [, , secondSetPartial] = result.current;
+
+      expect(firstSetPartial).toBe(secondSetPartial);
+    });
+
+    it('should trigger new reference when state changes', () => {
+      const { result, rerender } = renderHook(() =>
+        useMutableState({ count: 0 })
+      );
+
+      const [firstState] = result.current;
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 1 });
+      });
+
+      rerender();
+
+      const [secondState] = result.current;
+
+      expect(firstState).not.toBe(secondState);
+    });
+  });
+
+  describe('complex types', () => {
+    interface ComplexState {
+      id: number;
+      user: {
+        name: string;
+        email: string;
+        preferences: {
+          notifications: boolean;
+          theme: 'light' | 'dark';
+        };
+      };
+      items: string[];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      metadata?: Record<string, any>;
+    }
+
+    it('should handle complex nested types', () => {
+      const initialState: ComplexState = {
+        id: 1,
+        user: {
+          name: 'John',
+          email: 'john@example.com',
+          preferences: {
+            notifications: true,
+            theme: 'dark',
+          },
+        },
+        items: ['item1', 'item2'],
+      };
+
+      const { result } = renderHook(() => useMutableState(initialState));
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({
+          user: {
+            preferences: {
+              theme: 'light',
+            },
+          },
+          metadata: { lastUpdated: Date.now() },
+        });
+      });
+
+      const [state] = result.current;
+
+      expect(state.user.name).toBe('John');
+      expect(state.user.email).toBe('john@example.com');
+      expect(state.user.preferences.notifications).toBe(true);
+      expect(state.user.preferences.theme).toBe('light');
+      expect(state.metadata).toBeDefined();
+      expect(state.items).toEqual(['item1', 'item2']);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle null values', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ value: string | null }>({ value: 'test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ value: null });
+      });
+
+      expect(result.current[0]).toEqual({ value: null });
+    });
+
+    it('should handle undefined values', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ value?: string }>({ value: 'test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ value: undefined });
+      });
+
+      // defaultsDeep doesn't override with undefined, so original value remains
+      expect(result.current[0].value).toBe('test');
+    });
+
+    it('should handle state with boolean false', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ isActive: true, isEnabled: true })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ isActive: false });
+      });
+
+      expect(result.current[0]).toEqual({ isActive: false, isEnabled: true });
+    });
+
+    it('should handle state with number zero', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 10, total: 100 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 0 });
+      });
+
+      expect(result.current[0]).toEqual({ count: 0, total: 100 });
+    });
+
+    it('should handle state with empty string', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', description: 'Test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ name: '' });
+      });
+
+      expect(result.current[0]).toEqual({ name: '', description: 'Test' });
+    });
+  });
+});