fix(nav): Scroll-Position bei Browser-Back robust wiederherstellen
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m44s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 2m44s
Pages, die ihre Daten in onMount per fetch laden (Home, Wunschliste, Einkaufsliste), waren bei popstate-Navigation kaputt: SvelteKit ruft scrollTo() synchron nach Mount, aber die Listen sind dann noch leer und das Dokument zu kurz — der Browser clamped auf 0. Neuer Helper src/lib/client/scroll-restore.ts merkt scrollY pro URL in sessionStorage (beforeNavigate) und stellt sie bei popstate per rAF- Polling wieder her, sobald document.scrollHeight gross genug ist (Hard-Budget 1.5s, danach best-effort scrollTo). Layout ruft die zwei Helper im beforeNavigate / afterNavigate. Pages mit SSR-Daten (z. B. /recipes) bleiben unbeeinflusst — dort matcht unser Wert SvelteKits eigenen scrollTo bereits beim ersten Frame. Tests: 7 neue Unit-Tests in tests/unit/scroll-restore.test.ts decken Recording, Pro-URL-Trennung, Skip fuer Forward-Nav, sofortiges und verzoegertes Restore ab. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
103
tests/unit/scroll-restore.test.ts
Normal file
103
tests/unit/scroll-restore.test.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
// @vitest-environment jsdom
|
||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
|
||||
|
||||
import { recordScroll, restoreScroll } from '../../src/lib/client/scroll-restore';
|
||||
|
||||
const STORAGE_KEY = 'kochwas:scroll';
|
||||
|
||||
function setScrollY(y: number) {
|
||||
Object.defineProperty(window, 'scrollY', { value: y, configurable: true });
|
||||
}
|
||||
|
||||
function setDocHeight(h: number) {
|
||||
Object.defineProperty(document.documentElement, 'scrollHeight', {
|
||||
value: h,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
|
||||
function setViewportHeight(h: number) {
|
||||
Object.defineProperty(window, 'innerHeight', { value: h, configurable: true });
|
||||
}
|
||||
|
||||
describe('scroll-restore', () => {
|
||||
let scrollToSpy: ReturnType<typeof vi.spyOn>;
|
||||
|
||||
beforeEach(() => {
|
||||
sessionStorage.clear();
|
||||
setScrollY(0);
|
||||
setViewportHeight(800);
|
||||
setDocHeight(800);
|
||||
scrollToSpy = vi
|
||||
.spyOn(window, 'scrollTo')
|
||||
.mockImplementation(() => undefined as unknown as void);
|
||||
window.history.replaceState({}, '', '/wishlist');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
scrollToSpy.mockRestore();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('records scrollY keyed by pathname+search', () => {
|
||||
setScrollY(1200);
|
||||
recordScroll();
|
||||
const map = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '{}');
|
||||
expect(map['/wishlist']).toBe(1200);
|
||||
});
|
||||
|
||||
it('keeps separate entries per URL', () => {
|
||||
setScrollY(500);
|
||||
recordScroll();
|
||||
window.history.replaceState({}, '', '/?q=hi');
|
||||
setScrollY(900);
|
||||
recordScroll();
|
||||
const map = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '{}');
|
||||
expect(map['/wishlist']).toBe(500);
|
||||
expect(map['/?q=hi']).toBe(900);
|
||||
});
|
||||
|
||||
it('skips restore for non-popstate navigation', () => {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ '/wishlist': 1000 }));
|
||||
setDocHeight(5000);
|
||||
restoreScroll('link');
|
||||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('skips restore when no entry stored', () => {
|
||||
setDocHeight(5000);
|
||||
restoreScroll('popstate');
|
||||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('skips restore for trivial scrollY (noise)', () => {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ '/wishlist': 10 }));
|
||||
setDocHeight(5000);
|
||||
restoreScroll('popstate');
|
||||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('scrolls immediately when document is already tall enough', async () => {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ '/wishlist': 1000 }));
|
||||
setDocHeight(5000);
|
||||
restoreScroll('popstate');
|
||||
// rAF resolves on next microtask in jsdom
|
||||
await new Promise((r) => requestAnimationFrame(() => r(null)));
|
||||
expect(scrollToSpy).toHaveBeenCalledWith({ top: 1000, left: 0, behavior: 'instant' });
|
||||
});
|
||||
|
||||
it('waits via rAF until document grows tall enough', async () => {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ '/wishlist': 1500 }));
|
||||
// Initially short — would clamp.
|
||||
setDocHeight(900);
|
||||
restoreScroll('popstate');
|
||||
await new Promise((r) => requestAnimationFrame(() => r(null)));
|
||||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||||
|
||||
// Simulate async data loading and document growing.
|
||||
setDocHeight(3000);
|
||||
// Allow rAF to fire again.
|
||||
await new Promise((r) => requestAnimationFrame(() => r(null)));
|
||||
expect(scrollToSpy).toHaveBeenCalledWith({ top: 1500, left: 0, behavior: 'instant' });
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user