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

jest.mock('../Portal');

let openTestValue = true;
const closeTestValue = () => (openTestValue = false);

afterEach(cleanup);

test('should take a snapshot', () => {
	const { asFragment } = render(
		<Modal close={closeTestValue} id="test" open={openTestValue} />
	);

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

describe('Tests Modal', () => {
	test('with content', () => {
		const { getByTestId } = render(
			<Modal
				data-testid="modal-id"
				close={closeTestValue}
				id="test"
				open={openTestValue}>
				<p>It&apos;s modal content</p>
			</Modal>
		);

		expect(getByTestId('modal-id')).toBeInTheDocument();
	});
	test('with open=false', () => {
		const { getByTestId } = render(
			<div data-testid="modal-wrapper-id">
				<Modal
					data-testid="modal-id"
					close={closeTestValue}
					id="test"
					open={false}
				/>
			</div>
		);

		expect(getByTestId('modal-wrapper-id')).toBeInTheDocument();
		expect(getByTestId('modal-wrapper-id')).toContainHTML(
			'<div class="portal-mock"></div>'
		);
	});
});