import * as React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { withNativeProps, IWithNativeProps } from '../with-native-props';

describe('withNativeProps', () => {
  it('should handle className', () => {
    const { result } = renderHook(() =>
      withNativeProps<IWithNativeProps>({ className: 'test' }, <div />),
    );
    expect(result.current.props.className).toBe('test');
  });

  it('should merge className', () => {
    const { result } = renderHook(() =>
      withNativeProps<IWithNativeProps>(
        { className: 'test' },
        <div className="test2" />,
      ),
    );
    expect(result.current.props.className).toBe('test2 test');
  });

  it('should handle style', () => {
    const { result } = renderHook(() =>
      withNativeProps<IWithNativeProps>({ style: { color: 'red' } }, <div />),
    );
    expect(result.current.props.style).toEqual({ color: 'red' });
  });

  it('should handle tabIndex', () => {
    const { result } = renderHook(() =>
      withNativeProps<IWithNativeProps>({ tabIndex: 1 }, <div />),
    );
    expect(result.current.props.tabIndex).toBe(1);
  });

  it('should handle data-* and aria-* attributes', () => {
    const { result } = renderHook(() =>
      withNativeProps<IWithNativeProps>(
        { 'data-test': 'test', 'aria-label': 'label' },
        <div />,
      ),
    );
    expect(result.current.props['data-test']).toBe('test');
    expect(result.current.props['aria-label']).toBe('label');
  });
});