diff --git a/cypress/e2e/search/item-search.cy.ts b/cypress/e2e/search/item-search.cy.ts deleted file mode 100644 index c8dea607..00000000 --- a/cypress/e2e/search/item-search.cy.ts +++ /dev/null @@ -1,42 +0,0 @@ -/// - -describe('Utopia Map Search', () => { - describe('Item Search', () => { - beforeEach(() => { - cy.clearCookies() - cy.clearLocalStorage() - cy.window().then((win) => { - win.sessionStorage.clear() - }) - - cy.visit('/') - cy.waitForMapReady() - }) - - it('should find items by exact name match', () => { - cy.searchFor('Tech Meetup Munich') - cy.get('[data-cy="search-suggestions"]').should('contain', 'Tech Meetup Munich') - }) - - it('should find items by partial name match (case insensitive)', () => { - cy.searchFor('café collaboration') - cy.get('[data-cy="search-suggestions"]').should('contain', 'Café Collaboration London') - }) - - it('should find items by text content', () => { - cy.searchFor('sustainability') - cy.get('[data-cy="search-suggestions"]').should('contain', 'Alex Entrepreneur') - }) - - it('should navigate to item profile when clicking search result', () => { - cy.searchFor('makerspace') - cy.get('[data-cy="search-suggestions"]').within(() => { - cy.get('[data-cy="search-item-result"]').contains('Makerspace Tokyo').click() - }) - - cy.url().should('match', /\/(item\/|[a-f0-9-]+)/) - cy.get('[data-cy="profile-view"]').should('exist') - cy.get('[data-cy="profile-title"]').should('contain', 'Makerspace Tokyo') - }) - }) -}) diff --git a/cypress/e2e/search/search-flows.cy.ts b/cypress/e2e/search/search-flows.cy.ts new file mode 100644 index 00000000..9b24b84e --- /dev/null +++ b/cypress/e2e/search/search-flows.cy.ts @@ -0,0 +1,115 @@ +/// + +describe('Utopia Map Search', () => { + beforeEach(() => { + cy.clearCookies() + cy.clearLocalStorage() + cy.window().then((win) => { + win.sessionStorage.clear() + }) + + cy.visit('/') + cy.waitForMapReady() + }) + + describe('Item Search', () => { + it('should find items by exact name match', () => { + cy.searchFor('Tech Meetup Munich') + cy.get('[data-cy="search-suggestions"]').should('contain', 'Tech Meetup Munich') + }) + + it('should find items by partial name match (case insensitive)', () => { + cy.searchFor('café collaboration') + cy.get('[data-cy="search-suggestions"]').should('contain', 'Café Collaboration London') + }) + + it('should find items by text content', () => { + cy.searchFor('sustainability') + cy.get('[data-cy="search-suggestions"]').should('contain', 'Alex Entrepreneur') + }) + + it('should navigate to item profile when clicking search result', () => { + cy.searchFor('welcome') + cy.get('[data-cy="search-suggestions"]').within(() => { + cy.get('[data-cy="search-item-result"]').contains('Welcome to Utopia Map').click() + }) + + cy.url().should('match', /\/(item\/|[a-f0-9-]+)/) + cy.get('body').should('contain', 'Welcome to Utopia Map') + }) + }) + + describe('Geographic Search', () => { + it('should find geographic locations and related items for a city', () => { + cy.searchFor('Berlin') + + cy.get('[data-cy="search-suggestions"]').within(() => { + cy.get('[data-cy="search-geo-result"]').should('contain', 'Berlin') + cy.get('[data-cy="search-item-result"]').should('contain', 'Community Garden Berlin') + }) + }) + + it('should navigate to geographic location when clicking search result', () => { + cy.searchFor('Berlin') + + // Click geographic result -> temporary marker + cy.get('[data-cy="search-suggestions"]').within(() => { + cy.get('[data-cy="search-geo-result"]').contains('Berlin').click() + }) + + // User sees temporary marker with location popup + cy.get('.leaflet-popup').should('be.visible') + cy.get('.leaflet-popup-content').should('contain', 'Berlin') + + // Search input is blurred and suggestions hidden + cy.get('[data-cy="search-input"]').should('not.be.focused') + cy.get('[data-cy="search-suggestions"]').should('not.exist') + }) + + it('should find specific addresses and landmarks', () => { + cy.searchFor('Wat Arun') + cy.get('[data-cy="search-suggestions"]').should('be.visible') + + cy.get('[data-cy="search-suggestions"]').within(() => { + cy.contains('Wat Arun').first().click() + }) + + cy.get('.leaflet-popup').should('be.visible') + cy.get('.leaflet-popup-content').should('contain', 'Wat Arun') + }) + + it('should navigate to precise coordinates', () => { + const coordinates = '52.5200,13.4050' + cy.searchFor(coordinates) + + // User sees coordinate option with flag icon + cy.get('[data-cy="search-suggestions"]').within(() => { + cy.get('[data-cy="search-coordinate-result"]').should('contain', coordinates) + cy.get('[data-cy="search-coordinate-icon"]').should('exist') + cy.get('[data-cy="search-coordinate-result"]').click() + }) + + cy.get('.leaflet-popup').should('be.visible') + cy.get('.leaflet-popup-content').should('contain.text', '52.52, 13.40') + }) + + it('should differentiate between database items and geographic locations', () => { + cy.searchFor('Berlin') + + cy.get('[data-cy="search-suggestions"]').within(() => { + // Database item should have custom icon and simple name + cy.get('[data-cy="search-item-result"]').first().within(() => { + // Should have either an icon or placeholder for database items + cy.get('[data-cy="search-item-icon"], [data-cy="search-item-icon-placeholder"]').should('exist') + }) + cy.get('[data-cy="search-item-result"]').should('contain', 'Community Garden Berlin') + + // Geographic result should have magnifying glass icon and detailed info + cy.get('[data-cy="search-geo-result"]').first().within(() => { + cy.get('[data-cy="search-geo-icon"]').should('exist') + cy.get('[data-cy="search-geo-details"]').should('exist') + }) + }) + }) + }) +}) diff --git a/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index 05f1a300..4a7555cf 100644 --- a/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -182,7 +182,10 @@ export const SearchControl = () => { }} > {item.layer?.markerIcon.image ? ( -
+
{ hide() }} > - +
-
+
{geo?.properties.name ? geo?.properties.name : value}
-
+
{geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '} {geo?.properties?.osm_value && geo?.properties?.osm_value !== 'yes' && @@ -291,12 +303,21 @@ export const SearchControl = () => { ) }} > - +
-
+
{value}
-
+
{'Coordiante'}