Merge pull request #2082 from dxc-technology/Mil4n0r/fix_resultset_table_sort

Fixed problem in ResultsetTable when sortValue is missing

Author: jsuarezgonz

packages/lib/src/resultset-table/ResultsetTable.stories.tsx

@@ -161,6 +161,21 @@ const rowsSortable = [
   ],
 ];
 
+const rowsSortableMissingSortValues = [
+  [{ displayValue: "001" }, { displayValue: "Peter" }, { displayValue: "Miami" }],
+  [{ displayValue: "002" }, { displayValue: "Louis" }, { displayValue: "London" }],
+  [
+    { displayValue: "003", sortValue: "003" },
+    { displayValue: "Aida", sortValue: "Aida" },
+    { displayValue: "Wroclaw", sortValue: "Wroclaw" },
+  ],
+  [
+    { displayValue: "004", sortValue: "004" },
+    { displayValue: "Lana", sortValue: "Lana" },
+    { displayValue: "Amsterdam", sortValue: "Amsterdam" },
+  ],
+];
+
 const longColumns = [
   { displayValue: "Column1" },
   { displayValue: "Column2" },
@@ -259,6 +274,10 @@ export const Chromatic = () => (
       <Title title="Sortable table" theme="light" level={4} />
       <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Sortable table with missing sortValues" theme="light" level={4} />
+      <DxcResultsetTable columns={columnsSortable} rows={rowsSortableMissingSortValues} />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="With action" theme="light" level={4} />
       <DxcResultsetTable columns={columns} rows={rowsIcon} />
@@ -340,29 +359,36 @@ const ResultsetTableAsc = () => (
   <ExampleContainer>
     <Title title="Ascendant sorting" theme="light" level={4} />
     <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortableMissingSortValues} />
   </ExampleContainer>
 );
 
 export const AscendentSorting = ResultsetTableAsc.bind({});
 AscendentSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const idHeader = canvas.getAllByRole("button")[0];
+  const idHeader2 = canvas.getAllByRole("button")[6];
   await userEvent.click(idHeader);
+  await userEvent.click(idHeader2);
 };
 
 const ResultsetTableDesc = () => (
   <ExampleContainer>
     <Title title="Descendant sorting" theme="light" level={4} />
     <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortableMissingSortValues} />
   </ExampleContainer>
 );
 
 export const DescendantSorting = ResultsetTableDesc.bind({});
 DescendantSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const nameHeader = canvas.getAllByRole("button")[1];
+  const nameHeader2 = canvas.getAllByRole("button")[7];
   await userEvent.click(nameHeader);
   await userEvent.click(nameHeader);
+  await userEvent.click(nameHeader2);
+  await userEvent.click(nameHeader2);
 };
 
 const ResultsetTableMiddle = () => (

packages/lib/src/resultset-table/ResultsetTable.test.tsx

@@ -179,6 +179,134 @@ const rows = [
   ],
 ];
 
