import React, { ReactNode, ReactElement } from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Button from '..';

const LinkButton = Button.Link;

jest.mock('react-router-dom', () => ({
  Link: function Link({
    children,
    to,
  }: {
    children: ReactNode;
    to: string;
  }): ReactElement {
    return (
      <>
        <div>{`Dom router link: ${to}`}</div>
        <div>{children}</div>
      </>
    );
  },
}));

describe('rendering', () => {
  it('renders link with correct href', () => {
    const { getByText } = renderWithTheme(
      <LinkButton text="A LinkButton" href="/#" />
    );
    expect(getByText('A LinkButton')).toBeInTheDocument();
    expect(getByText('A LinkButton')).toHaveAttribute('href', '/#');
  });

  it('renders no icon by default', () => {
    const { container } = renderWithTheme(
      <LinkButton text="A button" href="/#" />
    );
    expect(container.querySelectorAll('i')).toHaveLength(0);
  });

  it('renders icon', () => {
    const { container } = renderWithTheme(
      <LinkButton text="A button" href="/#" icon="heart" />
    );
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });

  it('renders right icon', () => {
    const { container } = renderWithTheme(
      <LinkButton text="A button" rightIcon="heart" href="/#" />
    );
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });

  it('renders router link', () => {
    const { getByText } = renderWithTheme(
      <LinkButton text="A LinkButton" href="/#" withRouter />
    );
    expect(getByText('A LinkButton')).toBeInTheDocument();
    expect(getByText('Dom router link: /#')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('allows to click on', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <LinkButton text="A LinkButton" onClick={onClick} href="/#" />
    );
    fireEvent.click(getByText('A LinkButton'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});