mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
df139a2d96
Every import button in the client wore an outgoing arrow, so the control that pulls a booking or a place list in looked like it was about to send something out. The places-import sheet managed to contradict itself inside one screen: Download in the header, Upload on the row below it, Upload again on the file step. Imports now take Download, or FileDown where the button opens a file picker; genuine uploads and the desktop drop zones keep Upload. The mobile places-import entry point wore an ellipsis, which promises a menu. The "open in Google Maps" buttons drew the four-segment Google *search* G, flattened to one colour — a glyph that reads as "run a search". They get a map pin instead, factored into one component so the desktop and mobile copies stop drifting apart. Closes #2005 Closes #2006
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { render } from '@testing-library/react'
|
|
import GoogleMapsIcon from './GoogleMapsIcon'
|
|
|
|
describe('GoogleMapsIcon', () => {
|
|
it('FE-COMP-GMAPS-001: renders a pin, not the four-segment Google search "G" (#2005)', () => {
|
|
const { container } = render(<GoogleMapsIcon />)
|
|
const paths = container.querySelectorAll('path')
|
|
expect(paths).toHaveLength(1)
|
|
// The old mark was four paths lifted from the Google Search logo.
|
|
expect(container.innerHTML).not.toContain('M24 9.5c3.54')
|
|
})
|
|
|
|
it('FE-COMP-GMAPS-002: sizes itself and inherits the button colour', () => {
|
|
const { container } = render(<GoogleMapsIcon size={19} />)
|
|
const svg = container.querySelector('svg') as SVGElement
|
|
expect(svg.getAttribute('width')).toBe('19')
|
|
expect(svg.getAttribute('height')).toBe('19')
|
|
expect(svg.getAttribute('fill')).toBe('currentColor')
|
|
})
|
|
|
|
it('FE-COMP-GMAPS-003: stays out of the accessibility tree — the button carries the label', () => {
|
|
const { container } = render(<GoogleMapsIcon />)
|
|
const svg = container.querySelector('svg') as SVGElement
|
|
expect(svg.getAttribute('aria-hidden')).toBe('true')
|
|
expect(svg.getAttribute('focusable')).toBe('false')
|
|
})
|
|
|
|
it('FE-COMP-GMAPS-004: passes className and style through', () => {
|
|
const { container } = render(<GoogleMapsIcon className="text-m-faint" style={{ opacity: 0.5 }} />)
|
|
const svg = container.querySelector('svg') as SVGElement
|
|
expect(svg.getAttribute('class')).toBe('text-m-faint')
|
|
expect(svg.style.opacity).toBe('0.5')
|
|
})
|
|
})
|