diff --git a/React/kinetograpp-react/src/App.js b/React/kinetograpp-react/src/App.js index a574438..3914ad7 100644 --- a/React/kinetograpp-react/src/App.js +++ b/React/kinetograpp-react/src/App.js @@ -2,11 +2,13 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ShowMoviesList from './components/ShowMoviesList'; +import SearchMovie from './components/SearchMovie'; function App() { return ( } /> + } /> ); } diff --git a/React/kinetograpp-react/src/App.test.js b/React/kinetograpp-react/src/App.test.js index fd9a8e4..d642ceb 100644 --- a/React/kinetograpp-react/src/App.test.js +++ b/React/kinetograpp-react/src/App.test.js @@ -51,4 +51,19 @@ test('renders ShowMoviesList for "/" route', async () => { expect(screen.getByText(/Movie 1/i)).toBeInTheDocument(); expect(screen.getByText(/Movie 2/i)).toBeInTheDocument(); }); +}); + +// Inizializza MemoryRouter alla rotta /searchMovie +test('renders SearchMovie for "/searchMovie" route', async () => { + render( + + + + ); + + // Attesa rendering elementi di test + await waitFor(() => { + expect(screen.getByText(/Ricerca Film per Titolo/i)).toBeInTheDocument(); + expect(screen.getByText(/Inserisci il titolo del film/i)).toBeInTheDocument(); + }); }); \ No newline at end of file diff --git a/React/kinetograpp-react/src/components/SearchMovie.js b/React/kinetograpp-react/src/components/SearchMovie.js new file mode 100644 index 0000000..c7089c0 --- /dev/null +++ b/React/kinetograpp-react/src/components/SearchMovie.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import RenderingMoviesList from './RenderingMoviesList'; +import axios from 'axios'; + +const SearchMovie = () => { + const [searchTitle, setSearchTitle] = useState(''); + const [searchResults, setSearchResults] = useState([]); + const [searched, setSearched] = useState(false); + + const handleSearch = async (event) => { + event.preventDefault(); + try { + // Ricerca del film per titolo + const response = await axios.post('http://localhost:5000/searchMovie', { title: searchTitle }); + const results = response.data.results || []; + setSearchResults(results); + } + catch (error) { + console.error('Errore durante la ricerca dei film:', error.message); + setSearchResults([]); + } + // Ricerca effettuata + setSearched(true); + }; + + return ( +
+ {/* Form per la ricerca */} +

Ricerca Film per Titolo

+
+
+ Inserisci il titolo del film: + setSearchTitle(e.target.value)} + /> + +
+
+ + {/* Mostra i risultati della ricerca */} + {searched && searchResults.length > 0 ? ( + + ) : ( + searched &&

Nessun risultato trovato.

+ )} +
+ ); +}; + +export default SearchMovie; \ No newline at end of file diff --git a/React/kinetograpp-react/src/components/test/SearchMovie.test.js b/React/kinetograpp-react/src/components/test/SearchMovie.test.js new file mode 100644 index 0000000..e2068b4 --- /dev/null +++ b/React/kinetograpp-react/src/components/test/SearchMovie.test.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import SearchMovie from '../SearchMovie'; + +// Mock per axios +const mock = new MockAdapter(axios); + +// Risposta con i dati di test +mock.onPost('http://localhost:5000/searchMovie').reply(200, { + results: [ + { + id: 1, + title: 'Movie 1', + }, + { + id: 2, + title: 'Movie 2', + }, + ] +}); + +describe('SearchMovie', () => { + // Test per la ricerca con successo + test('renders searched movie info', async () => { + render(); + + // Verifica rendering del form di ricerca + await waitFor(() => { + expect(screen.getByText(/Inserisci il titolo del film/i)).toBeInTheDocument(); + expect(screen.getByText('Cerca')).toBeInTheDocument(); + }); + + // Simulazione ricerca + fireEvent.change(screen.getByRole('textbox'), { + target: { value: 'Movie 1' }, + }); + fireEvent.click(screen.getByText('Cerca')); + + // Verifica rendering risultati della ricerca + await waitFor(() => { + expect(screen.getByText(/Movie 1/i)).toBeInTheDocument(); + expect(screen.getByText(/Movie 2/i)).toBeInTheDocument(); + }); + + // Verifica che il messaggio di errore non sia presente + await waitFor(() => { + expect(screen.queryByText('Nessun risultato trovato.')).not.toBeInTheDocument(); + }); + }); + + // Test per la ricerca senza successo + test('renders error message when no movies are found', async () => { + // Risposta quando il film non è stato trovato + mock.onPost('http://localhost:5000/searchMovie').reply(200, { results: [] }); + + render(); + + // Attesa rendering del form di ricerca + await waitFor(() => { + expect(screen.getByText(/Inserisci il titolo del film/i)).toBeInTheDocument(); + expect(screen.getByText('Cerca')).toBeInTheDocument(); + }); + + // Simulazione ricerca + fireEvent.change(screen.getByRole('textbox'), { + // Inseriamo il titolo di un film che non è presente + target: { value: 'Test Movie' }, + }); + fireEvent.click(screen.getByText('Cerca')); + + // Verifica messaggio di errore + await waitFor(() => { + expect(screen.getByText('Nessun risultato trovato.')).toBeInTheDocument(); + }); + }); + + afterEach(() => { + mock.reset(); + }); +}); \ No newline at end of file