mirror of
https://github.com/vernu/textbee.git
synced 2026-08-01 09:59:02 -04:00
469aa0025c
Copying the marketing logo did not fix the colour, because the marketing artwork does not match --primary either. Measured, the mark held two orange families: one already near brand at hsl(19,93%,52%) and an amber cluster at hsl(28,98%,48%). The amber is what read as the old colour. Regraded only the saturated orange fill onto hsl(21,90%,48%), preserving shading, and left the tan body and dark figure alone. The rendered mark now samples at hsl(22,89%,48%) against the text-primary "bee" beside it at hsl(21,90%,48%). The bigger problem was not colour. The source was a 500x500 canvas whose artwork occupied a 387x319 box and only 24.7% of the pixels, drawn at 24px in the header. Roughly three quarters of that box rendered pure white, so the mark was a faint smudge and whatever colour it carried was barely visible. Cropped to the content on a square canvas. The favicon carries the same regrade across all three of its frames. Also fixes a latent flake in the RelativeTime component tests. They fed the component dates derived from a hardcoded NOW while the component reads the real clock, so "7 days ago" only held on 2026-07-18 and broke the moment the date rolled over. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import RelativeTime, { toExactLabel, toRelativeLabel } from './relative-time'
|
|
|
|
const NOW = new Date('2026-07-18T12:00:00.000Z')
|
|
const ago = (ms: number) => new Date(NOW.getTime() - ms)
|
|
|
|
const SECOND = 1000
|
|
const MINUTE = 60 * SECOND
|
|
const HOUR = 60 * MINUTE
|
|
const DAY = 24 * HOUR
|
|
|
|
describe('toRelativeLabel', () => {
|
|
it('collapses anything under a minute to "Just now"', () => {
|
|
expect(toRelativeLabel(ago(0), NOW)).toBe('Just now')
|
|
expect(toRelativeLabel(ago(45 * SECOND), NOW)).toBe('Just now')
|
|
})
|
|
|
|
it('is strict, so it does not say "about"', () => {
|
|
// formatDistanceToNow would render "about 3 minutes ago".
|
|
expect(toRelativeLabel(ago(3 * MINUTE), NOW)).not.toContain('about')
|
|
})
|
|
})
|
|
|
|
// The pure helper takes an explicit `now`, but the component reads the real
|
|
// clock, so its inputs must be relative to the real clock too. Anchoring them
|
|
// to the fixed NOW above made these pass only on that one calendar day: a
|
|
// value 7 days before 2026-07-18 is 8 days before 2026-07-19.
|
|
const realAgo = (ms: number) => new Date(Date.now() - ms)
|
|
|
|
describe('RelativeTime', () => {
|
|
it('renders a relative label for a past date', () => {
|
|
render(<RelativeTime value={realAgo(7 * DAY)} />)
|
|
expect(screen.getByText('7 days ago')).toBeInTheDocument()
|
|
})
|
|
|
|
it('exposes the machine-readable timestamp on a <time> element', () => {
|
|
const value = realAgo(2 * DAY)
|
|
const { container } = render(<RelativeTime value={value} />)
|
|
const el = container.querySelector('time')
|
|
expect(el).toBeInTheDocument()
|
|
expect(el).toHaveAttribute('dateTime', value.toISOString())
|
|
})
|
|
|
|
it('is reachable by keyboard so the exact time is not hover-only', () => {
|
|
const { container } = render(<RelativeTime value={realAgo(DAY)} />)
|
|
expect(container.querySelector('time')).toHaveAttribute('tabindex', '0')
|
|
})
|
|
|
|
it('renders the fallback for a null value', () => {
|
|
render(<RelativeTime value={null} fallback='Never' />)
|
|
expect(screen.getByText('Never')).toBeInTheDocument()
|
|
expect(document.querySelector('time')).toBeNull()
|
|
})
|
|
|
|
it('renders the fallback for an unparseable value rather than "Invalid Date"', () => {
|
|
render(<RelativeTime value='not-a-date' fallback='Unknown' />)
|
|
expect(screen.getByText('Unknown')).toBeInTheDocument()
|
|
})
|
|
|
|
it('formats the exact label with both date and time', () => {
|
|
// Constructed from parts so the assertion does not depend on the TZ the
|
|
// suite happens to run in.
|
|
const date = new Date(2023, 4, 18, 13, 42)
|
|
expect(toExactLabel(date)).toBe('May 18, 2023 at 1:42 PM')
|
|
})
|
|
})
|