feat(stammbaum): first-load touch affordance hint (#692)

Add StammbaumAffordance: a touch-only "drag to explore · pinch to zoom" hint
that auto-dismisses on the first canvas pointer interaction (wired via the
gesture action's onGestureStart) or the explicit close, and stays dismissed for
30 days via a localStorage timestamp (boolean gate only, never rendered).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-29 17:13:36 +02:00
parent 1dffb430ac
commit 11b70d814f
4 changed files with 133 additions and 1 deletions

View File

@@ -0,0 +1,34 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import StammbaumAffordance from './StammbaumAffordance.svelte';
const STORAGE_KEY = 'stammbaumAffordanceDismissedAt';
describe('StammbaumAffordance (#692)', () => {
beforeEach(() => localStorage.clear());
it('shows the hint on a touch device that has not dismissed it', async () => {
render(StammbaumAffordance, { touch: true });
await vi.waitFor(() => expect(document.querySelector('[role="status"]')).not.toBeNull());
expect(document.body.textContent).toContain('Ziehen');
});
it('does not show on non-touch devices (OQ-008)', async () => {
render(StammbaumAffordance, { touch: false });
expect(document.querySelector('[role="status"]')).toBeNull();
});
it('hides and records dismissal when the close button is clicked', async () => {
render(StammbaumAffordance, { touch: true });
const dismiss = [...document.querySelectorAll<HTMLButtonElement>('button')][0];
dismiss.click();
await vi.waitFor(() => expect(document.querySelector('[role="status"]')).toBeNull());
expect(localStorage.getItem(STORAGE_KEY)).toBeTruthy();
});
it('does not reappear within the 30-day window (NFR-USE-001)', async () => {
localStorage.setItem(STORAGE_KEY, String(Date.now()));
render(StammbaumAffordance, { touch: true });
expect(document.querySelector('[role="status"]')).toBeNull();
});
});