implement tests on usePagination

src/components/pagination/use-pagination.test.ts

@@ -9,8 +9,83 @@ test("usePagination returns pages from 1..3", async () => {
 		});
 	}).result.current;
 
-	expect(pagination.isDotsEnabled).toBe(false);
-	expect(pagination.isPreviousEnabled).toBe(true);
-	expect(pagination.isNextEnabled).toBe(true);
-	expect(pagination.pages).toBe([1, 2, 3]);
+	expect(pagination.pages).toEqual([1, 2, 3]);
+});
+
+test("on the first page of 1..11, the more indicator is between 9..11", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 1,
+			lastPage: 11,
+		});
+	}).result.current;
+
+	expect(pagination.pages).toContain("...");
+	expect(pagination.pages.at(-2)).toBe("..."); // "..." should be before the end
+	expect(pagination.pages).toContain(1);
+	expect(pagination.pages).toContain(11);
+	expect(pagination.pages).not.toContain(10);
+});
+
+test("on the last page of 1..11, the more indicator is between 1..3", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 11,
+			lastPage: 11,
+		});
+	}).result.current;
+
+	expect(pagination.pages).toContain("...");
+	expect(pagination.pages[1]).toBe("..."); // "..." should be after the start
+	expect(pagination.pages).toContain(1);
+	expect(pagination.pages).toContain(11);
+	expect(pagination.pages).not.toContain(2);
+});
+
+test("on the first page of 1..11, the 'prev' button is inactive", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 1,
+			lastPage: 11,
+		});
+	}).result.current;
+
+	expect(pagination.isPreviousEnabled).toBe(false);
+	expect(pagination.isNextEnabled).toBe(true);
+});
+
+test("on the last page of 1..11, the 'next' button is inactive", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 11,
+			lastPage: 11,
+		});
+	}).result.current;
+
+	expect(pagination.isPreviousEnabled).toBe(true);
+	expect(pagination.isNextEnabled).toBe(false);
+});
+
+test("when all pages can be displayed (1..8), the '...' button is hidden", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 1,
+			lastPage: 8,
+		});
+	}).result.current;
+
+	expect(pagination.pages).not.toContain("...");
+	expect(pagination.pages).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+});
+
+test("when a page might be hidden (1..9), the '...' button is shown", async () => {
+	const pagination = renderHook(() => {
+		return usePagination({
+			currentPage: 1,
+			lastPage: 9,
+		});
+	}).result.current;
+
+	expect(pagination.pages).toContain("...");
+	expect(pagination.pages).toEqual([1, 2, 3, 4, 5, 6, 7, "...", 9]);
 });

src/components/pagination/use-pagination.ts

@@ -9,7 +9,8 @@ export function usePagination(page: PageInfo) {
 		const isNextEnabled = page.currentPage < page.lastPage;
 
 		// dots should only be enabled if there are more pages than we can display as buttons
-		const isDotsEnabled = page.lastPage > PAGE_BUTTON_COUNT;
+		//   +2 for the first/last page, which are always shown
+		const isDotsEnabled = page.lastPage > PAGE_BUTTON_COUNT + 2;
 		// if the current page is close to the end, dots should be before so that the end is continuous
 		const isDotsFirst = page.lastPage - page.currentPage < PAGE_BUTTON_COUNT;
 
@@ -25,7 +26,7 @@ export function usePagination(page: PageInfo) {
 			...Array(PAGE_BUTTON_COUNT)
 				.fill(0)
 				.map((_, i) => i + firstPageNum)
-				.filter(i => i < page.lastPage),
+				.filter((i) => i < page.lastPage),
 			!isDotsFirst && "...",
 			// last page is always displayed
 			page.lastPage,