Untitled
unknown
plain_text
a month ago
3.5 kB
1
Indexable
Never
import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { render, screen, fireEvent } from '@testing-library/react'; import FavoriteRecipes from '../pages/Favorite Recipes/FavoriteRecipes'; const NAME_TEST_ID = '0-horizontal-name'; const NAME_TEST_ID1 = '1-horizontal-name'; describe('FavoriteRecipes', () => { beforeEach(() => { localStorage.clear(); }); test('should render "Favorite Recipes" title', () => { render( <BrowserRouter> <FavoriteRecipes /> </BrowserRouter>, ); expect(screen.getByText('Favorite Recipes')).toBeInTheDocument(); }); test('should render filter buttons', () => { render( <BrowserRouter> <FavoriteRecipes /> </BrowserRouter>, ); expect(screen.getByRole('button', { name: /all/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /meals/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /drinks/i })).toBeInTheDocument(); }); test('should filter recipes by "all"', () => { const recipe1 = { id: 1, name: 'Recipe 1', type: 'meal', image: '', category: '', nationality: '', alcoholicOrNot: '' }; const recipe2 = { id: 2, name: 'Recipe 2', type: 'drink', image: '', category: '', nationality: '', alcoholicOrNot: '' }; localStorage.setItem('favoriteRecipes', JSON.stringify([recipe1, recipe2])); render( <BrowserRouter> <FavoriteRecipes /> </BrowserRouter>, ); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); expect(screen.getByTestId(NAME_TEST_ID1)).toBeInTheDocument(); fireEvent.click(screen.getByTestId('filter-by-all-btn')); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); expect(screen.getByTestId(NAME_TEST_ID1)).toBeInTheDocument(); }); test('should filter recipes by "meal"', () => { const recipe1 = { id: 1, name: 'Recipe 1', type: 'meal', image: '', category: '', nationality: '', alcoholicOrNot: '' }; const recipe2 = { id: 2, name: 'Recipe 2', type: 'drink', image: '', category: '', nationality: '', alcoholicOrNot: '' }; localStorage.setItem('favoriteRecipes', JSON.stringify([recipe1, recipe2])); render( <BrowserRouter> <FavoriteRecipes /> </BrowserRouter>, ); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); expect(screen.getByTestId(NAME_TEST_ID1)).toBeInTheDocument(); fireEvent.click(screen.getByTestId('filter-by-meal-btn')); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); expect(screen.queryByTestId(NAME_TEST_ID1)).not.toBeInTheDocument(); }); test('should filter recipes by "drink"', () => { const recipe1 = { id: 1, name: 'Recipe 1', type: 'meal', image: '', category: '', nationality: '', alcoholicOrNot: '' }; const recipe2 = { id: 2, name: 'Recipe 2', type: 'drink', image: '', category: '', nationality: '', alcoholicOrNot: '' }; localStorage.setItem('favoriteRecipes', JSON.stringify([recipe1, recipe2])); render( <BrowserRouter> <FavoriteRecipes /> </BrowserRouter>, ); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); expect(screen.getByTestId(NAME_TEST_ID1)).toBeInTheDocument(); fireEvent.click(screen.getByTestId('filter-by-drink-btn')); expect(screen.queryByTestId(NAME_TEST_ID1)).not.toBeInTheDocument(); expect(screen.getByTestId(NAME_TEST_ID)).toBeInTheDocument(); }); });