diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 362f3418..00000000
--- a/.eslintrc
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "env": {
- "node": true,
- "browser": true,
- "es6": true
- },
- "parserOptions": {
- "ecmaVersion": 6,
- "sourceType": "script"
- },
- "extends": "eslint:recommended",
- "rules": {
- "indent": ["error", 2],
- "no-console": "warn"
- }
-}
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 1a616b59..fea9ba08 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -3,4 +3,4 @@
- [ ] briefly describe the changes in this PR
- [ ] write tests for all new functionality
- [ ] run `npm run docs` and commit changes to API.md
- - [ ] update CHANGELOG.md with changes under `main` heading before merging
+ - [ ] update CHANGELOG.md with changes under `HEAD` heading before merging
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index bcf0cffd..63fd287e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -15,7 +15,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v4
with:
- node-version: 22.x
+ node-version-file: '.nvmrc'
cache: 'npm'
- uses: actions/cache@v4
@@ -30,12 +30,10 @@ jobs:
- name: Install dependencies
run: npm ci
- - name: Install Firefox
- run: |
- sudo apt-get update
- sudo apt-get install -y firefox
+ - name: Install Chromium
+ run: npx playwright install chromium
- - name: Run tests with Smokestack and Firefox
+ - name: Run tests with Vitest
run: |
export DISPLAY=:99
Xvfb :99 -screen 0 1024x768x24 2> /dev/null &
diff --git a/.gitignore b/.gitignore
index 54797655..db4c6d9b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,2 @@
-env.test.sh
dist
node_modules
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..8fdd954d
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 7ef79882..00000000
--- a/.travis.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-language: node_js
-node_js:
- - '12'
-addons:
- firefox: latest
- apt:
- update: true
- packages:
- - xvfb
-install:
- - export DISPLAY=':99.0'
- - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
- - npm install
-script:
- - npm test
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b124579b..283dd07d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
## HEAD
+### Breaking Changes ⚠️
+
+- Increase minimum supported version of EcmaScript to ES2020. This means that the library now uses modern JavaScript features and may not be compatible with older browsers or environments that do not support ES2020.
+- Migrate not bundled source code to ESM modules. This change allows for better tree-shaking and module loading, improving performance and reducing bundle size.
+
+### Features / Improvements 🚀
+
+- Add `once` method to `Geocoder` class to allow for one-time event listeners
+
## 5.1.0
### Features / Improvements 🚀
diff --git a/README.md b/README.md
index 31e2b994..795ea064 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,13 @@
-Mapbox GL Geocoder [](https://travis-ci.com/mapbox/mapbox-gl-geocoder)
+Mapbox GL Geocoder [](https://github.com/mapbox/mapbox-gl-geocoder/actions/workflows/main.yml)
---
A geocoder control for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) using the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/#geocoding). For a JavaScript geocoder without a graphical user interface see the [Mapbox SDK for JS](https://github.com/mapbox/mapbox-sdk-js/blob/master/docs/services.md#geocoding).
-### Usage
+## Usage
* https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
* https://docs.mapbox.com/mapbox-gl-js/example/?search=mapbox-gl-geocoder
-**If you are supporting older browsers, you will need to use a polyfill.** We recommend working with [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill).
-
### Usage with a module bundler
```bash
@@ -28,18 +26,19 @@ const geocoder = new MapboxGeocoder({
```
### Using without a Map
-It is possible to use the plugin without it being placed as a control on a mapbox-gl map. Keep in mind that the Mapbox [Terms of Service](https://www.mapbox.com/legal/tos#[GAGA]) require that POI search results be shown on a Mapbox map. If you don't need POIs, you can exclude them from your search results with the `options.types` parameter when constructing a new Geocoder.
-### Deeper dive
+It is possible to use the plugin without it being placed as a control on a mapbox-gl map. Keep in mind that the Mapbox [Terms of Service](https://www.mapbox.com/legal/tos) require that POI search results be shown on a Mapbox map. If you don't need POIs, you can exclude them from your search results with the `options.types` parameter when constructing a new Geocoder.
+
+## Deeper dive
-#### API Documentation
+### API Documentation
-See [API.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md) for complete reference.
+See [API.md](./API.md) for complete reference.
-#### Examples
+### Examples
See [https://docs.mapbox.com/mapbox-gl-js/examples/#geocoder](https://docs.mapbox.com/mapbox-gl-js/examples/#geocoder).
### Contributing
-See [CONTRIBUTING.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CONTRIBUTING.md).
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
diff --git a/babel.config.json b/babel.config.json
deleted file mode 100644
index 0a8d3e91..00000000
--- a/babel.config.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "plugins": [],
- "presets": [
- "@babel/preset-env"
- ]
-}
\ No newline at end of file
diff --git a/debug/filter.html b/debug/filter.html
new file mode 100644
index 00000000..18ea8820
--- /dev/null
+++ b/debug/filter.html
@@ -0,0 +1,13 @@
+
+
+
+ Mapbox GL Geocoder
+ Mapbox GL Geocoder
+ Mapbox GL Geocoder
+ This is a test ");
+ // the data was cleared from the suggestions
+ expect(geocoder._typeahead.data.length).toEqual(0);
+ // the selected option was cleared from the suggestions
+ expect(geocoder._typeahead.selected).toEqual(null);
+ // the renderError method was called exactly once
+ expect(typeaheadRenderErrorSpy.calledOnce).toBeTruthy();
+ var calledWithArgs = typeaheadRenderErrorSpy.args[0][0];
+ // the error rendering function was called with the correct message
+ expect(calledWithArgs).toEqual("This is a test ");
+ resolve();
+ });
+ })
+ );
+ });
+
+ geocoder.query('high');
+
+ return wait;
+ });
+
+ test('geocoder#_renderError', function() {
+ setup({});
+ var renderMessageSpy = sinon.spy(geocoder, '_renderMessage');
+
+ const wait = new Promise(resolve => {
+ geocoder.on(
+ 'result',
+ once(function() {
+ geocoder._renderError();
+ // the error render method calls the renderMessage method exactly once
+ expect(renderMessageSpy.calledOnce).toBeTruthy();
+ var calledWithArgs = renderMessageSpy.args[0][0];
+ // the error message specifies the correct class
+ expect(calledWithArgs.indexOf('mapbox-gl-geocoder--error') > -1).toBeTruthy();
+
+ resolve();
+ })
+ );
+ });
+
+ geocoder.query('high');
+
+ return wait;
+ });
+
+ test('geocoder#_renderNoResults', function() {
+ setup({});
+ var renderMessageSpy = sinon.spy(geocoder, '_renderMessage');
+
+ const wait = new Promise(resolve => {
+ geocoder.once(
+ 'result',
+ function() {
+ geocoder._renderNoResults();
+ // the no results render method calls the renderMessage method exactly once
+ expect(renderMessageSpy.calledOnce).toBeTruthy();
+ var calledWithArgs = renderMessageSpy.args[0][0];
+ // the info message specifies the correct class
+ expect(calledWithArgs.indexOf('mapbox-gl-geocoder--error') > -1).toBeTruthy();
+ // the info message specifies the correct class
+ expect(calledWithArgs.indexOf('mapbox-gl-geocoder--no-results') > -1).toBeTruthy();
+
+ resolve();
+ }
+ );
+ });
+
+ geocoder.query('high');
+
+ return wait;
+ });
+
+ test('error is shown after an error occurred', function() {
+ setup({});
+ const wait = new Promise(resolve => {
+ geocoder.on(
+ 'results',
+ function(e) {
+ // Some results are returned using and the input is not used for reverse geocoding
+ expect(e.features.length > 0).toBeTruthy();
+ resolve();
+ }
+ );
+ });
+
+ geocoder.query('12,');
+
+ return wait;
+ });
+
+ test('error is shown after an error occurred [with local geocoder]', function() {
+ setup({
+ localGeocoder: function(){
+ return [
+ {type:'Feature', geometry: {type: 'Point', coordinates:[-122, 37]}, properties: {}, place_name: 'Golden Gate Bridge', text: 'Golden Gate Bridge', center: [-122, 37]}
+ ];
+ }
+ });
+
+ const wait = new Promise(resolve => {
+ geocoder.on(
+ 'results',
+ once(function(e) {
+ // Some results are returned using and the input is not used for reverse geocoding
+ expect(e.features.length > 0).toBeTruthy();
+ resolve();
+ })
+ );
+ });
+
+ geocoder.query('12,');
+
+ return wait;
+ });
+
+ test('message is shown if no results are returned', function() {
+ setup({});
+ var renderMessageSpy = sinon.spy(geocoder, '_renderNoResults');
+
+ const wait = new Promise(resolve => {
+ geocoder.once(
+ 'results',
+ function() {
+ // a message was rendered
+ expect(renderMessageSpy.called).toBeTruthy();
+ resolve();
+ }
+ );
+ });
+
+ geocoder.query('abcdefghijkl!@#$%^&*()_+'); //this will return no results
+
+ return wait;
+ });
+
+ test('no mapbox api call is made if localGeocoderOnly is set', function() {
+ setup({
+ localGeocoderOnly: true,
+ localGeocoder: function(q){
+ return [{
+ place_name: q,
+ geometry: {
+ type: "Point",
+ coordinates: [0, 0]
+ },
+ properties: {},
+ id: 'abc.123'
+ }]
+ }
+ });
+ // geocoding service is not initialized during localGeocoderOnly mode
+ expect(geocoder.geocoderService).toBeFalsy()
+
+ const wait = new Promise(resolve => {
+ geocoder.once(
+ 'results',
+ function(e) {
+ // returns the result of the local geocoder
+ expect(e.features[0].place_name == "Golden Gate Bridge").toBeTruthy();
+ // returns the result of the local geocoder
+ expect(e.features[0].id == "abc.123").toBeTruthy();
+ // returns the correct number of results
+ expect(e.features.length).toEqual(1);
+
+ resolve();
+ }
+ );
+ });
+
+ geocoder.query('Golden Gate Bridge');
+
+ return wait;
+ });
+
+ test('does not throw if no access token is set and localGeocoderOnly mode is active', function() {
+ var opts = {
+ localGeocoderOnly: true,
+ localGeocoder: function(d){
+ return [{place_name: d, geometry: {type: "Point", coordinates: [0, 0]}, properties: {}, id: 'abc.123'}]
+ }
+ }
+ // no access token here
+ container = document.createElement('div');
+ map = new mapboxgl.Map({ container: container });
+ geocoder = new MapboxGeocoder(opts);
+ expect(function(){map.addControl(geocoder);}, 'does not throw an error when no access token is set').not.toThrowError();
+ });
+
+ test('throws an error if localGeocoderOnly mode is active but no localGeocoder is supplied', function(){
+ var opts = {
+ localGeocoderOnly: true
+ }
+ // no access token here
+ container = document.createElement('div');
+ map = new mapboxgl.Map({ container: container });
+ geocoder = new MapboxGeocoder(opts);
+ // throws an error if no local geocoder is set
+ expect(function(){map.addControl(geocoder);}).toThrowError()
+ });
+
+ test('geocoder.lastSelected is reset on input', function() {
+ setup();
+ geocoder.lastSelected = "abc123";
+ geocoder._onKeyDown(new KeyboardEvent('KeyDown'));
+ expect(geocoder.lastSelected).toEqual(null)
+ });
+
+ test('geocoder#onPaste', function(){
+ setup();
+ var searchMock = sinon.spy(geocoder, "_geocode")
+ const clipboardData = new DataTransfer();
+ clipboardData.setData('text/plain', 'Golden Gate Bridge');
+ var event = new ClipboardEvent('paste', {
+ clipboardData
+ })
+ geocoder._onPaste(event);
+ // the search was triggered
+ expect(searchMock.calledOnce).toBeTruthy();
+ const queryArg = searchMock.args[0][0];
+ // the paste event triggered the correct geocode
+ expect(queryArg).toEqual('Golden Gate Bridge');
+ searchMock.restore();
+ });
+
+ test('geocoder#onPaste not triggered when text is too short', function() {
+ setup({
+ minLength: 5
+ });
+ var searchMock = sinon.spy(geocoder, "_geocode")
+ const clipboardData = new DataTransfer();
+ clipboardData.setData('text/plain', 'abc');
+ var event = new ClipboardEvent('paste', {
+ clipboardData
+ })
+ geocoder._onPaste(event);
+ // the search was not triggered
+ expect(searchMock.calledOnce).toBeFalsy();
+ searchMock.restore();
+ });
+
+ test('geocoder#onPaste not triggered when there is no text', function() {
+ setup();
+ var searchMock = sinon.spy(geocoder, "_geocode")
+ const clipboardData = new DataTransfer();
+ clipboardData.setData('text/plain', '');
+ var event = new ClipboardEvent('paste', {
+ clipboardData
+ })
+ geocoder._onPaste(event);
+ // the search was not triggered
+ expect(searchMock.calledOnce).toBeFalsy();
+ searchMock.restore();
+ });
+});
diff --git a/test/index.js b/test/index.js
deleted file mode 100644
index 1876ebd5..00000000
--- a/test/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-var test = require('tape');
-
-// Tests
-require('./test.geocoder');
-require('./test.ui');
-
-// close the smokestack window once tests are complete
-test('shutdown', function(t) {
- t.end();
- setTimeout(function() {
- window.close();
- }, 0);
-});
diff --git a/test/test.geocoder.js b/test/test.geocoder.js
deleted file mode 100644
index 5dcdc7d2..00000000
--- a/test/test.geocoder.js
+++ /dev/null
@@ -1,1395 +0,0 @@
-'use strict';
-
-var test = require('tape');
-var MapboxGeocoder = require('../');
-var mapboxgl = require('mapbox-gl');
-var once = require('lodash.once');
-var mapboxEvents = require('./../lib/events');
-var sinon = require('sinon');
-var localization = require('./../lib/localization');
-var exceptions = require('./../lib/exceptions');
-
-
-mapboxgl.accessToken = process.env.MapboxAccessToken;
-
-test('geocoder', function(tt) {
- var container, map, geocoder;
-
- function setup(opts) {
- opts = opts || {};
- opts.accessToken = opts.accessToken || mapboxgl.accessToken;
- opts.mapboxgl = opts.mapboxgl || mapboxgl; // set default to prevent warnings littering the test logs
- opts.enableEventLogging = false;
- container = document.createElement('div');
- map = new mapboxgl.Map({
- container: container,
- projection: 'mercator',
- style: 'mapbox://styles/mapbox/standard',
- });
- geocoder = new MapboxGeocoder(opts);
- map.addControl(geocoder);
- }
-
- tt.test('initialized', function(t) {
- setup();
- t.ok(geocoder, 'geocoder is initialized');
- t.ok(geocoder.fresh, 'geocoder is initialized with fresh status to enable turnstile event');
- t.equals(geocoder.inputString, '', 'geocoder is initialized with an input string for keeping track of state');
- t.ok(geocoder.eventManager instanceof mapboxEvents, 'the geocoder has a mapbox event manager');
- t.true(geocoder.options.trackProximity, 'sets trackProximity to true by default');
- t.end();
- });
-
- tt.test('set/get input', function(t) {
- t.plan(4)
- setup({ proximity: { longitude: -79.45, latitude: 43.65 } });
-
- map.once('style.load', () => {
- geocoder.query('Queen Street');
- var mapMoveSpy = sinon.spy(map, "flyTo");
- geocoder.on(
- 'result',
- once(function(e) {
- t.ok(e.result, 'feature is in the event object');
- var mapMoveArgs = mapMoveSpy.args[0][0];
- t.ok(mapMoveSpy.calledOnce, 'the map#flyTo method was called when a result was selected');
- t.notEquals(mapMoveArgs.center[0], -92.25, 'center.lng changed')
- t.notEquals(mapMoveArgs.center[1], 37.75, 'center.lat changed')
- })
- );
- });
- });
-
- tt.test('options', function(t) {
- t.plan(8);
- setup({
- flyTo: false,
- country: 'fr',
- types: 'region'
- });
-
- map.once('style.load', () => {
- geocoder.query('Paris');
- var startEventMethod = sinon.stub(geocoder.eventManager, "start")
-
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(e.features.length, 'Event for results emitted');
- t.equals(geocoder.inputString, 'Paris', 'input string keeps track of state');
- t.equals(geocoder.fresh, false, 'once a search has been completed, the geocoder is no longer fresh');
- t.ok(startEventMethod.called, 'a search start event was issued');
- t.ok(startEventMethod.calledOnce, 'a search start event was issued only once');
- })
- );
-
- geocoder.on(
- 'result',
- once(function(e) {
- var center = map.getCenter();
- t.equals(center.lng, 0, 'center.lng is unchanged');
- t.equals(center.lat, 0, 'center.lat is unchanged');
- t.equals(
- e.result.place_name,
- 'Paris, France',
- 'one result is returned with expected place name'
- );
- })
- );
- });
- });
-
- tt.test('custom endpoint', function(t) {
- t.plan(1);
- setup({ origin: 'localhost:2999' });
- t.equals(
- geocoder.options.origin,
- 'localhost:2999',
- 'options picks up custom endpoint'
- );
- });
-
- tt.test("swapped endpoint", function(t) {
- t.plan(1);
- setup({ origin: 'localhost:2999' });
- geocoder.setOrigin("https://api.mapbox.com");
- geocoder.query("pizza");
- geocoder.on("results", function(e) {
- t.equals(
- e.request.origin,
- "https://api.mapbox.com",
- "endpoint correctly reset"
- );
- });
- });
-
- tt.test('options.bbox', function(t) {
- t.plan(2);
- setup({
- bbox: [
- -122.71901248631752,
- 37.62347223479118,
- -122.18070124967602,
- 37.87996631184369
- ]
- });
-
- geocoder.query('London');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(e.features.length, 'Event for results emitted');
- t.equals(
- e.features[0].text,
- 'London Road',
- 'Result is returned within a bbox'
- );
- })
- );
- });
-
- tt.test('options.reverseGeocode - true', function(t) {
- t.plan(4);
- setup({
- reverseGeocode: true
- });
- geocoder.query('-6.1933875, 34.5177548');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 1, 'One result returned');
- t.ok(
- e.features[0].place_name.indexOf('Tanzania') > -1,
- 'returns expected result'
- );
- t.ok(
- e.features[0].place_name.indexOf('Singida') > -1,
- 'returns expected result'
- );
- t.equal(e.config.limit, 1, 'sets limit to 1 for reverse geocodes');
- })
- );
- });
-
- tt.test('options.reverseGeocode - interprets coordinates & options correctly', function(t) {
- t.plan(3);
- setup({
- types: 'country',
- reverseGeocode: true
- });
- geocoder.query('31.791, -7.0926');
- geocoder.on(
- 'results',
- once(function(e) {
- t.deepEquals(e.query, [ -7.0926, 31.791 ], 'parses query');
- t.deepEquals(e.config.types.toString(), 'country', 'uses correct type passed to config' );
- t.equal(e.features[0].place_name, 'Morocco', 'returns expected result');
- })
- );
- });
-
- tt.test('options.reverseGeocode - false by default', function(t) {
- t.plan(1);
- setup();
- geocoder.query('-6.1933875, 34.5177548');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 0, 'No results returned');
- })
- );
- });
-
- tt.test('options.reverseGeocode: true with trackProximity: true', function(t) {
- t.plan(0);
- setup({
- reverseGeocode: true,
- trackProximity: true
- });
- map.jumpTo({
- zoom: 16,
- center: [10, 10]
- });
- geocoder.query('-6.1933875, 34.5177548');
- t.end();
- });
-
- tt.test('options.flipCoordinates - false by default', function(t) {
- t.plan(1);
- setup({
- reverseGeocode: true,
- });
- geocoder.query('-98, 40');
- geocoder.on('results', once(function(e) {
- t.equal(e.features.length, 0, 'No results returned')
- }))
- })
-
- tt.test('options.flipCoordinates - true accepts lon,lat order', function(t) {
- t.plan(1);
- setup({
- reverseGeocode: true,
- flipCoordinates: true
- });
- geocoder.query('-98, 40');
- geocoder.on('results', once(function(e) {
- t.equal(e.features.length, 1, 'One result returned')
- }))
- })
-
- tt.test('options.flipCoordinates - true does not accept lat,lon order', function(t) {
- t.plan(1);
- setup({
- reverseGeocode: true,
- flipCoordinates: true
- });
- geocoder.query('40, -98');
- geocoder.on('results', once(function(e) {
- t.equal(e.features.length, 0, 'No results returned')
- }))
- })
-
- tt.test('parses options correctly', function(t) {
- t.plan(4);
- setup({
- language: 'en,es,zh',
- types: 'district, locality, neighborhood, postcode',
- countries: 'us, mx'
- });
-
- var languages = ['en', 'es', 'zh'];
- var types = ['district', 'locality', 'neighborhood', 'postcode'];
- var countries = ['us', 'mx'];
-
- geocoder.query('Hartford');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 5, 'Five results returned');
- t.deepEquals(
- e.config.language,
- languages,
- 'converts language options with no spaces to array'
- );
- t.deepEquals(e.config.types, types, 'converts types options to array');
- t.deepEquals(
- e.config.countries,
- countries,
- 'converts countries options to array'
- );
- })
- );
- });
-
- tt.test('options.limit', function(t) {
- t.plan(1);
- setup({
- flyTo: false,
- limit: 6
- });
-
- geocoder.query('London');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 6, 'Results limit applied');
- })
- );
- });
-
- tt.test('options:zoom', function(t) {
- t.plan(1);
- setup({ zoom: 12 });
- geocoder.query('1714 14th St NW');
- var mapMoveSpy = sinon.spy(map, "flyTo");
- geocoder.on(
- 'result',
- once(function() {
- var mapMoveArgs = mapMoveSpy.args[0][0];
- t.equals(mapMoveArgs.zoom, 12, 'custom zoom is supported');
- })
- );
- });
-
- tt.test('options.localGeocoder', function(t) {
- t.plan(2);
- setup({
- flyTo: false,
- limit: 6,
- localGeocoder: function(q) {
- return [q];
- }
- });
-
- geocoder.query('London');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(
- e.features.length,
- 7,
- 'Local geocoder supplement remote response'
- );
- t.equal(
- e.features[0],
- 'London',
- 'Local geocoder results above remote response'
- );
- })
- );
- });
-
- tt.test('options.localGeocoder with reverseGeocode=true', function(t) {
- setup({
- flyTo: false,
- reverseGeocode: true,
- localGeocoder: function(q) {
- return [q];
- }
- });
-
- geocoder.query('-30,150');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 2, 'Local geocoder used');
- t.equal(e.features[0], '-30,150', 'Local geocoder supplement remote response');
- t.end();
- })
- );
- });
-
- tt.test('options.externalGeocoder', function(t) {
- t.plan(3);
- setup({
- flyTo: false,
- limit: 6,
- externalGeocoder: function() {
- return Promise.resolve([
- {
- "id":"place.7673410831246050",
- "type":"Feature",
- "place_name":"Promise: Washington, District of Columbia, United States of America",
- "geometry":{"type":"Point","coordinates":[-77.0366,38.895]}
- }
- ])
- }
- });
-
- geocoder.query('Washington, DC');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(e.features.length, 7, 'External geocoder used');
-
- geocoder.query('DC');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(
- e.features.length,
- 7,
- 'External geocoder supplement remote response'
- );
-
- geocoder.query('District of Columbia');
- geocoder.on(
- 'results',
- once(function(e) {
- t.equal(
- e.features[0].place_name,
- 'Promise: Washington, District of Columbia, United States of America',
- 'External geocoder results above remote response'
- );
- })
- );
- })
- );
- })
- );
- });
-
- tt.test('country bbox', function(t) {
- t.plan(2);
- setup({});
- geocoder.query('Spain');
- var fitBoundsSpy = sinon.spy(map, "fitBounds");
- geocoder.on(
- 'result',
- once(function(e) {
- t.ok(fitBoundsSpy.calledOnce, "map#fitBounds was called when a country-level feature was returned")
- var fitBoundsArgs = fitBoundsSpy.args[0][0];
- // flatten
- var mapBBox = [fitBoundsArgs[0][0], fitBoundsArgs[0][1], fitBoundsArgs[1][0], fitBoundsArgs[1][1]];
- t.ok(
- mapBBox.some(function(coord, i) {
- return coord.toPrecision(4) === e.result.bbox[i].toPrecision(4);
- })
- );
- })
- );
- });
-
- tt.test('country bbox exception', function(t) {
- t.plan(2);
- setup({});
- geocoder.query('Canada');
- var fitBoundsSpy = sinon.spy(map, "fitBounds");
- geocoder.on(
- 'result',
- once(function() {
- t.ok(fitBoundsSpy.calledOnce, 'the map#fitBounds method was called when an excepted feature was returned');
- var fitBoundsArgs = fitBoundsSpy.args[0][0];
- // flatten
- var mapBBox = [fitBoundsArgs[0][0], fitBoundsArgs[0][1], fitBoundsArgs[1][0], fitBoundsArgs[1][1]];
- var expectedBBox = exceptions['ca'].bbox;
- var expectedBBoxFlat = [expectedBBox[0][0], expectedBBox[0][1], expectedBBox[1][0], expectedBBox[1][1]]
- t.ok(
- mapBBox.some(function(coord, i) {
- return coord.toPrecision(4) === expectedBBoxFlat[i].toPrecision(4);
- })
- );
- })
- );
- });
-
- tt.test('lint exceptions file', function(t) {
- var exceptions = require('../lib/exceptions.js');
- t.plan(Object.keys(exceptions).length * 5);
-
- for (var id in exceptions) {
- var ex = exceptions[id];
-
- t.ok(ex.name, 'exception includes place name');
- t.ok(ex.bbox, 'exception includes bbox');
- t.ok(Array.isArray(ex.bbox), 'exception bbox is array');
- t.equals(ex.bbox.length, 2, 'exception bbox has two corners');
- t.ok(
- ex.bbox.every(function(corner) {
- return Array.isArray(corner) && corner.length === 2;
- }),
- 'exception bbox corners each have two components'
- );
- }
- });
-
- tt.skip('options.filter', function(t) {
- t.plan(2);
- /* testing filter by searching for a place Heathcote in New South Wales, Australia,
- * which also exists in a part of Victoria which is still inside the New South Wales bbox. */
- setup({
- countries: 'au',
- types: 'locality',
- bbox: [140.99926, -37.595494, 159.51677, -28.071477], // bbox for New South Wales, but Heathcote, Victoria is still within this bbox
- filter: function(item) {
- // returns true if item contains 'New South Wales' as the region
- return item.context
- .map(function(i) {
- return i.id.startsWith('region') && i.text == 'New South Wales';
- })
- .reduce(function (acc, cur) {
- return acc || cur;
- });
- }
- });
-
- geocoder.query('Heathcote');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features
- .map(function(feature) {
- return feature.place_name;
- })
- .includes('Heathcote Avenue'),
- 'feature included in filter'
- );
- t.notOk(
- e.features
- .map(function(feature) {
- return feature.place_name;
- })
- .includes('Heathcote, Victoria, Australia'),
- 'feature excluded in filter'
- );
- })
- );
- });
-
- tt.test('options.trackProximity', function(t) {
- t.plan(3);
-
- setup({
- trackProximity: true
- });
-
- map.setZoom(10);
- map.setCenter([15, 10]);
- t.deepEquals(
- geocoder.getProximity(),
- { longitude: 15, latitude: 10 },
- 'proximity updates after setCenter'
- );
-
- map.setZoom(9);
- t.notOk(geocoder.getProximity(), 'proximity unset after zooming out');
- t.true(geocoder.options.trackProximity, 'trackProximity remains enabled after it automatically updates proximity')
- });
-
- tt.test('options.trackProximity=false', function(t) {
- t.plan(2);
-
- setup({
- trackProximity: false
- });
- t.false(geocoder.options.trackProximity, 'track proximity is set to false');
- t.notOk(geocoder.getProximity(), 'proximity is not available when trackProximity is set to false');
- });
-
- tt.test('options.setProximity', function(t) {
- t.plan(4);
-
- setup({});
-
- t.true(geocoder.options.trackProximity, 'trackProximity is set to true by default')
- map.setZoom(13);
- map.setCenter([-79.4512, 43.6568]);
- geocoder.setProximity({ longitude: -79.4512, latitude: 43.6568});
- t.false(geocoder.options.trackProximity, 'trackProximity is set to false after explicitly setting proximity')
-
- geocoder.query('high');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features[0].place_name.indexOf('Toronto') !== -1,
- 'proximity applied in geocoding request'
- );
- // Move map and make sure _updateProximity not still changing proximity
- map.setCenter([0,0]);
- map.setZoom(5);
- geocoder.query('high');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features[0].place_name.indexOf('Toronto') !== -1,
- 'explicitly-set proximity remains intact after moving map'
- )
- })
- )
- })
- );
- });
-
- tt.test('geocoding works correctly around a place with a 0 lat or lng', function(t) {
- t.plan(1);
-
- setup({});
-
- map.setZoom(13);
- map.setCenter([0, 51.5]);
-
- geocoder.query('Berlin');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features.some((feature) => feature.place_name.indexOf('Berlin') !== -1),
- 'geocoding works correctly around a location with a 0 lat or lng'
- );
- })
- );
- });
-
- tt.test('proximity can be set to a value with a 0 lat or lng', function(t) {
- t.plan(1);
-
- setup({});
-
- map.setZoom(13);
- map.setCenter([32.58, 0]);
- geocoder.setProximity({ longitude: 32.58, latitude: 0});
-
- geocoder.query('ent');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features[0].place_name.indexOf('Entebbe') !== -1,
- 'proximity applied correctly to location including a zero in geocoding request'
- );
- })
- );
- });
-
- tt.test('proximity can be set to a value of "ip"', function(t) {
- t.plan(1)
-
- setup({trackProximity: false});
-
- geocoder.setProximity('ip');
- geocoder.query('par');
-
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(e.features.length > 0,
- 'proximity=ip successfully returned results'
- );
- })
- );
-
-
- })
-
- tt.test('options.render', function(t){
- t.plan(3);
- setup({
- render: function(feature){
- return 'feature id is ' + feature.id
- }
- });
-
- var fixture = {
- id: 'abc123',
- place_name: 'San Francisco, California'
- }
-
- t.ok(geocoder._typeahead.render, 'sets the render function on the typeahead');
- t.equals(typeof(geocoder._typeahead.render), 'function', 'the render function on the typeahead is a function');
- t.equals(geocoder._typeahead.render(fixture), 'feature id is abc123', 'render function is applied properly on the typeahead');
- })
-
- tt.test('setRenderFunction with no input', function(t){
- t.plan(2);
- setup({});
- var result = geocoder.setRenderFunction();
- t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set even when no input is passed');
- t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance');
- });
-
- tt.test('setRenderFunction with function input', function(t){
- t.plan(2);
- setup({});
- var result = geocoder.setRenderFunction(function(item){return item.place_name});
- t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set');
- t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance');
- });
-
- tt.test('getRenderFunction default', function(t){
- t.plan(2);
- setup({});
- var result = geocoder.getRenderFunction();
- t.ok(result, 'value is always returned');
- t.equals(typeof(result), 'function', 'function is always returned');
- })
-
- tt.test('getRenderFunction', function(t){
- t.plan(2);
- setup({render: function(item){return item.place_name}});
- var result = geocoder.getRenderFunction();
- t.ok(result, 'value is returned when a custom function is set');
- t.equals(typeof(result), 'function', 'function is returned when a custom function is set');
- })
-
- tt.test('options.getItemValue', function(t){
- setup({
- getItemValue: function(feature){
- return 'feature id is ' + feature.id
- }
- });
-
- var fixture = {
- id: 'abc123',
- place_name: 'San Francisco, California'
- }
-
- t.ok(geocoder._typeahead.getItemValue, 'sets the get item function on the typeahead');
- t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function');
- t.equals(geocoder._typeahead.getItemValue(fixture), 'feature id is abc123', 'getItemValue function is applied properly on the typeahead');
- t.end();
- });
-
- tt.test('options.getItemValue default', function(t){
- setup({});
-
- var fixture = {
- id: 'abc123',
- place_name: 'San Francisco, California'
- }
-
- t.ok(geocoder._typeahead.getItemValue, 'the get item function on the typeahead is set by default');
- t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function by default');
- t.equals(geocoder._typeahead.getItemValue(fixture), 'San Francisco, California', 'the getItemValue uses the place_name by default');
- t.end()
- });
-
- tt.test('options.flyTo [false]', function(t){
- t.plan(1)
- setup({
- flyTo: false
- });
-
- var mapFlyMethod = sinon.spy(map, "flyTo");
- geocoder.query('Golden Gate Bridge');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(mapFlyMethod.notCalled, "The map flyTo was not called when the option was set to false")
- })
- );
- });
-
-
- tt.test('options.flyTo [true]', function(t){
- t.plan(4)
- setup({
- flyTo: true
- });
-
- var mapFlyMethod = sinon.spy(map, "flyTo");
- geocoder.query('Golden Gate Bridge');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(mapFlyMethod.calledOnce, "The map flyTo was called when the option was set to true");
- var calledWithArgs = mapFlyMethod.args[0][0];
- t.equals(+calledWithArgs.center[0].toFixed(4), +-122.4802.toFixed(4), 'the map is directed to fly to the right longitude');
- t.equals(+calledWithArgs.center[1].toFixed(4), +37.8317.toFixed(4), 'the map is directed to fly to the right latitude');
- t.deepEqual(calledWithArgs.zoom, 16, 'the map is directed to fly to the right zoom');
- })
- );
- });
-
- tt.test('options.flyTo [object]', function(t){
- t.plan(5)
- setup({
- flyTo: {
- speed: 5,
- zoom: 4,
- center: [0, 0]
- }
- });
-
- var mapFlyMethod = sinon.spy(map, "flyTo");
- geocoder.query('Golden Gate Bridge');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(mapFlyMethod.calledOnce, "The map flyTo was called when the option was set to true");
- var calledWithArgs = mapFlyMethod.args[0][0];
- t.equals(+calledWithArgs.center[0].toFixed(4), +-122.4802.toFixed(4), 'the map is directed to fly to the right longitude');
- t.equals(+calledWithArgs.center[1].toFixed(4), +37.8317.toFixed(4), 'the map is directed to fly to the right latitude'); t.deepEqual(calledWithArgs.zoom, 4, 'the selected result overrides the constructor zoom option');
- t.deepEqual(calledWithArgs.speed, 5, 'speed argument is passed to the flyTo method');
- })
- );
- });
-
-
- tt.test('options.flyTo object on feature with bounding box', function(t){
- t.plan(2 )
- setup({
- flyTo: {
- speed: 5
- }
- });
-
- var mapFlyMethod = sinon.spy(map, "fitBounds");
- geocoder.query('Brazil');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(mapFlyMethod.calledOnce, "The map flyTo was called when the option was set to true");
- var calledWithArgs = mapFlyMethod.args[0][1];
- t.deepEqual(calledWithArgs.speed, 5, 'speed argument is passed to the flyTo method');
- })
- );
- });
-
-
- tt.test('options.flyTo object on bounding box excepted feature', function(t){
- t.plan(2)
- setup({
- flyTo: {
- speed: 5
- }
- });
-
- var mapFlyMethod = sinon.spy(map, "fitBounds");
- geocoder.query('Canada');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(mapFlyMethod.calledOnce, "The map flyTo was called when the option was set to true");
- var calledWithArgs = mapFlyMethod.args[0][1];
- t.deepEqual(calledWithArgs.speed, 5, 'speed argument is passed to the flyTo method');
- })
- );
- });
-
- tt.test('placeholder localization', function(t){
- var ensureLanguages = ['de', 'en', 'fr', 'it', 'nl', 'ca', 'cs', 'fr', 'he', 'hu', 'is', 'ja', 'ka', 'ko', 'lv', 'ka', 'ko', 'lv', 'nb', 'pl', 'pt', 'sk', 'sl', 'sr', 'th', 'zh'];
- ensureLanguages.forEach(function(languageTag){
- t.equals(typeof(localization.placeholder[languageTag]), 'string', 'localized placeholder value is present for language=' + languageTag);
- });
- t.end();
- });
-
- tt.test('options.marker [true]', function(t) {
- t.plan(2);
-
- setup({
- marker: true,
- mapboxgl: mapboxgl
- });
- var markerConstructorSpy = sinon.spy(mapboxgl, "Marker");
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(markerConstructorSpy.calledOnce, "a new marker is added to the map");
- var calledWithOptions = markerConstructorSpy.args[0][0];
- t.equals(calledWithOptions.color, '#4668F2', 'a default color is set');
- markerConstructorSpy.restore();
- })
- );
- });
-
- tt.test('options.marker [constructor properties]', function(t) {
- t.plan(4);
-
- setup({
- marker: {
- color: "purple",
- draggable: true,
- anchor: 'top'
- },
- mapboxgl: mapboxgl
- });
- var markerConstructorSpy = sinon.spy(mapboxgl, "Marker");
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(markerConstructorSpy.calledOnce, "a new marker is added to the map");
- var calledWithOptions = markerConstructorSpy.args[0][0];
- t.equals(calledWithOptions.color, 'purple', "sets the correct color property");
- t.equals(calledWithOptions.draggable, true, "sets the correct draggable property");
- t.equals(calledWithOptions.anchor, 'top', "default anchor is overriden by custom properties");
- markerConstructorSpy.restore();
- })
- );
- });
-
- tt.test('options.marker [false]', function(t) {
- t.plan(1);
-
- setup({
- marker: false
- });
- var markerConstructorSpy = sinon.spy(mapboxgl, "Marker");
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- t.ok(markerConstructorSpy.notCalled, "a new marker is not added to the map");
- markerConstructorSpy.restore();
- })
- );
- });
-
- tt.test('geocode#onRemove', function(t){
- setup({marker: true});
-
- var removeMarkerMethod = sinon.spy(geocoder, "_removeMarker");
-
- geocoder.onRemove();
-
- t.ok(removeMarkerMethod.calledOnce, 'markers are removed when the plugin is removed');
- t.equals(geocoder._map, null, "the map context is removed from the geocoder when the plugin is removed");
-
- t.end();
- })
- tt.test('geocoder#setLanguage', function(t){
- setup({language: 'de-DE'});
- t.equals(geocoder.options.language, 'de-DE', 'the correct language is set on initialization');
- geocoder.setLanguage('en-US');
- t.equals(geocoder.options.language, 'en-US', 'the language is changed in the geocoder options');
- t.end();
- });
-
- tt.test('geocoder#getLanguage', function(t){
- setup({language: 'de-DE'});
- t.equals(geocoder.getLanguage(), 'de-DE', 'getLanguage returns the right language');
- t.end();
- });
-
- tt.test('geocoder#getZoom', function(t){
- setup({zoom: 12});
- t.equals(geocoder.getZoom(), 12, 'getZoom returns the right zoom' );
- t.end();
- });
-
- tt.test('geocoder#setZoom', function(t){
- setup({zoom: 14});
- t.equals(geocoder.options.zoom, 14, 'the correct zoom is set on initialization');
- geocoder.setZoom(17);
- t.equals(geocoder.options.zoom, 17, 'the zoom is changed in the geocoder options');
- t.end();
- });
-
- tt.test('geocoder#getFlyTo', function(t){
- setup({flyTo: false});
- t.equals(geocoder.getFlyTo(), false, 'getFlyTo returns the right value');
- t.end();
- });
-
- tt.test('geocoder#setFlyTo', function(t){
- setup({flyTo: false});
- t.equals(geocoder.options.flyTo, false, 'the correct flyTo option is set on initialization');
- geocoder.setFlyTo({speed: 25});
- t.deepEqual(geocoder.options.flyTo, {speed: 25}, 'the flyTo option is changed in the geocoder options');
- t.end();
- });
-
- tt.test('geocoder#getPlaceholder', function(t){
- setup({placeholder: 'Test'});
- t.equals(geocoder.getPlaceholder(), 'Test', 'getPlaceholder returns the right value');
- t.end();
- });
-
- tt.test('geocoder#setPlaceholder', function(t){
- setup({placeholder: 'Test'});
- t.equals(geocoder._inputEl.placeholder, 'Test', 'the right placeholder is set on initialization');
- geocoder.setPlaceholder('Search');
- t.equals(geocoder._inputEl.placeholder, 'Search', 'the placeholder was changed in the UI element');
- t.equals(geocoder.getPlaceholder(), 'Search', 'the placeholder returned from getPlaceholder is the right value');
- t.end();
- });
-
- tt.test('geocoder#getBbox', function(t){
- setup({bbox: [-1,-1,1,1]});
- t.deepEqual(geocoder.getBbox(), [-1, -1, 1, 1], 'getBbox returns the right bounding box');
- t.end();
- });
-
- tt.test('geocoder#setBbox', function(t){
- setup({bbox: [-1,-1,1,1]});
- t.deepEqual(geocoder.options.bbox, [-1, -1, 1, 1], 'getBbox returns the right bounding box');
- geocoder.setBbox([-2, -2, 2, 2])
- t.deepEqual(geocoder.options.bbox, [-2, -2, 2, 2], 'the bounding box option is changed in the geocoder options');
- t.end()
- });
-
- tt.test('geocoder#getCountries', function(t){
- setup({countries: 'ca,us'})
- t.equals(geocoder.getCountries(), 'ca,us', 'getCountries returns the right country list');
- t.end();
- });
-
- tt.test('geocoder#setCountries', function(t){
- setup({countries:'ca'});
- t.equals(geocoder.options.countries, 'ca', 'the right countries are set on initialization');
- geocoder.setCountries("ca,us");
- t.equals(geocoder.options.countries, 'ca,us', 'the countries option is changed in the geocoder options');
- t.end();
- });
-
- tt.test('geocoder#getTypes', function(t){
- setup({types: 'poi'});
- t.equals(geocoder.getTypes(), 'poi', 'getTypes returns the right types list');
- t.end();
- });
-
- tt.test('geocoder#setTypes', function(t){
- setup({types: 'poi'});
- t.equals(geocoder.options.types, 'poi', 'the right types are set on initializations');
- geocoder.setTypes("place,poi");
- t.equals(geocoder.options.types, 'place,poi', 'the types list is changed in the geocoder options');
- t.end();
- });
-
- tt.test('geocoder#getLimit', function(t){
- setup({limit:4});
- t.equals(geocoder.getLimit(), 4, 'getLimit returns the right limit value');
- t.end();
- });
-
- tt.test('geocoder#setLimit', function(t){
- setup({limit: 1});
- t.equals(geocoder.options.limit, 1, 'the correct limit is set on initialization');
- t.equals(geocoder._typeahead.options.limit, 1, 'the correct limit is set on the typeahead');
- geocoder.setLimit(4);
- t.equals(geocoder.options.limit, 4, 'the limit is updated in the geocoder options');
- t.equals(geocoder._typeahead.options.limit, 4, 'the limit is updated in the typeahead options');
- t.end();
- });
-
- tt.test('geocoder#getFilter', function(t){
- setup({filter: function(){ return false}});
- var filter = geocoder.getFilter();
- t.equals(typeof(filter), 'function', 'the filter is a function');
- t.deepEqual(['a', 'b', 'c'].filter(filter), [], 'the correct filter is applied');
- t.end();
- });
-
- tt.test('geocoder#setFilter', function(t){
- setup({filter: function(){return true}});
- var initialFilter = geocoder.getFilter();
- var filtered = ['a', 'b', 'c'].filter(initialFilter);
- t.equals(typeof(initialFilter), 'function', 'the initial filter is a function');
- t.deepEqual(filtered, ['a', 'b', 'c'], 'the initial filter is correctly applied');
- geocoder.setFilter(function(){return false});
- var nextFilter = geocoder.options.filter;
- var nextFiltered = ['a', 'b', 'c'].filter(nextFilter);
- t.equals(typeof(nextFilter), 'function', 'the next filter is a function');
- t.deepEqual(nextFiltered, [], 'the changed filter is correctly applied');
- t.end();
- });
-
- tt.test('geocoder#autocomplete default results', function(t) {
- t.plan(1)
- setup();
- geocoder.query('India');
- geocoder.on('results', once(function(e) {
- t.ok(e.features.some(feature => feature.place_name.indexOf('Indiana') !== -1 ), 'autocomplete is enabled in default responses');
- }));
- });
-
- tt.test('geocoder#getAutocomplete', function(t) {
- setup({autocomplete: false});
- t.equals(geocoder.getAutocomplete(), false, 'getAutocomplete returns the correct autocomplete value');
- t.end();
- });
-
- tt.test('geocoder#setAccessToken', function(t){
- const accessToken = process.env.MapboxAccessToken;
- t.plan(1);
- setup({ accessToken: `${accessToken}#foo` });
- geocoder.setAccessToken(accessToken);
- geocoder.query('pizza');
- geocoder.on('results', function(e) {
- t.equals(
- e.request.client.accessToken,
- accessToken,
- "new access token applied to requests"
- );
- });
- });
-
- tt.test('geocoder#setAutocomplete', function(t){
- t.plan(2);
-
- setup({autocomplete: false});
- geocoder.setAutocomplete(true);
- t.equals(geocoder.options.autocomplete, true, 'the setAutocomplete changes the autocomplete value in the geocoder options');
- geocoder.setAutocomplete(false);
- geocoder.query('India');
- geocoder.on('results', once(function(e) {
- t.ok(e.features.every(feature => feature.place_name.indexOf('Indiana') === -1 ), 'disabling autocomplete correctly affects geocoding results');
- }));
- });
-
- tt.test('geocoder#fuzzyMatch default results', function(t) {
- t.plan(1)
- setup();
- geocoder.query('wahsingtno');
- geocoder.on('results', once(function(e) {
- t.ok(e.features.some(feature => feature.place_name.indexOf('Washington') !== -1 ), 'fuzzyMatch is enabled in default responses');
- }));
- });
-
- tt.test('geocoder#getFuzzyMatch', function(t) {
- setup({fuzzyMatch: false});
- t.equals(geocoder.getFuzzyMatch(), false, 'getFuzzyMatch returns the correct fuzzyMatch value');
- t.end();
- });
-
- tt.test('geocoder#setFuzzyMatch', function(t){
- t.plan(2);
-
- setup({fuzzyMatch: false});
- geocoder.setFuzzyMatch(true);
- t.equals(geocoder.options.fuzzyMatch, true, 'setFuzzyMatch changes the fuzzyMatch value in the geocoder options');
- geocoder.setFuzzyMatch(false);
- geocoder.query('wahsingtno');
- geocoder.on('results', once(function(e) {
- t.equals(e.features.length, 0, 'disabling fuzzyMatch correctly affects geocoding results');
- }));
- });
-
- tt.test('geocoder#routing default results', function(t) {
- t.plan(1)
- setup();
- geocoder.query('The White House');
- geocoder.on('results', once(function(e) {
- t.ok(e.features[0].routable_points === undefined, 'routing (returning routable_points) is disabled in default responses');
- }));
- });
-
- tt.test('geocoder#getRouting', function(t) {
- setup({routing: true});
- t.equals(geocoder.getRouting(), true, 'getRouting returns the correct routing value');
- t.end();
- });
-
- tt.skip('geocoder#setRouting', function(t){
- t.plan(2);
-
- setup({routing: false});
- geocoder.setRouting(true);
- t.equals(geocoder.options.routing, true, 'setRouting changes the routing value in the geocoder options');
- geocoder.query('The White House');
- geocoder.on('results', once(function(e) {
- t.ok(e.features[0].routable_points !== undefined, 'enabling routing returns routable_points in geocoding results');
- }));
- });
-
- tt.test('geocoder#worldview default results', function(t) {
- t.plan(1)
- setup();
- geocoder.query('Taipei');
- geocoder.on('results', once(function(e) {
- t.ok(e.features[0].place_name.indexOf('Taiwan') !== -1, 'worldview defaults to US in responses');
- }));
- });
-
- tt.test('geocoder#getWorldview', function(t) {
- setup({worldview: 'cn'});
- t.equals(geocoder.getWorldview(), 'cn', 'getWorldview returns the correct worldview value');
- t.end();
- });
-
- tt.test('geocoder#setWorldview', function(t){
- t.plan(2);
-
- setup({worldview: 'us'});
- geocoder.setWorldview('cn');
- t.equals(geocoder.options.worldview, 'cn', 'setWorldview changes the worldview value in the geocoder options');
- geocoder.query('Taipei');
- geocoder.on('results', once(function(e) {
- t.ok(e.features[0].place_name.indexOf('China') !== -1, 'setting worldview correctly affects geocoding results');
- }));
- });
-
- tt.test('geocoder#_renderMessage', function(t){
- setup({});
- var typeaheadRenderErrorSpy = sinon.spy(geocoder._typeahead, 'renderError');
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- setTimeout(function() {
- t.notEqual(geocoder._typeahead.data.length, 0, 'the suggestions menu has some options in it after a query');
- geocoder._renderMessage("This is a test ");
- t.equals(geocoder._typeahead.data.length, 0, 'the data was cleared from the suggestions');
- t.equals(geocoder._typeahead.selected, null, 'the selected option was cleared from the suggestions');
- t.ok(typeaheadRenderErrorSpy.calledOnce, 'the renderError method was called exactly once');
- var calledWithArgs = typeaheadRenderErrorSpy.args[0][0];
- t.equals(calledWithArgs, "This is a test ", 'the error rendering function was called with the correct message');
- t.end();
- });
- })
- );
- });
-
- tt.test('geocoder#_renderError', function(t){
- setup({});
- var renderMessageSpy = sinon.spy(geocoder, '_renderMessage');
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- geocoder._renderError();
- t.ok(renderMessageSpy.calledOnce, 'the error render method calls the renderMessage method exactly once');
- var calledWithArgs = renderMessageSpy.args[0][0];
- t.ok(calledWithArgs.indexOf('mapbox-gl-geocoder--error') > -1, 'the error message specifies the correct class');
- t.end();
- })
- );
- });
-
- tt.test('geocoder#_renderNoResults', function(t){
- setup({});
- var renderMessageSpy = sinon.spy(geocoder, '_renderMessage');
-
- geocoder.query('high');
- geocoder.on(
- 'result',
- once(function() {
- geocoder._renderNoResults();
- t.ok(renderMessageSpy.calledOnce, 'the no results render method calls the renderMessage method exactly once');
- var calledWithArgs = renderMessageSpy.args[0][0];
- t.ok(calledWithArgs.indexOf('mapbox-gl-geocoder--error') > -1, 'the info message specifies the correct class');
- t.ok(calledWithArgs.indexOf('mapbox-gl-geocoder--no-results') > -1, 'the info message specifies the correct class');
- t.end();
- })
- );
- });
-
- tt.test('error is shown after an error occurred', function(t){
- setup({});
- geocoder.query('12,');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(e.features.length > 0, 'Some results are returned using and the input is not used for reverse geocoding');
- t.end();
- })
- );
- });
-
- tt.test('error is shown after an error occurred [with local geocoder]', function(t){
- setup({
- localGeocoder: function(){
- return [
- {type:'Feature', geometry: {type: 'Point', coordinates:[-122, 37]}, properties: {}, place_name: 'Golden Gate Bridge', text: 'Golden Gate Bridge', center: [-122, 37]}
- ];
- }
- });
- geocoder.query('12,');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(e.features.length > 0, 'Some results are returned using and the input is not used for reverse geocoding');
- t.end();
- })
- );
- });
-
- tt.test('message is shown if no results are returned', function(t){
- setup({});
- var renderMessageSpy = sinon.spy(geocoder, '_renderNoResults');
- geocoder.query('abcdefghijkl!@#$%^&*()_+'); //this will return no results
- geocoder.on(
- 'results',
- once(function() {
- t.ok(renderMessageSpy.called, 'a message was rendered');
- t.end();
- })
- );
- });
-
- tt.test('no mapbox api call is made if localGeocoderOnly is set', function(t){
- setup({
- localGeocoderOnly: true,
- localGeocoder: function(q){
- return [{
- place_name: q,
- geometry: {
- type: "Point",
- coordinates: [0, 0]
- },
- properties: {},
- id: 'abc.123'
- }]
- }
- });
- t.notOk(geocoder.geocoderService, 'geocoding service is not initialized during localGeocoderOnly mode')
- geocoder.query('Golden Gate Bridge');
- geocoder.on(
- 'results',
- once(function(e) {
- t.ok(
- e.features[0].place_name == "Golden Gate Bridge",
- 'returns the result of the local geocoder'
- );
- t.ok(
- e.features[0].id == "abc.123",
- 'returns the result of the local geocoder'
- )
- t.equals(e.features.length, 1, "returns the correct number of results")
- t.end();
- })
- );
- });
-
- tt.test('does not throw if no access token is set and localGeocoderOnly mode is active', function(t){
- var opts = {
- localGeocoderOnly: true,
- localGeocoder: function(d){
- return [{place_name: d, geometry: {type: "Point", coordinates: [0, 0]}, properties: {}, id: 'abc.123'}]
- }
- }
- // no access token here
- container = document.createElement('div');
- map = new mapboxgl.Map({ container: container });
- geocoder = new MapboxGeocoder(opts);
- t.doesNotThrow(function(){map.addControl(geocoder);}, 'does not throw an error when no access token is set')
- t.end();
- });
-
-
- tt.test('throws an error if localGeocoderOnly mode is active but no localGeocoder is supplied', function(t){
- var opts = {
- localGeocoderOnly: true
- }
- // no access token here
- container = document.createElement('div');
- map = new mapboxgl.Map({ container: container });
- geocoder = new MapboxGeocoder(opts);
- t.throws(function(){map.addControl(geocoder);}, "throws an error if no local geocoder is set")
- t.end();
- });
-
- tt.test('geocoder.lastSelected is reset on input', function(t){
- setup();
- geocoder.lastSelected = "abc123";
- geocoder._onKeyDown(new KeyboardEvent('KeyDown'));
- t.equals(geocoder.lastSelected, null)
- t.end();
- });
-
-
- tt.test('geocoder#onPaste', function(t){
- setup();
- var searchMock = sinon.spy(geocoder, "_geocode")
- var event = new ClipboardEvent('paste', {
- dataType: 'text/plain',
- data: 'Golden Gate Bridge'
- })
- geocoder._onPaste(event);
- t.ok(searchMock.calledOnce, 'the search was triggered');
- const queryArg = searchMock.args[0][0];
- t.equals(queryArg, 'Golden Gate Bridge', 'the paste event triggered the correct geocode');
- searchMock.restore();
- t.end();
- });
-
- tt.test('geocoder#onPaste not triggered when text is too short', function(t){
- setup({
- minLength: 5
- });
- var searchMock = sinon.spy(geocoder, "_geocode")
- var event = new ClipboardEvent('paste', {
- dataType: 'text/plain',
- data: 'abc'
- })
- geocoder._onPaste(event);
- t.notOk(searchMock.calledOnce, 'the search was not triggered');
- searchMock.restore();
- t.end();
- });
-
- tt.test('geocoder#onPaste not triggered when there is no text', function(t){
- setup();
- var searchMock = sinon.spy(geocoder, "_geocode")
- var event = new ClipboardEvent('paste', {
- dataType: 'text/plain',
- data: ''
- })
- geocoder._onPaste(event);
- t.notOk(searchMock.calledOnce, 'the search was not triggered');
- searchMock.restore();
- t.end();
- });
-
- tt.end();
-});
diff --git a/test/test.ui.js b/test/test.ui.js
deleted file mode 100644
index 115a1f7b..00000000
--- a/test/test.ui.js
+++ /dev/null
@@ -1,680 +0,0 @@
-'use strict';
-
-var once = require('lodash.once');
-var MapboxGeocoder = require('../lib/index');
-var mapboxgl = require('mapbox-gl');
-var test = require('tape');
-var sinon = require('sinon');
-
-mapboxgl.accessToken = process.env.MapboxAccessToken;
-
-test('Geocoder#inputControl', function(tt) {
- var container, map, geocoder;
-
- var changeEvent = document.createEvent('HTMLEvents');
- changeEvent.initEvent('change', true, false);
-
- var clickEvent = document.createEvent('HTMLEvents');
- clickEvent.initEvent('click', true, false);
-
- function setup(opts) {
- opts = opts || {};
- opts.accessToken = mapboxgl.accessToken;
- opts.enableEventLogging = false;
- container = document.createElement('div');
- map = new mapboxgl.Map({
- container: container,
- projection: 'mercator',
- style: 'mapbox://styles/mapbox/standard',
- });
- geocoder = new MapboxGeocoder(opts);
- map.addControl(geocoder);
- }
-
- tt.test('input', function(t) {
- setup({
- types: 'place',
- mapboxgl: mapboxgl
- });
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var clearEl = container.querySelector('.mapboxgl-ctrl-geocoder button');
-
- t.plan(9);
-
- geocoder.on(
- 'loading',
- once(function(e) {
- t.pass('load event was emitted');
- t.equals(e.query, '-79,43', 'loading event passes query parameter');
- })
- );
-
- geocoder.on(
- 'result',
- once(function() {
- t.ok(inputEl.value, 'value populates in input');
- t.ok(geocoder.mapMarker, 'a marker is created to show the selection')
- clearEl.dispatchEvent(clickEvent);
- })
- );
-
- geocoder.on(
- 'clear',
- once(function() {
- t.pass('input was cleared');
- setTimeout(function () {
- t.equals(geocoder.fresh, false, 'the geocoder is fresh again')
- t.equals(geocoder.mapMarker, null, 'the marker was reset on clear')
-
- geocoder.setInput('Paris');
- t.equals(inputEl.value, 'Paris', 'value populates in input');
-
- geocoder.setInput('90,45');
- t.equals(
- inputEl.value,
- '90,45',
- 'valid LngLat value populates in input'
- );
- t.end();
- });
- })
- );
-
- geocoder.query('-79,43');
- });
-
- tt.test('placeholder', function(t) {
- t.plan(1);
- setup({ placeholder: 'foo to the bar' });
- t.equal(
- map.getContainer().querySelector('.mapboxgl-ctrl-geocoder input')
- .placeholder,
- 'foo to the bar',
- 'placeholder is custom'
- );
- t.end();
- });
-
- tt.test('get language when a language is provided in the options', function(t){
- t.plan(1);
- setup({language: 'en-UK'});
- t.equals(geocoder.options.language, 'en-UK', 'uses the right language when set directly as an option');
- });
-
- tt.test('get language when a language obtained from the browser', function(t){
- t.plan(3);
- setup({});
- t.ok(geocoder.options.language, 'language is defined');
- t.ok(typeof(geocoder.options.language), 'string', 'language is defined as a string');
- t.ok(geocoder.options.language.split("-").length, 2, 'language is defined as an iso tag with a subtag');
- })
-
-
- tt.test('placeholder language localization', function(t){
- t.plan(1);
- setup({language: 'de-DE'});
- t.equal(
- map.getContainer().querySelector('.mapboxgl-ctrl-geocoder input')
- .placeholder,
- 'Suche',
- 'placeholder is localized based on language'
- );
- t.end();
- });
-
- tt.test('placeholder language localization with more than one language specified', function(t){
- t.plan(1);
- setup({language: 'de-DE,lv'});
- t.equal(
- map.getContainer().querySelector('.mapboxgl-ctrl-geocoder input')
- .placeholder,
- 'Suche',
- 'placeholder is localized based on language'
- );
- t.end();
- });
-
- tt.test('clear is not called on keydown (tab), no focus trap', function(t){
- t.plan(3);
- setup({});
-
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var focusSpy = sinon.spy(inputEl, 'focus');
- inputEl.focus();
- t.equal(focusSpy.called, true, 'input is focused');
- var keySpy = sinon.spy(geocoder,'_onKeyDown');
- var clearSpy = sinon.spy(geocoder, 'clear');
- geocoder._onKeyDown(new KeyboardEvent('keydown',{ code: 9, keyCode: 9 }));
- t.equal(keySpy.called, true, '_onKeyDown called');
- t.equal(clearSpy.called, false, 'clear should not be called');
-
- t.end();
- });
-
- tt.test('clear is called on keydown (not tab)', function(t){
- t.plan(3);
- setup({});
-
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var focusSpy = sinon.spy(inputEl, 'focus');
- inputEl.focus();
- t.equal(focusSpy.called, true, 'input is focused');
- var keySpy = sinon.spy(geocoder,'_onKeyDown');
- var clearSpy = sinon.spy(geocoder, 'clear');
- geocoder._onKeyDown(new KeyboardEvent('keydown',{ code: 1, keyCode: 1 }));
- t.equal(keySpy.called, true, '_onKeyDown called');
- t.equal(clearSpy.called, true, 'clear should be called');
-
- t.end();
- });
-
- tt.test('options.clearAndBlurOnEsc=true clears and blurs on escape', function(t) {
- t.plan(4);
- setup({
- clearAndBlurOnEsc: true
- });
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var focusSpy = sinon.spy(inputEl, 'focus');
- var blurSpy = sinon.spy(inputEl, 'blur');
-
- inputEl.focus();
- t.equal(focusSpy.called, true, 'input is focused');
-
- geocoder.setInput('testval');
- t.equal(inputEl.value, 'testval');
-
- geocoder._onKeyDown(new KeyboardEvent('keydown',{ code: 1, keyCode: 27 }));
-
- t.equal(inputEl.value, '', 'value is cleared');
- t.equal(blurSpy.called, true, 'input is blurred');
-
- t.end();
- });
-
- tt.test('options.clearAndBlurOnEsc=false does not clear and blur on escape', function(t) {
- t.plan(2);
- setup({
- clearAndBlurOnEsc: false
- });
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var focusSpy = sinon.spy(inputEl, 'focus');
- var blurSpy = sinon.spy(inputEl, 'blur');
-
- inputEl.focus();
- t.equal(focusSpy.called, true, 'input is focused');
-
- geocoder._onKeyDown(new KeyboardEvent('keydown',{ code: 1, keyCode: 27 }));
-
- t.equal(blurSpy.called, false, 'input is still focused');
-
- t.end();
- });
-
- tt.test('options.collapsed=true', function(t) {
- t.plan(1);
- setup({
- collapsed: true
- });
- var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
- t.equal(wrapper.classList.contains('mapboxgl-ctrl-geocoder--collapsed'), true, 'mapboxgl-ctrl-geocoder has `mapboxgl-ctrl-geocoder--collapsed` class');
- t.end();
- });
-
- tt.test('options.collapsed=true, focus', function(t) {
- t.plan(1);
- setup({
- collapsed: true
- });
- var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- // focus input, remove mapboxgl-ctrl-geocoder--collapsed
- var focusEvent = document.createEvent('Event');
- focusEvent.initEvent("focus", true, true);
- inputEl.dispatchEvent(focusEvent);
- t.equal(wrapper.classList.contains('mapboxgl-ctrl-geocoder--collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `mapboxgl-ctrl-geocoder--collapsed` class when inputEl in focus');
- t.end();
- });
-
-
- // This test is imperfect, because I cannot get smokestack to call the blur
- // listener no matter what I do. As a workaround, I'm:
- // 1. Testing that the option was set correctly.
- // 2. directly calling _clearOnBlur and asserting that it behaves as expected.
- tt.test('options.clearOnBlur=true', function(t) {
- t.plan(5);
- setup({
- clearOnBlur: true
- });
- t.equal(geocoder.options.clearOnBlur, true);
-
- var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
- var focusSpy = sinon.spy(inputEl, 'focus');
-
- geocoder.setInput('testval');
- t.equal(inputEl.value, 'testval');
-
- inputEl.focus();
-
- // Call _clearOnBlur(), without a relatedTarget;
- geocoder._clearOnBlur({
- relatedTarget: null,
- preventDefault: function() {
- return null;
- }
- });
-
- t.equal(inputEl.value, 'testval', 'not yet cleared');
-
- // Directly call _clearOnBlur(), with a relatedTarget;
- geocoder._clearOnBlur({
- relatedTarget: document.body,
- preventDefault: function() {
- return null;
- }
- });
-
- t.equal(focusSpy.calledOnce, true), 'called once, focus should not get re-set on input';
- t.equal(inputEl.value, '', 'cleared');
- t.end();
-
- });
-
- tt.test('options.clearOnBlur=false by default', function(t) {
- t.plan(1);
- setup();
- t.equal(geocoder.options.clearOnBlur, false);
- t.end();
- });
-
- tt.test('options.collapsed=true, hover', function(t) {
- t.plan(1);
- setup({
- collapsed: true
- });
- var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
- // hover input, remove mapboxgl-ctrl-geocoder--collapsed
- var hoverEvent = document.createEvent('Event');
- hoverEvent.initEvent("mouseenter", true, true);
- wrapper.dispatchEvent(hoverEvent);
- t.equal(wrapper.classList.contains('mapboxgl-ctrl-geocoder--collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `mapboxgl-ctrl-geocoder--collapsed` class when wrapper hovered');
- t.end();
- });
-
- tt.test('options.collapsed=false', function(t) {
- t.plan(1);
- setup({
- collapsed: false
- });
- var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
- t.equal(wrapper.classList.contains('mapboxgl-ctrl-geocoder--collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `mapboxgl-ctrl-geocoder--collapsed` class');
- t.end();
- });
-
- tt.test('createIcon', function(t) {
- t.plan(1);
- setup({ });
- var icon = geocoder.createIcon('search', '