import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import { Navigation } from '../src/components/navigation/navigation';
import { carouselItemNodes } from './__fixtures__/nodes';

describe('<Navigation />', () => {
	afterEach(cleanup);

	it('should render factory components in correct order', async () => {
		const onClick = jest.fn();
		const items = carouselItemNodes(5);
		const factory = (selected: boolean) => (
			<div>{selected ? 'selected' : 'unselected'}</div>
		);
		const { getByText, getAllByText } = render(
			<Navigation current={1} items={items} factory={factory} onClick={onClick} />,
		);

		expect(getByText('selected')).toBeTruthy();
		expect(getAllByText('unselected').length).toEqual(4);
	});

	it('should render call onClick callback for factory components', async () => {
		const onClick = jest.fn();
		const items = carouselItemNodes(5);
		const factory = (selected: boolean) => (
			<div>{selected ? 'selected' : 'unselected'}</div>
		);
		const { getByText } = render(
			<Navigation current={1} items={items} factory={factory} onClick={onClick} />,
		);

		fireEvent.mouseOver(getByText('selected'));
		expect(onClick).toHaveBeenCalled();
	});
});