Skip to content

Commit d2ed61f

Browse files
JialeclJialecl
authored
Merge pull request #2231 from dxc-technology/Mil4n0r/improve_test_coverage
Improved test coverage
2 parents 1c91840 + 44bf4ce commit d2ed61f

File tree

8 files changed

+395
-36
lines changed

8 files changed

+395
-36
lines changed

‎packages/lib/jest.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
module.exports = {
22
collectCoverage: true,
3+
coveragePathIgnorePatterns: [
4+
"utils.ts",
5+
"index.ts",
6+
".*Context\\.tsx$", // Is deprecated and will be removed in the future
7+
],
38
moduleNameMapper: {
49
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
510
"\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",

‎packages/lib/src/bulleted-list/BulletedList.test.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { render } from "@testing-library/react";
22
import DxcBulletedList from "./BulletedList";
3+
import DxcIcon from "../icon/Icon";
34

45
describe("Bulleted list component tests", () => {
56
test("The component renders properly", () => {
@@ -14,4 +15,49 @@ describe("Bulleted list component tests", () => {
1415
expect(getByText("Usage")).toBeTruthy();
1516
expect(getByText("Specifications")).toBeTruthy();
1617
});
18+
test("The component renders default (disc) bullets", () => {
19+
const { container } = render(
20+
<DxcBulletedList>
21+
<DxcBulletedList.Item>Item 1</DxcBulletedList.Item>
22+
</DxcBulletedList>
23+
);
24+
expect(container.querySelector("ul")).toBeTruthy();
25+
expect(container.querySelector("div")).toBeTruthy();
26+
});
27+
28+
test("The component renders number bullets", () => {
29+
const { container, getByText } = render(
30+
<DxcBulletedList type="number">
31+
<DxcBulletedList.Item>Numbered Item</DxcBulletedList.Item>
32+
</DxcBulletedList>
33+
);
34+
expect(container.querySelector("ol")).toBeTruthy();
35+
expect(getByText("1.")).toBeTruthy();
36+
});
37+
38+
test("The component renders icon bullets with icon string", () => {
39+
const { container } = render(
40+
<DxcBulletedList type="icon" icon="home">
41+
<DxcBulletedList.Item>Icon Item</DxcBulletedList.Item>
42+
</DxcBulletedList>
43+
);
44+
expect(container.querySelector("span")).toBeTruthy();
45+
expect(container.innerHTML).toContain("Icon Item");
46+
});
47+
48+
test("The component renders icon bullets with React element icon", () => {
49+
const icon = (
50+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
51+
<path d="M0 0h24v24H0V0z" fill="none" />
52+
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
53+
</svg>
54+
);
55+
const { container } = render(
56+
<DxcBulletedList type="icon" icon={icon}>
57+
<DxcBulletedList.Item>Icon React Element</DxcBulletedList.Item>
58+
</DxcBulletedList>
59+
);
60+
expect(container.querySelector("svg")).toBeTruthy();
61+
expect(container.innerHTML).toContain("Icon React Element");
62+
});
1763
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { disabledRules } from "../../test/accessibility/rules/specific/data-grid
88
import preview from "../../.storybook/preview";
99
import { userEvent, within } from "@storybook/test";
1010
import DxcBadge from "../badge/Badge";
11-
import { Action } from "../table/types";
11+
import { ActionsCellPropsType } from "../table/types";
1212
import { Meta, StoryObj } from "@storybook/react";
1313
import { isKeyOfRow } from "./utils";
1414

@@ -27,7 +27,7 @@ export default {
2727
},
2828
} as Meta<typeof DxcDataGrid>;
2929

30-
const actions: Action = [
30+
const actions: ActionsCellPropsType["actions"] = [
3131
{
3232
title: "icon",
3333
onClick: (value?) => {

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

Lines changed: 220 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from "@testing-library/react";
1+
import { fireEvent, render, waitFor } from "@testing-library/react";
22
import DxcDataGrid from "./DataGrid";
33
import { GridColumn, HierarchyGridRow } from "./types";
44

@@ -13,7 +13,7 @@ const columns: GridColumn[] = [
1313
},
1414
{
1515
key: "complete",
16-
label: " % Complete",
16+
label: "% Complete",
1717
resizable: true,
1818
sortable: true,
1919
draggable: true,
@@ -48,31 +48,234 @@ const expandableRows = [
4848
},
4949
];
5050

51+
const hierarchyRows: HierarchyGridRow[] = [
52+
{
53+
name: "Root Node 1",
54+
value: "1",
55+
id: "a",
56+
childRows: [
57+
{
58+
name: "Child Node 1.1",
59+
value: "1.1",
60+
id: "aa",
61+
childRows: [
62+
{
63+
name: "Grandchild Node 1.1.1",
64+
value: "1.1.1",
65+
id: "aaa",
66+
},
67+
{
68+
name: "Grandchild Node 1.1.2",
69+
value: "1.1.2",
70+
id: "aab",
71+
},
72+
],
73+
},
74+
{
75+
name: "Child Node 1.2",
76+
value: "1.2",
77+
id: "ab",
78+
},
79+
],
80+
},
81+
{
82+
name: "Root Node 2",
83+
value: "2",
84+
id: "b",
85+
childRows: [
86+
{
87+
name: "Child Node 2.1",
88+
value: "2.1",
89+
id: "ba",
90+
childRows: [
91+
{
92+
name: "Grandchild Node 2.1.1",
93+
value: "2.1.1",
94+
id: "baa",
95+
},
96+
],
97+
},
98+
{
99+
name: "Child Node 2.2",
100+
value: "2.2",
101+
id: "bb",
102+
},
103+
{
104+
name: "Child Node 2.3",
105+
value: "2.3",
106+
id: "bc",
107+
},
108+
],
109+
},
110+
{
111+
name: "Root Node 3",
112+
value: "3",
113+
id: "c",
114+
childRows: [
115+
{
116+
name: "Child Node 3.1",
117+
value: "3.1",
118+
id: "cc",
119+
childRows: [
120+
{
121+
name: "Grandchild Node 3.1.1",
122+
value: "3.1.1",
123+
id: "ccc",
124+
},
125+
{
126+
name: "Grandchild Node 3.1.2",
127+
value: "3.1.2",
128+
id: "ccd",
129+
},
130+
],
131+
},
132+
{
133+
name: "Child Node 3.2",
134+
value: "3.2",
135+
id: "cd",
136+
},
137+
],
138+
},
139+
{
140+
name: "Root Node 4",
141+
value: "4",
142+
id: "d",
143+
childRows: [
144+
{
145+
name: "Child Node 4.1",
146+
value: "4.1",
147+
id: "da",
148+
childRows: [
149+
{
150+
name: "Grandchild Node 4.1.1",
151+
value: "4.1.1",
152+
id: "daa",
153+
},
154+
],
155+
},
156+
{
157+
name: "Child Node 4.2",
158+
value: "4.2",
159+
id: "dd",
160+
},
161+
{
162+
name: "Child Node 4.3",
163+
value: "4.3",
164+
id: "de",
165+
},
166+
],
167+
},
168+
{
169+
name: "Root Node 5",
170+
value: "5",
171+
id: "d",
172+
childRows: [
173+
{
174+
name: "Child Node 5.1",
175+
value: "5.1",
176+
id: "da",
177+
childRows: [
178+
{
179+
name: "Grandchild Node 5.1.1",
180+
value: "5.1.1",
181+
id: "daa",
182+
},
183+
],
184+
},
185+
{
186+
name: "Child Node 5.2",
187+
value: "5.2",
188+
id: "dd",
189+
},
190+
{
191+
name: "Child Node 5.3",
192+
value: "5.3",
193+
id: "de",
194+
},
195+
],
196+
},
197+
] as HierarchyGridRow[];
198+
51199
describe("Data grid component tests", () => {
52200
beforeAll(() => {
53201
(global as any).CSS = {
54202
escape: (str: string): string => str,
55203
};
56204
window.HTMLElement.prototype.scrollIntoView = jest.fn;
57205
});
206+
58207
test("Renders with correct content", async () => {
59-
const { getByText, getAllByRole } = await render(
60-
<DxcDataGrid columns={columns} rows={expandableRows} />
61-
);
208+
const { getByText, getAllByRole } = render(<DxcDataGrid columns={columns} rows={expandableRows} />);
62209
expect(getByText("46")).toBeTruthy();
63210
const rows = getAllByRole("row");
64211
expect(rows.length).toBe(5);
65212
});
66-
// test("Content is sorted correctly", async () => {
67-
// const { getByText, getAllByRole } = await render(<DxcDataGrid columns={columns} rows={expandableRows} />);
68-
// expect(getByText("% Complete")).toBeTruthy();
69-
// const headerCell = screen.getAllByRole("columnheader")[1];
70-
// expect(getAllByRole("gridcell")[0].textContent).toBe("1");
71-
// expect(headerCell.textContent).toBe(" % Complete");
72-
// await fireEvent.click(headerCell);
73-
// expect(headerCell.getAttribute("aria-sort")).toBe("ascending");
74-
// expect(getByText("5")).toBeTruthy();
75-
// // await waitFor(() => expect(getAllByRole("gridcell")[0].textContent).toBe("4"));
76-
// //waitFor(() => expect(getAllByRole("gridcell").length).toBe(8));
77-
// });
213+
214+
test("Renders hierarchy rows", () => {
215+
const onSelectRows = jest.fn();
216+
const selectedRows = new Set<number | string>();
217+
const { getAllByRole } = render(
218+
<DxcDataGrid
219+
columns={columns}
220+
rows={hierarchyRows}
221+
uniqueRowId="id"
222+
selectable
223+
onSelectRows={onSelectRows}
224+
selectedRows={selectedRows}
225+
/>
226+
);
227+
const rows = getAllByRole("row");
228+
expect(rows.length).toBe(5);
229+
});
230+
231+
test("Renders column headers", () => {
232+
const { getByText } = render(<DxcDataGrid columns={columns} rows={expandableRows} />);
233+
expect(getByText("ID")).toBeTruthy();
234+
expect(getByText("% Complete")).toBeTruthy();
235+
});
236+
237+
test("Expands and collapses a row to show custom content", async () => {
238+
const { getAllByRole, getByText, queryByText } = render(
239+
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
240+
);
241+
const buttons = getAllByRole("button");
242+
buttons[0] && fireEvent.click(buttons[0]);
243+
expect(getByText("Custom content 1")).toBeTruthy();
244+
buttons[0] && fireEvent.click(buttons[0]);
245+
expect(queryByText("Custom content 1")).not.toBeTruthy();
246+
});
247+
248+
test("Sorting by column works as expected", async () => {
249+
const { getAllByRole } = render(
250+
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
251+
);
252+
const headers = getAllByRole("columnheader");
253+
const sortableHeader = headers[1];
254+
255+
sortableHeader && fireEvent.click(sortableHeader);
256+
expect(sortableHeader?.getAttribute("aria-sort")).toBe("ascending");
257+
await waitFor(() => {
258+
const cells = getAllByRole("gridcell");
259+
expect(cells[1]?.textContent).toBe("1");
260+
});
261+
sortableHeader && fireEvent.click(sortableHeader);
262+
expect(sortableHeader?.getAttribute("aria-sort")).toBe("descending");
263+
await waitFor(() => {
264+
const cells = getAllByRole("gridcell");
265+
expect(cells[1]?.textContent).toBe("5");
266+
});
267+
});
268+
269+
test("Expands multiple rows at once", () => {
270+
const { getAllByRole, getByText } = render(
271+
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
272+
);
273+
274+
const buttons = getAllByRole("button");
275+
buttons[0] && fireEvent.click(buttons[0]);
276+
buttons[1] && fireEvent.click(buttons[1]);
277+
278+
expect(getByText("Custom content 1")).toBeTruthy();
279+
expect(getByText("Custom content 2")).toBeTruthy();
280+
});
78281
});

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,47 @@ describe("Tabs component tests", () => {
6969
expect(tabs[1]?.getAttribute("tabindex")).toBe("-1");
7070
expect(tabs[2]?.getAttribute("tabindex")).toBe("3");
7171
});
72+
73+
// test("Keyboard navigation changes focus on arrow keys", () => {
74+
// const { getByRole, getAllByRole } = render(
75+
// <DxcNavTabs>
76+
// <DxcNavTabs.Tab>Tab 1</DxcNavTabs.Tab>
77+
// <DxcNavTabs.Tab disabled>Tab 2</DxcNavTabs.Tab>
78+
// <DxcNavTabs.Tab active>Tab 3</DxcNavTabs.Tab>
79+
// </DxcNavTabs>
80+
// );
81+
82+
// const tablist = getByRole("tablist");
83+
// const tabs = getAllByRole("tab");
84+
85+
// expect(tabs[2]?.getAttribute("aria-selected")).toBe("true");
86+
87+
// fireEvent.keyDown(tablist, { key: "ArrowLeft" });
88+
// expect(tabs[0]?.getAttribute("tabindex")).toBe("0");
89+
90+
// fireEvent.keyDown(tablist, { key: "ArrowRight" });
91+
// expect(tabs[2]?.getAttribute("tabindex")).toBe("0");
92+
// });
93+
94+
test("Disabled tabs have aria-disabled and cannot be tab-focused", () => {
95+
const { getAllByRole } = render(
96+
<DxcNavTabs>
97+
<DxcNavTabs.Tab disabled>Disabled Tab</DxcNavTabs.Tab>
98+
<DxcNavTabs.Tab active>Active Tab</DxcNavTabs.Tab>
99+
</DxcNavTabs>
100+
);
101+
102+
const tabs = getAllByRole("tab");
103+
expect(tabs[0]?.getAttribute("aria-disabled")).toBe("true");
104+
expect(tabs[0]?.getAttribute("tabindex")).toBe("-1");
105+
});
106+
107+
test("Context passes correct iconPosition to children", () => {
108+
const { getByText } = render(
109+
<DxcNavTabs iconPosition={"top"}>
110+
<DxcNavTabs.Tab>Tab 1</DxcNavTabs.Tab>
111+
</DxcNavTabs>
112+
);
113+
expect(getByText("Tab 1")).toBeTruthy();
114+
});
72115
});

0 commit comments

Comments
 (0)