bvandeusenandClaude Opus 5.5
0f9ddbca97
release / go (push) Successful in 1m53s
release / govulncheck (push) Successful in 49s
release / web (push) Successful in 1m50s
release / android (push) Successful in 6m44s
release / Build signed APK (releases and dev) (push) Successful in 6m30s
release / Attach APK to the Release (tag releases only) (push) Canceled after 0s
release / Build + push container image (push) Canceled after 0s
release / Verify release artifacts (tag releases only) (push) Canceled after 0s
release / integration (push) Canceled after 21m41s
Preference 172: no "Load more" buttons. Eight remained, on Liked (three sections), the three Search overflow pages, Genres and Years. - ListContinuation: the one bottom-of-list block. It loads the next page ahead of the reader, announces "Loading more…" through aria-live, shows an optional end line, and on a failed page shows the error with Try again, dropping the sentinel so a dead endpoint isn't re-hit on every scroll. Used on all ten paged lists, including the four that already autoloaded. - A failed next page no longer replaces the list. TanStack sets isError for it, so the page-level error branches now apply only to a failed first load. Genres and Years did the same with their own loader; a later page's failure now keeps the grid. - Liked: Artists | Albums | Tracks tabs (operator's choice). Stacked, a long Artists list loading as you scroll would bury the other two. It opens on the first tab that has likes. - TabStrip: the in-page tab strip, now shared by Liked, Playback errors and Requests. - test-utils/intersectionObserver: a stand-in so tests can scroll to the end. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { describe, expect, test, vi } from 'vitest';
|
|
import { render, screen, fireEvent } from '@testing-library/svelte';
|
|
import ListContinuation from './ListContinuation.svelte';
|
|
|
|
// InfiniteScrollSentinel renders <div aria-hidden="true" class="h-px">.
|
|
const SENTINEL = 'div[aria-hidden="true"].h-px';
|
|
|
|
describe('ListContinuation', () => {
|
|
test('more to come: a sentinel and no button', () => {
|
|
const { container } = render(ListContinuation, {
|
|
props: { hasMore: true, loading: false, onMore: vi.fn() }
|
|
});
|
|
expect(container.querySelector(SENTINEL)).not.toBeNull();
|
|
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('in flight: announces loading', () => {
|
|
render(ListContinuation, { props: { hasMore: true, loading: true, onMore: vi.fn() } });
|
|
const status = screen.getByText('Loading more…');
|
|
expect(status).toHaveAttribute('aria-live', 'polite');
|
|
});
|
|
|
|
test('finished: the end line, no sentinel', () => {
|
|
const { container } = render(ListContinuation, {
|
|
props: { hasMore: false, loading: false, onMore: vi.fn(), endLabel: 'End of history' }
|
|
});
|
|
expect(screen.getByText('End of history')).toBeInTheDocument();
|
|
expect(container.querySelector(SENTINEL)).toBeNull();
|
|
});
|
|
|
|
// A failed page must not be re-fetched by the observer on every scroll:
|
|
// the sentinel goes away and the reader retries by hand.
|
|
test('failed: an error with Try again, and no sentinel', async () => {
|
|
const onMore = vi.fn();
|
|
const { container } = render(ListContinuation, {
|
|
props: { hasMore: true, loading: false, failed: true, onMore }
|
|
});
|
|
expect(screen.getByRole('alert')).toHaveTextContent("Couldn't load more.");
|
|
expect(container.querySelector(SENTINEL)).toBeNull();
|
|
await fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
|
|
expect(onMore).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|