migrate mt-pagination over to composition api

shopware · Oct 9, 2024 · 23b3379 · 23b3379
1 parent cd4ebd8
commit 23b3379
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 163 deletions.
diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts
@@ -1,26 +1,6 @@
-import { mount } from "@vue/test-utils";
 import MtPagination from "./mt-pagination.vue";
 import { render, screen } from "@testing-library/vue";
-
-// Mock the $t function
-const mockT = (key: any) => {
-  return key;
-};
-
-function createWrapper() {
-  return mount(MtPagination, {
-    props: {
-      currentPage: 3,
-      limit: 25,
-      totalItems: 213,
-    },
-    global: {
-      mocks: {
-        $t: (v: string, options: object) => v + JSON.stringify(options),
-      },
-    },
-  });
-}
+import { userEvent } from "@storybook/test";
 
 describe("mt-pagination", () => {
   describe("should render the correct info text", () => {
@@ -29,97 +9,130 @@ describe("mt-pagination", () => {
         currentPage: 1,
         limit: 25,
         totalItems: 213,
-        expectedText: 'mt-pagination.infoText{"start":1,"end":25,"totalItems":213}',
+        expectedText: "1-25 of 213",
       },
       {
         currentPage: 2,
         limit: 25,
         totalItems: 213,
-        expectedText: 'mt-pagination.infoText{"start":26,"end":50,"totalItems":213}',
+        expectedText: "26-50 of 213",
       },
       {
         currentPage: 3,
         limit: 5,
         totalItems: 152,
-        expectedText: 'mt-pagination.infoText{"start":11,"end":15,"totalItems":152}',
+        expectedText: "11-15 of 152",
       },
       {
         currentPage: 4,
         limit: 50,
         totalItems: 167,
-        expectedText: 'mt-pagination.infoText{"start":151,"end":167,"totalItems":167}',
+        expectedText: "151-167 of 167",
       },
     ])('should render the info text "$expectedText"', async (testCase) => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        currentPage: testCase.currentPage,
-        limit: testCase.limit,
-        totalItems: testCase.totalItems,
+      render(MtPagination, {
+        props: {
+          currentPage: testCase.currentPage,
+          limit: testCase.limit,
+          totalItems: testCase.totalItems,
+        },
       });
 
-      const infoText = wrapper.find("[data-testid='mt-pagination-info-text']").text();
+      const infoText = screen.getByText(testCase.expectedText);
 
-      expect(infoText).toStrictEqual(testCase.expectedText);
+      expect(infoText).toBeVisible();
     });
   });
 
   describe("should emit the correct events", () => {
     it("should emit the first page", async () => {
-      const wrapper = createWrapper();
+      const handler = vi.fn();
 
-      await wrapper.find("[data-testid='mt-pagination-first-page-button']").trigger("click");
+      render(MtPagination, {
+        props: {
+          currentPage: 3,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
+      });
+
+      await userEvent.click(screen.getByRole("button", { name: "First page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([1]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(1);
     });
 
     it("should emit the previous page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 4,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 4,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-previous-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Previous page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([3]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(3);
     });
 
     it("should emit the next page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 6,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 6,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-next-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Next page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([7]);
+      expect(handler).toHaveBeenLastCalledWith(7);
+      expect(handler).toHaveBeenCalledOnce();
     });
 
     it("should emit the last page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 2,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 2,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-last-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Last page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([9]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(9);
     });
 
     it("should emit the given page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 2,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 2,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      const pageInput = wrapper.find("[data-testid='mt-pagination-current-page-input']");
-      await pageInput.setValue(7);
-      await pageInput.trigger("change");
+      await userEvent.type(screen.getByRole("spinbutton"), "{Backspace}7");
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([7]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(7);
     });
 
     it("should disable the next page and last page button when total page value is zero", async () => {
@@ -129,18 +142,10 @@ describe("mt-pagination", () => {
           totalItems: 0,
           limit: 25,
         },
-        global: {
-          mocks: {
-            $t: mockT,
-          },
-        },
       });
 
-      const nextPageButton = screen.getByRole("button", { name: /mt-pagination.nextPage/i });
-      const lastPageButton = screen.getByRole("button", { name: /mt-pagination.lastPage/i });
-
-      expect(nextPageButton).toBeDisabled();
-      expect(lastPageButton).toBeDisabled();
+      expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+      expect(screen.getByRole("button", { name: "Last page" })).toBeDisabled();
     });
   });
 });