Pruebas a la API del navegador

En este escenario se observa que pasa si estamos consumiendo una API del navegador como geolocalization hacer mock y ver que pasa

En estos casos de librerias que no vienen como inyección de dependencias se podría tener una dificultad de hacer mocking de estas librerias.

creamos un servicio nuevo para incorporar el servicio de geolocation

ng g s services/maps

y en el servicio de maps ingresamos el código para obtener la geolocalización y recibir parametros

maps.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MapsService {

  center = {lat: 0, lng: 0};
  constructor() { }

  getCurrentPosition() {
    navigator.geolocation.getCurrentPosition((response) => {
      const { latitude, longitude } = response.coords;
      this.center = {lat: latitude, lng: longitude}
    });
  }
}

Para las pruebas debemos enviar parametros propios de la geolocation y enviarlos a prueba haciendo spy directamente

maps.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { MapsService } from './maps.service';

describe('MapsService', () => {
  let mapService: MapsService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ MapsService ]
    });
    mapService = TestBed.inject(MapsService);
  });

  it('should be created', () => {
    expect(mapService).toBeTruthy();
  });

  describe('test for getCurrentPosition', () => {
    it('should save the center position', () => {
      //Arrange
      spyOn(navigator.geolocation, 'getCurrentPosition').and.callFake((successFn) => {
        const mockGeolocation = {
          coords: {
            accuracy: 0,
            altitude: 0,
            altitudeAccuracy: 0,
            heading: 0,
            latitude: 1000,
            longitude: 2000,
            speed: 0
          },
          timestamp: 0,
        };
        successFn(mockGeolocation);
      });
      // Act
      mapService.getCurrentPosition();
      // Assert
      expect(mapService.center.lat).toEqual(1000);
      expect(mapService.center.lng).toEqual(2000);
    });
  });
});

Hoy 3 de enero del 2025, me estaba pidiendo otra propiedad el mock, un toJSON, por lo que me lanzaba error al hacerlo estrictamente como lo hace nico en el video. El mock quedaría así: ```ts spyOn(navigator.geolocation, 'getCurrentPosition').and.callFake( (successFn) => { const mockGeolocation: GeolocationPosition = { coords: { accuracy: 0, altitude: 0, altitudeAccuracy: 0, heading: 0, latitude: 1000, longitude: 2000, speed: 0, } as GeolocationCoordinates, timestamp: 0, toJSON: () => {}, } as GeolocationPosition; successFn(mockGeolocation); } ); ```