@jasperoosthoek/react-toolbox 0.9.4 → 0.9.5

package/src/__tests__/hooks.test.tsx

@@ -1,413 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-import {
-  usePrevious,
-  useDebouncedEffect,
-  useForceUpdate,
-  useSetState,
-  useInterval,
-  useLocalStorage,
-} from '../utils/hooks';
-
-// Mock localStorage for testing
-const mockStorage = {
-  store: {} as Record<string, string>,
-  getItem: jest.fn((key: string) => mockStorage.store[key] || null),
-  setItem: jest.fn((key: string, value: string) => {
-    mockStorage.store[key] = value;
-  }),
-  removeItem: jest.fn((key: string) => {
-    delete mockStorage.store[key];
-  }),
-  clear: jest.fn(() => {
-    mockStorage.store = {};
-  }),
-};
-
-// Override the global localStorage
-Object.defineProperty(window, 'localStorage', {
-  value: mockStorage,
-  writable: true
-});
-
-// Also set global.localStorage for Node environments
-global.localStorage = mockStorage as any;
-
-const localStorageMock = mockStorage;
-
-describe('Utils - Hooks Tests', () => {
-  beforeEach(() => {
-    jest.clearAllTimers();
-    jest.useFakeTimers();
-    // Reset localStorage mock
-    localStorageMock.store = {};
-    localStorageMock.getItem.mockClear();
-    localStorageMock.setItem.mockClear();
-    localStorageMock.removeItem.mockClear();
-    localStorageMock.clear.mockClear();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  describe('usePrevious', () => {
-    it('should return undefined on first render', () => {
-      const { result } = renderHook(({ value }) => usePrevious(value), {
-        initialProps: { value: 'initial' }
-      });
-
-      expect(result.current).toBeUndefined();
-    });
-
-    it('should return previous value on subsequent renders', () => {
-      const { result, rerender } = renderHook(({ value }) => usePrevious(value), {
-        initialProps: { value: 'initial' }
-      });
-
-      expect(result.current).toBeUndefined();
-
-      rerender({ value: 'updated' });
-      expect(result.current).toBe('initial');
-
-      rerender({ value: 'final' });
-      expect(result.current).toBe('updated');
-    });
-
-    it('should work with different data types', () => {
-      const { result, rerender } = renderHook(({ value }) => usePrevious(value), {
-        initialProps: { value: 0 }
-      });
-
-      rerender({ value: 1 });
-      expect(result.current).toBe(0);
-
-      rerender({ value: { key: 'value' } });
-      expect(result.current).toBe(1);
-
-      rerender({ value: [1, 2, 3] });
-      expect(result.current).toEqual({ key: 'value' });
-    });
-  });
-
-  describe('useDebouncedEffect', () => {
-    it('should execute effect after delay', () => {
-      const effect = jest.fn();
-      const delay = 500;
-
-      renderHook(() => useDebouncedEffect(effect, [], delay));
-
-      expect(effect).not.toHaveBeenCalled();
-
-      act(() => {
-        jest.advanceTimersByTime(delay - 1);
-      });
-      expect(effect).not.toHaveBeenCalled();
-
-      act(() => {
-        jest.advanceTimersByTime(1);
-      });
-      expect(effect).toHaveBeenCalledTimes(1);
-    });
-
-    it('should cancel previous timeout when deps change', () => {
-      const effect = jest.fn();
-      const delay = 500;
-
-      const { rerender } = renderHook(({ deps }) => useDebouncedEffect(effect, deps, delay), {
-        initialProps: { deps: [1] }
-      });
-
-      act(() => {
-        jest.advanceTimersByTime(250);
-      });
-      expect(effect).not.toHaveBeenCalled();
-
-      rerender({ deps: [2] });
-
-      act(() => {
-        jest.advanceTimersByTime(250);
-      });
-      expect(effect).not.toHaveBeenCalled();
-
-      act(() => {
-        jest.advanceTimersByTime(250);
-      });
-      expect(effect).toHaveBeenCalledTimes(1);
-    });
-
-    it('should handle empty deps array', () => {
-      const effect = jest.fn();
-      const delay = 100;
-
-      renderHook(() => useDebouncedEffect(effect, [], delay));
-
-      act(() => {
-        jest.advanceTimersByTime(delay);
-      });
-      expect(effect).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('useForceUpdate', () => {
-    it('should force component re-render', () => {
-      let renderCount = 0;
-      const { result } = renderHook(() => {
-        renderCount++;
-        return useForceUpdate();
-      });
-
-      expect(renderCount).toBe(1);
-
-      act(() => {
-        result.current();
-      });
-      expect(renderCount).toBe(2);
-
-      act(() => {
-        result.current();
-      });
-      expect(renderCount).toBe(3);
-    });
-
-    it('should return a stable function reference', () => {
-      const { result, rerender } = renderHook(() => useForceUpdate());
-      const firstUpdate = result.current;
-
-      rerender();
-      const secondUpdate = result.current;
-
-      expect(firstUpdate).toBe(secondUpdate);
-    });
-  });
-
-  describe('useSetState', () => {
-    it('should initialize with initial state', () => {
-      const initialState = { count: 0, name: 'test' };
-      const { result } = renderHook(() => useSetState(initialState));
-
-      expect(result.current[0]).toEqual(initialState);
-      expect(typeof result.current[1]).toBe('function');
-    });
-
-    it('should update state partially', () => {
-      const initialState = { count: 0, name: 'test' };
-      const { result } = renderHook(() => useSetState(initialState));
-
-      act(() => {
-        result.current[1]({ count: 5 });
-      });
-
-      expect(result.current[0]).toEqual({ count: 5, name: 'test' });
-    });
-
-    it('should merge multiple partial updates', () => {
-      const initialState = { a: 1, b: 2, c: 3 };
-      const { result } = renderHook(() => useSetState(initialState));
-
-      act(() => {
-        result.current[1]({ a: 10 });
-      });
-      expect(result.current[0]).toEqual({ a: 10, b: 2, c: 3 });
-
-      act(() => {
-        result.current[1]({ b: 20, c: 30 });
-      });
-      expect(result.current[0]).toEqual({ a: 10, b: 20, c: 30 });
-    });
-
-    it('should handle callback execution', async () => {
-      const initialState = { count: 0 };
-      const callback = jest.fn();
-      const { result } = renderHook(() => useSetState(initialState));
-
-      await act(async () => {
-        result.current[1]({ count: 1 }, callback);
-        // Wait for the promise to resolve
-        await Promise.resolve();
-      });
-
-      expect(callback).toHaveBeenCalled();
-    });
-  });
-
-  describe('useInterval', () => {
-    it('should execute function at specified intervals', () => {
-      const func = jest.fn();
-      const interval = 1000;
-
-      renderHook(() => useInterval(func, interval));
-
-      expect(func).not.toHaveBeenCalled();
-
-      act(() => {
-        jest.advanceTimersByTime(interval);
-      });
-      expect(func).toHaveBeenCalledTimes(1);
-
-      act(() => {
-        jest.advanceTimersByTime(interval);
-      });
-      expect(func).toHaveBeenCalledTimes(2);
-    });
-
-    it('should throw error for non-function first argument', () => {
-      expect(() => {
-        renderHook(() => useInterval('not a function' as any, 1000));
-      }).toThrow('First argument of useInterval should be a function');
-    });
-
-    it('should throw error for invalid interval values', () => {
-      const func = jest.fn();
-
-      expect(() => {
-        renderHook(() => useInterval(func, 0));
-      }).toThrow('Second argument of useInterval should be a positive number');
-
-      expect(() => {
-        renderHook(() => useInterval(func, -1));
-      }).toThrow('Second argument of useInterval should be a positive number');
-
-      expect(() => {
-        renderHook(() => useInterval(func, Infinity));
-      }).toThrow('Second argument of useInterval should be a positive number');
-
-      expect(() => {
-        renderHook(() => useInterval(func, 'invalid' as any));
-      }).toThrow('Second argument of useInterval should be a positive number');
-    });
-
-    it('should clear interval on unmount', () => {
-      const func = jest.fn();
-      const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
-
-      const { unmount } = renderHook(() => useInterval(func, 1000));
-
-      unmount();
-
-      expect(clearIntervalSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('useLocalStorage', () => {
-    it('should initialize with initial value when localStorage is empty', () => {
-      const key = 'testKey1';
-      const initialValue = 'initial';
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      expect(result.current[0]).toBe(initialValue);
-      expect(localStorageMock.setItem).toHaveBeenCalledWith(key, JSON.stringify(initialValue));
-    });
-
-    it('should initialize with localStorage value when available', () => {
-      const key = 'testKey2';
-      const initialValue = 'initial';
-      const storedValue = 'stored';
-
-      // Set up localStorage to return stored value
-      localStorageMock.store[key] = JSON.stringify(storedValue);
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      expect(result.current[0]).toBe(storedValue);
-    });
-
-    it('should update localStorage when state changes', () => {
-      const key = 'testKey3';
-      const initialValue = 'initial';
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      act(() => {
-        result.current[1]('updated');
-      });
-
-      expect(result.current[0]).toBe('updated');
-      expect(localStorageMock.setItem).toHaveBeenCalledWith(key, JSON.stringify('updated'));
-    });
-
-    it('should handle complex objects', () => {
-      const key = 'testKey4';
-      const initialValue = { count: 0, items: [] };
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      const newValue = { count: 5, items: ['a', 'b'] };
-      act(() => {
-        result.current[1](newValue);
-      });
-
-      expect(result.current[0]).toEqual(newValue);
-      expect(localStorageMock.setItem).toHaveBeenCalledWith(key, JSON.stringify(newValue));
-    });
-
-    it('should respond to storage events', () => {
-      const key = 'testKey5';
-      const initialValue = 'initial';
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      const newValue = 'fromEvent';
-      const storageEvent = new StorageEvent('storage', {
-        key,
-        newValue: JSON.stringify(newValue),
-      });
-
-      act(() => {
-        window.dispatchEvent(storageEvent);
-      });
-
-      expect(result.current[0]).toBe(newValue);
-    });
-
-    it('should ignore storage events for different keys', () => {
-      const key = 'testKey6';
-      const initialValue = 'initial';
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      const storageEvent = new StorageEvent('storage', {
-        key: 'differentKey',
-        newValue: JSON.stringify('different'),
-      });
-
-      act(() => {
-        window.dispatchEvent(storageEvent);
-      });
-
-      expect(result.current[0]).toBe(initialValue);
-    });
-
-    it('should dispatch storage events when setting value', () => {
-      const key = 'testKey7';
-      const initialValue = 'initial';
-      const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent');
-
-      const { result } = renderHook(() => useLocalStorage(key, initialValue));
-
-      act(() => {
-        result.current[1]('updated');
-      });
-
-      expect(dispatchEventSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'storage',
-          key,
-          newValue: JSON.stringify('updated'),
-        })
-      );
-    });
-  });
-
-  describe('Hook Export Verification', () => {
-    it('should export all hooks as functions', () => {
-      expect(typeof usePrevious).toBe('function');
-      expect(typeof useDebouncedEffect).toBe('function');
-      expect(typeof useForceUpdate).toBe('function');
-      expect(typeof useSetState).toBe('function');
-      expect(typeof useInterval).toBe('function');
-      expect(typeof useLocalStorage).toBe('function');
-    });
-  });
-});

package/src/__tests__/indicators.test.tsx

@@ -1,284 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { LocalizationProvider } from '../localization/LocalizationContext';
-import {
-  CheckIndicator,
-  LoadingIndicator,
-  SmallSpinner,
-  BigSpinner,
-} from '../components/indicators/LoadingIndicator';
-import { CheckIndicator as CheckIndicatorComponent } from '../components/indicators/CheckIndicator';
-
-// Test wrapper with localization context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <LocalizationProvider>
-    {children}
-  </LocalizationProvider>
-);
-
-describe('Indicator Components Tests', () => {
-  describe('CheckIndicator', () => {
-    it('should render CheckIndicator without crashing', () => {
-      expect(() => {
-        render(<CheckIndicatorComponent checked={true} />);
-      }).not.toThrow();
-    });
-
-    it('should render CheckIndicator in checked state', () => {
-      expect(() => {
-        render(<CheckIndicatorComponent checked={true} />);
-      }).not.toThrow();
-    });
-
-    it('should render CheckIndicator in unchecked state', () => {
-      expect(() => {
-        render(<CheckIndicatorComponent checked={false} />);
-      }).not.toThrow();
-    });
-
-    it('should accept custom className', () => {
-      expect(() => {
-        render(
-          <CheckIndicatorComponent 
-            checked={true} 
-            className="custom-class" 
-          />
-        );
-      }).not.toThrow();
-    });
-
-    it('should handle boolean checked prop correctly', () => {
-      const { rerender } = render(
-        <CheckIndicatorComponent checked={true} />
-      );
-
-      expect(() => {
-        rerender(<CheckIndicatorComponent checked={false} />);
-      }).not.toThrow();
-    });
-
-    it('should be a valid React component', () => {
-      expect(typeof CheckIndicatorComponent).toBe('function');
-    });
-  });
-
-  describe('LoadingIndicator', () => {
-    it('should render LoadingIndicator without crashing', () => {
-      expect(() => {
-        render(
-          <TestWrapper>
-            <LoadingIndicator />
-          </TestWrapper>
-        );
-      }).not.toThrow();
-    });
-
-    it('should accept custom style props', () => {
-      expect(() => {
-        render(
-          <TestWrapper>
-            <LoadingIndicator style={{ color: 'blue', fontSize: '16px' }} />
-          </TestWrapper>
-        );
-      }).not.toThrow();
-    });
-
-    it('should render with empty style object', () => {
-      expect(() => {
-        render(
-          <TestWrapper>
-            <LoadingIndicator style={{}} />
-          </TestWrapper>
-        );
-      }).not.toThrow();
-    });
-
-    it('should be a valid React component', () => {
-      expect(typeof LoadingIndicator).toBe('function');
-    });
-  });
-
-  describe('SmallSpinner', () => {
-    it('should render SmallSpinner without crashing', () => {
-      expect(() => {
-        render(<SmallSpinner />);
-      }).not.toThrow();
-    });
-
-    it('should render with custom style', () => {
-      expect(() => {
-        render(
-          <SmallSpinner 
-            style={{ margin: '10px' }} 
-          />
-        );
-      }).not.toThrow();
-    });
-
-    it('should render with custom className', () => {
-      expect(() => {
-        render(
-          <SmallSpinner 
-            className="custom-spinner-class" 
-          />
-        );
-      }).not.toThrow();
-    });
-
-    it('should render with custom component', () => {
-      const CustomComponent = (props: any) => (
-        <div {...props}>{props.children}</div>
-      );
-
-      expect(() => {
-        render(
-          <SmallSpinner 
-            component={CustomComponent}
-            style={{ padding: '5px' }}
-          />
-        );
-      }).not.toThrow();
-    });
-
-    it('should render with string component', () => {
-      expect(() => {
-        render(
-          <SmallSpinner 
-            component="div"
-            className="test-class"
-          />
-        );
-      }).not.toThrow();
-    });
-
-    it('should handle component prop variations', () => {
-      expect(() => {
-        render(<SmallSpinner component={undefined} />);
-      }).not.toThrow();
-
-      expect(() => {
-        render(<SmallSpinner component={null} />);
-      }).not.toThrow();
-    });
-
-    it('should be a valid React component', () => {
-      expect(typeof SmallSpinner).toBe('function');
-    });
-  });
-
-  describe('BigSpinner', () => {
-    it('should render BigSpinner without crashing', () => {
-      expect(() => {
-        render(<BigSpinner />);
-      }).not.toThrow();
-    });
-
-    it('should render consistently', () => {
-      const { rerender } = render(<BigSpinner />);
-      
-      expect(() => {
-        rerender(<BigSpinner />);
-      }).not.toThrow();
-    });
-
-    it('should be a valid React component', () => {
-      expect(typeof BigSpinner).toBe('function');
-    });
-  });
-
-  describe('Component Props and Variations', () => {
-    it('should handle CheckIndicator prop combinations', () => {
-      const propCombinations = [
-        { checked: true },
-        { checked: false },
-        { checked: true, className: 'test' },
-        { checked: false, className: 'custom-check' },
-      ];
-
-      propCombinations.forEach((props) => {
-        expect(() => {
-          render(<CheckIndicatorComponent {...props} />);
-        }).not.toThrow();
-      });
-    });
-
-    it('should handle SmallSpinner prop combinations', () => {
-      const propCombinations = [
-        {},
-        { style: { color: 'red' } },
-        { className: 'test-spinner' },
-        { style: { margin: '5px' }, className: 'combined' },
-      ];
-
-      propCombinations.forEach((props) => {
-        expect(() => {
-          render(<SmallSpinner {...props} />);
-        }).not.toThrow();
-      });
-    });
-
-    it('should handle LoadingIndicator with various styles', () => {
-      const styleVariations = [
-        {},
-        { color: 'blue' },
-        { fontSize: '14px', color: 'green' },
-        { margin: '10px', padding: '5px' },
-      ];
-
-      styleVariations.forEach((style) => {
-        expect(() => {
-          render(
-            <TestWrapper>
-              <LoadingIndicator style={style} />
-            </TestWrapper>
-          );
-        }).not.toThrow();
-      });
-    });
-  });
-
-  describe('Component Export Verification', () => {
-    it('should export all indicator components as functions', () => {
-      expect(typeof CheckIndicatorComponent).toBe('function');
-      expect(typeof LoadingIndicator).toBe('function');
-      expect(typeof SmallSpinner).toBe('function');
-      expect(typeof BigSpinner).toBe('function');
-    });
-  });
-
-  describe('Component Rendering Consistency', () => {
-    it('should render multiple indicators together', () => {
-      expect(() => {
-        render(
-          <TestWrapper>
-            <div>
-              <CheckIndicatorComponent checked={true} />
-              <LoadingIndicator />
-              <SmallSpinner />
-              <BigSpinner />
-            </div>
-          </TestWrapper>
-        );
-      }).not.toThrow();
-    });
-
-    it('should handle conditional rendering', () => {
-      const ConditionalComponent = ({ showSpinner }: { showSpinner: boolean }) => (
-        <TestWrapper>
-          <div>
-            <CheckIndicatorComponent checked={true} />
-            {showSpinner && <SmallSpinner />}
-          </div>
-        </TestWrapper>
-      );
-
-      expect(() => {
-        render(<ConditionalComponent showSpinner={true} />);
-      }).not.toThrow();
-
-      expect(() => {
-        render(<ConditionalComponent showSpinner={false} />);
-      }).not.toThrow();
-    });
-  });
-});