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

afterEach(cleanup);

test('should take a snapshot', () => {
	const { asFragment } = render(<Button />);

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

describe('tests the Button with/without children', () => {
	test('renders a Button with no children', () => {
		const { getByTestId } = render(<Button testId="button-id" />);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toBeEmptyDOMElement();
	});

	test('renders a Button with children', () => {
		const { getByTestId } = render(
			<Button testId="button-id">Wowwee It's a button</Button>
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id-text')).toHaveTextContent(
			"Wowwee It's a button"
		);
	});
});

describe('tests the Button variants', () => {
	test('tests the round variant', () => {
		const { getByTestId } = render(
			<Button testId="button-id" variant="round" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			'border-radius': '1.6rem',
		});
	});
	test('tests the round variant with small', () => {
		const { getByTestId } = render(
			<Button size="small" testId="button-id" variant="round" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			'border-radius': '0.6rem',
		});
	});
	test('tests the round variant with large', () => {
		const { getByTestId } = render(
			<Button size="large" testId="button-id" variant="round" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			'border-radius': '2.4rem',
		});
	});
	test('tests the round outlined variant with large', () => {
		const { getByTestId } = render(
			<Button testId="button-id" variant="roundOutlined" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			border: '1px solid #851bb7',
			'border-radius': '1.6rem',
			color: '#851bb7',
		});
	});
	test('tests the outlined variant', () => {
		const { getByTestId } = render(
			<Button testId="button-id" variant="outlined" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			border: '1px solid #851bb7',
			color: '#851bb7',
		});
	});
	test('tests the outlined variant with bg', () => {
		const { getByTestId } = render(
			<Button background="#334b41" testId="button-id" variant="outlined" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			border: '1px solid #334b41',
			color: '#334b41',
		});
	});
	test('tests the unstyled variant', () => {
		const { getByTestId } = render(
			<Button testId="button-id" variant="unstyled" />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			all: 'unset',
		});
	});
});

describe('tests the Button sizes', () => {
	test('tests small size', () => {
		const { getByTestId } = render(
			<Button size="small" testId="button-id">
				Woah
			</Button>
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			height: '2rem',
			width: '4rem',
		});
		expect(getByTestId('button-id-text').tagName).toBe('SMALL');
	});
	test('tests large size', () => {
		const { getByTestId } = render(
			<Button size="large" testId="button-id">
				Woah
			</Button>
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			height: '4rem',
			width: '8rem',
		});
		expect(getByTestId('button-id-text').tagName).toBe('P');
	});
});

describe('tests the background prop', () => {
	test('tests light background', () => {
		const { getByTestId } = render(
			<Button background="#fff" testId="button-id">
				Woah
			</Button>
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			background: '#fff',
			color: '#00000f',
		});
	});
	test('tests dark background', () => {
		const { getByTestId } = render(
			<Button background="#000" testId="button-id">
				Woah
			</Button>
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			background: '#000',
			color: '#fffffa',
		});
	});
});