144719720f
A HISTORICAL band's subtitle now carries the visible "historisch" register
inline as plain text: "{date} · historisch", or — for a RANGE — after the
existing 1914–1918 span pill (whose Zeitraum aria-label is unchanged). The
descriptor is a text node, never a second pill. Every WorldBand is
historical, so the suffix also trails an undated band on its own.
Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
||
import { cleanup, render } from 'vitest-browser-svelte';
|
||
import * as m from '$lib/paraglide/messages.js';
|
||
import WorldBand from './WorldBand.svelte';
|
||
import { makeEntry } from './test-factories';
|
||
|
||
afterEach(() => cleanup());
|
||
|
||
function historical(overrides = {}) {
|
||
return makeEntry({
|
||
kind: 'EVENT',
|
||
derived: false,
|
||
type: 'HISTORICAL',
|
||
title: 'Erster Weltkrieg',
|
||
senderName: '',
|
||
receiverName: '',
|
||
precision: 'RANGE',
|
||
eventDate: '1914-01-01',
|
||
eventDateEnd: '1918-12-31',
|
||
documentId: undefined,
|
||
...overrides
|
||
});
|
||
}
|
||
|
||
describe('WorldBand', () => {
|
||
it('renders the historical title with the world glyph + "Weltgeschehen" cue (REQ-018)', () => {
|
||
render(WorldBand, { entry: historical() });
|
||
expect(document.body.textContent).toContain('Erster Weltkrieg');
|
||
const hidden = document.querySelector('[aria-hidden="true"]');
|
||
expect(hidden?.textContent).toBe('◍');
|
||
const srOnly = document.querySelector('.sr-only');
|
||
expect(srOnly?.textContent).toBe('Weltgeschehen');
|
||
});
|
||
|
||
it('renders a RANGE span pill 1914–1918 with a Zeitraum aria-label (REQ-009)', () => {
|
||
render(WorldBand, { entry: historical() });
|
||
const pill = document.querySelector('[data-testid="world-range"]');
|
||
expect(pill).not.toBeNull();
|
||
expect(pill?.textContent).toContain('1914–1918');
|
||
expect(pill?.getAttribute('aria-label')).toBe('Zeitraum: 1914 bis 1918');
|
||
});
|
||
|
||
it('degrades a RANGE with no end to the start year, no span pill, no crash (REQ-010)', () => {
|
||
render(WorldBand, { entry: historical({ eventDateEnd: undefined }) });
|
||
expect(document.querySelector('[data-testid="world-range"]')).toBeNull();
|
||
expect(document.body.textContent).toContain('Erster Weltkrieg');
|
||
expect(document.body.textContent).toContain('1914');
|
||
});
|
||
|
||
it('appends the inline "· historisch" descriptor to a non-RANGE band (#833 REQ-009)', () => {
|
||
render(WorldBand, {
|
||
entry: historical({ precision: 'APPROX', eventDate: '1923-01-01', eventDateEnd: undefined })
|
||
});
|
||
expect(document.querySelector('[data-testid="world-range"]')).toBeNull();
|
||
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||
});
|
||
|
||
it('follows the RANGE span pill with inline "· historisch" text, not a second pill (#833 REQ-009)', () => {
|
||
render(WorldBand, { entry: historical() });
|
||
const pill = document.querySelector('[data-testid="world-range"]');
|
||
expect(pill).not.toBeNull();
|
||
// The #779 span pill + its Zeitraum aria-label are unchanged.
|
||
expect(pill?.getAttribute('aria-label')).toBe('Zeitraum: 1914 bis 1918');
|
||
// The descriptor is plain text outside the pill, not a second styled pill.
|
||
expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
|
||
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||
});
|
||
});
|