#49 feat: detalle de producto en popup de leaflet en el mapa de provenance en lugar de modal web

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

@@ -16,6 +16,8 @@ const leaflet = vi.hoisted(() => {
       on: vi.fn(),
       bindTooltip: vi.fn(function () { return this }),
       bindPopup: vi.fn(function () { return this }),
+      setPopupContent: vi.fn(),
+      openPopup: vi.fn(),
       remove: vi.fn(),
       getLatLng: vi.fn(function () { return this.pos }),
       setLatLng: vi.fn(),
@@ -173,15 +175,23 @@ describe('ProvenanceMap', () => {
     expect(leaflet.polylines[0].remove).toHaveBeenCalled()
   })
 
-  it('al hacer clic en un producto abre el diálogo con el proveedor', async () => {
+  it('muestra el detalle del producto en un popup sobre el marcador', async () => {
     mountMap()
     await flushPromises()
 
-    handlerOf(leaflet.markers[1], 'click')()
-    await nextTick()
+    const marker = leaflet.markers[1]
+    expect(marker.bindPopup).toHaveBeenCalledTimes(1)
+    const popupEl = marker.bindPopup.mock.calls[0][0]
+    expect(popupEl.textContent).toContain('Panela regional')
+    expect(popupEl.textContent).toContain('Asociación La Mesa')
+    expect(popupEl.textContent).toContain('Santa Bárbara')
+  })
 
-    expect(document.body.textContent).toContain('Asociación La Mesa')
-    expect(document.body.textContent).toContain('Panela regional')
+  it('no abre el modal web para productos con ubicación', async () => {
+    mountMap()
+    await flushPromises()
+
+    expect(document.body.textContent).not.toContain('Proveedor')
   })
 
   it('no dibuja la línea de la tienda cuando la tienda no tiene coordenadas', async () => {
@@ -244,17 +254,20 @@ describe('ProvenanceMap', () => {
     expect(popupEl.textContent).toContain('Arroz')
   })
 
-  it('al hacer clic en un producto del popup agrupado abre el diálogo', async () => {
+  it('al hacer clic en un producto del popup agrupado muestra su detalle en el marcador', async () => {
     mountMap({ provenance: sameMuni })
     await flushPromises()
 
-    const popupEl = leaflet.markers[1].bindPopup.mock.calls[0][0]
+    const groupMarker = leaflet.markers[1]
+    const popupEl = groupMarker.bindPopup.mock.calls[0][0]
     const item = popupEl.querySelector('[data-test="map-popup-item-1"]')
     item.dispatchEvent(new Event('click'))
-    await nextTick()
 
-    expect(document.body.textContent).toContain('Arroz')
-    expect(document.body.textContent).toContain('B')
+    expect(groupMarker.setPopupContent).toHaveBeenCalledTimes(1)
+    const detailEl = groupMarker.setPopupContent.mock.calls[0][0]
+    expect(detailEl.textContent).toContain('Arroz')
+    expect(detailEl.textContent).toContain('B')
+    expect(groupMarker.openPopup).toHaveBeenCalled()
   })
 
   it('al pasar sobre la tienda dibuja una línea por cada producto agrupado', async () => {
@@ -306,7 +319,7 @@ describe('ProvenanceMap', () => {
     expect(rows[0].text()).toContain('Santa Bárbara')
   })
 
-  it('al hacer clic en un producto con ubicación centra el mapa y abre el diálogo', async () => {
+  it('al hacer clic en un producto con ubicación centra el mapa y abre su detalle en el marcador', async () => {
     const { wrapper } = mountMap()
     await flushPromises()
 
@@ -315,8 +328,12 @@ describe('ProvenanceMap', () => {
 
     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')
+    const marker = leaflet.markers[1]
+    expect(marker.setPopupContent).toHaveBeenCalled()
+    expect(marker.setPopupContent.mock.calls[0][0].textContent).toContain('Panela regional')
+    expect(marker.setPopupContent.mock.calls[0][0].textContent).toContain('Asociación La Mesa')
+    expect(marker.openPopup).toHaveBeenCalled()
+    expect(document.body.textContent).not.toContain('Proveedor')
   })
 
   it('al hacer clic en un producto sin geolocalización abre el diálogo con la información disponible sin centrar el mapa', async () => {