Refactor PageButton tests

BrunoQuaresma · BrunoQuaresma · commit 899b08e12a66 · 2023-09-07T13:23:40.000Z
diff --git a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
@@ -1,8 +1,8 @@
-import { Story } from "@storybook/react";
-import { PaginationWidget, PaginationWidgetProps } from "./PaginationWidget";
+import { PaginationWidget } from "./PaginationWidget";
 import { createPaginationRef } from "./utils";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof PaginationWidget> = {
   title: "components/PaginationWidget",
   component: PaginationWidget,
   args: {
@@ -13,28 +13,31 @@ export default {
   },
 };
 
-const Template: Story<PaginationWidgetProps> = (
-  args: PaginationWidgetProps,
-) => <PaginationWidget {...args} />;
+export default meta;
+type Story = StoryObj<typeof PaginationWidget>;
 
-export const LessThan8Pages = Template.bind({});
-LessThan8Pages.args = {
-  numRecords: 84,
-};
+export const MoreThan8Pages: Story = {};
 
-export const MoreThan8Pages = Template.bind({});
+export const LessThan8Pages: Story = {
+  args: {
+    numRecords: 84,
+  },
+};
 
-export const MoreThan7PagesWithActivePageCloseToStart = Template.bind({});
-MoreThan7PagesWithActivePageCloseToStart.args = {
-  paginationRef: createPaginationRef({ page: 2, limit: 12 }),
+export const MoreThan7PagesWithActivePageCloseToStart: Story = {
+  args: {
+    paginationRef: createPaginationRef({ page: 2, limit: 12 }),
+  },
 };
 
-export const MoreThan7PagesWithActivePageFarFromBoundaries = Template.bind({});
-MoreThan7PagesWithActivePageFarFromBoundaries.args = {
-  paginationRef: createPaginationRef({ page: 4, limit: 12 }),
+export const MoreThan7PagesWithActivePageFarFromBoundaries: Story = {
+  args: {
+    paginationRef: createPaginationRef({ page: 4, limit: 12 }),
+  },
 };
 
-export const MoreThan7PagesWithActivePageCloseToEnd = Template.bind({});
-MoreThan7PagesWithActivePageCloseToEnd.args = {
-  paginationRef: createPaginationRef({ page: 17, limit: 12 }),
+export const MoreThan7PagesWithActivePageCloseToEnd: Story = {
+  args: {
+    paginationRef: createPaginationRef({ page: 17, limit: 12 }),
+  },
 };
diff --git a/site/src/components/PaginationWidget/PaginationWidget.test.tsx b/site/src/components/PaginationWidget/PaginationWidget.test.tsx
@@ -1,55 +1,9 @@
 import { screen } from "@testing-library/react";
-import { render } from "../../testHelpers/renderHelpers";
+import { render } from "testHelpers/renderHelpers";
 import { PaginationWidget } from "./PaginationWidget";
 import { createPaginationRef } from "./utils";
 
 describe("PaginatedList", () => {
-  it("displays an accessible previous and next button", () => {
-    render(
-      <PaginationWidget
-        prevLabel="Previous"
-        nextLabel="Next"
-        paginationRef={createPaginationRef({ page: 2, limit: 12 })}
-        numRecords={200}
-      />,
-    );
-
-    expect(screen.getByRole("button", { name: "Previous page" })).toBeEnabled();
-    expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
-  });
-
-  it("displays the expected number of pages with one ellipsis tile", () => {
-    const { container } = render(
-      <PaginationWidget
-        prevLabel="Previous"
-        nextLabel="Next"
-        numRecords={200}
-        paginationRef={createPaginationRef({ page: 1, limit: 12 })}
-      />,
-    );
-
-    // 7 total spaces. 6 are page numbers, one is ellipsis
-    expect(
-      container.querySelectorAll(`button[name="Page button"]`),
-    ).toHaveLength(6);
-  });
-
-  it("displays the expected number of pages with two ellipsis tiles", () => {
-    const { container } = render(
-      <PaginationWidget
-        prevLabel="Previous"
-        nextLabel="Next"
-        numRecords={200}
-        paginationRef={createPaginationRef({ page: 6, limit: 12 })}
-      />,
-    );
-
-    // 7 total spaces. 2 sets of ellipsis on either side of the active page
-    expect(
-      container.querySelectorAll(`button[name="Page button"]`),
-    ).toHaveLength(5);
-  });
-
   it("disables the previous button on the first page", () => {
     render(
       <PaginationWidget
