Skip to content

Commit 40d3dd5

Browse files
Mil4n0rMil4n0r
committed
Fixed TypeScript problems in stories and tests
1 parent c36d9f6 commit 40d3dd5

34 files changed

+564
-496
lines changed

‎packages/lib/.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,7 @@ module.exports = {
77
project: "./tsconfig.lint.json",
88
tsconfigRootDir: __dirname,
99
},
10+
env: {
11+
"jest/globals": true,
12+
},
1013
};

‎packages/lib/src/BackgroundColorContext.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { createContext, ReactNode, useMemo } from "react";
2-
import Color from "color";
1+
// import { createContext, ReactNode, useMemo } from "react";
2+
// import Color from "color";
33

4-
type BackgroundColors = "dark" | "light";
5-
const BackgroundColorContext = createContext<BackgroundColors | null>(null);
4+
// type BackgroundColors = "dark" | "light";
5+
// const BackgroundColorContext = createContext<BackgroundColors | null>(null);
66

7-
const getColorType = (hexColor: string): BackgroundColors => {
8-
try {
9-
if (hexColor) {
10-
const hslColor = Color(hexColor).hsl();
11-
const lightnessColor = hslColor.lightness();
12-
return lightnessColor <= 30 ? "dark" : "light";
13-
}
14-
} catch (e) {
15-
return "light";
16-
}
17-
};
7+
// const getColorType = (hexColor: string): BackgroundColors => {
8+
// try {
9+
// if (hexColor) {
10+
// const hslColor = Color(hexColor).hsl();
11+
// const lightnessColor = hslColor.lightness();
12+
// return lightnessColor <= 30 ? "dark" : "light";
13+
// } else {
14+
// return "light";
15+
// }
16+
// } catch (e) {
17+
// return "light";
18+
// }
19+
// };
1820

19-
type BackgroundColorProviderPropsType = {
20-
color: string;
21-
children: ReactNode;
22-
};
23-
const BackgroundColorProvider = ({ color, children }: BackgroundColorProviderPropsType): JSX.Element => {
24-
const colorType = useMemo(() => getColorType(color), [color]);
25-
return <BackgroundColorContext.Provider value={colorType}>{children}</BackgroundColorContext.Provider>;
26-
};
21+
// type BackgroundColorProviderPropsType = {
22+
// color: string;
23+
// children: ReactNode;
24+
// };
25+
// const BackgroundColorProvider = ({ color, children }: BackgroundColorProviderPropsType): JSX.Element => {
26+
// const colorType = useMemo(() => getColorType(color), [color]);
27+
// return <BackgroundColorContext.Provider value={colorType}>{children}</BackgroundColorContext.Provider>;
28+
// };

‎packages/lib/src/data-grid/DataGrid.stories.tsx‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
33
import DxcDataGrid from "./DataGrid";
44
import DxcContainer from "../container/Container";
55
import { GridColumn, HierarchyGridRow } from "./types";
6-
import { useState } from "react";
6+
import { isValidElement, useState } from "react";
77
import { disabledRules } from "../../test/accessibility/rules/specific/data-grid/disabledRules";
88
import preview from "../../.storybook/preview";
99
import { userEvent, within } from "@storybook/test";
1010
import DxcBadge from "../badge/Badge";
1111
import { ActionsPropsType } from "../table/types";
1212
import { Meta, StoryObj } from "@storybook/react";
13+
import { isKeyOfRow } from "./utils";
1314

1415
export default {
1516
title: "Data Grid",
@@ -588,8 +589,12 @@ const customSortColumns: GridColumn[] = [
588589
alignment: "center",
589590
summaryKey: "total",
590591
sortable: true,
591-
sortFn: (a: JSX.Element, b: JSX.Element) =>
592-
a.props.label < b.props.label ? -1 : a.props.label > b.props.label ? 1 : 0,
592+
sortFn: (a, b) => {
593+
if (isValidElement(a) && isValidElement(b)) {
594+
return a.props.label < b.props.label ? -1 : a.props.label > b.props.label ? 1 : 0;
595+
}
596+
return 0;
597+
},
593598
},
594599
];
595600

