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);
  });
});