utopia-ui/cypress/e2e/search/search-flows.cy.ts
mahula 78a8c68800
feat(other): initial end-to-end tests working in github ci and locally (#402)
Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
2025-10-09 21:59:06 +02:00

116 lines
4.2 KiB
TypeScript

/// <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')
})
})
})
})
})