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

afterEach(cleanup);

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

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

describe('tests message prop', () => {
	test('renders a Loader with message', () => {
		const { getByTestId } = render(
			<Loader message="Loading..." isLoading>
				<div />
			</Loader>
		);
		expect(getByTestId('loader-container')).toBeInTheDocument();
		expect(getByTestId('loader-container').textContent).toBe('Loading...');
	});
	test('renders a Loader with no message', () => {
		const { getByTestId } = render(
			<Loader isLoading>
				<div />
			</Loader>
		);
		expect(getByTestId('loader-container')).toBeInTheDocument();
		expect(getByTestId('loader-container').textContent).toBeFalsy();
	});
});

describe('tests isLoading prop', () => {
	test('does not render a Loader when isLoading={false}', () => {
		const { getByTestId, queryByTestId } = render(
			<Loader isLoading={false}>
				<div data-testid="child-id" />
			</Loader>
		);
		expect(queryByTestId('loader-container')).toBeFalsy();
		expect(getByTestId('child-id')).toBeInTheDocument();
	});
	test('renders a Loader when isLoading={true}', () => {
		const { getByTestId } = render(
			<Loader isLoading>
				<div />
			</Loader>
		);
		expect(getByTestId('loader-container')).toBeInTheDocument();
	});
});

describe('tests size prop', () => {
	test('tests a small loader', () => {
		const { getByTestId } = render(
			<Loader isLoading size={LoaderSizes.small}>
				<div />
			</Loader>
		);
		expect(getByTestId('loader')).toBeInTheDocument();
		expect(getByTestId('loader')).toHaveStyle({
			'border-width': '0.25rem',
			height: '1.8rem',
			width: '1.8rem',
		});
	});
	test('tests a medium loader', () => {
		const { getByTestId } = render(
			<Loader isLoading size={LoaderSizes.medium}>
				<div />
			</Loader>
		);
		expect(getByTestId('loader')).toBeInTheDocument();
		expect(getByTestId('loader')).toHaveStyle({
			'border-width': '0.325rem',
			height: '2.4rem',
			width: '2.4rem',
		});
	});
	test('tests a large loader', () => {
		const { getByTestId } = render(
			<Loader isLoading size={LoaderSizes.large}>
				<div />
			</Loader>
		);
		expect(getByTestId('loader')).toBeInTheDocument();
		expect(getByTestId('loader')).toHaveStyle({
			'border-width': '0.4rem',
			height: '3.2rem',
			width: '3.2rem',
		});
	});
});