preact-missing-hooks 1.0.2 → 1.1.1

package/tests/useClipboard.test.tsx

@@ -0,0 +1,159 @@
+/** @jsx h */
+import { h } from 'preact'
+import { useState } from 'preact/hooks'
+import { render, fireEvent, waitFor } from '@testing-library/preact'
+import { useClipboard } from '../src/useClipboard'
+
+describe('useClipboard', () => {
+  const originalNavigator = global.navigator
+
+  afterEach(() => {
+    Object.defineProperty(global, 'navigator', {
+      value: originalNavigator,
+      writable: true,
+    })
+    vi.useRealTimers()
+  })
+
+  it('copy succeeds and sets copied to true', async () => {
+    vi.useFakeTimers()
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, clipboard: { writeText } },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const { copy, copied } = useClipboard({ resetDelay: 1000 })
+      return (
+        <div>
+          <button onClick={() => copy('test')}>Copy</button>
+          <span data-testid="copied">{String(copied)}</span>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(<TestComponent />)
+    expect(getByTestId('copied').textContent).toBe('false')
+
+    fireEvent.click(getByText('Copy'))
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('test')
+    })
+    await waitFor(() => {
+      expect(getByTestId('copied').textContent).toBe('true')
+    })
+
+    vi.advanceTimersByTime(1000)
+    await waitFor(() => {
+      expect(getByTestId('copied').textContent).toBe('false')
+    })
+  })
+
+  it('copy returns false and sets error when clipboard API fails', async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error('Permission denied'))
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, clipboard: { writeText } },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const { copy, error } = useClipboard()
+      return (
+        <div>
+          <button onClick={() => copy('test')}>Copy</button>
+          <span data-testid="error">{error?.message ?? 'none'}</span>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(<TestComponent />)
+    fireEvent.click(getByText('Copy'))
+
+    await waitFor(() => {
+      expect(getByTestId('error').textContent).toBe('Permission denied')
+    })
+  })
+
+  it('paste returns text when clipboard API succeeds', async () => {
+    const readText = vi.fn().mockResolvedValue('pasted content')
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, clipboard: { writeText: vi.fn(), readText } },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const [text, setText] = useState('')
+      const { paste } = useClipboard()
+      const handlePaste = async () => {
+        const result = await paste()
+        setText(result)
+      }
+      return (
+        <div>
+          <button onClick={handlePaste}>Paste</button>
+          <span data-testid="text">{text}</span>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(<TestComponent />)
+
+    fireEvent.click(getByText('Paste'))
+    await waitFor(() => {
+      expect(readText).toHaveBeenCalled()
+    })
+    await waitFor(() => {
+      expect(getByTestId('text').textContent).toBe('pasted content')
+    })
+  })
+
+  it('reset clears copied and error state', async () => {
+    vi.useFakeTimers()
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, clipboard: { writeText } },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const { copy, copied, reset } = useClipboard({ resetDelay: 5000 })
+      return (
+        <div>
+          <button onClick={() => copy('test')}>Copy</button>
+          <button onClick={reset}>Reset</button>
+          <span data-testid="copied">{String(copied)}</span>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(<TestComponent />)
+    fireEvent.click(getByText('Copy'))
+    await waitFor(() => expect(getByTestId('copied').textContent).toBe('true'))
+    fireEvent.click(getByText('Reset'))
+    expect(getByTestId('copied').textContent).toBe('false')
+  })
+
+  it('handles missing clipboard API', async () => {
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, clipboard: undefined },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const { copy, error } = useClipboard()
+      return (
+        <div>
+          <button onClick={() => copy('test')}>Copy</button>
+          <span data-testid="error">{error?.message ?? 'none'}</span>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(<TestComponent />)
+    fireEvent.click(getByText('Copy'))
+    await waitFor(() => {
+      expect(getByTestId('error').textContent).toBe('Clipboard API is not available')
+    })
+  })
+})

