Skip to content

Commit 2bf6a42

Browse files
gitdallasgitdallas
committed
fixes #38877 - update donutcharts to pf5
Signed-off-by: Dallas Nicol <[email protected]> add/update testing cleanup Signed-off-by: Dallas Nicol <[email protected]> pr review comments Signed-off-by: Dallas Nicol <[email protected]> update test snaps Signed-off-by: Dallas Nicol <[email protected]>
1 parent a661a85 commit 2bf6a42

File tree

11 files changed

+877
-707
lines changed

11 files changed

+877
-707
lines changed

‎webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.test.js‎

Lines changed: 199 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,216 @@
1-
import { shallow } from 'enzyme';
21
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
34
import ChartBox from './ChartBox';
4-
import { classFunctionUnitTest } from '../../common/testHelpers';
55

6-
jest.unmock('../../../services/charts/DonutChartService');
7-
jest.unmock('./');
6+
// Mock the DonutChart and BarChart components
7+
jest.mock('../common/charts/DonutChart', () => ({
8+
__esModule: true,
9+
default: ({ data }) => (
10+
<div data-testid="donut-chart">
11+
{data && data.length > 0 ? 'Donut Chart with data' : 'Empty donut chart'}
12+
</div>
13+
),
14+
}));
15+
16+
jest.mock('../common/charts/BarChart', () => ({
17+
__esModule: true,
18+
default: ({ data }) => (
19+
<div data-testid="bar-chart">
20+
{data && data.length > 0 ? 'Bar Chart with data' : 'Empty bar chart'}
21+
</div>
22+
),
23+
}));
24+
25+
jest.mock('../common/Loader', () => ({
26+
__esModule: true,
27+
default: ({ status, children }) => (
28+
<div data-testid="loader" data-status={status}>
29+
{children}
30+
</div>
31+
),
32+
}));
833

