fix: update sorting tests

Author: ShadowCatP

src/app/dashboard/events/[id]/participants/table/__tests__/sorting.test.tsx

@@ -1,7 +1,14 @@
 import { cleanup, screen } from "@testing-library/react";
+import { format } from "date-fns";
 import { describe, expect, it } from "vitest";
 
-import { stringLikeDataTestCases, textCaseData } from "./mocks/test-cases-data";
+import type { Attribute } from "@/types/attributes";
+
+import {
+  numberCaseData,
+  stringLikeDataTestCases,
+  textCaseData,
+} from "./mocks/test-cases-data";
 import { renderTable } from "./utils";
 
 /**
@@ -10,6 +17,53 @@ import { renderTable } from "./utils";
  * But maybe it will be useful in the future, maybe...
  */
 
+interface ParticipantForSortingTest {
+  createdAt: string;
+  attributes: {
+    value?: string | string[] | number | Date | null | undefined;
+  }[];
+}
+
+function getDisplayedAttributeValue(
+  participant: ParticipantForSortingTest,
+  attributeType?: string,
+) {
+  const value = participant.attributes[0]?.value;
+
+  if (value == null) {
+    return "";
+  }
+
+  if (Array.isArray(value)) {
+    return attributeType === "multiselect" ? value.join(", ") : value.join(",");
+  }
+
+  if (attributeType === "date") {
+    return format(new Date(value), "dd-MM-yyyy");
+  }
+
+  if (attributeType === "multiselect") {
+    return typeof value === "string" ? value.split(",").join(", ") : "";
+  }
+
+  return String(value);
+}
+
+function getCreatedAtSortedOrder(
+  participants: ParticipantForSortingTest[],
+  attributeType?: string,
+) {
+  return participants
+    .toSorted((left, right) => {
+      return (
+        new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime()
+      );
+    })
+    .map((participant) => {
+      return getDisplayedAttributeValue(participant, attributeType);
+    });
+}
+
 describe("Sorting", () => {
   // In current implementation first 4 columns are fixed:
   // Select checkbox | No. | Registration date | Email
@@ -19,18 +73,19 @@ describe("Sorting", () => {
     cleanup();
   });
 
-  // Default sorting state cycle - 'none' -> 'asc' -> 'desc' -> 'none'
+  // Default view starts at createdAt asc, then the column cycles asc -> desc -> none.
   it.each([...stringLikeDataTestCases])(
     "should correctly cycle through each sorting state when sorting by $attributeType type",
-    async ({ participants, attributes }) => {
+    async ({ participants, attributes, attributeType }) => {
+      const typedAttributes = attributes as unknown as Attribute[];
       const { user, getDisplayedValuesFromColumn } = renderTable(
         participants,
-        attributes,
+        typedAttributes,
       );
 
       const getSortHeader = () =>
         screen.getByRole("button", {
-          name: attributes[0].name,
+          name: typedAttributes[0].name,
         });
 
       const initialOrder = getDisplayedValuesFromColumn(TESTED_COLUMN_INDEX);
@@ -44,18 +99,26 @@ describe("Sorting", () => {
       await user.click(getSortHeader());
       const finalOrder = getDisplayedValuesFromColumn(TESTED_COLUMN_INDEX);
 
+      expect(initialOrder).toEqual(
+        getCreatedAtSortedOrder(participants, attributeType),
+      );
       expect(descendingOrder).not.toEqual(ascendingOrder);
-      expect(finalOrder).toEqual(initialOrder);
+      expect(finalOrder).toEqual(
+        participants.map((participant) => {
+          return getDisplayedAttributeValue(participant, attributeType);
+        }),
+      );
     },
   );
 
   it("should reset any sorting", async () => {
-    const { participants, attributes } = textCaseData;
+    const { participants, attributes, attributeType } = numberCaseData;
+    const typedAttributes = attributes as unknown as Attribute[];
     const { user, getDisplayedValuesFromColumn, resetSortingButton } =
-      renderTable(participants, attributes);
+      renderTable(participants, typedAttributes);
 
     const sortHeader = screen.getByRole("button", {
-      name: attributes[0].name,
+      name: typedAttributes[0].name,
     });
 
     // Step 1: Capture initial order
@@ -69,21 +132,29 @@ describe("Sorting", () => {
     await user.click(resetSortingButton);
     const finalOrder = getDisplayedValuesFromColumn(TESTED_COLUMN_INDEX);
 
+    expect(initialOrder).toEqual(
+      getCreatedAtSortedOrder(participants, attributeType),
+    );
     expect(ascendingOrder).not.toEqual(initialOrder);
-    expect(finalOrder).toEqual(initialOrder);
+    expect(finalOrder).toEqual(
+      participants.map((participant) => {
+        return getDisplayedAttributeValue(participant, attributeType);
+      }),
+    );
   });
 
   it("should properly apply multisort", async () => {
     const { participants, attributes } = textCaseData;
-    const { user } = renderTable(participants, attributes);
+    const typedAttributes = attributes as unknown as Attribute[];
+    const { user } = renderTable(participants, typedAttributes);
 
     const getTextSortHeader = () =>
       screen.getByRole("columnheader", {
-        name: attributes[0].name,
+        name: typedAttributes[0].name,
       });
     const getTextSortHeaderButton = () =>
       screen.getByRole("button", {
-        name: attributes[0].name,
+        name: typedAttributes[0].name,
       });
 
     // eslint-disable-next-line unicorn/consistent-function-scoping