Untitled

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import userEvent from '@testing-library/user-event';
import SearchBar from '../SearchBar';
import renderWithRouter from './helpers/renderWithRouter';
import App from '../App';

const tempo = 2000;
const searchInputTestId = 'search-input';
const searchRadio = 'name-search-radio';
const firstRadio = 'first-letter-search-radio';
const execBtn = 'exec-search-btn';

test('renderiza a entrada de pesquisa', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );
  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;
  expect(searchInput).toBeInTheDocument();
});

test('renderiza os botões de tipo de pesquisa', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );
  const ingredientRadio = screen.getByTestId('ingredient-search-radio') as HTMLInputElement;
  const nameRadio = screen.getByTestId(searchRadio) as HTMLInputElement;
  const firstLetterRadio = screen.getByTestId(firstRadio) as HTMLInputElement;
  expect(ingredientRadio).toBeInTheDocument();
  expect(nameRadio).toBeInTheDocument();
  expect(firstLetterRadio).toBeInTheDocument();
});

test('executa a pesquisa quando o botão de pesquisa é clicado', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );
  const searchButton = screen.getByTestId(execBtn) as HTMLButtonElement;
  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;

  fireEvent.change(searchInput, { target: { value: 'frango' } });
  fireEvent.click(screen.getByTestId(searchRadio));

  fireEvent.click(searchButton);
});

test('exibe alerta ao tentar pesquisar pela primeira letra sem um único caractere', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );

  const searchButton = screen.getByTestId(execBtn) as HTMLButtonElement;
  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;

  fireEvent.change(searchInput, { target: { value: 'AB' } });
  fireEvent.click(screen.getByTestId(firstRadio));

  const originalAlert: typeof window.alert = window.alert;
  let alertMessage = '';

  window.alert = (message: string) => {
    alertMessage = message;
  };

  fireEvent.click(searchButton);

  expect(alertMessage).toBe('Your search must have only 1 (one) character');

  window.alert = originalAlert;
});

test('atualiza o termo de pesquisa ao digitar no campo de input', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );

  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;

  fireEvent.change(searchInput, { target: { value: 'Chicken' } });

  expect(searchInput.value).toBe('Chicken');
});

test('executa a busca ao clicar no botão "Buscar"', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );

  const searchButton = screen.getByTestId(execBtn) as HTMLButtonElement;
  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;

  fireEvent.change(searchInput, { target: { value: 'Chicken' } });
  fireEvent.click(searchButton);

  // Adicione as asserções para verificar se a busca foi executada conforme o esperado
});

test('seleciona diferentes tipos de busca e realiza a busca correta', () => {
  render(
    <MemoryRouter>
      <SearchBar />
    </MemoryRouter>,
  );

  const searchInput = screen.getByTestId(searchInputTestId) as HTMLInputElement;
  const ingredientSearchRadio = screen.getByTestId('ingredient-search-radio') as HTMLInputElement;
  const nameSearchRadio = screen.getByTestId(searchRadio) as HTMLInputElement;
  const firstLetterSearchRadio = screen.getByTestId(firstRadio) as HTMLInputElement;
  const searchButton = screen.getByTestId(execBtn) as HTMLButtonElement;

  // Simular a busca por ingrediente
  fireEvent.click(ingredientSearchRadio);
  fireEvent.change(searchInput, { target: { value: 'Chicken' } });
  fireEvent.click(searchButton);

  // Adicionar asserções para verificar se a busca por ingrediente foi executada

  // Simular a busca por nome
  fireEvent.click(nameSearchRadio);
  fireEvent.change(searchInput, { target: { value: 'Pasta' } });
  fireEvent.click(searchButton);

  // Adicionar asserções para verificar se a busca por nome foi executada

  // Simular a busca pela primeira letra
  fireEvent.click(firstLetterSearchRadio);
  fireEvent.change(searchInput, { target: { value: 'A' } });
  fireEvent.click(searchButton);

  // Adicionar asserções para verificar se a busca pela primeira letra foi executada
});

it('redireciona para a página de receitas ao clicar no botão "Buscar"', async () => {
  renderWithRouter(<App />, { route: '/meals' });
  const ingredientRadioBtn = screen.getByTestId('search-top-btn');
  await userEvent.click(ingredientRadioBtn);
  const searchInput = screen.getByTestId(searchInputTestId);
  const searchButton = screen.getByTestId(execBtn);
  const searchRadioBtn = screen.getByTestId(searchRadio);

  await userEvent.type(searchInput, 'Arrabiata');
  await userEvent.click(searchRadioBtn);
  await userEvent.click(searchButton);
  setTimeout(() => {
    expect(window.location.pathname).toBe('/meals/52771');
  }, tempo);

  setTimeout(() => {
    const recipeName = screen.getByTestId('0-card-name');
    expect(recipeName).toHaveTextContent('Spicy Arrabiata Penne');
  }, tempo);
});

it('redireciona para a página de receitas ao clicar no botão "Buscar"', async () => {
  renderWithRouter(<App />, { route: '/drinks' });
  const ingredientRadioBtn = screen.getByTestId('search-top-btn');
  await userEvent.click(ingredientRadioBtn);
  const searchInput = screen.getByTestId(searchInputTestId);
  const searchButton = screen.getByTestId(execBtn);
  const searchRadioBtn = screen.getByTestId(searchRadio);

  await userEvent.type(searchInput, 'Aquamarine');
  await userEvent.click(searchRadioBtn);
  await userEvent.click(searchButton);
  setTimeout(() => expect(window.location.pathname).toBe('/drinks/178319'), tempo);
});