#49 feat: recuadro informativo de productos en el mapa de provenance sin desplazar posiciones

tests/unit/components/provenance/ProvenanceMap.spec.js

@@ -25,6 +25,7 @@ const leaflet = vi.hoisted(() => {
   const map = {
     setView: vi.fn(function () { return this }),
     fitBounds: vi.fn(),
+    flyTo: vi.fn(),
     remove: vi.fn(),
     invalidateSize: vi.fn(),
     on: vi.fn(),
@@ -200,7 +201,7 @@ describe('ProvenanceMap', () => {
     expect(wrapper.text()).toContain('coordenadas')
   })
 
-  it('separa los productos del mismo municipio para que no se superpongan', async () => {
+  it('mantiene la posición exacta del municipio aunque varios productos coincidan', async () => {
     const sameMuni = [
       {
         product: { id: 1, name: 'Panela', catalogue_images: [] },
@@ -214,36 +215,78 @@ describe('ProvenanceMap', () => {
     mountMap({ provenance: sameMuni })
     await flushPromises()
 
-    const productPositions = leaflet.markers.slice(1).map(marker => marker.pos.join(','))
+    const productPositions = leaflet.markers.slice(1).map(marker => marker.pos)
     expect(productPositions).toHaveLength(2)
-    expect(new Set(productPositions).size).toBe(2)
-    expect(productPositions).not.toContain('4.631028,-74.461588')
+    expect(productPositions[0]).toEqual([4.631028, -74.461588])
+    expect(productPositions[1]).toEqual([4.631028, -74.461588])
+    expect(leaflet.map.on).not.toHaveBeenCalledWith('zoomend', expect.anything())
   })
 
-  it('reduce la separación en grados al hacer zoom in para mantener la distancia visual', async () => {
-    const sameMuni = [
+  it('muestra un recuadro con todos los productos, incluidos los sin geolocalización', async () => {
+    const withNoGeo = [
       {
-        product: { id: 1, name: 'Panela', catalogue_images: [] },
-        suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+        product: { id: 1, name: 'Panela regional', catalogue_images: ['http://localhost/media/panela.jpg'] },
+        suppliers: [{ supplier: { id: 5, name: 'Asociación La Mesa' }, municipality: { id: 7, name: 'Santa Bárbara', latitude: 6.23, longitude: -75.56 } }],
       },
       {
-        product: { id: 2, name: 'Arroz', catalogue_images: [] },
-        suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+        product: { id: 2, name: 'Café de montaña', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 8, name: 'Caficultores del Valle' }, municipality: null }],
+      },
+      {
+        product: { id: 3, name: 'Miel pura', catalogue_images: [] },
+        suppliers: [],
       },
     ]
-    mountMap({ provenance: sameMuni })
+    const { wrapper } = mountMap({ provenance: withNoGeo })
     await flushPromises()
 
-    const deg8 = 40 * (360 / (256 * Math.pow(2, 8)))
-    expect(leaflet.markers[1].pos[0]).toBeCloseTo(4.631028 + deg8, 5)
+    const rows = wrapper.findAll('[data-test="map-product-row"]')
+    expect(rows).toHaveLength(3)
+    expect(rows.map(row => row.text().replace(/\s+/g, ' ').trim())).toEqual([
+      expect.stringContaining('Panela regional'),
+      expect.stringContaining('Café de montaña'),
+      expect.stringContaining('Miel pura'),
+    ])
+    expect(rows[1].text()).toContain('Sin geolocalización')
+    expect(rows[2].text()).toContain('Sin geolocalización')
+    expect(rows[0].text()).toContain('Santa Bárbara')
+  })
 
-    leaflet.map.getZoom.mockReturnValue(9)
-    const zoomHandler = leaflet.map.on.mock.calls.find(args => args[0] === 'zoomend')[1]
-    zoomHandler()
+  it('al hacer clic en un producto con ubicación centra el mapa y abre el diálogo', async () => {
+    const { wrapper } = mountMap()
+    await flushPromises()
 
-    const deg9 = 40 * (360 / (256 * Math.pow(2, 9)))
-    expect(leaflet.markers[1].setLatLng).toHaveBeenCalled()
-    expect(leaflet.markers[1].setLatLng.mock.calls[0][0][0]).toBeCloseTo(4.631028 + deg9, 5)
+    await wrapper.find('[data-test="map-product-row"]').trigger('click')
+    await nextTick()
+
+    expect(leaflet.map.flyTo).toHaveBeenCalledTimes(1)
+    expect(leaflet.map.flyTo.mock.calls[0][0]).toEqual([6.23, -75.56])
+    expect(document.body.textContent).toContain('Asociación La Mesa')
+    expect(document.body.textContent).toContain('Panela regional')
+  })
+
+  it('al hacer clic en un producto sin geolocalización abre el diálogo con la información disponible sin centrar el mapa', async () => {
+    const withNoGeo = [
+      {
+        product: { id: 1, name: 'Panela regional', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 5, name: 'Asociación La Mesa' }, municipality: { id: 7, name: 'Santa Bárbara', latitude: 6.23, longitude: -75.56 } }],
+      },
+      {
+        product: { id: 2, name: 'Café de montaña', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 8, name: 'Caficultores del Valle' }, municipality: null }],
+      },
+    ]
+    const { wrapper } = mountMap({ provenance: withNoGeo })
+    await flushPromises()
+
+    const noGeoRow = wrapper.findAll('[data-test="map-product-row"]').find(row => row.text().includes('Café de montaña'))
+    await noGeoRow.trigger('click')
+    await nextTick()
+
+    expect(leaflet.map.flyTo).not.toHaveBeenCalled()
+    expect(document.body.textContent).toContain('Café de montaña')
+    expect(document.body.textContent).toContain('Caficultores del Valle')
+    expect(document.body.textContent).toContain('sin geolocalización')
   })
 
   it('lee las coordenadas string del backend y da fondo visible al producto sin imagen', async () => {