Migrate to fetch API, URLSearchParams and async-await

spec/__snapshots__/nominatim.spec.ts.snap

@@ -32,10 +32,10 @@ exports[`L.Control.Geocoder.Nominatim > geocodes Innsbruck 1`] = `
             "state": "Tyrol",
           },
           "boundingbox": [
-            47.2583715,
-            47.2808566,
-            11.3811871,
-            11.418183,
+            "47.2583715",
+            "47.2808566",
+            "11.3811871",
+            "11.418183",
           ],
           "class": "boundary",
           "display_name": "Innsbruck, Tyrol, Austria",

spec/arcgis.spec.ts

@@ -1,12 +1,12 @@
-import { describe, expect, it, vi } from 'vitest';
-import { testXMLHttpRequest } from './mockXMLHttpRequest';
-import { ArcGis } from '../src/geocoders/arcgis';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mockFetchRequest } from './mockFetchRequest';
+import { ArcGis, ArcGisResponse } from '../src/geocoders/arcgis';
 
 describe('L.Control.Geocoder.ArcGis', () => {
-  it('geocodes Innsbruck', () => {
+  afterEach(() => vi.clearAllMocks());
+  it('geocodes Innsbruck', async () => {
     const geocoder = new ArcGis();
-    const callback = vi.fn();
-    testXMLHttpRequest(
+    const result = await mockFetchRequest(
       'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?token=&SingleLine=Innsbruck&outFields=Addr_Type&forStorage=false&maxLocations=10&f=json',
       {
         spatialReference: { wkid: 4326, latestWkid: 4326 },
@@ -24,17 +24,17 @@ describe('L.Control.Geocoder.ArcGis', () => {
             }
           }
         ]
-      },
-      () => geocoder.geocode('Innsbruck', callback)
+      } satisfies ArcGisResponse,
+      () => geocoder.geocode('Innsbruck')
     );
 
-    const feature = callback.mock.calls[0][0][0];
+    const feature = result[0];
     expect(feature.name).toBe('Innsbruck, Innsbruck-Stadt, Tirol');
     expect(feature.center).toStrictEqual({ lat: 47.26800000000003, lng: 11.391300000000058 });
     expect(feature.bbox).toStrictEqual({
       _northEast: { lat: 47.34400000000003, lng: 11.467300000000058 },
       _southWest: { lat: 47.19200000000003, lng: 11.315300000000057 }
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });

spec/google.spec.ts

@@ -1,13 +1,13 @@
-import { describe, expect, it, vi } from 'vitest';
-import { testXMLHttpRequest } from './mockXMLHttpRequest';
-import { Google } from '../src/geocoders/google';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mockFetchRequest } from './mockFetchRequest';
+import { Google, GoogleResponse } from '../src/geocoders/google';
 import { GeocodingResult } from '../src/geocoders/api';
 
 describe('L.Control.Geocoder.Google', () => {
-  it('geocodes Innsbruck', () => {
+  afterEach(() => vi.clearAllMocks());
+  it('geocodes Innsbruck', async () => {
     const geocoder = new Google({ apiKey: '0123xyz' });
-    const callback = vi.fn();
-    testXMLHttpRequest(
+    const result = await mockFetchRequest(
       'https://maps.googleapis.com/maps/api/geocode/json?key=0123xyz&address=Innsbruck',
       {
         results: [
@@ -67,17 +67,17 @@ describe('L.Control.Geocoder.Google', () => {
           }
         ],
         status: 'OK'
-      },
-      () => geocoder.geocode('Innsbruck', callback)
+      } satisfies GoogleResponse,
+      () => geocoder.geocode('Innsbruck')
     );
 
-    const feature: GeocodingResult = callback.mock.calls[0][0][0];
+    const feature: GeocodingResult = result[0];
     expect(feature.name).toBe('Innsbruck, Austria');
     expect(feature.center).toStrictEqual({ lat: 47.2692124, lng: 11.4041024 });
     expect(feature.bbox).toStrictEqual({
       _northEast: { lat: 47.3599301, lng: 11.45593 },
       _southWest: { lat: 47.21098000000001, lng: 11.3016499 }
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });

spec/here.spec.ts

@@ -1,14 +1,14 @@
-import { describe, expect, it, vi } from 'vitest';
-import { testXMLHttpRequest } from './mockXMLHttpRequest';
-import { HERE } from '../src/geocoders/here';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mockFetchRequest } from './mockFetchRequest';
+import { HERE, HEREv2Response } from '../src/geocoders/here';
 import { HEREv2 } from '../src/geocoders/here';
 import { GeocodingResult } from '../src/geocoders/api';
 
 describe('L.Control.Geocoder.HERE', () => {
-  it('geocodes Innsbruck', () => {
+  afterEach(() => vi.clearAllMocks());
+  it('geocodes Innsbruck', async () => {
     const geocoder = new HERE({ app_id: 'xxx', app_code: 'yyy' });
-    const callback = vi.fn();
-    testXMLHttpRequest(
+    const result = await mockFetchRequest(
       'https://geocoder.api.here.com/6.2/geocode.json?searchtext=Innsbruck&gen=9&app_id=xxx&app_code=yyy&jsonattributes=1&maxresults=5',
       {
         response: {
@@ -74,26 +74,25 @@ describe('L.Control.Geocoder.HERE', () => {
           ]
         }
       },
-      () => geocoder.geocode('Innsbruck', callback)
+      () => geocoder.geocode('Innsbruck')
     );
 
-    const feature: GeocodingResult = callback.mock.calls[0][0][0];
+    const feature: GeocodingResult = result[0];
     expect(feature.name).toBe('Innsbruck, Tirol, Österreich');
     expect(feature.center).toStrictEqual({ lat: 47.268, lng: 11.3913 });
     expect(feature.bbox).toStrictEqual({
       _northEast: { lat: 47.35922, lng: 11.45587 },
       _southWest: { lat: 47.21082, lng: 11.30194 }
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });
 
 describe('L.Control.Geocoder.HEREv2', () => {
-  it('geocodes Innsbruck', () => {
+  it('geocodes Innsbruck', async () => {
     const geocodingParams = { at: '50.62925,3.057256' };
     const geocoder = new HEREv2({ apiKey: 'xxx', geocodingQueryParams: geocodingParams });
-    const callback = vi.fn();
-    testXMLHttpRequest(
+    const result = await mockFetchRequest(
       'https://geocode.search.hereapi.com/v1/discover?q=Innsbruck&apiKey=xxx&limit=10&at=50.62925%2C3.057256',
       {
         items: [
@@ -163,15 +162,15 @@ describe('L.Control.Geocoder.HEREv2', () => {
             ]
           }
         ]
-      },
-      () => geocoder.geocode('Innsbruck', callback)
+      } satisfies HEREv2Response,
+      () => geocoder.geocode('Innsbruck')
     );
 
-    const feature: GeocodingResult = callback.mock.calls[0][0][0];
+    const feature: GeocodingResult = result[0];
     expect(feature.name).toBe(
       'Salumeria Italiana, 151 Richmond St, Boston, MA 02109, United States'
     );
     expect(feature.center).toStrictEqual({ lat: 42.36355, lng: -71.05439 });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });

spec/latlng.spec.ts

@@ -1,8 +1,10 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import * as L from 'leaflet';
 import { LatLng } from '../src/geocoders/latlng';
+import { IGeocoder } from '../src/geocoders/api';
 
 describe('LatLng', () => {
+  afterEach(() => vi.clearAllMocks());
   // test cases from https://github.com/openstreetmap/openstreetmap-website/blob/master/test/controllers/geocoder_controller_test.rb
   let expected;
   beforeEach(() => {
@@ -16,21 +18,20 @@ describe('LatLng', () => {
     geocode('+50.06773, +14.37742');
   });
 
-  it('does not geocode no-lat-lng', () => {
+  it('does not geocode no-lat-lng', async () => {
     const geocoder = new LatLng();
-    const callback = vi.fn();
-    geocoder.geocode('no-lat-lng', callback);
-    expect(callback).toHaveBeenCalledTimes(0);
+    const result = await geocoder.geocode('no-lat-lng');
+    expect(result).toHaveLength(0);
   });
 
-  it('passes unsupported queries to the next geocoder', () => {
+  it('passes unsupported queries to the next geocoder', async () => {
+    const xxx = [Symbol()] as any;
     const next = {
-      geocode: (_query, cb) => cb('XXX')
-    };
+      geocode: _query => xxx
+    } as IGeocoder;
     const geocoder = new LatLng({ next: next });
-    const callback = vi.fn();
-    geocoder.geocode('no-lat-lng', callback);
-    expect(callback).toHaveBeenCalledWith('XXX');
+    const result = await geocoder.geocode('no-lat-lng');
+    expect(result).toBe(xxx);
   });
 
   it('geocodes lat/lon pairs using N/E with degrees', () => {
@@ -138,12 +139,10 @@ describe('LatLng', () => {
     geocode('50°4\'3.828"S 14°22\'38.712"W');
   });
 
-  function geocode(query) {
+  async function geocode(query) {
     const geocoder = new LatLng();
-    const callback = vi.fn();
-    geocoder.geocode(query, callback);
-    expect(callback).toBeCalledTimes(1);
-    const feature = callback.mock.calls[0][0][0];
+    const result = await geocoder.geocode(query);
+    const feature = result[0];
     expect(feature.name).toBe(query);
     expect(feature.center.lat).toBeCloseTo(expected.lat);
     expect(feature.center.lng).toBeCloseTo(expected.lng);

spec/mapbox.spec.ts

@@ -1,12 +1,12 @@
-import { describe, expect, it, vi } from 'vitest';
-import { testXMLHttpRequest } from './mockXMLHttpRequest';
-import { Mapbox } from '../src/geocoders/mapbox';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mockFetchRequest } from './mockFetchRequest';
+import { Mapbox, MapboxResponse } from '../src/geocoders/mapbox';
 
 describe('L.Control.Geocoder.Mapbox', () => {
-  it('geocodes Milwaukee Ave', () => {
+  afterEach(() => vi.clearAllMocks());
+  it('geocodes Milwaukee Ave', async () => {
     const geocoder = new Mapbox({ apiKey: '0123' });
-    const callback = vi.fn();
-    testXMLHttpRequest(
+    const result = await mockFetchRequest(
       'https://api.mapbox.com/geocoding/v5/mapbox.places/Milwaukee%20Ave.json?access_token=0123',
       {
         type: 'FeatureCollection',
@@ -62,17 +62,17 @@ describe('L.Control.Geocoder.Mapbox', () => {
         ],
         attribution:
           'NOTICE: © 2018 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare.'
-      },
-      () => geocoder.geocode('Milwaukee Ave', callback)
+      } satisfies MapboxResponse,
+      () => geocoder.geocode('Milwaukee Ave')
     );
 
-    const feature = callback.mock.calls[0][0][0];
+    const feature = result[0];
     expect(feature.name).toBe('825 Milwaukee Ave, Deerfield, Illinois 60015, United States');
     expect(feature.center).toStrictEqual({ lat: 42.166602, lng: -87.921434 });
     expect(feature.bbox).toStrictEqual({
       _northEast: { lat: 42.166602, lng: -87.921434 },
       _southWest: { lat: 42.166602, lng: -87.921434 }
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });

spec/mockFetchRequest.ts

@@ -0,0 +1,19 @@
+import { expect, vi } from 'vitest';
+
+export async function mockFetchRequest<T>(
+  url: string,
+  response: unknown,
+  trigger: () => T
+): Promise<T> {
+  const headers = { Accept: 'application/json' };
+  global.fetch = vi.fn(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve(response)
+    })
+  ) as any;
+  const result = await trigger();
+  expect(fetch).toBeCalledTimes(1);
+  expect(fetch).toBeCalledWith(url, { headers });
+  return result;
+}

spec/nominatim.spec.ts

@@ -1,14 +1,13 @@
-import { describe, expect, it, vi } from 'vitest';
-import { testXMLHttpRequest } from './mockXMLHttpRequest';
-import { Nominatim } from '../src/geocoders/nominatim';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mockFetchRequest } from './mockFetchRequest';
+import { Nominatim, NominatimResponse } from '../src/geocoders/nominatim';
 
 describe('L.Control.Geocoder.Nominatim', () => {
+  afterEach(() => vi.clearAllMocks());
   const geocoder = new Nominatim();
 
-  it('geocodes Innsbruck', () => {
-    const callback = vi.fn();
-
-    testXMLHttpRequest(
+  it('geocodes Innsbruck', async () => {
+    const result = await mockFetchRequest(
       'https://nominatim.openstreetmap.org/search?q=innsbruck&limit=5&format=json&addressdetails=1',
       [
         {
@@ -23,8 +22,7 @@ describe('L.Control.Geocoder.Nominatim', () => {
           class: 'boundary',
           type: 'administrative',
           importance: 0.763909048330467,
-          icon:
-            'https://nominatim.openstreetmap.org/images/mapicons/poi_boundary_administrative.p.20.png',
+          icon: 'https://nominatim.openstreetmap.org/images/mapicons/poi_boundary_administrative.p.20.png',
           address: {
             city_district: 'Innsbruck',
             city: 'Innsbruck',
@@ -34,11 +32,11 @@ describe('L.Control.Geocoder.Nominatim', () => {
             country_code: 'at'
           }
         }
-      ],
-      () => geocoder.geocode('innsbruck', callback)
+      ] satisfies NominatimResponse,
+      () => geocoder.geocode('innsbruck')
     );
 
-    const feature = callback.mock.calls[0][0][0];
+    const feature = result[0];
     expect(feature.name).toBe('Innsbruck, Tyrol, Austria');
     expect(feature.html).toBe(
       '<span class=""> Innsbruck   </span><br/><span class="leaflet-control-geocoder-address-context">Tyrol Austria</span>'
@@ -51,13 +49,11 @@ describe('L.Control.Geocoder.Nominatim', () => {
       country: 'Austria',
       country_code: 'at'
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 
-  it('reverse geocodes 47.3/11.3', () => {
-    const callback = vi.fn();
-
-    testXMLHttpRequest(
+  it('reverse geocodes 47.3/11.3', async () => {
+    const result = await mockFetchRequest(
       'https://nominatim.openstreetmap.org/reverse?lat=47.3&lon=11.3&zoom=9&addressdetails=1&format=json',
       {
         place_id: 197718025,
@@ -74,11 +70,11 @@ describe('L.Control.Geocoder.Nominatim', () => {
           country_code: 'at'
         },
         boundingbox: ['46.9624854', '47.4499229', '10.9896868', '11.7051742']
-      },
-      () => geocoder.reverse({ lat: 47.3, lng: 11.3 }, 131000, callback)
+      } satisfies NominatimResponse[number],
+      () => geocoder.reverse({ lat: 47.3, lng: 11.3 }, 131000)
     );
 
-    const feature = callback.mock.calls[0][0][0];
+    const feature = result[0];
     expect(feature.name).toBe('Innsbruck-Land, Tyrol, Austria');
     expect(feature.html).toBe('<span class="">Tyrol Austria</span>');
     expect(feature.properties.address).toStrictEqual({
@@ -87,6 +83,6 @@ describe('L.Control.Geocoder.Nominatim', () => {
       country: 'Austria',
       country_code: 'at'
     });
-    expect(callback.mock.calls).toMatchSnapshot();
+    expect([[result]]).toMatchSnapshot();
   });
 });