From 23b3379aa45d5e52766ea8b3e8d79d18a4266a76 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 2 Oct 2024 09:46:25 +0200
Subject: [PATCH] migrate mt-pagination over to composition api

---
 .../mt-pagination/mt-pagination.spec.ts       | 147 ++++++++--------
 .../mt-pagination/mt-pagination.vue           | 161 ++++++++----------
 2 files changed, 145 insertions(+), 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
index c041eca6a..a33a8c33e 100644
--- 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();
     });
   });
 });
diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
index f84d906b7..281d2d8bb 100644
--- a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
+++ b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
@@ -2,7 +2,7 @@
   <div class="mt-pagination">
     <p class="mt-pagination__info-text" data-testid="mt-pagination-info-text">
       {{
-        $t("mt-pagination.infoText", {
+        t("infoText", {
           start: firstVisibleItemNumber,
           end: lastVisibleItemNumber,
           totalItems,
@@ -17,7 +17,7 @@
         @click="$emit('change-current-page', 1)"
         data-testid="mt-pagination-first-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.firstPage") }}</span>
+        <span class="visually-hidden">{{ t("firstPage") }}</span>
 
         <mt-icon name="regular-double-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -28,7 +28,7 @@
         @click="$emit('change-current-page', currentPage - 1)"
         data-testid="mt-pagination-previous-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.previousPage") }}</span>
+        <span class="visually-hidden">{{ t("previousPage") }}</span>
 
         <mt-icon name="regular-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -51,7 +51,7 @@
         @click="$emit('change-current-page', currentPage + 1)"
         data-testid="mt-pagination-next-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.nextPage") }}</span>
+        <span class="visually-hidden">{{ t("nextPage") }}</span>
 
         <mt-icon name="regular-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -62,7 +62,7 @@
         @click="$emit('change-current-page', totalPages)"
         data-testid="mt-pagination-last-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.lastPage") }}</span>
+        <span class="visually-hidden">{{ t("lastPage") }}</span>
 
         <mt-icon name="regular-double-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -70,98 +70,75 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, watch } from "vue";
+<script setup lang="ts">
+import { computed, watch } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-
-export default defineComponent({
-  components: {
-    "mt-icon": MtIcon,
-  },
-  props: {
-    currentPage: {
-      type: Number,
-      required: true,
-    },
-    limit: {
-      type: Number,
-      required: true,
+import { useI18n } from "@/composables/useI18n";
+
+const props = defineProps<{
+  currentPage: number;
+  limit: number;
+  totalItems: number;
+}>();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      infoText: "{start}-{end} of {totalItems}",
+      firstPage: "First page",
+      previousPage: "Previous page",
+      nextPage: "Next page",
+      lastPage: "Last page",
     },
-    totalItems: {
-      type: Number,
-      required: true,
-    },
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-pagination": {
-          infoText: "{start}-{end} of {totalItems}",
-          firstPage: "First page",
-          previousPage: "Previous page",
-          nextPage: "Next page",
-          lastPage: "Last page",
-        },
-      },
-      de: {
-        "mt-pagination": {
-          infoText: "{start}-{end} von {totalItems}",
-          firstPage: "Erste Seite",
-          previousPage: "Voherige Seite",
-          nextPage: "Nächste Seite",
-          lastPage: "Letzte Seite",
-        },
-      },
+    de: {
+      infoText: "{start}-{end} von {totalItems}",
+      firstPage: "Erste Seite",
+      previousPage: "Voherige Seite",
+      nextPage: "Nächste Seite",
+      lastPage: "Letzte Seite",
     },
   },
-  emits: ["change-current-page"],
-  setup(props, { emit }) {
-    watch(
-      () => props.limit,
-      () => {
-        emit("change-current-page", 1);
-      },
-    );
-
-    const totalPages = computed(() => {
-      return Math.max(1, Math.ceil(props.totalItems / props.limit));
-    });
-
-    const isOnFirstPage = computed(() => props.currentPage === 1);
-    const isOnLastPage = computed(() => props.currentPage === totalPages.value);
-
-    const inputLength = computed(() => {
-      const length = props.currentPage.toString().length;
-      if (length === 0) return "calc(1ch + 1px)";
-
-      return `calc(${length}ch + 1px)`;
-    });
-
-    function onChangeInput(event: Event) {
-      const target = event.target as HTMLInputElement;
-      if (target.value === "") return;
-
-      emit("change-current-page", parseInt(target.value));
-    }
-
-    const firstVisibleItemNumber = computed(() => (props.currentPage - 1) * props.limit + 1);
-    const lastVisibleItemNumber = computed(() => {
-      const lastItemNumberWithLimitOnly = props.limit * props.currentPage;
-      return lastItemNumberWithLimitOnly > props.totalItems
-        ? props.totalItems
-        : lastItemNumberWithLimitOnly;
-    });
-
-    return {
-      totalPages,
-      inputLength,
-      isOnLastPage,
-      isOnFirstPage,
-      onChangeInput,
-      firstVisibleItemNumber,
-      lastVisibleItemNumber,
-    };
+});
+
+const emit = defineEmits<{
+  (e: "change-current-page", value: number): void;
+}>();
+
+watch(
+  () => props.limit,
+  () => {
+    emit("change-current-page", 1);
   },
+);
+
+const totalPages = computed(() => {
+  return Math.max(1, Math.ceil(props.totalItems / props.limit));
+});
+
+const isOnFirstPage = computed(() => props.currentPage === 1);
+const isOnLastPage = computed(() => props.currentPage === totalPages.value);
+
+const inputLength = computed(() => {
+  const length = props.currentPage.toString().length;
+  if (length === 0) return "calc(1ch + 1px)";
+
+  return `calc(${length}ch + 1px)`;
+});
+
+function onChangeInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.value === "") return;
+
+  emit("change-current-page", parseInt(target.value));
+}
+
+const firstVisibleItemNumber = computed(() => (props.currentPage - 1) * props.limit + 1);
+const lastVisibleItemNumber = computed(() => {
+  const lastItemNumberWithLimitOnly = props.limit * props.currentPage;
+
+  return lastItemNumberWithLimitOnly > props.totalItems
+    ? props.totalItems
+    : lastItemNumberWithLimitOnly;
 });
 </script>