#49 feat: separacion de marcadores de provenance escalada por zoom en el mapa

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

@@ -16,6 +16,8 @@ const leaflet = vi.hoisted(() => {
       on: vi.fn(),
       bindTooltip: vi.fn(function () { return this }),
       remove: vi.fn(),
+      getLatLng: vi.fn(function () { return this.pos }),
+      setLatLng: vi.fn(),
     }
     layers.push(layer)
     return layer
@@ -26,6 +28,7 @@ const leaflet = vi.hoisted(() => {
     remove: vi.fn(),
     invalidateSize: vi.fn(),
     on: vi.fn(),
+    getZoom: vi.fn(() => 8),
   }
   const bounds = { extend: vi.fn(), isValid: vi.fn(() => true) }
   return {
@@ -197,6 +200,52 @@ describe('ProvenanceMap', () => {
     expect(wrapper.text()).toContain('coordenadas')
   })
 
+  it('separa los productos del mismo municipio para que no se superpongan', async () => {
+    const sameMuni = [
+      {
+        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: 2, name: 'Arroz', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+      },
+    ]
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    const productPositions = leaflet.markers.slice(1).map(marker => marker.pos.join(','))
+    expect(productPositions).toHaveLength(2)
+    expect(new Set(productPositions).size).toBe(2)
+    expect(productPositions).not.toContain('4.631028,-74.461588')
+  })
+
+  it('reduce la separación en grados al hacer zoom in para mantener la distancia visual', async () => {
+    const sameMuni = [
+      {
+        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: 2, name: 'Arroz', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+      },
+    ]
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    const deg8 = 40 * (360 / (256 * Math.pow(2, 8)))
+    expect(leaflet.markers[1].pos[0]).toBeCloseTo(4.631028 + deg8, 5)
+
+    leaflet.map.getZoom.mockReturnValue(9)
+    const zoomHandler = leaflet.map.on.mock.calls.find(args => args[0] === 'zoomend')[1]
+    zoomHandler()
+
+    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)
+  })
+
   it('lee las coordenadas string del backend y da fondo visible al producto sin imagen', async () => {
     const backendProvenance = [
       {