Exploring ways to test the ng-web-apis/geolocation Observable within an Angular 8 environment

Question

Exploring ways to test the ng-web-apis/geolocation Observable within an Angular 8 environment

I'm currently working on testing a basic Angular 8 service that utilizes the GeoLocation Service from Web APIs for Angular, which can be found at this link.

 public enableGPS() {
    if (!this.locationSubscription)
        this.locationSubscription = this.geoLocationService.subscribe(
            (position) => {
                this._currentLocation = position.coords;
            }
        );
 }

Below is an example of the test:

 describe("Toggle Location Service", () => {

    it("should enable location service", () => {

        const testPosition = {
            position: {
                coords: {
                    longitude: 1.0,
                    latitude: 2.0
                }
            }};

        let geoLocationService: GeolocationService = TestBed.get(GeolocationService);
        spyOn(geoLocationService, 'subscribe').and.returnValue(
            Observable.of(testPosition));
        service.enableGPS();
        expect(service.currentLocation).toEqual(testPosition);
      });
    });

However, I've been encountering an issue where service.currentLocation remains undefined and the subscription callback never triggers.

angular typescript geolocation

Answer 1

Answer №1

Perhaps it's not too late to address your inquiry, as I recently found myself in need of implementing this for my own project.

To avoid further prolonging the issue and since I faced difficulties making the library work, I opted to utilize the browser's resources directly instead.

https://developer.mozilla.org/en/docs/Web/API/Geolocation/getCurrentPosition

The service I developed looks like this:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LocationService{
    constructor(){
    }
    
    getPosition(): Promise<any> {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resp => {
                    resolve({lng: resp.coords.longitude, lat: resp.coords.latitude});
                },
                err => {
                    reject(err);
              });
        });
    }
}

Subsequently, I implement it in my component as follows:

import { LocationService } from '../Interfaces/Services/location.service';

  location : any = { latitude: '', longitude: '' };
  constructor(
    private _locationService: LocationService
  ) {

  }
  async getLocation() {
    this._locationService.getPosition().then(pos => {
        this.location= {
          latitude: pos.lat,
          longitude: pos.lng
        }
    });
  }

I trust that this information proves useful to you. If not, I hope it provides clarity for upcoming developers.

Answer 2

Perhaps it's not too late to address your inquiry, as I recently found myself in need of implementing this for my own project.

To avoid further prolonging the issue and since I faced difficulties making the library work, I opted to utilize the browser's resources directly instead.

https://developer.mozilla.org/en/docs/Web/API/Geolocation/getCurrentPosition

The service I developed looks like this:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LocationService{
    constructor(){
    }
    
    getPosition(): Promise<any> {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resp => {
                    resolve({lng: resp.coords.longitude, lat: resp.coords.latitude});
                },
                err => {
                    reject(err);
              });
        });
    }
}

Subsequently, I implement it in my component as follows:

import { LocationService } from '../Interfaces/Services/location.service';

  location : any = { latitude: '', longitude: '' };
  constructor(
    private _locationService: LocationService
  ) {

  }
  async getLocation() {
    this._locationService.getPosition().then(pos => {
        this.location= {
          latitude: pos.lat,
          longitude: pos.lng
        }
    });
  }

I trust that this information proves useful to you. If not, I hope it provides clarity for upcoming developers.

Exploring ways to test the ng-web-apis/geolocation Observable within an Angular 8 environment

Answer №1

Similar questions

"Exploring the world of Typescript with the Drawflow library

Move the files created by ng build in the specified output directory to a different location

What is the best way to retrieve the file path of a imported Angular module?

Upon updating my application from Angular 14 to 16, I encountered an overwhelming number of errors within the npm packages I had incorporated

Ensure that parameters are validated correctly in the Next.JS application router using the searchParams method

What is the best way to restrict the suggested values in a property depending on the value of another property?

When I try to use http-server with the port 8080, my Angular application is not being served. However, when

Accessing the map in an Angular 6 service via Leaflet

RxJS: Ensure Observables emit values sequentially, waiting for the completion of the previous Observable

The data from Angular2 Observable Subscription appears undefined, although a closer look at the Browser Debug reveals otherwise

Component fails to navigate to the page of another component

Angular's forEach function seems to be stuck and not loop

Tips for deploying an Angular Universal 9 application on a live server

Angular 6 Integration: Configuring CORS and JWT in Spring Boot

What is the best way to communicate an event occurring within the ng-content to the reusable parent component in Angular?

The anticipated outcomes are not achieved when utilizing environmental variables in Angular 2

The argument provided needs to be a function, but instead, an object instance was received, not the original argument as expected

Looking for guidance on integrating REST API consumption features into Ionic Framework 3.x?

Implementing computed properties: A guide to incorporating type setting

The button click function is failing to trigger in Angular