mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 21:46:49 +00:00
Konstantinos Thermos
17dd6b7caa
Add a corner button on the Leaflet trip map that switches the base layer between the default street tiles and a tokenless satellite view (ESRI World Imagery). The choice is a per-user setting (map_base_layer) that persists and applies instantly, including offline. GL-renderer satellite styles are unchanged. Closes #993
45 lines
2.1 KiB
TypeScript
45 lines
2.1 KiB
TypeScript
// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-005
|
|
import React from 'react'
|
|
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen, fireEvent } from '../../../tests/helpers/render'
|
|
import { MapLayerSwitcher } from './MapLayerSwitcher'
|
|
|
|
describe('MapLayerSwitcher', () => {
|
|
it('FE-COMP-MAPLAYER-001: on the default layer, offers the switch to satellite', () => {
|
|
render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
|
|
const button = screen.getByRole('button', { name: 'Switch to satellite view' })
|
|
expect(button.getAttribute('aria-pressed')).toBe('false')
|
|
})
|
|
|
|
it('FE-COMP-MAPLAYER-002: on the satellite layer, offers the switch back to the map', () => {
|
|
render(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
|
|
const button = screen.getByRole('button', { name: 'Switch to map view' })
|
|
expect(button.getAttribute('aria-pressed')).toBe('true')
|
|
})
|
|
|
|
it('FE-COMP-MAPLAYER-003: clicking fires the toggle', () => {
|
|
const onToggle = vi.fn()
|
|
render(<MapLayerSwitcher active="default" onToggle={onToggle} />)
|
|
fireEvent.click(screen.getByRole('button', { name: 'Switch to satellite view' }))
|
|
expect(onToggle).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('FE-COMP-MAPLAYER-004: swaps the icon with the active layer', () => {
|
|
const { rerender } = render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
|
|
// Destination icon: on the map you can reach satellite, and vice-versa.
|
|
const iconOnDefault = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
|
|
rerender(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
|
|
const iconOnSatellite = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
|
|
expect(iconOnDefault).not.toBe(iconOnSatellite)
|
|
})
|
|
|
|
it('FE-COMP-MAPLAYER-005: highlights the button on hover and clears it again', () => {
|
|
render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
|
|
const button = screen.getByRole('button')
|
|
fireEvent.mouseEnter(button)
|
|
expect(button.style.background).toBe('var(--bg-hover)')
|
|
fireEvent.mouseLeave(button)
|
|
expect(button.style.background).toBe('transparent')
|
|
})
|
|
})
|