add geo search tests to cypress search testing

cypress/e2e/search/item-search.cy.ts

@@ -1,42 +0,0 @@
-/// <reference types="cypress" />
-
-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')
-    })
-  })
-})

cypress/e2e/search/search-flows.cy.ts

@@ -0,0 +1,115 @@
+/// <reference types="cypress" />
+
+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')
+        })
+      })
+    })
+  })
+})

lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx

@@ -182,7 +182,10 @@ export const SearchControl = () => {
                   }}
                 >
                   {item.layer?.markerIcon.image ? (
-                    <div className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center' data-cy='search-item-icon'>
+                    <div
+                      className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
+                      data-cy='search-item-icon'
+                    >
                       <SVG
                         src={appState.assetsApi.url + item.layer.markerIcon.image}
                         className='tw:text-current tw:mr-2 tw:mt-0'
@@ -243,12 +246,21 @@ export const SearchControl = () => {
                     hide()
                   }}
                 >
-                  <MagnifyingGlassIcon className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5' />
+                  <MagnifyingGlassIcon
+                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
+                    data-cy='search-geo-icon'
+                  />
                   <div>
-                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
+                    <div
+                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      data-cy='search-geo-name'
+                    >
                       {geo?.properties.name ? geo?.properties.name : value}
                     </div>
-                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
+                    <div
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      data-cy='search-geo-details'
+                    >
                       {geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
                       {geo?.properties?.osm_value &&
                         geo?.properties?.osm_value !== 'yes' &&
@@ -291,12 +303,21 @@ export const SearchControl = () => {
                     )
                   }}
                 >
-                  <FlagIcon className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4' />
+                  <FlagIcon
+                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4'
+                    data-cy='search-coordinate-icon'
+                  />
                   <div>
-                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
+                    <div
+                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      data-cy='search-coordinate-text'
+                    >
                       {value}
                     </div>
-                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
+                    <div
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      data-cy='search-coordinate-label'
+                    >
                       {'Coordiante'}
                     </div>
                   </div>