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

afterEach(cleanup);

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

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

describe('tests the adjustable size props', () => {
	test('renders a CloseButton with falsy size', () => {
		const { getByTestId } = render(
			<CloseButton data-testid="button-id" size={0} />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			height: '1rem',
			width: '1rem',
		});
	});
	test('renders a CloseButton with height and width', () => {
		const { getByTestId } = render(
			<CloseButton data-testid="button-id" size={3} />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			height: '3rem',
			width: '3rem',
		});
	});
	test('renders a CloseButton with min-height and min-width', () => {
		const { getByTestId } = render(
			<CloseButton data-testid="button-id" minS={3} />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			'min-height': '3rem',
			'min-width': '3rem',
		});
	});
	test('renders a CloseButton with max-height and max-width', () => {
		const { getByTestId } = render(
			<CloseButton data-testid="button-id" maxS={3} />
		);
		expect(getByTestId('button-id')).toBeInTheDocument();
		expect(getByTestId('button-id')).toHaveStyle({
			'max-height': '3rem',
			'max-width': '3rem',
		});
	});
});