Skip to content

Fixed problem in ResultsetTable when sortValue is missing #2082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 23, 2024
Merged

Fixed problem in ResultsetTable when sortValue is missing #2082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37a90a7
Fixed problem when sortValue is missing
Mil4n0r Aug 22, 2024
0946c62
Added functional test for rows with missing sortValue
Mil4n0r Aug 22, 2024
f2749ff
Refactorized new functional tests
Mil4n0r Aug 22, 2024
027d4cd
Added functional tests for the missing sortValues scenario
Mil4n0r Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/lib/src/resultset-table/ResultsetTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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 = () => (
Expand Down
140 changes: 140 additions & 0 deletions packages/lib/src/resultset-table/ResultsetTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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} />
Expand Down
6 changes: 3 additions & 3 deletions packages/lib/src/resultset-table/ResultsetTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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;
Expand Down