cleanup pagination test

huntabyte · Jul 18, 2024 · 20e6adf · 20e6adf
1 parent dbbcf2a
commit 20e6adf
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 47 deletions.
diff --git a/packages/bits-ui/src/tests/pagination/Pagination.spec.ts b/packages/bits-ui/src/tests/pagination/Pagination.spec.ts
@@ -1,13 +1,11 @@
-// NOTE: these tests were shamelessly copied from melt-ui 🥲
 import { render } from "@testing-library/svelte";
-import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
-import PaginationTest from "./PaginationTest.svelte";
-import type { Pagination } from "$lib/index.js";
+import PaginationTest, { type PaginationTestProps } from "./PaginationTest.svelte";
 import { isHTMLElement } from "$lib/internal/is.js";
+import { setupUserEvents } from "../utils.js";
 
-function setup(props: Pagination.Props = { count: 100 }) {
-	const user = userEvent.setup();
+function setup(props: PaginationTestProps = { count: 100 }) {
+	const user = setupUserEvents();
 	const returned = render(PaginationTest, { ...props });
 
 	const root = returned.getByTestId("root");
@@ -44,31 +42,31 @@ describe("pagination", () => {
 	});
 
 	it("previous and Next button should work accordingly", async () => {
-		const { root, prev, next } = setup();
+		const { root, prev, next, user } = setup();
 
-		await expect(getValue(root)).toBe("1");
-		await prev.click();
-		await expect(getValue(root)).toBe("1");
-		await next.click();
-		await expect(getValue(root)).toBe("2");
-		await next.click();
-		await expect(getValue(root)).toBe("3");
-		await prev.click();
-		await expect(getValue(root)).toBe("2");
+		expect(getValue(root)).toBe("1");
+		await user.click(prev);
+		expect(getValue(root)).toBe("1");
+		await user.click(next);
+		expect(getValue(root)).toBe("2");
+		await user.click(next);
+		expect(getValue(root)).toBe("3");
+		await user.click(prev);
+		expect(getValue(root)).toBe("2");
 	});
 
 	it("should change on clicked button", async () => {
-		const { getByTestId } = await render(PaginationTest);
+		const { getByTestId, user } = setup();
 
 		const root = getByTestId("root");
 		const page2 = getPageButton(root, 2);
 
-		await expect(getValue(root)).toBe("1");
-		await page2.click();
-		await expect(getValue(root)).toBe("2");
+		expect(getValue(root)).toBe("1");
+		await user.click(page2);
+		expect(getValue(root)).toBe("2");
 
 		const page10 = getPageButton(root, 10);
-		await page10.click();
-		await expect(getValue(root)).toBe("10");
+		await user.click(page10);
+		expect(getValue(root)).toBe("10");
 	});
 });
diff --git a/packages/bits-ui/src/tests/pagination/PaginationTest.svelte b/packages/bits-ui/src/tests/pagination/PaginationTest.svelte
@@ -1,31 +1,33 @@
-<script lang="ts">
-	import { Pagination } from "$lib/index.js";
-
-	type $$Props = Pagination.Props;
+<script lang="ts" context="module">
+	import { Pagination, type WithoutChildrenOrChild } from "$lib/index.js";
+	export type PaginationTestProps = WithoutChildrenOrChild<Pagination.RootProps>;
+</script>
 
-	export let count: $$Props["count"] = 100;
-	export let perPage: $$Props["perPage"] = 10;
+<script lang="ts">
+	let { count = 100, perPage = 10, ...restProps }: PaginationTestProps = $props();
 </script>
 
 <main>
-	<Pagination.Root data-testid="root" let:pages let:range bind:count bind:perPage>
-		<p data-testid="range">Showing items {range.start} - {range.end}</p>
-		<div>
-			<Pagination.PrevButton data-testid="prev-button">
-				<span>&LeftArrow;</span>
-			</Pagination.PrevButton>
-			{#each pages as page (page.key)}
-				{#if page.type === "ellipsis"}
-					<span>...</span>
-				{:else if page.type === "page"}
-					<Pagination.Page {page} data-testid="page-{page.value}">
-						{page.value}
-					</Pagination.Page>
-				{/if}
-			{/each}
-			<Pagination.NextButton data-testid="next-button">
-				<span>&RightArrow;;</span>
-			</Pagination.NextButton>
-		</div>
+	<Pagination.Root data-testid="root" {count} {perPage} {...restProps}>
+		{#snippet children({ pages, range })}
+			<p data-testid="range">Showing items {range.start} - {range.end}</p>
+			<div>
+				<Pagination.PrevButton data-testid="prev-button">
+					<span>&LeftArrow;</span>
+				</Pagination.PrevButton>
+				{#each pages as page (page.key)}
+					{#if page.type === "ellipsis"}
+						<span>...</span>
+					{:else if page.type === "page"}
+						<Pagination.Page {page} data-testid="page-{page.value}">
+							{page.value}
+						</Pagination.Page>
+					{/if}
+				{/each}
+				<Pagination.NextButton data-testid="next-button">
+					<span>&RightArrow;;</span>
+				</Pagination.NextButton>
+			</div>
+		{/snippet}
 	</Pagination.Root>
 </main>