From bf123056004567c657671f2ebd71bf24c747dcae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 20 Feb 2026 12:39:04 +0400 Subject: [PATCH] Add full-text search Add a search box with a quick results popover, as well full results in the sidebar on pressing enter. --- app/components/app-header.gjs | 3 + app/components/map.gjs | 17 +- app/components/places-sidebar.gjs | 26 +-- app/components/search-box.gjs | 178 ++++++++++++++++++ app/components/settings-pane.gjs | 46 +++-- app/controllers/search.js | 10 + app/routes/search.js | 111 +++++++---- app/services/map-ui.js | 5 + app/services/photon.js | 12 +- app/styles/app.css | 160 ++++++++++++++++ tests/acceptance/search-test.js | 147 +++++++++++++++ .../components/app-header-test.gjs | 19 ++ .../components/place-details-test.gjs | 37 ++++ .../components/search-box-test.gjs | 128 +++++++++++++ tests/unit/services/photon-test.js | 47 +++++ 15 files changed, 878 insertions(+), 68 deletions(-) create mode 100644 app/components/search-box.gjs create mode 100644 app/controllers/search.js create mode 100644 tests/acceptance/search-test.js create mode 100644 tests/integration/components/app-header-test.gjs create mode 100644 tests/integration/components/place-details-test.gjs create mode 100644 tests/integration/components/search-box-test.gjs diff --git a/app/components/app-header.gjs b/app/components/app-header.gjs index baad34a..d04b5bc 100644 --- a/app/components/app-header.gjs +++ b/app/components/app-header.gjs @@ -5,6 +5,7 @@ import { action } from '@ember/object'; import { on } from '@ember/modifier'; import Icon from '#components/icon'; import UserMenu from '#components/user-menu'; +import SearchBox from '#components/search-box'; export default class AppHeaderComponent extends Component { @service storage; @@ -31,6 +32,8 @@ export default class AppHeaderComponent extends Component { > + +
diff --git a/app/components/map.gjs b/app/components/map.gjs index dcb61b9..09dc19c 100644 --- a/app/components/map.gjs +++ b/app/components/map.gjs @@ -110,6 +110,10 @@ export default class MapComponent extends Component { }), }); + // Initialize the UI service with the map center + const initialCenter = toLonLat(view.getCenter()); + this.mapUi.updateCenter(initialCenter[1], initialCenter[0]); + apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty'); this.searchOverlayElement = document.createElement('div'); @@ -645,12 +649,18 @@ export default class MapComponent extends Component { handleMapMove = async () => { if (!this.mapInstance) return; + const view = this.mapInstance.getView(); + const center = toLonLat(view.getCenter()); + this.mapUi.updateCenter(center[1], center[0]); + // If in creation mode, update the coordinates in the service AND the URL if (this.mapUi.isCreating) { // Calculate coordinates under the crosshair element // We need the pixel position of the crosshair relative to the map viewport // The crosshair is positioned via CSS, so we can use getBoundingClientRect - const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect(); + const mapRect = this.mapInstance + .getTargetElement() + .getBoundingClientRect(); const crosshairRect = this.crosshairElement.getBoundingClientRect(); const centerX = @@ -786,10 +796,9 @@ export default class MapComponent extends Component { const queryParams = { lat: lat.toFixed(6), lon: lon.toFixed(6), + q: null, // Clear q to force spatial search + selected: selectedFeatureName || null, }; - if (selectedFeatureName) { - queryParams.q = selectedFeatureName; - } this.router.transitionTo('search', { queryParams }); }; diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs index 359028c..bd1afaa 100644 --- a/app/components/places-sidebar.gjs +++ b/app/components/places-sidebar.gjs @@ -23,8 +23,10 @@ export default class PlacesSidebar extends Component { if (lat && lon) { this.router.transitionTo('place.new', { queryParams: { lat, lon } }); } else { - // Fallback (shouldn't happen in search context) - this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } }); + // Fallback (shouldn't happen in search context) + this.router.transitionTo('place.new', { + queryParams: { lat: 0, lon: 0 }, + }); } } @@ -152,7 +154,7 @@ export default class PlacesSidebar extends Component { {{on "click" this.clearSelection}} > {{else}} -

