import { HTMLAttributes } from 'react';
import { render } from '../test-utils';
import withNextPortalWrapper from './withNextPortal';

describe('withNextPortalWrapper', () => {
  it('renders component in React portal', () => {
    type Props = Pick<
      HTMLAttributes<HTMLButtonElement>,
      'id' | 'children' | 'className' | 'aria-label'
    >;
    const RandomComponentForTest = withNextPortalWrapper((props: Props) => <span {...props} />);
    const data: Props = {
      'aria-label': 'Test aria-label',
      id: 'random-component',
      children: 'Test Children',
    };
    render(<RandomComponentForTest {...data} />);

    const componentDomRef = document.body.lastChild;
    expect(componentDomRef).toHaveAttribute('aria-label', data['aria-label']);
    expect(componentDomRef).toHaveTextContent(data.children as string);
    expect(componentDomRef).toHaveAttribute('id', data.id);
  });
});