package/tests/useNetworkState.test.tsx

@@ -0,0 +1,140 @@
+/** @jsx h */
+import { h } from 'preact'
+import { render, waitFor } from '@testing-library/preact'
+import { useNetworkState } from '../src/useNetworkState'
+
+describe('useNetworkState', () => {
+  const originalNavigator = global.navigator
+  const originalAddEventListener = window.addEventListener
+  const originalRemoveEventListener = window.removeEventListener
+
+  afterEach(() => {
+    Object.defineProperty(global, 'navigator', {
+      value: originalNavigator,
+      writable: true,
+    })
+    window.addEventListener = originalAddEventListener
+    window.removeEventListener = originalRemoveEventListener
+  })
+
+  it('returns online: true when navigator.onLine is true', () => {
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, onLine: true },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const state = useNetworkState()
+      return (
+        <div>
+          <span data-testid="online">{String(state.online)}</span>
+        </div>
+      )
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('online').textContent).toBe('true')
+  })
+
+  it('returns online: false when navigator.onLine is false', () => {
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, onLine: false },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const state = useNetworkState()
+      return (
+        <div>
+          <span data-testid="online">{String(state.online)}</span>
+        </div>
+      )
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('online').textContent).toBe('false')
+  })
+
+  it('includes connection info when navigator.connection is available', () => {
+    const mockConnection = {
+      effectiveType: '4g',
+      downlink: 10,
+      rtt: 50,
+      saveData: false,
+      type: 'wifi',
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }
+
+    Object.defineProperty(global, 'navigator', {
+      value: {
+        ...originalNavigator,
+        onLine: true,
+        connection: mockConnection,
+      },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const state = useNetworkState()
+      return (
+        <div>
+          <span data-testid="effectiveType">{state.effectiveType ?? 'none'}</span>
+          <span data-testid="downlink">{state.downlink ?? 'none'}</span>
+          <span data-testid="rtt">{state.rtt ?? 'none'}</span>
+          <span data-testid="saveData">{String(state.saveData ?? 'none')}</span>
+        </div>
+      )
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('effectiveType').textContent).toBe('4g')
+    expect(getByTestId('downlink').textContent).toBe('10')
+    expect(getByTestId('rtt').textContent).toBe('50')
+    expect(getByTestId('saveData').textContent).toBe('false')
+  })
+
+  it('updates when online/offline events fire', async () => {
+    let onlineHandler: () => void = () => { }
+    let offlineHandler: () => void = () => { }
+
+    window.addEventListener = vi.fn((event: string, handler: () => void) => {
+      if (event === 'online') onlineHandler = handler
+      if (event === 'offline') offlineHandler = handler
+    }) as any
+    window.removeEventListener = vi.fn()
+
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, onLine: true },
+      writable: true,
+    })
+
+    function TestComponent() {
+      const state = useNetworkState()
+      return <span data-testid="online">{String(state.online)}</span>
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('online').textContent).toBe('true')
+
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, onLine: false },
+      writable: true,
+    })
+    offlineHandler()
+
+    await waitFor(() => {
+      expect(getByTestId('online').textContent).toBe('false')
+    })
+
+    Object.defineProperty(global, 'navigator', {
+      value: { ...originalNavigator, onLine: true },
+      writable: true,
+    })
+    onlineHandler()
+
+    await waitFor(() => {
+      expect(getByTestId('online').textContent).toBe('true')
+    })
+  })
+})

package/tests/usePreferredTheme.test.tsx

