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

afterEach(cleanup);

test('should take a snapshot', () => {
	const { asFragment } = render(
		<Toast id="toast" close={() => {}}>
			<div />
		</Toast>
	);

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

describe('Tests Toast', () => {
	test('Renders component', async () => {
		render(
			<Toast close={jest.fn()} data-testid="toast-id" id="toast">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByRole('alert')).toHaveTextContent("It's Toast content");
	});
	test('tests autoCloseTimer and closeTimer', async () => {
		render(
			<Toast
				autoCloseTimer={2}
				close={jest.fn()}
				closeDebounceTimer={1}
				data-testid="toast-id"
				id="toast"
				portalPosition="top-right">
				It&apos;s Toast content
			</Toast>
		);
		const alert = screen.getByRole('alert');
		await waitForElementToBeRemoved(alert);
		expect(screen.getByTestId('portal-testid-portal-top-right')).toContainHTML(
			'<div></div>'
		);
	});
	test('tests onClick', async () => {
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="top-right">
				It&apos;s Toast content
			</Toast>
		);
		const alert = screen.getByRole('alert');
		fireEvent.click(screen.getByRole('button'));
		await waitForElementToBeRemoved(alert);
		expect(screen.getByTestId('portal-testid-portal-top-right')).toContainHTML(
			'<div></div>'
		);
	});
	test('tests positioning', async () => {
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="top">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-top')).toHaveClass('top');
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="top-right">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-top-right')).toHaveClass(
			'top-right'
		);
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="right">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-right')).toHaveClass(
			'right'
		);
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="bottom-right">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-bottom-right')).toHaveClass(
			'bottom-right'
		);
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="bottom">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-bottom')).toHaveClass(
			'bottom'
		);
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="bottom-left">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-bottom-left')).toHaveClass(
			'bottom-left'
		);
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="left">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-left')).toHaveClass('left');
		render(
			<Toast
				close={jest.fn()}
				data-testid="toast-id"
				id="toast"
				portalPosition="top-left">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-top-left')).toHaveClass(
			'top-left'
		);
		if (Toast.defaultProps?.portalPosition) {
			Toast.defaultProps.portalPosition = undefined;
		}
		render(
			<Toast close={jest.fn()} data-testid="toast-id" id="toast">
				It&apos;s Toast content
			</Toast>
		);
		expect(screen.getByTestId('portal-testid-portal-undefined')).toHaveClass(
			'undefined'
		);
	});
});