feat(location-map): implement reusable location map component with dynamic markers and directions

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -398,8 +398,8 @@
       <div class="accordion-showcase">
         <h2>Accordion</h2>
         <p class="text-muted mb-4">
-          Accordion reutilizable basado en las clases globales de Bootstrap. Por defecto mantiene
-          un solo item abierto.
+          Accordion reutilizable basado en las clases globales de Bootstrap. Por defecto mantiene un
+          solo item abierto.
         </p>
 
         <app-accordion>
@@ -409,8 +409,8 @@
           </app-accordion-item>
 
           <app-accordion-item title="¿Qué medios de pago están disponibles?">
-            Los medios de pago dependen de la configuración de cada tienda y se muestran durante
-            el checkout.
+            Los medios de pago dependen de la configuración de cada tienda y se muestran durante el
+            checkout.
           </app-accordion-item>
 
           <app-accordion-item title="Item deshabilitado" [disabled]="true">
@@ -692,6 +692,21 @@
     </div>
   </section>
 
+  <section class="component-demo card shadow-sm mt-4" data-testid="location-map-demo">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-2">Mapa de ubicaciones</h2>
+      <p class="text-muted mb-4">
+        Prueba de Leaflet con múltiples puntos, encuadre automático y acceso a indicaciones.
+      </p>
+
+      <app-location-map
+        [locations]="mapLocations"
+        ariaLabel="Mapa de puntos de atención en Rosario"
+      />
+    </div>
+  </section>
+
   <section class="component-demo card shadow-sm mt-4">
     <div class="card-body">
       <span class="eyebrow">Reusable Component</span>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -141,6 +141,40 @@ describe('ReutilizablesTestPageComponent', () => {
     );
   });
 
+  it('renders the reusable map demo with all configured locations', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant),
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub(),
+        },
+        {
+          provide: ModalService,
+          useValue: createModalServiceStub(),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const mapDemo = fixture.nativeElement.querySelector(
+      '[data-testid="location-map-demo"]',
+    ) as HTMLElement;
+    const accessibleLocations = mapDemo.querySelectorAll('app-location-map .visually-hidden li');
+
+    expect(mapDemo.querySelector('app-location-map')).not.toBeNull();
+    expect(accessibleLocations).toHaveLength(3);
+    expect(mapDemo.textContent).toContain('Gigante de Arroyito');
+
+    fixture.destroy();
+  });
+
   it('renders the carousel demo with mocked product images', async () => {
     await TestBed.configureTestingModule({
       imports: [ReutilizablesTestPageComponent],

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -18,6 +18,10 @@ import { CarouselComponent } from '../../../../shared/components/carousel/carous
 import { MainCarouselComponent } from '../../../../shared/components/main-carousel/main-carousel.component';
 import { AccordionComponent } from '../../../../shared/components/accordion/accordion.component';
 import { AccordionItemComponent } from '../../../../shared/components/accordion/accordion-item.component';
+import {
+  LocationMapComponent,
+  MapLocation,
+} from '../../../../shared/components/location-map/location-map.component';
 
 interface CarouselProductMock {
   id: number;
@@ -47,6 +51,7 @@ interface CarouselProductMock {
     MainCarouselComponent,
     AccordionComponent,
     AccordionItemComponent,
+    LocationMapComponent,
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss',
@@ -79,6 +84,29 @@ export class ReutilizablesTestPageComponent {
   protected lastModalResult = 'Todavia no se abrio ningun modal.';
   protected readonly paginatorTotalPages = 8;
   protected readonly cartBackgroundColor = '#ffffff';
+  protected readonly mapLocations: readonly MapLocation[] = [
+    {
+      id: 'gigante-de-arroyito',
+      label: 'Gigante de Arroyito',
+      address: 'Av. Génova 640, Rosario',
+      latitude: -32.913997,
+      longitude: -60.674567,
+    },
+    {
+      id: 'punto-centro',
+      label: 'Punto Centro',
+      address: 'Centro, Rosario',
+      latitude: -32.94682,
+      longitude: -60.63932,
+    },
+    {
+      id: 'punto-sur',
+      label: 'Punto Sur',
+      address: 'Zona sur, Rosario',
+      latitude: -32.97151,
+      longitude: -60.65064,
+    },
+  ];
   protected readonly mainCarouselImages = [
     'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=80',
     'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1600&q=80',