@@ -0,0 +1,119 @@
+/** @jsx h */
+import { h } from 'preact'
+import { render, waitFor } from '@testing-library/preact'
+import { usePreferredTheme } from '../src/usePreferredTheme'
+
+describe('usePreferredTheme', () => {
+  const originalMatchMedia = window.matchMedia
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
+  function createMockMediaQuery(matches: boolean) {
+    return {
+      matches,
+      media: '(prefers-color-scheme: dark)',
+      onchange: null as ((e: MediaQueryListEvent) => void) | null,
+      addEventListener: vi.fn((_event: string, handler: (e: MediaQueryListEvent) => void) => {
+        ; (createMockMediaQuery as any)._handler = handler
+      }),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }
+  }
+
+  it('returns "dark" when prefers-color-scheme: dark matches', () => {
+    const darkQuery = createMockMediaQuery(true)
+    const lightQuery = createMockMediaQuery(false)
+
+    window.matchMedia = vi.fn((query: string) => {
+      if (query.includes('dark')) return darkQuery
+      return lightQuery
+    }) as any
+
+    function TestComponent() {
+      const theme = usePreferredTheme()
+      return <div data-testid="theme">{theme}</div>
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('theme').textContent).toBe('dark')
+  })
+
+  it('returns "light" when prefers-color-scheme: light matches', () => {
+    const darkQuery = createMockMediaQuery(false)
+    const lightQuery = createMockMediaQuery(true)
+
+    window.matchMedia = vi.fn((query: string) => {
+      if (query.includes('dark')) return darkQuery
+      return lightQuery
+    }) as any
+
+    function TestComponent() {
+      const theme = usePreferredTheme()
+      return <div data-testid="theme">{theme}</div>
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('theme').textContent).toBe('light')
+  })
+
+  it('returns "no-preference" when neither dark nor light matches', () => {
+    const darkQuery = createMockMediaQuery(false)
+    const lightQuery = createMockMediaQuery(false)
+
+    window.matchMedia = vi.fn((query: string) => {
+      if (query.includes('dark')) return darkQuery
+      return lightQuery
+    }) as any
+
+    function TestComponent() {
+      const theme = usePreferredTheme()
+      return <div data-testid="theme">{theme}</div>
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('theme').textContent).toBe('no-preference')
+  })
+
+  it('updates when media query change event fires', async () => {
+    let changeHandler: ((e: MediaQueryListEvent) => void) | null = null
+    const darkQuery = {
+      matches: true,
+      media: '(prefers-color-scheme: dark)',
+      onchange: null,
+      addEventListener: vi.fn((_event: string, handler: (e: MediaQueryListEvent) => void) => {
+        changeHandler = handler
+      }),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }
+    const lightQuery = createMockMediaQuery(false)
+
+    window.matchMedia = vi.fn((query: string) => {
+      if (query.includes('dark')) return darkQuery
+      return lightQuery
+    }) as any
+
+    function TestComponent() {
+      const theme = usePreferredTheme()
+      return <div data-testid="theme">{theme}</div>
+    }
+
+    const { getByTestId } = render(<TestComponent />)
+    expect(getByTestId('theme').textContent).toBe('dark')
+
+      // Simulate user switching to light mode
+      ; (darkQuery as any).matches = false
+    changeHandler?.({ matches: false, media: '(prefers-color-scheme: dark)' } as MediaQueryListEvent)
+
+    await waitFor(() => {
+      expect(getByTestId('theme').textContent).toBe('light')
+    })
+  })
+})

package/tests/useWrappedChildren.test.tsx