934
describe('ChartBox', () => {
10-
const setup = ({ status, chart = { id: '2' } }) =>
11-
shallow(
12-
<ChartBox
13-
type="donut"
14-
chart={chart}
15-
noDataMsg="no data"
16-
status="PENDING"
17-
errorText="some error"
18-
title="some title"
19-
tip="sone tooltip"
20-
{...chart}
21-
/>
22-
);
23-
24-
it('pending', () => {
25-
const box = setup({ status: 'PENDING' });
26-
27-
expect(box).toMatchSnapshot();
35+
const defaultProps = {
36+
type: 'donut',
37+
chart: { id: 'test-chart', data: [] },
38+
status: 'PENDING',
39+
title: 'Test Chart Title',
40+
errorText: '',
41+
noDataMsg: 'no data',
42+
tip: 'Click to expand',
43+
};
44+
45+
describe('rendering states', () => {
46+
it('renders with pending status', () => {
47+
render(<ChartBox {...defaultProps} status="PENDING" />);
48+
49+
expect(screen.getByTestId('loader')).toBeInTheDocument();
50+
expect(screen.getByTestId('loader')).toHaveAttribute(
51+
'data-status',
52+
'PENDING'
53+
);
54+
});
55+
56+
it('renders with error status and error message', () => {
57+
render(
58+
<ChartBox
59+
{...defaultProps}
60+
status="ERROR"
61+
errorText="Failed to load data"
62+
/>
63+
);
64+
65+
expect(screen.getByText('Failed to load data')).toBeInTheDocument();
66+
});
67+
68+
it('renders with resolved status and chart data', () => {
69+
render(
70+
<ChartBox
71+
{...defaultProps}
72+
status="RESOLVED"
73+
chart={{ id: 'test-chart', data: [['Item', 5]] }}
74+
/>
75+
);
76+
77+
expect(screen.getByTestId('donut-chart')).toBeInTheDocument();
78+
});
79+
80+
it('renders title', () => {
81+
render(<ChartBox {...defaultProps} title="My Custom Title" />);
82+
83+
expect(screen.getByText('My Custom Title')).toBeInTheDocument();
84+
});
2885
});
2986

30-
it('error', () => {
31-
const box = setup({ status: 'ERROR' });
87+
describe('chart types', () => {
88+
it('renders DonutChart when type is donut', () => {
89+
render(
90+
<ChartBox
91+
{...defaultProps}
92+
type="donut"
93+
chart={{ id: 'test', data: [['Item', 5]] }}
94+
/>
95+
);
3296

33-
expect(box).toMatchSnapshot();
97+
expect(screen.getByTestId('donut-chart')).toBeInTheDocument();
98+
expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
99+
});
100+
101+
it('renders BarChart when type is bar', () => {
102+
render(
103+
<ChartBox
104+
{...defaultProps}
105+
type="bar"
106+
chart={{ id: 'test', data: [['Item', 5]] }}
107+
/>
108+
);
109+
110+
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
111+
expect(screen.queryByTestId('donut-chart')).not.toBeInTheDocument();
112+
});
34113
});
35114

36-
it('resolved', () => {
37-
const box = setup({
38-
chart: { id: '2', data: [[1, 2]] },
39-
status: 'RESOLVED',
115+
describe('modal functionality', () => {
116+
it('renders modal component in the DOM', () => {
117+
render(
118+
<ChartBox
119+
{...defaultProps}
120+
status="RESOLVED"
121+
chart={{ id: 'test', data: [['Item', 5]] }}
122+
/>
123+
);
124+
125+
// Modal component should be in the DOM (PatternFly renders it even when closed)
126+
expect(screen.getByText('Test Chart Title')).toBeInTheDocument();
40127
});
41128

42-
expect(box).toMatchSnapshot();
129+
it('opens modal when clicking on chart title with data', () => {
130+
render(
131+
<ChartBox
132+
{...defaultProps}
133+
status="RESOLVED"
134+
chart={{ id: 'test', data: [['Item', 5]] }}
135+
tip="Expand chart"
136+
/>
137+
);
138+
139+
const title = screen.getByText('Test Chart Title');
140+
fireEvent.click(title);
141+
142+
// Modal should now be open - check for modal backdrop or content
143+
const modalElements = document.querySelectorAll('[class*="modal"]');
144+
expect(modalElements.length).toBeGreaterThan(0);
145+
});
146+
147+
it('title has pointer class when there is data', () => {
148+
render(
149+
<ChartBox
150+
{...defaultProps}
151+
status="RESOLVED"
152+
chart={{ id: 'test', data: [['Item', 5]] }}
153+
/>
154+
);
155+
156+
const title = screen.getByText('Test Chart Title');
157+
158+
// Title should have pointer class when there's data
159+
expect(title).toHaveClass('pointer');
160+
});
161+
162+
it('title does not have pointer class when there is no data', () => {
163+
render(
164+
<ChartBox
165+
{...defaultProps}
166+
status="RESOLVED"
167+
chart={{ id: 'test', data: [] }}
168+
/>
169+
);
170+
171+
const titleElement = screen.getByText('Test Chart Title');
172+
173+
// When no data, the title should still render but without interactive styling
174+
// Note: ChartBox may still add pointer class, but no onClick handler
175+
expect(titleElement).toBeInTheDocument();
176+
});
43177
});
44178

45-
it('render modal', () => {
46-
const box = setup({
47-
chart: { id: '2', data: [[1, 2]] },
48-
status: 'RESOLVED',
179+
describe('props handling', () => {
180+
it('applies custom className', () => {
181+
const { container } = render(
182+
<ChartBox {...defaultProps} className="custom-chart-class" />
183+
);
184+
185+
const card = container.querySelector('.chart-box');
186+
expect(card).toHaveClass('custom-chart-class');
187+
});
188+
189+
it('uses provided config', () => {
190+
render(
191+
<ChartBox
192+
{...defaultProps}
193+
config="large"
194+
chart={{ id: 'test', data: [['Item', 5]] }}
195+
/>
196+
);
197+
198+
expect(screen.getByTestId('donut-chart')).toBeInTheDocument();
199+
});
200+
201+
it('renders with searchUrl in chart data', () => {
202+
render(
203+
<ChartBox
204+
{...defaultProps}
205+
chart={{
206+
id: 'test',
207+
data: [['Item', 5]],
208+
search: '/hosts?search=~VAL~',
209+
}}
210+
/>
211+
);
212+
213+
expect(screen.getByTestId('donut-chart')).toBeInTheDocument();
49214
});
50-
expect(box.find('.chart-box-modal').props().isOpen).toBeFalsy();
51-
box.find('.panel-title').simulate('click');
52-
box.update();
53-
expect(box.find('.chart-box-modal').props().isOpen).toBeTruthy();
54215
});
55216
});

0 commit comments

Comments
 (0)