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

afterEach(cleanup);

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

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

const toast = {
	autoCloseTimer: 2,
	closeDebounceTimer: 1,
	children: `Test Toast`,
	id: '1',
	portalId: 'top-right',
};

const Buttons = () => {
	const { dispatch } = useToaster();
	return (
		<>
			<button
				data-testid="add-button"
				onClick={() => dispatch({ type: 'add', toast })}>
				Add
			</button>
		</>
	);
};

describe('Tests Toaster', () => {
	test('with content', async () => {
		const { getByTestId, getByText } = render(
			<Toaster testId="provider">
				<Buttons />
			</Toaster>
		);
		fireEvent.click(getByTestId('add-button'));
		const toast = getByText('Test Toast');
		expect(toast).toBeInTheDocument();
		await waitForElementToBeRemoved(toast);
		expect(getByTestId('portal-testid-portal-top-right')).toBeEmptyDOMElement();
	});
});