1 files changed, 61 insertions, 0 deletions
diff --git a/src/components/ui/pagination.test.tsx b/src/components/ui/pagination.test.tsx
new file mode 100644
index 0000000..77309b8
--- /dev/null
+++ b/src/components/ui/pagination.test.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+
+describe('Pagination UI', () => {
+  test('renders pagination container and list slots', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href='#'>1</PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+
+    const nav = screen.getByLabelText('pagination');
+    expect(nav).toHaveAttribute('data-slot', 'pagination');
+    expect(screen.getByRole('link', { name: '1' })).toHaveAttribute(
+      'data-slot',
+      'pagination-link',
+    );
+  });
+
+  test('sets active page attributes', () => {
+    render(
+      <PaginationLink href='#' isActive>
+        2
+      </PaginationLink>,
+    );
+
+    const link = screen.getByRole('link', { name: '2' });
+    expect(link).toHaveAttribute('aria-current', 'page');
+    expect(link).toHaveAttribute('data-active', 'true');
+  });
+
+  test('renders previous, next, and ellipsis affordances', () => {
+    render(
+      <div>
+        <PaginationPrevious href='#' />
+        <PaginationNext href='#' />
+        <PaginationEllipsis />
+      </div>,
+    );
+
+    expect(
+      screen.getByRole('link', { name: 'Go to previous page' }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Go to next page' })).toBeInTheDocument();
+    expect(screen.getByText('More pages')).toBeInTheDocument();
+  });
+});
+