test(react-pagination): add tests for usepagination (#150)

* test(react-pagination): add tests for usepagination

* use v8 instead of c8

* Apply suggestions from code review

* build(react-pagination): keep it public

* check if throwing error is the issue

* bring back error

* try adding dependson

* try adding turbo json to pagination package

* try building first

* bring back turbo jsins

* try adding turbo json to pagination package

* use debug overlay

* remove turbos

* bring back turbo.jsn

* ci(turborepo): build dependencies before running tests

* style(react-pagination): apply prettier formatting

* ci(turborepo): make test depend on ^build

---------

Co-authored-by: Thijs Daniels <[email protected]>

.changeset/moody-rivers-worry.md

@@ -0,0 +1,8 @@
+---
+"@codedazur/react-pagination": major
+"@codedazur/essentials": minor
+---
+
+@codedazur/essentials - assert function is added
+
+@codedazur/react-pagination - first release and adding tests

.github/workflows/quality.yml

@@ -34,8 +34,8 @@ jobs:
       - name: Lint
         run: npm run lint
 
-      - name: Test
-        run: npm run test
-
       - name: Build
         run: export NODE_OPTIONS="--max_old_space_size=4096" && npm run build
+
+      - name: Test
+        run: npm run test

apps/storybook/stories/react-pagination/usePagination.stories.tsx

@@ -9,14 +9,15 @@ import {
 } from "@codedazur/react-components";
 import {
   UsePaginationProps,
-  UsePaginationWithCountProps,
+  UsePaginationWithPagesProps,
   UsePaginationWithItemsProps,
   usePagination,
 } from "@codedazur/react-pagination";
 import { faker } from "@faker-js/faker";
 import { Meta, StoryObj } from "@storybook/react";
 import { SymbolButton } from "@apps/storybook/components/SymbolButton";
 import docs from "./usePagination.docs.mdx";
+import { DebugOverlay } from "../../components/DebugOverlay";
 
 const meta: Meta<UsePaginationProps<string>> = {
   title: "React-Pagination/usePagination",
@@ -28,20 +29,20 @@ const meta: Meta<UsePaginationProps<string>> = {
   argTypes: {
     initialPage: { control: { type: "number" } },
     siblings: { control: { type: "number" } },
-    boundary: { control: { type: "number" } },
+    boundaries: { control: { type: "number" } },
     gapSize: { control: { type: "number" } },
   },
   args: {
     siblings: 1,
-    boundary: 1,
+    boundaries: 1,
     gapSize: 1,
   },
 };
 export default meta;
 
-export const Default: StoryObj<UsePaginationWithCountProps> = {
+export const Default: StoryObj<UsePaginationWithPagesProps> = {
   render: function Default(args) {
-    const { count, page, setPage, next, previous, range } = usePagination(args);
+    const { pages, page, setPage, next, previous, range } = usePagination(args);
 
     return (
       <>
@@ -66,22 +67,22 @@ export const Default: StoryObj<UsePaginationWithCountProps> = {
               ))}
             </Separate>
           </Row>
-          <SymbolButton onClick={next} disabled={page === count}>
+          <SymbolButton onClick={next} disabled={page === pages}>
             <ChevronRightIcon />
           </SymbolButton>
         </Row>
-        {/* <DebugOverlay value={{ count, page, range }} /> */}
+        <DebugOverlay value={{ pages, page, range }} />
       </>
     );
   },
-  argTypes: { count: { control: { type: "number" } } },
-  args: { count: 9, initialPage: 5 },
+  argTypes: { pages: { control: { type: "number" } } },
+  args: { pages: 9, initialPage: 5 },
 };
 
-export const WithSiblingsAndBoundaries: StoryObj<UsePaginationWithCountProps> =
+export const WithSiblingsAndBoundaries: StoryObj<UsePaginationWithPagesProps> =
   {
     render: function WithSiblingsAndBoundariesStory(args) {
-      const { count, page, setPage, next, previous, range } =
+      const { pages, page, setPage, next, previous, range } =
         usePagination(args);
 
       return (
@@ -107,28 +108,28 @@ export const WithSiblingsAndBoundaries: StoryObj<UsePaginationWithCountProps> =
                 ))}
               </Separate>
             </Row>
-            <SymbolButton onClick={next} disabled={page === count}>
+            <SymbolButton onClick={next} disabled={page === pages}>
               <ChevronRightIcon />
             </SymbolButton>
           </Row>
-          {/* <DebugOverlay value={{ count, page, range }} /> */}
+          <DebugOverlay value={{ pages, page, range }} />
         </>
       );
     },
     argTypes: {
-      count: { control: { type: "number" } },
+      pages: { control: { type: "number" } },
     },
     args: {
-      count: 23,
+      pages: 23,
       initialPage: 12,
       siblings: 3,
-      boundary: 2,
+      boundaries: 2,
     },
   };
 
 export const WithItems: StoryObj<UsePaginationWithItemsProps<string>> = {
   render: function WithItems(args) {
-    const { count, page, setPage, next, previous, range, items } =
+    const { pages, page, setPage, next, previous, range, items } =
       usePagination(args);
 
     return (
@@ -160,11 +161,11 @@ export const WithItems: StoryObj<UsePaginationWithItemsProps<string>> = {
               ))}
             </Separate>
           </Row>
-          <SymbolButton onClick={next} disabled={page === count}>
+          <SymbolButton onClick={next} disabled={page === pages}>
             <ChevronRightIcon />
           </SymbolButton>
         </Row>
-        {/* <DebugOverlay value={{ count, page, items, range }} /> */}
+        <DebugOverlay value={{ pages, page, items, range }} />
       </>
     );
   },
