import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Link } from './index';

afterEach(cleanup);

test('should take a snapshot', () => {
	const { asFragment } = render(<Link to="#" />);

	expect(asFragment()).toMatchSnapshot();
});

describe('tests the Link with/without children', () => {
	test('renders a Link with no children', () => {
		const { getByTestId } = render(<Link testId="link" to="#" />);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toBeEmptyDOMElement();
	});

	test('renders a Link with children', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#">
				Wowzers! It's a link
			</Link>
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link-text')).toHaveTextContent("Wowzers! It's a link");
	});
});

describe('tests the Link variants', () => {
	test('tests the outlinedButton variant', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#" variant="outlinedButton" />
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toHaveStyle({
			border: '1px solid #851bb7',
		});
	});
	test('tests the round button variant', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#" variant="roundButton" />
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toHaveStyle({
			background: '#851bb7',
			'line-height': '2.4rem',
			'border-radius': '1.6rem',
		});
	});
	test('tests the round outlined button variant', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#" variant="roundOutlinedButton" />
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toHaveStyle({
			border: '1px solid #851bb7',
			'line-height': '2.4rem',
			'border-radius': '1.6rem',
		});
	});
	test('tests the button variant', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#" variant="button" />
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toHaveStyle({
			background: '#851bb7',
		});
	});
	test('tests the unstyled variant', () => {
		const { getByTestId } = render(
			<Link testId="link" to="#" variant="unstyled" />
		);
		expect(getByTestId('link')).toBeInTheDocument();
		expect(getByTestId('link')).toHaveStyle({
			all: 'unset',
		});
	});
});

describe('tests the external prop', () => {
	test('tests external = false', () => {
		const { getByTestId } = render(
			<BrowserRouter>
				<Link external={false} testId="link" to="#">
					Woah
				</Link>
			</BrowserRouter>
		);
		expect(getByTestId('link')).toBeInTheDocument();
	});
});