mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 22:46:32 +00:00
Maurice
bd347f553b
Two faults behind one round button on the phone map. The base layer switcher that both engines draw in the bottom left corner sat on top of the GL compass, which started 8px to its left and ran on under the frosted shell, so it read as a second button showing through. The compass now stands beside the switcher, placed off the switcher's own exported inset and size so the two cannot drift apart again. Satellite never drew on GL because applySatellite gave up whenever isStyleLoaded() was false and only retried on styledata. That flag is false while any source has tiles or a setData in flight, which on a phone is the usual state, and styledata does not fire when those finish. On the road trip stage every tap met a busy style, because the settings write re-rendered the shell and handed the map fresh stage arrays. The guard is gone (the pass only runs after load, and addSource/addLayer only refuse a style document that is not in yet), an existing layer just flips its visibility, and a source left without its layer still gets the layer. The stage data in MMapArea is memoised, so a store write no longer refits the camera or sets the route, access and place sources again.
58 lines
2.8 KiB
TypeScript
58 lines
2.8 KiB
TypeScript
// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-006
|
|
import React from 'react'
|
|
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen, fireEvent } from '../../../tests/helpers/render'
|
|
import { MapLayerSwitcher, MAP_ROUND_CONTROL_SIZE } 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')
|
|
})
|
|
|
|
it('FE-COMP-MAPLAYER-006: the shell is as wide as the size its neighbours are placed off', () => {
|
|
render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
|
|
const button = screen.getByRole('button')
|
|
const shell = button.parentElement as HTMLElement
|
|
|
|
// The phone's compass stands beside the switcher at inset + size + gap. If the
|
|
// markup grew without the constant, the compass would slide back under the shell.
|
|
expect(shell.style.padding).toBe('4px')
|
|
expect(button.style.width).toBe('34px')
|
|
expect(button.style.height).toBe('34px')
|
|
expect(parseFloat(button.style.width) + 2 * parseFloat(shell.style.padding)).toBe(MAP_ROUND_CONTROL_SIZE)
|
|
})
|
|
})
|