Untitled

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import userEvent from '@testing-library/user-event';
import App from '../App';
import renderWithRouter from './renderWithRouter';
import { searchAllCategory, searchName } from '../services/searchAPI';

const EMAIL_INPUT = 'email-input';
const PASSWORD_INPUT = 'password-input';
const EMAIL_VALUE = 'xablau@xablau.com';
const EMAIL_VALUE_NOT_OK = 'xablau';
const PASSWORD_VALUE = '1234567';
const PASSWORD_VALUE_NOT_OK = '1237';
const BTN_ENTER = 'login-submit-btn';
const BTN_PROFILE = 'profile-top-btn';
const BTN_SEARCH = 'search-top-btn';
const RADIO_INGREDIENT = 'ingredient-search-radio';
const RADIO_NAME = 'name-search-radio';
const RADIO_FIRST_LETTER = 'first-letter-search-radio';
const BTN_SEARCH_FOOD = 'exec-search-btn';
const TITLE = 'page-title';
const RECIPE_SEARCH = 'search-input';
const MEALS_TEXT = 'Meals';
const DRINKS_TEXT = 'Drinks';
const INGREDIENT_TEXT = 'Ingredient';
const RADIO_NAME_TEXT = 'Name';
const RADIO_FIRST_LETTER_TEXT = 'First letter';
const BTN_SEARCH_TEXT = 'Search';
const BTN_DRINKS_BOTTOM = 'drinks-bottom-btn';
const BTN_MEALS_BOTTOM = 'meals-bottom-btn';

describe('Tests for Req. 02 - 06', () => {
  test('1 - Test if the email input is rendered', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );
    const login = screen.getByTestId(EMAIL_INPUT);

    expect(login).toBeInTheDocument();
  });

  test('2 - Test if the password input is rendered', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );
    const password = screen.getByTestId(PASSWORD_INPUT);

    expect(password).toBeInTheDocument();
  });

  test('3 - User is able to write an eMail in the eMail input field', async () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );
    const login = screen.getByTestId(EMAIL_INPUT);
    await userEvent.type(login, EMAIL_VALUE);
  });

  test('4 - User is able to write a password in the password input field', async () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );
    const password = screen.getByTestId(PASSWORD_INPUT);
    await userEvent.type(password, PASSWORD_VALUE);
  });

  test('5 - Checks if the button ENTER is disabled when eMail is invalid', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );

    const btn = screen.getByTestId(BTN_ENTER);
    const login = screen.getByTestId(EMAIL_INPUT);
    userEvent.type(login, EMAIL_VALUE_NOT_OK);

    expect(btn).toBeDisabled();
  });

  test('6 - Checks if the button ENTER is disabled when eMail AND password are invalid', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );

    const btnEnter = screen.getByTestId(BTN_ENTER);
    const login = screen.getByTestId(EMAIL_INPUT);
    const password = screen.getByTestId(PASSWORD_INPUT);

    fireEvent.change(login, { target: { value: EMAIL_VALUE_NOT_OK } });
    fireEvent.change(password, { target: { value: PASSWORD_VALUE_NOT_OK } });

    expect(btnEnter).toBeDisabled();
  });

  test('7 - Checks if the button ENTER is enabled when eMail AND password are valid', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );

    const login = screen.getByTestId(EMAIL_INPUT);
    const password = screen.getByTestId(PASSWORD_INPUT);

    const btnEnter = screen.getByTestId(BTN_ENTER);

    fireEvent.change(login, { target: { value: EMAIL_VALUE } });
    fireEvent.change(password, { target: { value: PASSWORD_VALUE } });

    expect(btnEnter).toBeEnabled();
  });

  test('8 - Checks if the user is redirected to the /meals page when the button ENTER is clicked', () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );

    const login = screen.getByTestId(EMAIL_INPUT);
    const password = screen.getByTestId(PASSWORD_INPUT);
    const btnEnter = screen.getByTestId(BTN_ENTER);

    fireEvent.change(login, { target: { value: EMAIL_VALUE } });
    fireEvent.change(password, { target: { value: PASSWORD_VALUE } });
    fireEvent.click(btnEnter);
    expect(window.location.pathname).toBe('/meals');
  });

  test('9 - Checks if /meals screen elements are rendered properly', async () => {
    renderWithRouter(<App />, { route: '/meals' });

    const btnProfile = screen.getByTestId(BTN_PROFILE);
    const btnShowHideSearch = screen.getByTestId(BTN_SEARCH);
    const title = screen.getByTestId(TITLE);

    expect(btnProfile).toBeInTheDocument();
    expect(title).toBeInTheDocument();
    await userEvent.click(btnShowHideSearch);

    const rdIngredient = screen.getByTestId(RADIO_INGREDIENT);
    const rdName = screen.getByTestId(RADIO_NAME);
    const rdFirstLetter = screen.getByTestId(RADIO_FIRST_LETTER);
    const btnSearchFood = screen.getByTestId(BTN_SEARCH_FOOD);

    const recipeInput = screen.getByTestId(RECIPE_SEARCH);

    await userEvent.click(rdName);
    await userEvent.click(rdFirstLetter);
    await userEvent.click(rdIngredient);
    await userEvent.type(recipeInput, 'chicken');
    await userEvent.click(btnSearchFood);
    await userEvent.click(btnProfile);

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

  test('10 - Checks if /drinks screen elements are rendered properly', async () => {
    renderWithRouter(<App />, { route: '/drinks' });

    const btnShowHideSearch = screen.getByTestId(BTN_SEARCH);
    const title = screen.getByTestId(TITLE);

    expect(btnShowHideSearch).toBeInTheDocument();
    expect(title).toBeInTheDocument();

    await userEvent.click(btnShowHideSearch);

    const mealsText = screen.getByText(DRINKS_TEXT);
    expect(mealsText).toBeInTheDocument();
    const ingredientText = screen.getByText(INGREDIENT_TEXT);
    expect(ingredientText).toBeInTheDocument();
    const radioNameText = screen.getByText(RADIO_NAME_TEXT);
    expect(radioNameText).toBeInTheDocument();
    const radioFirstLetterText = screen.getByText(RADIO_FIRST_LETTER_TEXT);
    expect(radioFirstLetterText).toBeInTheDocument();
    const btnSearchText = screen.getByText(BTN_SEARCH_TEXT);
    expect(btnSearchText).toBeInTheDocument();

    const rdIngredient = screen.getByTestId(RADIO_INGREDIENT);
    const btnSearchFood = screen.getByTestId(BTN_SEARCH_FOOD);

    const recipeInput = screen.getByTestId(RECIPE_SEARCH);

    await userEvent.click(rdIngredient);
    await userEvent.type(recipeInput, 'vodka');
    await userEvent.click(btnSearchFood);

    const btnDrinksBottom = screen.getByTestId(BTN_DRINKS_BOTTOM);
    const btnMealsBottom = screen.getByTestId(BTN_MEALS_BOTTOM);
    expect(btnDrinksBottom).toBeInTheDocument();
    expect(btnMealsBottom).toBeInTheDocument();

    // const footerElement = screen.getByTestId('footer');
    // expect(footerElement).toBeInTheDocument();
  });

  test('11 - Checks if RecipeDetails screen elements are rendered properly', async () => {
    render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
    );

    const title = screen.getByTestId(TITLE);
    expect(title).toBeInTheDocument();

    const header = screen.getByRole('heading');
    expect(header).toBeInTheDocument();
  });
});