@object-ui/react 3.3.0 → 3.3.1

package/src/__tests__/useOffline.test.ts

@@ -1,198 +0,0 @@
-/**
- * ObjectUI — useOffline Tests
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useOffline } from '../hooks/useOffline';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const QUEUE_KEY = 'objectui-offline-queue';
-
-function mockOnlineStatus(online: boolean) {
-  Object.defineProperty(navigator, 'onLine', {
-    value: online,
-    configurable: true,
-    writable: true,
-  });
-}
-
-function triggerOnline() {
-  mockOnlineStatus(true);
-  window.dispatchEvent(new Event('online'));
-}
-
-function triggerOffline() {
-  mockOnlineStatus(false);
-  window.dispatchEvent(new Event('offline'));
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('useOffline', () => {
-  beforeEach(() => {
-    mockOnlineStatus(true);
-    localStorage.removeItem(QUEUE_KEY);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should default to online with empty queue', () => {
-    const { result } = renderHook(() => useOffline());
-    expect(result.current.isOnline).toBe(true);
-    expect(result.current.enabled).toBe(true);
-    expect(result.current.syncState).toBe('idle');
-    expect(result.current.pendingCount).toBe(0);
-    expect(result.current.showIndicator).toBe(false);
-    expect(result.current.strategy).toBe('network_first');
-  });
-
-  it('should detect offline status', () => {
-    const { result } = renderHook(() => useOffline());
-    expect(result.current.isOnline).toBe(true);
-
-    act(() => {
-      triggerOffline();
-    });
-
-    expect(result.current.isOnline).toBe(false);
-    expect(result.current.showIndicator).toBe(true);
-  });
-
-  it('should detect coming back online', () => {
-    mockOnlineStatus(false);
-    const { result } = renderHook(() => useOffline());
-    expect(result.current.isOnline).toBe(false);
-
-    act(() => {
-      triggerOnline();
-    });
-
-    expect(result.current.isOnline).toBe(true);
-    expect(result.current.showIndicator).toBe(false);
-  });
-
-  it('should queue mutations', () => {
-    const { result } = renderHook(() => useOffline());
-
-    act(() => {
-      result.current.queueMutation({
-        operation: 'create',
-        resource: 'users',
-        data: { name: 'Alice' },
-      });
-    });
-
-    expect(result.current.pendingCount).toBe(1);
-
-    act(() => {
-      result.current.queueMutation({
-        operation: 'update',
-        resource: 'users',
-        data: { id: '1', name: 'Bob' },
-      });
-    });
-
-    expect(result.current.pendingCount).toBe(2);
-  });
-
-  it('should clear the mutation queue', () => {
-    const { result } = renderHook(() => useOffline());
-
-    act(() => {
-      result.current.queueMutation({ operation: 'create', resource: 'users' });
-      result.current.queueMutation({ operation: 'delete', resource: 'users' });
-    });
-
-    expect(result.current.pendingCount).toBe(2);
-
-    act(() => {
-      result.current.clearQueue();
-    });
-
-    expect(result.current.pendingCount).toBe(0);
-  });
-
-  it('should enforce queueMaxSize', () => {
-    const { result } = renderHook(() => useOffline({ queueMaxSize: 2 }));
-
-    act(() => {
-      result.current.queueMutation({ operation: 'create', resource: 'a' });
-      result.current.queueMutation({ operation: 'create', resource: 'b' });
-      result.current.queueMutation({ operation: 'create', resource: 'c' });
-    });
-
-    expect(result.current.pendingCount).toBe(2);
-  });
-
-  it('should respect custom config values', () => {
-    const { result } = renderHook(() =>
-      useOffline({
-        strategy: 'cache_first',
-        offlineIndicator: false,
-        offlineMessage: 'Custom message',
-      }),
-    );
-
-    expect(result.current.strategy).toBe('cache_first');
-    expect(result.current.offlineMessage).toBe('Custom message');
-
-    act(() => {
-      triggerOffline();
-    });
-
-    // offlineIndicator is false, so showIndicator should be false even when offline
-    expect(result.current.showIndicator).toBe(false);
-  });
-
-  it('should not queue mutations when disabled', () => {
-    const { result } = renderHook(() => useOffline({ enabled: false }));
-
-    act(() => {
-      result.current.queueMutation({ operation: 'create', resource: 'users' });
-    });
-
-    expect(result.current.pendingCount).toBe(0);
-    expect(result.current.enabled).toBe(false);
-  });
-
-  it('should sync mutations', async () => {
-    const { result } = renderHook(() => useOffline());
-
-    act(() => {
-      result.current.queueMutation({ operation: 'create', resource: 'users' });
-    });
-
-    expect(result.current.pendingCount).toBe(1);
-
-    await act(async () => {
-      await result.current.sync();
-    });
-
-    expect(result.current.pendingCount).toBe(0);
-    expect(result.current.syncState).toBe('idle');
-  });
-
-  it('should persist queue to localStorage', () => {
-    const { result } = renderHook(() => useOffline());
-
-    act(() => {
-      result.current.queueMutation({ operation: 'create', resource: 'users' });
-    });
-
-    const stored = JSON.parse(localStorage.getItem(QUEUE_KEY) || '[]');
-    expect(stored).toHaveLength(1);
-    expect(stored[0].resource).toBe('users');
-  });
-});

package/src/__tests__/usePageTransition.test.ts

@@ -1,214 +0,0 @@
-/**
- * ObjectUI — usePageTransition Tests
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { usePageTransition } from '../hooks/usePageTransition';
-
-// ---------------------------------------------------------------------------
-// matchMedia mock helper
-// ---------------------------------------------------------------------------
-
-function mockMatchMedia(reducedMotion: boolean) {
-  const listeners: Array<(e: MediaQueryListEvent) => void> = [];
-  const mql = {
-    matches: reducedMotion,
-    media: '(prefers-reduced-motion: reduce)',
-    addEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
-      listeners.push(cb);
-    },
-    removeEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
-      const idx = listeners.indexOf(cb);
-      if (idx >= 0) listeners.splice(idx, 1);
-    },
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    onchange: null,
-    dispatchEvent: vi.fn(),
-  } as unknown as MediaQueryList;
-
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    configurable: true,
-    value: vi.fn().mockReturnValue(mql),
-  });
-
-  return { mql, listeners };
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('usePageTransition', () => {
-  beforeEach(() => {
-    mockMatchMedia(false);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should return inactive result for default (none) type', () => {
-    const { result } = renderHook(() => usePageTransition());
-
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.type).toBe('none');
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-    expect(result.current.enterStyle).toEqual({});
-    expect(result.current.exitStyle).toEqual({});
-  });
-
-  it('should generate fade transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade', duration: 200 }),
-    );
-
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('animate-in');
-    expect(result.current.enterClassName).toContain('fade-in');
-    expect(result.current.exitClassName).toContain('animate-out');
-    expect(result.current.exitClassName).toContain('fade-out');
-    expect(result.current.enterStyle.animationDuration).toBe('200ms');
-    expect(result.current.duration).toBe(200);
-  });
-
-  it('should generate slide_up transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'slide_up' }),
-    );
-
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('slide-in-from-bottom');
-    expect(result.current.exitClassName).toContain('slide-out-to-top');
-  });
-
-  it('should generate slide_down transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'slide_down' }),
-    );
-
-    expect(result.current.enterClassName).toContain('slide-in-from-top');
-    expect(result.current.exitClassName).toContain('slide-out-to-bottom');
-  });
-
-  it('should generate slide_left transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'slide_left' }),
-    );
-
-    expect(result.current.enterClassName).toContain('slide-in-from-right');
-    expect(result.current.exitClassName).toContain('slide-out-to-left');
-  });
-
-  it('should generate slide_right transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'slide_right' }),
-    );
-
-    expect(result.current.enterClassName).toContain('slide-in-from-left');
-    expect(result.current.exitClassName).toContain('slide-out-to-right');
-  });
-
-  it('should generate scale transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'scale' }),
-    );
-
-    expect(result.current.enterClassName).toContain('zoom-in');
-    expect(result.current.exitClassName).toContain('zoom-out');
-  });
-
-  it('should generate rotate transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'rotate' }),
-    );
-
-    expect(result.current.enterClassName).toContain('spin-in');
-    expect(result.current.exitClassName).toContain('spin-out');
-  });
-
-  it('should generate flip transition classes', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'flip' }),
-    );
-
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('fade-in');
-    expect(result.current.exitClassName).toContain('fade-out');
-  });
-
-  it('should apply custom easing', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade', easing: 'spring' }),
-    );
-
-    expect(result.current.enterStyle.animationTimingFunction).toBe(
-      'cubic-bezier(0.34, 1.56, 0.64, 1)',
-    );
-  });
-
-  it('should apply custom duration', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade', duration: 500 }),
-    );
-
-    expect(result.current.enterStyle.animationDuration).toBe('500ms');
-    expect(result.current.duration).toBe(500);
-  });
-
-  it('should use default duration of 300ms', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade' }),
-    );
-
-    expect(result.current.duration).toBe(300);
-    expect(result.current.enterStyle.animationDuration).toBe('300ms');
-  });
-
-  it('should disable transitions when reduced motion is preferred', () => {
-    mockMatchMedia(true);
-
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade', duration: 200 }),
-    );
-
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-    expect(result.current.enterStyle).toEqual({});
-    expect(result.current.exitStyle).toEqual({});
-  });
-
-  it('should set animationFillMode to both', () => {
-    const { result } = renderHook(() =>
-      usePageTransition({ type: 'fade' }),
-    );
-
-    expect(result.current.enterStyle.animationFillMode).toBe('both');
-    expect(result.current.exitStyle.animationFillMode).toBe('both');
-  });
-
-  it('should support all easing values', () => {
-    const easings = [
-      { input: 'linear' as const, expected: 'linear' },
-      { input: 'ease' as const, expected: 'ease' },
-      { input: 'ease_in' as const, expected: 'ease-in' },
-      { input: 'ease_out' as const, expected: 'ease-out' },
-      { input: 'ease_in_out' as const, expected: 'ease-in-out' },
-    ];
-
-    for (const { input, expected } of easings) {
-      const { result } = renderHook(() =>
-        usePageTransition({ type: 'fade', easing: input }),
-      );
-      expect(result.current.enterStyle.animationTimingFunction).toBe(expected);
-    }
-  });
-});