import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from './pagination';

const Example = () => (
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="?page=1" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="?page=1">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="?page=2" isActive>
          2
        </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="?page=3" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
);

describe('Pagination', () => {
  it('names the landmark so it is distinguishable from other navs', () => {
    render(<Example />);
    expect(screen.getByRole('navigation', { name: 'pagination' })).toBeInTheDocument();
  });

  it('marks only the current page with aria-current', () => {
    render(<Example />);

    expect(screen.getByRole('link', { name: '2' })).toHaveAttribute('aria-current', 'page');
    expect(screen.getByRole('link', { name: '1' })).not.toHaveAttribute('aria-current');
  });

  /* CBAR's arrows carry no visible text, so the label has to come from
     `aria-label` or they announce as bare links. */
  it('labels the icon-only arrows', () => {
    render(<Example />);

    expect(screen.getByRole('link', { name: 'Go to previous page' })).toBeInTheDocument();
    expect(screen.getByRole('link', { name: 'Go to next page' })).toBeInTheDocument();
  });

  /*
   * The selected page is the one thing that reads from the palette. If the
   * class stops being emitted it falls back to the resting fill, which renders
   * fine and silently loses the "you are here" signal.
   */
  it('paints the selected page from the palette', () => {
    render(<Example />);

    expect(screen.getByRole('navigation')).toHaveClass('palette-secondary');
    expect(screen.getByRole('link', { name: '2' })).toHaveClass('bg-(--ctl-solid)');
    expect(screen.getByRole('link', { name: '1' })).toHaveClass('bg-muted');
  });

  it('keeps the ellipsis out of the accessibility tree', () => {
    const { container } = render(<Example />);
    expect(container.querySelector('[data-slot="pagination-ellipsis"]')).toHaveAttribute(
      'aria-hidden'
    );
  });
});