Pruebas a la API del navegador

Clase 23 de 25 • Curso de Angular: Unit Testing para Servicios

Cesar Elías Armendariz Ruano

student•

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);
    });
  });
});

Víctor Rolack

student•

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í:

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);
        }
      );

mmiranda4378

student•

Yo lo solucione asi:

it('should save the center', () => {
      // 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,
        } as GeolocationPosition;
        successFn(mockGeolocation);
      });
      // Act
      mapService.getCurrentPosition();
      // Assert
      expect(mapService.center.lat).toEqual(1000);
      expect(mapService.center.lng).toEqual(2000);
    });

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}
    });
  }
}

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);
    });
  });
});

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);
        }
      );

it('should save the center', () => {
      // 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,
        } as GeolocationPosition;
        successFn(mockGeolocation);
      });
      // Act
      mapService.getCurrentPosition();
      // Assert
      expect(mapService.center.lat).toEqual(1000);
      expect(mapService.center.lng).toEqual(2000);
    });

Pruebas a la API del navegador

Introducción

Unit testing para servicios en Angular

Jest vs. Jasmine: entornos de testing para Angular

Fundamentos de unit testing en Angular

Tu primera prueba en Angular

Explorando matchers

Reporte de coverage

Mocha Report

Testing en servicios

Pruebas unitarias para servicios

Servicios con dependencias

Spies

Angular TestBed

TestBed + Spies

Proyecto

Setup y maquetación del proyecto

Product Service Http

Testing en consultas HTTP

HttpClientTestingModule

Generando Mocks

Pruebas para GET

Pruebas maliciosas para GET

Pruebas para POST

Pruebas para PUT y DELETE

Bonus

Pruebas a errores

Pruebas con interceptores

Pruebas al login

Pruebas a la API del navegador

GitHub Actions

Próximos pasos

Toma el Curso de Angular: Unit Testing para Componentes