+const rowsMissingSortValues = [
+  [
+    {
+      displayValue: "001",
+    },
+    {
+      displayValue: "Peter",
+    },
+    {
+      displayValue: "Oviedo",
+    },
+  ],
+  [
+    {
+      displayValue: "002",
+      sortValue: "002",
+    },
+    {
+      displayValue: "Louis",
+      sortValue: "Louis",
+    },
+    {
+      displayValue: "Oviedo",
+      sortValue: "Oviedo",
+    },
+  ],
+  [
+    {
+      displayValue: "003",
+    },
+    {
+      displayValue: "Lana",
+    },
+    {
+      displayValue: "Albacete",
+    },
+  ],
+  [
+    {
+      displayValue: "004",
+      sortValue: "004",
+    },
+    {
+      displayValue: "Rick",
+      sortValue: "Rick",
+    },
+    {
+      displayValue: "Albacete",
+      sortValue: "Albacete",
+    },
+  ],
+  [
+    {
+      displayValue: "005",
+    },
+    {
+      displayValue: "Mark",
+    },
+    {
+      displayValue: "Madrid",
+    },
+  ],
+  [
+    {
+      displayValue: "006",
+      sortValue: "006",
+    },
+    {
+      displayValue: "Cris",
+      sortValue: "Cris",
+    },
+    {
+      displayValue: "Barcelona",
+      sortValue: "Barcelona",
+    },
+  ],
+  [
+    {
+      displayValue: "007",
+    },
+    {
+      displayValue: "Susan",
+    },
+    {
+      displayValue: "Madrid",
+    },
+  ],
+  [
+    {
+      displayValue: "008",
+      sortValue: "008",
+    },
+    {
+      displayValue: "Tina",
+      sortValue: "Tina",
+    },
+    {
+      displayValue: "Barcelona",
+      sortValue: "Barcelona",
+    },
+  ],
+  [
+    {
+      displayValue: "009",
+    },
+    {
+      displayValue: "Kevin",
+    },
+    {
+      displayValue: "Oviedo",
+    },
+  ],
+  [
+    {
+      displayValue: "010",
+      sortValue: "010",
+    },
+    {
+      displayValue: "Cosmin",
+      sortValue: "Cosmin",
+    },
+    {
+      displayValue: "Barcelona",
+      sortValue: "Barcelona",
+    },
+  ],
+];
+
 const columnsWithCheckbox = [
   { displayValue: "Id", isSortable: true },
   { displayValue: "Checkbox", isSortable: false },
@@ -283,6 +411,18 @@ describe("Resultset table component tests", () => {
     expect(component.queryByText("Cosmin")).not.toBeTruthy();
   });
 
+  test("Resultset table sort rows by column even if they are missing sortValues", () => {
+    const component = render(<DxcResultsetTable columns={columns} rows={rowsMissingSortValues} itemsPerPage={3} />);
+    expect(component.queryByText("Peter")).toBeTruthy();
+    fireEvent.click(component.queryByText("Name"));
+    expect(component.queryByText("Tina")).not.toBeTruthy();
+    expect(component.queryByText("Cosmin")).toBeTruthy();
+
+    fireEvent.click(component.queryByText("Name"));
+    expect(component.queryByText("Tina")).toBeTruthy();
+    expect(component.queryByText("Cosmin")).not.toBeTruthy();
+  });
+
   test("Resultset table should go one page back when removing the last page data", () => {
     const { getAllByRole, queryByText, rerender } = render(
       <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3} />

packages/lib/src/resultset-table/ResultsetTable.tsx

@@ -9,7 +9,7 @@ import useTheme from "../useTheme";
 import icons from "./Icons";
 import ResultsetTablePropsType, { Column, Row } from "./types";
 
-const normalizeSortValue = (sortValue: string | React.ReactNode) =>
+const normalizeSortValue = (sortValue: string | Date | React.ReactNode) =>
   typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
 
 const isDateType = (value: React.ReactNode | Date): boolean => {
@@ -18,8 +18,8 @@ const isDateType = (value: React.ReactNode | Date): boolean => {
 
 const sortArray = (index: number, order: "ascending" | "descending", resultset: { id: string; cells: Row }[]) =>
   resultset.slice().sort((element1, element2) => {
-    const sortValueA = normalizeSortValue(element1.cells[index].sortValue || element1[index].displayValue);
-    const sortValueB = normalizeSortValue(element2.cells[index].sortValue || element2[index].displayValue);
+    const sortValueA = normalizeSortValue(element1?.cells[index]?.sortValue || element1?.cells[index]?.displayValue);
+    const sortValueB = normalizeSortValue(element2?.cells[index]?.sortValue || element2?.cells[index]?.displayValue);
     let comparison = 0;
     if (typeof sortValueA === "object" && !isDateType(sortValueA)) {
       comparison = -1;