import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import App from '../components/App';

describe('Search', () => {
	afterEach(cleanup);
	it('displays Search component', () => {
		const { getByText, getByRole } = render(<App />);

		const title = getByText('Spoti Search');
		const input = getByRole('searchbox', { name: 'Search by artist name' });

		expect(title).toBeInTheDocument();
		expect(input).toBeInTheDocument();
	});

	afterEach(cleanup);
	it('allows input on the search field', () => {
		const { getByRole } = render(<App />);

		const input = getByRole('searchbox', { name: 'Search by artist name' });
		fireEvent.change(input, { target: { value: 'Kendrik' } });

		expect(input.value).toBe('Kendrik');
	});

	afterEach(cleanup);
	it('loads suggestions based on the searchbox input', async () => {
		const { getByRole } = render(<App />);

		const input = getByRole('searchbox', { name: 'Search by artist name' });
		fireEvent.change(input, { target: { value: 'Kendrik' } });

		// TODO
		// const suggestion = getByRole('generic', { name: 'XXXTENTACION' });
		// expect(suggestion).toBe('XXXTENTACION');
	});
});