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

afterEach(cleanup);

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

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

describe('Tests Slide with and without children', () => {
	test('renders a Slide without children', () => {
		const { getByTestId } = render(<Slide data-testid="slide-id" isVisible />);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});

	test('renders a Slide with children', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" isVisible>
				<p data-testid="child-id">Child Content</p>
			</Slide>
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
		expect(getByTestId('slide-id')).toContainElement(getByTestId('child-id'));
	});
});

describe('Tests Slide with varied directions', () => {
	test('renders a Slide with top direction', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" direction="up" isVisible />
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});

	test('renders a Slide with right direction', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" direction="right" isVisible />
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});

	test('renders a Slide with down direction', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" direction="down" isVisible />
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});

	test('renders a Slide with left direction', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" direction="left" isVisible />
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});
});

describe('Tests Slide with other props', () => {
	test('renders a Slide with retract', () => {
		const { getByTestId } = render(
			<Slide data-testid="slide-id" retract isVisible />
		);

		expect(getByTestId('slide-id')).toBeInTheDocument();
	});
});