Merge pull request #10 from pippobonas/feat-SearchMovie

feat-SearchMovie

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 (
     <Routes>
       <Route path="/" element={<ShowMoviesList />} />
+      <Route path="/searchMovie" element={<SearchMovie />} />
     </Routes>
   );
 }

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(
+    <MemoryRouter initialEntries={['/searchMovie']}>
+      <App />
+    </MemoryRouter>
+  );
+
+  // 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();
+  });
 });

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 (
+    <div>
+      {/* Form per la ricerca */}
+      <h2>Ricerca Film per Titolo</h2>
+      <form onSubmit={handleSearch}>
+        <div>
+          Inserisci il titolo del film:
+          <input
+            type="text"
+            value={searchTitle}
+            onChange={(e) => setSearchTitle(e.target.value)}
+          />
+          <button type="submit">
+            Cerca
+          </button>
+        </div>
+      </form>
+
+      {/* Mostra i risultati della ricerca */}
+      {searched && searchResults.length > 0 ? (
+        <RenderingMoviesList movies={searchResults} />
+      ) : (
+        searched && <p>Nessun risultato trovato.</p>
+      )}
+    </div>
+  );
+};
+
+export default SearchMovie;

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(<SearchMovie />);
+
+    // 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(<SearchMovie />);
+
+    // 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();
+  });
+});