mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-03-01 12:44:17 +00:00
add geo search tests to cypress search testing
This commit is contained in:
mahula
parent
e95925ed8b
commit
1db99d879d
@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
115
cypress/e2e/search/search-flows.cy.ts
Normal file
115
cypress/e2e/search/search-flows.cy.ts
Normal file
@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user