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

afterEach(cleanup);

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

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

describe('tests the intent prop', () => {
	test('renders an Alert with error', () => {
		const { getByTestId } = render(
			<Alert data-testid="alert-id" intent="error" />
		);
		expect(getByTestId('alert-id')).toBeInTheDocument();
		expect(getByTestId('alert-id')).toHaveStyle({
			background: 'var(--error)',
		});
	});
	test('renders an Alert with info', () => {
		const { getByTestId } = render(
			<Alert data-testid="alert-id" intent="info" />
		);
		expect(getByTestId('alert-id')).toBeInTheDocument();
		expect(getByTestId('alert-id')).toHaveStyle({
			background: 'var(--info)',
		});
	});
	test('renders an Alert with success', () => {
		const { getByTestId } = render(
			<Alert data-testid="alert-id" intent="success" />
		);
		expect(getByTestId('alert-id')).toBeInTheDocument();
		expect(getByTestId('alert-id')).toHaveStyle({
			background: 'var(--success)',
		});
	});
	test('renders an Alert with warning', () => {
		const { getByTestId } = render(
			<Alert data-testid="alert-id" intent="warning" />
		);
		expect(getByTestId('alert-id')).toBeInTheDocument();
		expect(getByTestId('alert-id')).toHaveStyle({
			background: 'var(--warning)',
		});
	});
});