@@ -179,9 +180,9 @@ export const WithItems: StoryObj<UsePaginationWithItemsProps<string>> = {
   },
 };
 
-export const WithoutRange: StoryObj<UsePaginationWithCountProps> = {
+export const WithoutRange: StoryObj<UsePaginationWithPagesProps> = {
   render: function WithoutRange(args) {
-    const { count, page, next, previous } = usePagination(args);
+    const { pages, page, next, previous } = usePagination(args);
 
     return (
       <>
@@ -190,23 +191,23 @@ export const WithoutRange: StoryObj<UsePaginationWithCountProps> = {
             <ChevronLeftIcon />
           </SymbolButton>
           <Text>
-            {page} of {count}
+            {page} of {pages}
           </Text>
-          <SymbolButton onClick={next} disabled={page === count}>
+          <SymbolButton onClick={next} disabled={page === pages}>
             <ChevronRightIcon />
           </SymbolButton>
         </Row>
-        {/* <DebugOverlay value={{ count, page }} /> */}
+        <DebugOverlay value={{ pages, page }} />
       </>
     );
   },
-  argTypes: { count: { control: { type: "number" } } },
-  args: { count: 5, initialPage: 1 },
+  argTypes: { pages: { control: { type: "number" } } },
+  args: { pages: 5, initialPage: 1 },
 };
 
-export const WithoutSeparator: StoryObj<UsePaginationWithCountProps> = {
+export const WithoutSeparator: StoryObj<UsePaginationWithPagesProps> = {
   render: function WithoutSeparator(args) {
-    const { count, page, setPage, next, previous, range } = usePagination(args);
+    const { pages, page, setPage, next, previous, range } = usePagination(args);
 
     return (
       <>
@@ -229,20 +230,20 @@ export const WithoutSeparator: StoryObj<UsePaginationWithCountProps> = {
               </Row>
             ))}
           </Row>
-          <SymbolButton onClick={next} disabled={page === count}>
+          <SymbolButton onClick={next} disabled={page === pages}>
             <ChevronRightIcon />
           </SymbolButton>
         </Row>
-        {/* <DebugOverlay value={{ count, page, range }} /> */}
+        <DebugOverlay value={{ pages, page, range }} />
       </>
     );
   },
-  argTypes: { count: { control: { type: "number" } } },
+  argTypes: { pages: { control: { type: "number" } } },
   args: {
-    count: 9,
+    pages: 9,
     initialPage: 5,
     siblings: 2,
-    boundary: 0,
+    boundaries: 0,
     gapSize: 0,
   },
 };

packages/essentials/index.ts

@@ -15,3 +15,4 @@ export * from "./utilities/object/revalueObject";
 export * from "./utilities/system/env";
 export * from "./utilities/timing/sleep";
 export * from "./utilities/timing/Timer";
+export * from "./utilities/assert";

packages/essentials/utilities/assert.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { AssertionError, assert } from "./assert";
+
+describe("assert", () => {
+  it("should throw an Assertion Error when the condition is false", () => {
+    expect(() => assert(false)).toThrowError(new AssertionError());
+  });
+  it("should throw an Assertion Error with provided message  when the condition is false", () => {
+    expect(() =>
+      assert(false, "These pretzels are making me thirsty!")
+    ).toThrowError(new AssertionError("These pretzels are making me thirsty!"));
+  });
+  it("should not throw an Assertion Error when the condition is true", () => {
+    expect(() => assert(true)).not.toThrow();
+  });
+});

packages/essentials/utilities/assert.ts

@@ -0,0 +1,13 @@
+export class AssertionError extends Error {
+  constructor(message?: string) {
+    super(message);
+    this.name = "AssertionError";
+  }
+}
+
+export function assert(
+  condition: unknown,
+  errorMessage?: string
+): asserts condition {
+  if (condition === false) throw new AssertionError(errorMessage);
+}