mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
Maurice
38 lines
1.9 KiB
TypeScript
38 lines
1.9 KiB
TypeScript
import { readFileSync } from 'node:fs'
|
|
import { resolve } from 'node:path'
|
|
import { describe, it, expect } from 'vitest'
|
|
|
|
// The GL map's hover card is styled from index.css while its geometry comes
|
|
// from the vendor stylesheet, so the two only agree by convention. These read
|
|
// the real files rather than a rendered component: jsdom applies no vendor CSS,
|
|
// which is exactly the interaction that can break here.
|
|
describe('GL hover popup css', () => {
|
|
// Vitest runs with the client package as its root, so cwd is stable here.
|
|
const css = readFileSync(resolve(process.cwd(), 'src/index.css'), 'utf8')
|
|
const block = (selector: string): string => {
|
|
const at = css.indexOf(selector)
|
|
expect(at, `${selector} missing from index.css`).toBeGreaterThan(-1)
|
|
return css.slice(at, css.indexOf('}', at) + 1)
|
|
}
|
|
|
|
it('FE-COMP-MAPPOPUPCSS-001: the tail is off, not merely painted white', () => {
|
|
// Colouring it left a visible notch under the card in every theme.
|
|
expect(block('.trek-map-popup .maplibregl-popup-tip')).toMatch(/display:\s*none/)
|
|
})
|
|
|
|
it('FE-COMP-MAPPOPUPCSS-002: the corner radius outweighs the vendor anchor rules', () => {
|
|
// maplibre-gl.css squares one corner per anchor so the tail meets the card
|
|
// flush. With the tail gone that is just a squared corner, and the vendor
|
|
// rule carries the same specificity as a plain `.trek-map-popup .content`
|
|
// — whichever sheet loads last would win. The `[class]` guard settles it.
|
|
const radius = block('.trek-map-popup[class] .maplibregl-popup-content')
|
|
expect(radius).toMatch(/border-radius:\s*10px/)
|
|
})
|
|
|
|
it('FE-COMP-MAPPOPUPCSS-003: leaflet click popups keep their tail', () => {
|
|
// Those are anchored, dismissable popups where the tail earns its place —
|
|
// the fix above is scoped to the GL hover card on purpose.
|
|
expect(block('.leaflet-popup-tip')).not.toMatch(/display:\s*none/)
|
|
})
|
|
})
|