@@ -729,10 +734,20 @@ const DataGrid = () => {
729734
console.log(`Sorting the column '${columnKey}' by '${direction}' direction`);
730735
setRowsControlled((currentRows) => {
731736
return currentRows.sort((a, b) => {
732-
if (direction === "ASC") {
733-
return a[columnKey] < b[columnKey] ? -1 : a[columnKey] > b[columnKey] ? 1 : 0;
737+
if (isKeyOfRow(columnKey, a) && isKeyOfRow(columnKey, b)) {
738+
const valueA = a[columnKey];
739+
const valueB = b[columnKey];
740+
if (valueA != null && valueB != null) {
741+
if (direction === "ASC") {
742+
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
743+
} else {
744+
return valueA < valueB ? 1 : valueA > valueB ? -1 : 0;
745+
}
746+
} else {
747+
return 0;
748+
}
734749
} else {
735-
return a[columnKey] < b[columnKey] ? 1 : a[columnKey] > b[columnKey] ? -1 : 0;
750+
return 0;
736751
}
737752
});
738753
});
@@ -925,39 +940,43 @@ export const DataGridSortedWithChildren: Story = {
925940
render: DataGridSortedChildren,
926941
play: async ({ canvasElement }) => {
927942
const canvas = within(canvasElement);
943+
const checkboxes = canvas.getAllByRole("checkbox");
944+
const columnheaders = canvas.getAllByRole("columnheader");
928945

929-
await userEvent.click(canvas.getAllByRole("checkbox")[0]);
946+
checkboxes[0] && (await userEvent.click(checkboxes[0]));
930947
await userEvent.click(canvas.getByText("Root Node 1"));
931948
await userEvent.click(canvas.getByText("Root Node 2"));
932949
await userEvent.click(canvas.getByText("Child Node 1.1"));
933950
await userEvent.click(canvas.getByText("Child Node 2.1"));
934-
await userEvent.click(canvas.getAllByRole("columnheader")[1]);
935-
await userEvent.click(canvas.getAllByRole("columnheader")[1]);
936-
await userEvent.click(canvas.getAllByRole("checkbox")[5]);
951+
columnheaders[1] && (await userEvent.click(columnheaders[1]));
952+
columnheaders[1] && (await userEvent.click(columnheaders[1]));
953+
checkboxes[5] && (await userEvent.click(checkboxes[5]));
937954

938-
await userEvent.click(canvas.getAllByRole("checkbox")[13]);
955+
checkboxes[13] && (await userEvent.click(checkboxes[13]));
939956
await userEvent.click(canvas.getByText("Paginated Node 1"));
940957
await userEvent.click(canvas.getByText("Paginated Node 2"));
941958
await userEvent.click(canvas.getByText("Paginated Node 1.1"));
942959
await userEvent.click(canvas.getByText("Paginated Node 2.1"));
943-
await userEvent.click(canvas.getAllByRole("columnheader")[4]);
944-
await userEvent.click(canvas.getAllByRole("checkbox")[18]);
960+
columnheaders[4] && (await userEvent.click(columnheaders[4]));
961+
checkboxes[18] && (await userEvent.click(checkboxes[18]));
945962
},
946963
};
947964

948965
export const DataGridSortedExpanded: Story = {
949966
render: DataGridSortedExpandable,
950967
play: async ({ canvasElement }) => {
951968
const canvas = within(canvasElement);
952-
await userEvent.click(canvas.getAllByRole("button")[0]);
953-
await userEvent.click(canvas.getAllByRole("button")[1]);
954-
await userEvent.click(canvas.getAllByRole("columnheader")[4]);
955-
await userEvent.click(canvas.getAllByRole("button")[9]);
956-
await userEvent.click(canvas.getAllByRole("button")[10]);
957-
await userEvent.click(canvas.getAllByRole("columnheader")[10]);
958-
await userEvent.click(canvas.getAllByRole("button")[16]);
959-
await userEvent.click(canvas.getAllByRole("button")[43]);
960-
await userEvent.click(canvas.getAllByRole("button")[36]);
961-
await userEvent.click(canvas.getAllByRole("button")[37]);
969+
const buttons = canvas.getAllByRole("button");
970+
const columnHeaders = canvas.getAllByRole("columnheader");
971+
buttons[0] && (await userEvent.click(buttons[0]));
972+
buttons[1] && (await userEvent.click(buttons[1]));
973+
columnHeaders[4] && (await userEvent.click(columnHeaders[4]));
974+
buttons[9] && (await userEvent.click(buttons[9]));
975+
buttons[10] && (await userEvent.click(buttons[10]));
976+
columnHeaders[10] && (await userEvent.click(columnHeaders[10]));
977+
buttons[16] && (await userEvent.click(buttons[16]));
978+
buttons[43] && (await userEvent.click(buttons[43]));
979+
buttons[36] && (await userEvent.click(buttons[36]));
980+
buttons[37] && (await userEvent.click(buttons[37]));
962981
},
963982
};

‎packages/lib/src/data-grid/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export type GridColumn = {
2121
/**
2222
* Custom criteria for sorting the column.
2323
*/
24-
sortFn?: (_a: ReactNode, _b: ReactNode) => number;
24+
sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
2525
/**
2626
* Whether the column is draggable or not.
2727
*/

‎packages/lib/src/data-grid/utils.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,13 @@ export const convertToRDGColumns = (
4949
headerCellClass: gridColumn.alignment ? `header-align-${gridColumn.alignment}` : `header-align-left`,
5050
renderEditCell: gridColumn.textEditable ? textEditor : undefined,
5151
renderCell: ({ row }) => (
52-
<div className={`ellipsis-cell ${gridColumn.alignment ? `align-${ gridColumn.alignment}` : "align-left"}`}>
53-
{row[gridColumn.key]}
54-
</div>
55-
),
56-
renderSummaryCell: () => gridColumn.summaryKey ? (
57-
<div className={`ellipsis-cell ${gridColumn.alignment ? `align-${ gridColumn.alignment}` : "align-left"}`}>
52+
<div className={`ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`}>
53+
{row[gridColumn.key]}
54+
</div>
55+
),
56+
renderSummaryCell: () =>
57+
gridColumn.summaryKey ? (
58+
<div className={`ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`}>
5859
{summaryRow?.[gridColumn.summaryKey]}
5960
</div>
6061
) : undefined,
@@ -591,3 +592,17 @@ export const getPaginatedNodes = (
591592
)
592593
);
593594
};
595+
596+
/**
597+
* Type guard to ensure `key` is a valid key of the `row` object.
598+
* This function checks if the given `key` exists within the provided object `obj`.
599+
*
600+
* @template T - The type of the row object.
601+
* @param {string} key - The key to check if it exists in the row object.
602+
* @param {T} obj - The row object to check the key against.
603+
* @returns {boolean} - Returns `true` if `key` is a valid key of `obj`, otherwise `false`.
604+
*
605+
*/
606+
export const isKeyOfRow = <T extends GridRow>(key: string, obj: T): key is Extract<keyof T, string> => {
607+
return key in obj;
608+
};

‎packages/lib/src/nav-tabs/NavTabs.test.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ describe("Tabs component tests", () => {
2525
});
2626
const anchors = getAllByRole("tab");
2727
expect(anchors.length).toBe(3);
28-
expect(anchors[0].getAttribute("href")).toBe("/test1");
29-
expect(anchors[1].getAttribute("href")).toBeFalsy();
30-
expect(anchors[2].getAttribute("href")).toBe("/test3");
31-
expect(anchors[0].getAttribute("tabindex")).toBe("0");
32-
expect(anchors[1].getAttribute("tabindex")).toBe("-1");
33-
expect(anchors[2].getAttribute("tabindex")).toBe("-1");
28+
expect(anchors[0]?.getAttribute("href")).toBe("/test1");
29+
expect(anchors[1]?.getAttribute("href")).toBeFalsy();
30+
expect(anchors[2]?.getAttribute("href")).toBe("/test3");
31+
expect(anchors[0]?.getAttribute("tabindex")).toBe("0");
32+
expect(anchors[1]?.getAttribute("tabindex")).toBe("-1");
33+
expect(anchors[2]?.getAttribute("tabindex")).toBe("-1");
3434
});
3535

3636
test("Tabs render with correct labels, badges and icons", () => {
@@ -65,8 +65,8 @@ describe("Tabs component tests", () => {
6565
</DxcNavTabs>
6666
);
6767
const tabs = getAllByRole("tab");
68-
expect(tabs[0].getAttribute("tabindex")).toBe("-1");
69-
expect(tabs[1].getAttribute("tabindex")).toBe("-1");
70-
expect(tabs[2].getAttribute("tabindex")).toBe("3");
68+
expect(tabs[0]?.getAttribute("tabindex")).toBe("-1");
69+
expect(tabs[1]?.getAttribute("tabindex")).toBe("-1");
70+
expect(tabs[2]?.getAttribute("tabindex")).toBe("3");
7171
});
7272
});

0 commit comments

Comments
 (0)