@@ -0,0 +1,156 @@
+/** @jsx h */
+import { h, ComponentChildren } from 'preact'
+import { render, screen } from '@testing-library/preact'
+import '@testing-library/jest-dom'
+import { useWrappedChildren } from '../src/useWrappedChildren'
+
+interface TestChildProps {
+  className?: string
+  'data-testid'?: string
+  style?: Record<string, string>
+  children?: ComponentChildren
+}
+
+function TestChild({ className, 'data-testid': testId, style, children }: TestChildProps) {
+  return (
+    <div className={className} data-testid={testId} style={style}>
+      {children}
+    </div>
+  )
+}
+
+function ParentWithWrappedChildren({ 
+  children, 
+  injectProps, 
+  mergeStrategy 
+}: { 
+  children: ComponentChildren
+  injectProps: Record<string, any>
+  mergeStrategy?: 'override' | 'preserve' 
+}) {
+  const wrappedChildren = useWrappedChildren(children, injectProps, mergeStrategy)
+  return <div data-testid="parent">{wrappedChildren}</div>
+}
+
+describe('useWrappedChildren', () => {
+  it('injects props into single child component', () => {
+    const injectProps = { className: 'injected', 'data-testid': 'child' }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        <TestChild>Original content</TestChild>
+      </ParentWithWrappedChildren>
+    )
+
+    const child = screen.getByTestId('child')
+    expect(child).toHaveClass('injected')
+    expect(child).toHaveTextContent('Original content')
+  })
+
+  it('injects props into multiple child components', () => {
+    const injectProps = { className: 'injected' }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        <TestChild data-testid="child1">First child</TestChild>
+        <TestChild data-testid="child2">Second child</TestChild>
+      </ParentWithWrappedChildren>
+    )
+
+    const child1 = screen.getByTestId('child1')
+    const child2 = screen.getByTestId('child2')
+    
+    expect(child1).toHaveClass('injected')
+    expect(child2).toHaveClass('injected')
+    expect(child1).toHaveTextContent('First child')
+    expect(child2).toHaveTextContent('Second child')
+  })
+
+  it('preserves existing props by default', () => {
+    const injectProps = { className: 'injected', style: { color: 'blue' } }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        <TestChild 
+          className="existing" 
+          data-testid="child"
+          style={{ backgroundColor: 'red' }}
+        >
+          Content
+        </TestChild>
+      </ParentWithWrappedChildren>
+    )
+
+    const child = screen.getByTestId('child')
+    expect(child).toHaveClass('existing')  // existing prop preserved
+    expect(child).not.toHaveClass('injected')  // injected prop not applied due to conflict
+    
+    // Check computed styles
+    const computedStyle = getComputedStyle(child)
+    expect(computedStyle.backgroundColor).toBe('rgb(255, 0, 0)')  // red
+    expect(computedStyle.color).toBe('rgb(0, 0, 255)')  // blue
+  })
+
+  it('overrides existing props when mergeStrategy is override', () => {
+    const injectProps = { className: 'injected', 'data-testid': 'child' }
+    
+    render(
+      <ParentWithWrappedChildren 
+        injectProps={injectProps} 
+        mergeStrategy="override"
+      >
+        <TestChild className="existing">Content</TestChild>
+      </ParentWithWrappedChildren>
+    )
+
+    const child = screen.getByTestId('child')
+    expect(child).toHaveClass('injected')  // injected prop applied
+    expect(child).not.toHaveClass('existing')  // existing prop overridden
+  })
+
+  it('handles non-element children gracefully', () => {
+    const injectProps = { className: 'injected' }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        Plain text content
+        <TestChild data-testid="child">Element content</TestChild>
+        {42}
+        {null}
+      </ParentWithWrappedChildren>
+    )
+
+    const parent = screen.getByTestId('parent')
+    const child = screen.getByTestId('child')
+    
+    expect(parent).toHaveTextContent('Plain text content')
+    expect(parent).toHaveTextContent('42')
+    expect(child).toHaveClass('injected')
+  })
+
+  it('returns undefined children unchanged', () => {
+    const injectProps = { className: 'injected' }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        {undefined}
+      </ParentWithWrappedChildren>
+    )
+
+    const parent = screen.getByTestId('parent')
+    expect(parent).toBeEmptyDOMElement()
+  })
+
+  it('returns null children unchanged', () => {
+    const injectProps = { className: 'injected' }
+    
+    render(
+      <ParentWithWrappedChildren injectProps={injectProps}>
+        {null}
+      </ParentWithWrappedChildren>
+    )
+
+    const parent = screen.getByTestId('parent')
+    expect(parent).toBeEmptyDOMElement()
+  })
+})