Skip to content

Commit dfc8978

Browse files
Wajahat5Wajahat6severinlandolt
authored
test: uts for areaChart, barChart, sparkAreaChart, Legend (#1065)
* uts for areaChart, barChart, sparkAreaChart, Legend * removed test code * lint --------- Co-authored-by: wajahat5 <[email protected]> Co-authored-by: severinlandolt <[email protected]>
1 parent 866d578 commit dfc8978

File tree

4 files changed

+290
-1
lines changed

4 files changed

+290
-1
lines changed

‎src/tests/chart-elements/AreaChart.test.tsx

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import AreaChart from "components/chart-elements/AreaChart/AreaChart";
4+
5+
describe("AreaChart", () => {
6+
beforeAll(() => {
7+
global.ResizeObserver = class MockedResizeObserver {
8+
observe = jest.fn();
9+
unobserve = jest.fn();
10+
disconnect = jest.fn();
11+
};
12+
const mockChildMethod = jest.fn();
13+
jest.spyOn(React, "useRef").mockReturnValue({
14+
current: {
15+
childMethod: mockChildMethod,
16+
},
17+
});
18+
});
19+
afterAll(() => {
20+
jest.restoreAllMocks();
21+
});
22+
it("renders the chart with data", () => {
23+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
24+
const data = [
25+
{ name: "A", value: 10 },
26+
{ name: "B", value: 20 },
27+
{ name: "C", value: 30 },
28+
];
29+
const { container } = render(
30+
<AreaChart data={data} categories={["A", "B", "C"]} index="name" ref={ref} />,
31+
);
32+
expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
33+
});
34+
35+
it("renders the chart without gradient", () => {
36+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
37+
const data = [
38+
{ name: "A", value: 10 },
39+
{ name: "B", value: 20 },
40+
{ name: "C", value: 30 },
41+
];
42+
const { container } = render(
43+
<AreaChart
44+
data={data}
45+
categories={["A", "B", "C"]}
46+
index="name"
47+
showGradient={false}
48+
ref={ref}
49+
/>,
50+
);
51+
expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
52+
});
53+
54+
it("renders the chart with custom colors", () => {
55+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
56+
const data = [
57+
{ name: "A", value: 10 },
58+
{ name: "B", value: 20 },
59+
{ name: "C", value: 30 },
60+
];
61+
const { container } = render(
62+
<AreaChart
63+
data={data}
64+
categories={["A", "B", "C"]}
65+
index="name"
66+
colors={["#ff0000", "#00ff00", "#0000ff"]}
67+
ref={ref}
68+
/>,
69+
);
70+
expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
71+
});
72+
73+
it("renders the chart with custom curve type", () => {
74+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
75+
const data = [
76+
{ name: "A", value: 10 },
77+
{ name: "B", value: 20 },
78+
{ name: "C", value: 30 },
79+
];
80+
const { container } = render(
81+
<AreaChart
82+
data={data}
83+
categories={["A", "B", "C"]}
84+
index="name"
85+
curveType="monotone"
86+
ref={ref}
87+
/>,
88+
);
89+
expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
90+
});
91+
92+
it("renders the chart with connectNulls", () => {
93+
const data = [
94+
{ name: "A", value: 10 },
95+
{ name: "B", value: null },
96+
{ name: "C", value: 30 },
97+
];
98+
const { container } = render(
99+
<AreaChart data={data} categories={["A", "B", "C"]} index="name" connectNulls />,
100+
);
101+
expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
102+
});
103+
104+
it("renders the chart with no data", () => {
105+
const { getByText } = render(<AreaChart data={[]} categories={[]} index="name" />);
106+
expect(getByText("No data")).toBeDefined();
107+
});
108+
});

‎src/tests/chart-elements/BarChart.test.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import BarChart from "components/chart-elements/BarChart/BarChart";
4+
5+
describe("BarChart", () => {
6+
beforeAll(() => {
7+
global.ResizeObserver = class MockedResizeObserver {
8+
observe = jest.fn();
9+
unobserve = jest.fn();
10+
disconnect = jest.fn();
11+
};
12+
const mockChildMethod = jest.fn();
13+
jest.spyOn(React, "useRef").mockReturnValue({
14+
current: {
15+
childMethod: mockChildMethod,
16+
},
17+
});
18+
});
19+
afterAll(() => {
20+
jest.restoreAllMocks();
21+
});
22+
it("renders the chart with data", () => {
23+
const data = [
24+
{ name: "A", value: 10 },
25+
{ name: "B", value: 20 },
26+
{ name: "C", value: 30 },
27+
];
28+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
29+
render(<BarChart data={data} categories={["A", "B", "C"]} index="name" ref={ref} />);
30+
});
31+
32+
it("renders the chart with no data", () => {
33+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
34+
const { getByText } = render(<BarChart data={[]} categories={[]} index="name" ref={ref} />);
35+
expect(getByText("No data")).toBeDefined();
36+
});
37+
});

‎src/tests/spark-elements/SparkAreaChart.test.tsx

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import AreaChart from "components/spark-elements/SparkAreaChart/SparkAreaChart";
4+
5+
describe("AreaChart", () => {
6+
beforeAll(() => {
7+
global.ResizeObserver = class MockedResizeObserver {
8+
observe = jest.fn();
9+
unobserve = jest.fn();
10+
disconnect = jest.fn();
11+
};
12+
const mockChildMethod = jest.fn();
13+
jest.spyOn(React, "useRef").mockReturnValue({
14+
current: {
15+
childMethod: mockChildMethod,
16+
},
17+
});
18+
});
19+
afterAll(() => {
20+
jest.restoreAllMocks();
21+
});
22+
it("renders the chart with data", () => {
23+
const data = [
24+
{ name: "A", value: 10 },
25+
{ name: "B", value: 20 },
26+
{ name: "C", value: 30 },
27+
];
28+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
29+
const { container } = render(
30+
<AreaChart
31+
data={data}
32+
className="test"
33+
categories={["A", "B", "C"]}
34+
index="name"
35+
ref={ref}
36+
/>,
37+
);
38+
expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
39+
});
40+
41+
it("renders the chart without gradient", () => {
42+
const data = [
43+
{ name: "A", value: 10 },
44+
{ name: "B", value: 20 },
45+
{ name: "C", value: 30 },
46+
];
47+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
48+
const { container } = render(
49+
<AreaChart
50+
data={data}
51+
categories={["A", "B", "C"]}
52+
index="name"
53+
className="test"
54+
showGradient={false}
55+
ref={ref}
56+
/>,
57+
);
58+
expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
59+
});
60+
61+
it("renders the chart with custom colors", () => {
62+
const data = [
63+
{ name: "A", value: 10 },
64+
{ name: "B", value: 20 },
65+
{ name: "C", value: 30 },
66+
];
67+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
68+
const { container } = render(
69+
<AreaChart
70+
data={data}
71+
categories={["A", "B", "C"]}
72+
index="name"
73+
className="test"
74+
colors={["#ff0000", "#00ff00", "#0000ff"]}
75+
ref={ref}
76+
/>,
77+
);
78+
expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
79+
});
80+
81+
it("renders the chart with custom curve type", () => {
82+
const data = [
83+
{ name: "A", value: 10 },
84+
{ name: "B", value: 20 },
85+
{ name: "C", value: 30 },
86+
];
87+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
88+
const { container } = render(
89+
<AreaChart
90+
data={data}
91+
categories={["A", "B", "C"]}
92+
index="name"
93+
className="test"
94+
curveType="monotone"
95+
ref={ref}
96+
/>,
97+
);
98+
expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
99+
});
100+
101+
it("renders the chart with connectNulls", () => {
102+
const data = [
103+
{ name: "A", value: 10 },
104+
{ name: "B", value: null },
105+
{ name: "C", value: 30 },
106+
];
107+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
108+
const { container } = render(
109+
<AreaChart
110+
data={data}
111+
categories={["A", "B", "C"]}
112+
index="name"
113+
className="test"
114+
connectNulls
115+
ref={ref}
116+
/>,
117+
);
118+
expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
119+
});
120+
121+
it("renders the chart with no data", () => {
122+
const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
123+
const { getByText } = render(<AreaChart data={[]} categories={[]} index="name" ref={ref} />);
124+
expect(getByText("No data")).toBeDefined();
125+
});
126+
});

‎src/tests/text-elements/Legend.test.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from "@testing-library/react";
1+
import { fireEvent, render } from "@testing-library/react";
22
import React from "react";
33

44
import Legend from "components/text-elements/Legend/Legend";
@@ -7,4 +7,22 @@ describe("Legend", () => {
77
test("renders the Legend component with default props", () => {
88
render(<Legend categories={["Category A", "Category B", "Category C", "Category D"]} />);
99
});
10+
it("renders the correct legend items", () => {
11+
const { getByText } = render(
12+
<Legend categories={["Category A", "Category B", "Category C", "Category D"]} />,
13+
);
14+
expect(getByText("Category A")).toBeDefined();
15+
expect(getByText("Category B")).toBeDefined();
16+
expect(getByText("Category C")).toBeDefined();
17+
expect(getByText("Category D")).toBeDefined();
18+
});
19+
it("clicks a category item", () => {
20+
const { getByText } = render(<Legend categories={["Category A"]} />);
21+
fireEvent.click(getByText("Category A"));
22+
});
23+
it("tests the keydown handler", () => {
24+
render(<Legend categories={["Category A"]} enableLegendSlider={true} />);
25+
const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
26+
document.dispatchEvent(event);
27+
});
1028
});

0 commit comments

Comments
 (0)