Plan Done, Dockerization and cleanup

frontend/src/App.test.jsx

@@ -1,16 +1,77 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import App from './App.jsx'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import PublicView from './views/PublicView.jsx'
 
-describe('App', () => {
-  it('renders the app header', () => {
-    render(<App />)
-    expect(screen.getByText(/FarmaFinder/i)).toBeInTheDocument()
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.useRealTimers()
+})
+
+describe('PublicView', () => {
+  it('renders search bar on load with no results', () => {
+    render(<PublicView />)
+    expect(screen.getByPlaceholderText(/search for a medicine/i)).toBeInTheDocument()
+    expect(screen.queryByRole('list')).not.toBeInTheDocument()
   })
 
-  it('renders the view switcher', () => {
-    render(<App />)
-    expect(screen.getByText(/Public Search/i)).toBeInTheDocument()
-    expect(screen.getByText(/Admin Panel/i)).toBeInTheDocument()
+  it('does not fetch for queries shorter than 2 chars', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch')
+    render(<PublicView />)
+
+    fireEvent.change(screen.getByPlaceholderText(/search for a medicine/i), {
+      target: { value: 'a' },
+    })
+
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+
+  it('fetches and displays results for valid query', async () => {
+    const medicines = [
+      { id: 'REG001', name: 'Ibuprofeno 400mg', active_ingredient: 'Ibuprofeno', dosage: '400mg', form: 'Comprimido' },
+    ]
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      json: async () => medicines,
+    })
+
+    render(<PublicView />)
+
+    fireEvent.change(screen.getByPlaceholderText(/search for a medicine/i), {
+      target: { value: 'ibu' },
+    })
+
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+
+    expect(screen.getByText('Ibuprofeno 400mg')).toBeInTheDocument()
+  })
+
+  it('clears results when query is cleared after a search', async () => {
+    const medicines = [
+      { id: 'REG001', name: 'Ibuprofeno 400mg', active_ingredient: 'Ibuprofeno', dosage: '400mg', form: 'Comprimido' },
+    ]
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      json: async () => medicines,
+    })
+
+    render(<PublicView />)
+    const input = screen.getByPlaceholderText(/search for a medicine/i)
+
+    fireEvent.change(input, { target: { value: 'ibu' } })
+    await act(async () => { await vi.runAllTimersAsync() })
+    expect(screen.getByText('Ibuprofeno 400mg')).toBeInTheDocument()
+
+    fireEvent.change(input, { target: { value: '' } })
+    await act(async () => { await vi.runAllTimersAsync() })
+
+    expect(screen.queryByText('Ibuprofeno 400mg')).not.toBeInTheDocument()
   })
 })

frontend/src/components/PharmacyMap.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Fix default marker icon broken by webpack/vite asset bundling
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+});
+
+function PharmacyMap({ pharmacies }) {
+  const located = pharmacies.filter(p => p.latitude != null && p.longitude != null);
+
+  if (located.length === 0) return null;
+
+  const center = [
+    located.reduce((s, p) => s + p.latitude, 0) / located.length,
+    located.reduce((s, p) => s + p.longitude, 0) / located.length,
+  ];
+
+  return (
+    <div className="pharmacy-map-wrapper" style={{ height: '350px', width: '100%', marginTop: '1rem', borderRadius: '8px', overflow: 'hidden' }}>
+      <MapContainer center={center} zoom={13} style={{ height: '100%', width: '100%' }} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {located.map(pharmacy => (
+          <Marker key={pharmacy.id} position={[pharmacy.latitude, pharmacy.longitude]}>
+            <Popup>
+              <strong>{pharmacy.name}</strong><br />
+              {pharmacy.address}
+              {pharmacy.phone && <><br />{pharmacy.phone}</>}
+            </Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}
+
+export default PharmacyMap;

frontend/src/views/PublicView.jsx

@@ -3,6 +3,7 @@ import '../App.css';
 import SearchBar from '../components/SearchBar';
 import MedicineResults from '../components/MedicineResults';
 import PharmacyList from '../components/PharmacyList';
+import PharmacyMap from '../components/PharmacyMap';
 
 function PublicView() {
   const [searchQuery, setSearchQuery] = useState('');
@@ -102,7 +103,8 @@ function PublicView() {
               </button>
             </div>
 
-            <PharmacyList 
+            <PharmacyMap pharmacies={pharmacies} />
+            <PharmacyList
               pharmacies={pharmacies}
               loading={loading}
             />