Nearby

+

Nearby

{{/if}} {{/each}} diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs new file mode 100644 index 0000000..f0e1dc4 --- /dev/null +++ b/app/components/search-box.gjs @@ -0,0 +1,178 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import { fn } from '@ember/helper'; +import { debounce } from '@ember/runloop'; +import Icon from '#components/icon'; + +export default class SearchBoxComponent extends Component { + @service photon; + @service router; + @service mapUi; + @service map; // Assuming we might need map context, but mostly we use router + + @tracked query = ''; + @tracked results = []; + @tracked isFocused = false; + @tracked isLoading = false; + + get showPopover() { + return this.isFocused && this.results.length > 0; + } + + @action + handleInput(event) { + this.query = event.target.value; + if (this.query.length < 2) { + this.results = []; + return; + } + + debounce(this, this.performSearch, 300); + } + + async performSearch() { + if (this.query.length < 2) return; + + this.isLoading = true; + try { + // Use map center if available for location bias + let lat, lon; + if (this.mapUi.currentCenter) { + ({ lat, lon } = this.mapUi.currentCenter); + } + const results = await this.photon.search(this.query, lat, lon); + this.results = results; + } catch (e) { + console.error('Search failed', e); + this.results = []; + } finally { + this.isLoading = false; + } + } + + @action + handleFocus() { + this.isFocused = true; + if (this.query.length >= 2 && this.results.length === 0) { + this.performSearch(); + } + } + + @action + handleBlur() { + // Delay hiding so clicks on results can register + setTimeout(() => { + this.isFocused = false; + }, 200); + } + + @action + handleSubmit(event) { + event.preventDefault(); + if (!this.query) return; + + let queryParams = { q: this.query, selected: null }; + + if (this.mapUi.currentCenter) { + const { lat, lon } = this.mapUi.currentCenter; + queryParams.lat = parseFloat(lat).toFixed(4); + queryParams.lon = parseFloat(lon).toFixed(4); + } + + this.router.transitionTo('search', { queryParams }); + this.isFocused = false; + } + + @action + selectResult(place) { + this.query = place.title; + this.results = []; // Hide popover + + // If it has an OSM ID, go to place details + if (place.osmId) { + // Format: osm:node:123 + // place.osmType is already normalized to 'node', 'way', or 'relation' by PhotonService + const id = `osm:${place.osmType}:${place.osmId}`; + this.router.transitionTo('place', id); + } else { + // Just a location (e.g. from Photon without OSM ID, though unlikely for Photon) + // Or we can treat it as a search query + this.router.transitionTo('search', { + queryParams: { + q: place.title, + lat: place.lat, + lon: place.lon, + selected: null, + }, + }); + } + } + + @action + clear() { + this.query = ''; + this.results = []; + this.router.transitionTo('index'); // Or stay on current page? + // Usually clear just clears the input. + } + + +} diff --git a/app/components/settings-pane.gjs b/app/components/settings-pane.gjs index 153a4c2..316edbc 100644 --- a/app/components/settings-pane.gjs +++ b/app/components/settings-pane.gjs @@ -62,7 +62,10 @@ export default class SettingsPane extends Component { {{#each this.settings.overpassApis as |api|}} @@ -73,24 +76,45 @@ export default class SettingsPane extends Component {

About

- Marco (as in Marco Polo) is an unhosted maps application - that respects your privacy and choices. + Marco + (as in + Marco Polo) is an unhosted maps application that respects your + privacy and choices.

- Connect your own remote storage to sync place bookmarks across - apps and devices. + Connect your own + remote storage + to sync place bookmarks across apps and devices.

  • - + Source Code - (AGPL) + + (AGPL)
  • - + Map Data © OpenStreetMap
    • diff --git a/app/controllers/search.js b/app/controllers/search.js new file mode 100644 index 0000000..a61e116 --- /dev/null +++ b/app/controllers/search.js @@ -0,0 +1,10 @@ +import Controller from '@ember/controller'; + +export default class SearchController extends Controller { + queryParams = ['lat', 'lon', 'q', 'selected']; + + lat = null; + lon = null; + q = null; + selected = null; +} diff --git a/app/routes/search.js b/app/routes/search.js index 6ec1323..4b33af0 100644 --- a/app/routes/search.js +++ b/app/routes/search.js @@ -5,6 +5,7 @@ import { getDistance } from '../utils/geo'; export default class SearchRoute extends Route { @service osm; + @service photon; @service mapUi; @service storage; @service router; @@ -13,50 +14,76 @@ export default class SearchRoute extends Route { lat: { refreshModel: true }, lon: { refreshModel: true }, q: { refreshModel: true }, + selected: { refreshModel: true }, }; async model(params) { - // If no coordinates, we can't search - if (!params.lat || !params.lon) { - return []; + const lat = params.lat ? parseFloat(params.lat) : null; + const lon = params.lon ? parseFloat(params.lon) : null; + let pois = []; + + // Case 1: Text Search (q parameter present) + if (params.q) { + // Search with Photon (using lat/lon for bias if available) + pois = await this.photon.search(params.q, lat, lon); + + // Search local bookmarks by name + const queryLower = params.q.toLowerCase(); + const localMatches = this.storage.savedPlaces.filter((p) => { + return ( + p.title?.toLowerCase().includes(queryLower) || + p.description?.toLowerCase().includes(queryLower) + ); + }); + + // Merge local matches + localMatches.forEach((local) => { + const exists = pois.find( + (poi) => + (local.osmId && poi.osmId === local.osmId) || + (poi.id && poi.id === local.id) + ); + if (!exists) { + pois.push(local); + } + }); } + // Case 2: Nearby Search (lat/lon present, no q) + else if (lat && lon) { + const searchRadius = 50; // Default radius - const lat = parseFloat(params.lat); - const lon = parseFloat(params.lon); - const searchRadius = params.q ? 30 : 50; + // Fetch POIs from Overpass + pois = await this.osm.getNearbyPois(lat, lon, searchRadius); - // Fetch POIs - let pois = await this.osm.getNearbyPois(lat, lon, searchRadius); + // Get cached/saved places in search radius + const localMatches = this.storage.savedPlaces.filter((p) => { + const dist = getDistance(lat, lon, p.lat, p.lon); + return dist <= searchRadius; + }); - // Get cached/saved places in search radius - const localMatches = this.storage.savedPlaces.filter((p) => { - const dist = getDistance(lat, lon, p.lat, p.lon); - return dist <= searchRadius; - }); + // Merge local matches + localMatches.forEach((local) => { + const exists = pois.find( + (poi) => + (local.osmId && poi.osmId === local.osmId) || + (poi.id && poi.id === local.id) + ); - // Add local matches to the list if they aren't already there - // We use osmId to deduplicate if possible - localMatches.forEach((local) => { - const exists = pois.find( - (poi) => - (local.osmId && poi.osmId === local.osmId) || - (poi.id && poi.id === local.id) - ); + if (!exists) { + pois.push(local); + } + }); - if (!exists) { - pois.push(local); - } - }); - - // Sort by distance from click - pois = pois - .map((p) => { - return { - ...p, - _distance: getDistance(lat, lon, p.lat, p.lon), - }; - }) - .sort((a, b) => a._distance - b._distance); + // Sort by distance from click + pois = pois + .map((p) => { + return { + ...p, + _distance: getDistance(lat, lon, p.lat, p.lon), + }; + }) + .sort((a, b) => a._distance - b._distance); + } // Check if any of these are already bookmarked // We resolve them to the bookmark version if they exist @@ -69,18 +96,24 @@ export default class SearchRoute extends Route { } afterModel(model, transition) { - const { q } = transition.to.queryParams; + const { q, selected } = transition.to.queryParams; // Heuristic Match Logic (ported from MapComponent) - if (q && model.length > 0) { + // If 'selected' is provided (from map click), try to find that specific feature. + // If 'q' is provided (from text search), try to find an exact match to auto-select. + const targetName = selected || q; + + if (targetName && model.length > 0) { let matchedPlace = null; // 1. Exact Name Match matchedPlace = model.find( - (p) => p.osmTags && (p.osmTags.name === q || p.osmTags['name:en'] === q) + (p) => + p.osmTags && + (p.osmTags.name === targetName || p.osmTags['name:en'] === targetName) ); - // 2. High Proximity Match (<= 10m) + // 2. High Proximity Match (<= 10m) - Only if we don't have a name match // Note: MapComponent had logic for <=20m + type match. // We might want to pass the 'type' in queryParams if we want to be that precise. // For now, let's stick to name or very close proximity. diff --git a/app/services/map-ui.js b/app/services/map-ui.js index abfa140..239c8d5 100644 --- a/app/services/map-ui.js +++ b/app/services/map-ui.js @@ -7,6 +7,7 @@ export default class MapUiService extends Service { @tracked isCreating = false; @tracked creationCoordinates = null; @tracked returnToSearch = false; + @tracked currentCenter = null; selectPlace(place) { this.selectedPlace = place; @@ -38,4 +39,8 @@ export default class MapUiService extends Service { updateCreationCoordinates(lat, lon) { this.creationCoordinates = { lat, lon }; } + + updateCenter(lat, lon) { + this.currentCenter = { lat, lon }; + } } diff --git a/app/services/photon.js b/app/services/photon.js index 4ea76cd..f096ced 100644 --- a/app/services/photon.js +++ b/app/services/photon.js @@ -12,8 +12,8 @@ export default class PhotonService extends Service { }); if (lat && lon) { - params.append('lat', String(lat)); - params.append('lon', String(lon)); + params.append('lat', parseFloat(lat).toFixed(4)); + params.append('lon', parseFloat(lon).toFixed(4)); } const url = `${this.baseUrl}?${params.toString()}`; @@ -61,12 +61,18 @@ export default class PhotonService extends Service { const description = addressParts.join(', '); const title = props.name || description || 'Unknown Place'; + const osmTypeMap = { + N: 'node', + W: 'way', + R: 'relation', + }; + return { title, lat, lon, osmId: props.osm_id, - osmType: props.osm_type, // 'N', 'W', 'R' + osmType: osmTypeMap[props.osm_type] || props.osm_type, // 'node', 'way', 'relation' osmTags: props, // Keep all properties as tags for now description: props.name ? description : addressParts.slice(1).join(', '), source: 'photon', diff --git a/app/styles/app.css b/app/styles/app.css index d0b8f14..10f7023 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -74,6 +74,11 @@ body { pointer-events: auto; /* Re-enable clicks for buttons */ } +.header-left { + display: flex; + align-items: center; +} + .btn-press { transition: transform 0.1s; } @@ -750,3 +755,158 @@ button.create-place { padding-bottom: env(safe-area-inset-bottom, 20px); } } + +/* Search Box Component */ +.search-box { + position: relative; + width: 100%; + max-width: 320px; + margin-left: 1rem; + z-index: 3002; /* Higher than menu button to be safe */ +} + +@media (max-width: 768px) { + .search-box { + max-width: 200px; /* Smaller on mobile */ + margin-left: 0.5rem; + } +} + +.search-form { + display: flex; + align-items: center; + background: white; + border-radius: 24px; /* Pill shape */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); + padding: 0 0.75rem; + height: 40px; + transition: box-shadow 0.2s; +} + +.search-form:focus-within { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.search-icon { + display: flex; + align-items: center; + color: #666; + margin-right: 0.5rem; +} + +.search-input { + border: none; + background: transparent; + flex: 1; + height: 100%; + font-size: 1rem; + color: #333; + outline: none; + width: 100%; + padding: 0; + /* Remove native search cancel button in WebKit */ + -webkit-appearance: none; +} + +/* Remove 'x' from search input in Chrome/Safari */ +.search-input::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.search-clear-btn { + background: none; + border: none; + padding: 4px; + cursor: pointer; + display: flex; + align-items: center; + color: #999; + border-radius: 50%; +} + +.search-clear-btn:hover { + background: #f0f0f0; + color: #666; +} + +/* Search Results Popover */ +.search-results-popover { + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 8px; + background: white; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + overflow: hidden; + max-height: 400px; + overflow-y: auto; + z-index: 3002; +} + +.search-results-list { + list-style: none; + padding: 0; + margin: 0; +} + +.search-result-item { + width: 100%; + display: flex; + align-items: center; /* Vertical center alignment */ + gap: 0.75rem; + padding: 0.75rem 1rem; + border: none; + background: white; + text-align: left; + cursor: pointer; + transition: background 0.1s; + border-bottom: 1px solid #f0f0f0; +} + +.search-result-item:last-child { + border-bottom: none; +} + +.search-result-item:hover, +.search-result-item:focus { + background: #f5f5f5; + outline: none; +} + +.result-icon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: #f0f0f0; + border-radius: 50%; + flex-shrink: 0; + color: #666; +} + +.result-info { + display: flex; + flex-direction: column; + overflow: hidden; /* For text truncation if needed */ +} + +.result-title { + font-weight: 500; + color: #333; + font-size: 0.95rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.result-desc { + font-size: 0.8rem; + color: #777; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; +} diff --git a/tests/acceptance/search-test.js b/tests/acceptance/search-test.js new file mode 100644 index 0000000..abac40f --- /dev/null +++ b/tests/acceptance/search-test.js @@ -0,0 +1,147 @@ +import { module, test } from 'qunit'; +import { visit, currentURL } from '@ember/test-helpers'; +import { setupApplicationTest } from 'marco/tests/helpers'; +import Service from '@ember/service'; + +module('Acceptance | search', function (hooks) { + setupApplicationTest(hooks); + + test('visiting /search with q parameter performs text search', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search(query) { + if (query === 'Berlin') { + return [ + { + title: 'Berlin', + lat: 52.52, + lon: 13.405, + osmId: '123', + osmType: 'R', + description: 'City in Germany', + }, + { + title: 'Berlin Alexanderplatz', + lat: 52.521, + lon: 13.41, + osmId: '456', + osmType: 'N', + description: 'Square in Berlin', + }, + ]; + } + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Storage Service (empty) + class MockStorageService extends Service { + savedPlaces = []; + findPlaceById() { + return null; + } + rs = { + on: () => {}, + }; + // Add placesInView since map component accesses it + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + + this.owner.register('service:storage', MockStorageService); + + await visit('/search?q=Berlin'); + + assert.strictEqual(currentURL(), '/search?q=Berlin'); + assert.dom('.places-list li').exists({ count: 2 }); + assert.dom('.places-list li:first-child .place-name').hasText('Berlin'); + }); + + test('visiting /search with lat/lon performs nearby search', async function (assert) { + // Mock Osm Service + class MockOsmService extends Service { + async getNearbyPois() { + return [ + { + title: 'Nearby Cafe', + lat: 52.521, + lon: 13.406, + osmId: '789', + osmType: 'N', + _distance: 100, // Pre-calculated or ignored if mocked + }, + ]; + } + } + this.owner.register('service:osm', MockOsmService); + + // Mock Storage Service (empty) + class MockStorageService extends Service { + savedPlaces = []; + findPlaceById() { + return null; + } + rs = { + on: () => {}, + }; + // Add placesInView since map component accesses it + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + + this.owner.register('service:storage', MockStorageService); + + await visit('/search?lat=52.52&lon=13.405'); + + assert.strictEqual(currentURL(), '/search?lat=52.52&lon=13.405'); + assert.dom('.places-list li').exists({ count: 1 }); + assert.dom('.places-list li .place-name').hasText('Nearby Cafe'); + }); + + test('local bookmarks are merged into search results', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search() { + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Storage Service with a bookmark + class MockStorageService extends Service { + savedPlaces = [ + { + title: 'My Secret Base', + lat: 50.0, + lon: 10.0, + osmId: '999', + osmType: 'N', + description: 'Top Secret', + }, + ]; + findPlaceById(id) { + if (id === '999') return this.savedPlaces[0]; + return null; + } + rs = { + on: () => {}, + }; + placesInView = []; + loadPlacesInBounds() { + return Promise.resolve(); + } + } + this.owner.register('service:storage', MockStorageService); + + await visit('/search?q=Secret'); + + assert.strictEqual(currentURL(), '/search?q=Secret'); + assert.dom('.places-list li').exists({ count: 1 }); + assert.dom('.places-list li .place-name').hasText('My Secret Base'); + }); +}); diff --git a/tests/integration/components/app-header-test.gjs b/tests/integration/components/app-header-test.gjs new file mode 100644 index 0000000..c96755e --- /dev/null +++ b/tests/integration/components/app-header-test.gjs @@ -0,0 +1,19 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render } from '@ember/test-helpers'; +import AppHeader from 'marco/components/app-header'; + +module('Integration | Component | app-header', function (hooks) { + setupRenderingTest(hooks); + + test('it renders the search box', async function (assert) { + this.noop = () => {}; + await render( + + ); + + assert.dom('header.app-header').exists(); + assert.dom('.search-box').exists('Search box is present in the header'); + assert.dom('.menu-btn').exists('Menu button is present'); + }); +}); diff --git a/tests/integration/components/place-details-test.gjs b/tests/integration/components/place-details-test.gjs new file mode 100644 index 0000000..dcf7e53 --- /dev/null +++ b/tests/integration/components/place-details-test.gjs @@ -0,0 +1,37 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render } from '@ember/test-helpers'; +import PlaceDetails from 'marco/components/place-details'; + +module('Integration | Component | place-details', function (hooks) { + setupRenderingTest(hooks); + + test('it formats coordinates correctly', async function (assert) { + const place = { + title: 'Test Place', + lat: 52.520006789, + lon: 13.404954123, + description: 'A place for testing.', + }; + + await render(); + + assert.dom('.place-details').exists(); + assert.dom('.place-details h3').hasText('Test Place'); + + // Check for the formatted coordinates link text + // "52.520007, 13.404954" (rounded) + assert.dom('.meta-info a[href*="geo:"]').hasText('52.520007, 13.404954'); + }); + + test('it handles missing coordinates gracefully', async function (assert) { + const place = { + title: 'Place without Coords', + }; + + await render(); + + assert.dom('.place-details h3').hasText('Place without Coords'); + assert.dom('.meta-info a[href*="geo:"]').doesNotExist(); + }); +}); diff --git a/tests/integration/components/search-box-test.gjs b/tests/integration/components/search-box-test.gjs new file mode 100644 index 0000000..f3007ec --- /dev/null +++ b/tests/integration/components/search-box-test.gjs @@ -0,0 +1,128 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render, fillIn, click, waitFor } from '@ember/test-helpers'; +import SearchBox from 'marco/components/search-box'; +import Service from '@ember/service'; + +module('Integration | Component | search-box', function (hooks) { + setupRenderingTest(hooks); + + test('it renders and handles search input', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search(query) { + if (query === 'test') { + return [ + { + title: 'Test Place', + description: 'A test description', + lat: 10, + lon: 20, + osmId: '123', + osmType: 'node', + }, + ]; + } + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock Router Service + class MockRouterService extends Service { + transitionTo(routeName, ...args) { + assert.step(`transitionTo: ${routeName} ${JSON.stringify(args)}`); + } + } + this.owner.register('service:router', MockRouterService); + + await render(); + + assert.dom('.search-input').exists(); + assert.dom('.search-results-popover').doesNotExist(); + + // Type 'test' + await fillIn('.search-input', 'test'); + + // Wait for debounce and async search + await waitFor('.search-results-popover', { timeout: 2000 }); + + assert.dom('.search-result-item').exists({ count: 1 }); + assert.dom('.result-title').hasText('Test Place'); + assert.dom('.result-desc').hasText('A test description'); + + // Click result + await click('.search-result-item'); + + assert.verifySteps(['transitionTo: place ["osm:node:123"]']); + assert + .dom('.search-results-popover') + .doesNotExist('Popover closes after selection'); + }); + + test('it handles submit for full search', async function (assert) { + // Mock Photon Service + class MockPhotonService extends Service { + async search() { + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + // Mock MapUi Service + class MockMapUiService extends Service { + currentCenter = { lat: 52.52, lon: 13.405 }; + } + this.owner.register('service:map-ui', MockMapUiService); + + // Mock Router Service + class MockRouterService extends Service { + transitionTo(routeName, options) { + assert.step( + `transitionTo: ${routeName} ${JSON.stringify(options)}` + ); + } + } + this.owner.register('service:router', MockRouterService); + + await render(); + + await fillIn('.search-input', 'berlin'); + await click('.search-input'); // Focus + // Trigger submit event on the form + await this.element + .querySelector('form') + .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); + + assert.verifySteps([ + 'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"lat":"52.5200","lon":"13.4050"}}', + ]); + }); + + test('it uses map center for biased search', async function (assert) { + // Mock MapUi Service + class MockMapUiService extends Service { + currentCenter = { lat: 52.52, lon: 13.405 }; + } + this.owner.register('service:map-ui', MockMapUiService); + + // Mock Photon Service + class MockPhotonService extends Service { + async search(query, lat, lon) { + assert.step(`search: ${query}, ${lat}, ${lon}`); + return []; + } + } + this.owner.register('service:photon', MockPhotonService); + + await render(); + + await fillIn('.search-input', 'cafe'); + + // Wait for debounce (300ms) + execution + const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); + await delay(400); + + assert.verifySteps(['search: cafe, 52.52, 13.405']); + }); +}); diff --git a/tests/unit/services/photon-test.js b/tests/unit/services/photon-test.js index f0e76cd..fa80419 100644 --- a/tests/unit/services/photon-test.js +++ b/tests/unit/services/photon-test.js @@ -9,6 +9,34 @@ module('Unit | Service | photon', function (hooks) { assert.ok(service); }); + test('search truncates coordinates to 4 decimal places', async function (assert) { + let service = this.owner.lookup('service:photon'); + const originalFetch = window.fetch; + + let capturedUrl; + window.fetch = async (url) => { + capturedUrl = url; + return { + ok: true, + json: async () => ({ features: [] }), + }; + }; + + try { + await service.search('Test', 52.123456, 13.987654); + assert.ok( + capturedUrl.includes('lat=52.1235'), + 'lat is rounded to 4 decimals' + ); + assert.ok( + capturedUrl.includes('lon=13.9877'), + 'lon is rounded to 4 decimals' + ); + } finally { + window.fetch = originalFetch; + } + }); + test('search handles successful response', async function (assert) { let service = this.owner.lookup('service:photon'); @@ -43,6 +71,7 @@ module('Unit | Service | photon', function (hooks) { assert.strictEqual(results[0].lat, 52.5); assert.strictEqual(results[0].lon, 13.4); assert.strictEqual(results[0].description, 'Test City, Test Country'); + assert.strictEqual(results[0].osmType, 'node', 'Normalizes N to node'); } finally { window.fetch = originalFetch; } @@ -87,4 +116,22 @@ module('Unit | Service | photon', function (hooks) { assert.strictEqual(result.lat, 20); assert.strictEqual(result.lon, 10); }); + + test('normalizeFeature normalizes OSM types correctly', function (assert) { + let service = this.owner.lookup('service:photon'); + + const checkType = (input, expected) => { + const feature = { + properties: { osm_type: input, name: 'Test' }, + geometry: { coordinates: [0, 0] }, + }; + const result = service.normalizeFeature(feature); + assert.strictEqual(result.osmType, expected, `${input} -> ${expected}`); + }; + + checkType('N', 'node'); + checkType('W', 'way'); + checkType('R', 'relation'); + checkType('unknown', 'unknown'); // Fallback + }); });