feat(timeline): collapse the leftover Weitere-Briefe/Ohne-Thema bin to a drawer
The catch-all bucket renders count-only by default behind a reveal control, then expands to the first-5 + show-more body. Keeps the junk drawer quiet instead of flooding the timeline. Refs #827
This commit is contained in:
@@ -137,3 +137,27 @@ describe('LetterBucket — preview cap + show-more (#827 redesign)', () => {
|
||||
expect(section.getAttribute('style') ?? '').toContain('var(--c-tag-sienna)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterBucket — leftover drawer (#827 redesign)', () => {
|
||||
const fb = (n: number): Bucket => ({
|
||||
key: '__fallback__',
|
||||
kind: 'fallback',
|
||||
color: null,
|
||||
letters: Array.from({ length: n }, (_, i) =>
|
||||
makeEntry({ documentId: `f${i}`, eventDate: `1916-01-0${(i % 9) + 1}` })
|
||||
)
|
||||
});
|
||||
it('renders collapsed — count + reveal, no letter cards — until opened', () => {
|
||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
||||
expect(document.querySelector('a.lcard')).toBeNull();
|
||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
||||
expect(document.querySelector('[data-testid="bucket-reveal"]')).not.toBeNull();
|
||||
});
|
||||
it('reveals the first 5 letters when opened', async () => {
|
||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
||||
(document.querySelector('[data-testid="bucket-reveal"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user