Skip to content

Commit 9550983

Browse files
GregJHarrisGregJHarris
committed
Extending stripcharts tests to cover multiple PVs and mulriple rerenders
1 parent 81b52c0 commit 9550983

File tree

2 files changed

+189
-17
lines changed

2 files changed

+189
-17
lines changed

‎src/ui/widgets/StripChart/stripChart.test.tsx‎

Lines changed: 187 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ import { Trace } from "../../../types/trace";
77
import { Axis } from "../../../types/axis";
88
import { convertStringTimePeriod } from "../utils";
99
import { PvDatum } from "../../../redux/csState";
10+
import { DTime } from "../../../types/dtypes";
1011

1112
// Mock the MUI X-Charts components
1213
vi.mock("@mui/x-charts", () => ({
13-
LineChart: vi.fn(({ series, xAxis, yAxis, sx }) => (
14+
LineChart: vi.fn(({ dataset, series, xAxis, yAxis, sx }) => (
1415
<div
1516
data-testid="line-chart"
1617
data-series={JSON.stringify(series)}
1718
data-xaxis={JSON.stringify(xAxis)}
1819
data-yaxis={JSON.stringify(yAxis)}
20+
data-dataset={JSON.stringify(dataset)}
1921
style={sx}
2022
/>
2123
))
@@ -35,20 +37,24 @@ vi.mock("@mui/material", () => ({
3537

3638
describe("StripChartComponent", () => {
3739
// Basic test setup
40+
const buildPvDatum = (
41+
pvName: string,
42+
value: number,
43+
date: Date = new Date()
44+
) => {
45+
return {
46+
effectivePvName: pvName,
47+
connected: true,
48+
readonly: true,
49+
value: {
50+
getDoubleValue: () => value,
51+
getTime: () => new DTime(date)
52+
} as Partial<DType> as DType
53+
} as Partial<PvDatum> as PvDatum;
54+
};
55+
3856
const defaultProps = {
39-
pvData: [
40-
{
41-
effectivePvName: "TEST:PV",
42-
connected: true,
43-
readonly: true,
44-
value: {
45-
getDoubleValue: () => 50,
46-
getTime: () => {
47-
new Date(Date.now());
48-
}
49-
} as Partial<DType> as DType
50-
} as Partial<PvDatum> as PvDatum
51-
],
57+
pvData: [buildPvDatum("TEST:PV", 50)],
5258
traces: [new Trace()],
5359
axes: [new Axis()]
5460
};
@@ -59,15 +65,33 @@ describe("StripChartComponent", () => {
5965

6066
describe("Rendering", () => {
6167
test("renders with default props", () => {
62-
render(<StripChartComponent {...defaultProps} />);
68+
const renderedObject = render(<StripChartComponent {...defaultProps} />);
6369

6470
const lineChart = screen.getByTestId("line-chart");
6571
expect(lineChart).toBeDefined();
6672

6773
const yAxisData = JSON.parse(lineChart.getAttribute("data-yaxis") ?? "");
6874
const xAxisData = JSON.parse(lineChart.getAttribute("data-xaxis") ?? "");
75+
6976
expect(yAxisData[0].position).toBe("left");
7077
expect(xAxisData[0].scaleType).toBe("time");
78+
79+
let dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
80+
expect(dataset.length).toBe(1);
81+
expect(dataset[0]["TEST:PV"]).toBe(50);
82+
83+
// Render again to check that new data values are added
84+
renderedObject.rerender(
85+
<StripChartComponent
86+
{...defaultProps}
87+
pvData={[buildPvDatum("TEST:PV", 60)]}
88+
/>
89+
);
90+
91+
dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
92+
expect(dataset.length).toBe(2);
93+
expect(dataset[0]["TEST:PV"]).toBe(50);
94+
expect(dataset[1]["TEST:PV"]).toBe(60);
7195
});
7296

7397
test("renders with 2 y axes", () => {
@@ -117,6 +141,154 @@ describe("StripChartComponent", () => {
117141

118142
expect(screen.getByText("Testing Plot")).toBeDefined();
119143
});
144+
145+
test("renders multiple PVs with multiple traces, with rerender to add second set of PV data", () => {
146+
const traces = [
147+
new Trace({ color: Color.ORANGE, yPv: "PV1" }),
148+
new Trace({ color: Color.PINK, yPv: "PV2" }),
149+
new Trace({ color: Color.BLUE, yPv: "PV3" })
150+
];
151+
152+
const renderedObject = render(
153+
<StripChartComponent
154+
{...defaultProps}
155+
traces={traces}
156+
pvData={[
157+
buildPvDatum("TEST:PV1", 2),
158+
buildPvDatum("TEST:PV2", 30),
159+
buildPvDatum("TEST:PV3", 400)
160+
]}
161+
/>
162+
);
163+
164+
const lineChart = screen.getByTestId("line-chart");
165+
expect(lineChart).toBeDefined();
166+
167+
const yAxisData = JSON.parse(lineChart.getAttribute("data-yaxis") ?? "");
168+
const xAxisData = JSON.parse(lineChart.getAttribute("data-xaxis") ?? "");
169+
170+
expect(yAxisData[0].position).toBe("left");
171+
expect(xAxisData[0].scaleType).toBe("time");
172+
173+
let dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
174+
expect(dataset.length).toBe(1);
175+
expect(dataset[0]["TEST:PV1"]).toBe(2);
176+
expect(dataset[0]["TEST:PV2"]).toBe(30);
177+
expect(dataset[0]["TEST:PV3"]).toBe(400);
178+
179+
const seriesData = JSON.parse(
180+
lineChart.getAttribute("data-series") ?? ""
181+
);
182+
183+
expect(seriesData[0].color).toBe(Color.ORANGE.toString());
184+
expect(seriesData[0].dataKey).toBe("TEST:PV1");
185+
expect(seriesData[1].color).toBe(Color.PINK.toString());
186+
expect(seriesData[1].dataKey).toBe("TEST:PV2");
187+
expect(seriesData[2].color).toBe(Color.BLUE.toString());
188+
expect(seriesData[2].dataKey).toBe("TEST:PV3");
189+
190+
// Render again to check that new data values are added
191+
renderedObject.rerender(
192+
<StripChartComponent
193+
{...defaultProps}
194+
traces={traces}
195+
pvData={[
196+
buildPvDatum("TEST:PV1", 3),
197+
buildPvDatum("TEST:PV2", 40),
198+
buildPvDatum("TEST:PV3", 500)
199+
]}
200+
/>
201+
);
202+
203+
dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
204+
expect(dataset.length).toBe(2);
205+
expect(dataset[0]["TEST:PV1"]).toBe(2);
206+
expect(dataset[1]["TEST:PV1"]).toBe(3);
207+
expect(dataset[0]["TEST:PV2"]).toBe(30);
208+
expect(dataset[1]["TEST:PV2"]).toBe(40);
209+
expect(dataset[0]["TEST:PV3"]).toBe(400);
210+
expect(dataset[1]["TEST:PV3"]).toBe(500);
211+
});
212+
213+
test("renders multiple data points and removes old data values", () => {
214+
const intialDate = new Date(new Date().getTime() - 600000);
215+
const renderedObject = render(
216+
<StripChartComponent
217+
{...defaultProps}
218+
pvData={[buildPvDatum("TEST:PV", 10, intialDate)]}
219+
/>
220+
);
221+
222+
const lineChart = screen.getByTestId("line-chart");
223+
expect(lineChart).toBeDefined();
224+
225+
let dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
226+
expect(dataset.length).toBe(1);
227+
expect(dataset[0]["TEST:PV"]).toBe(10);
228+
229+
renderedObject.rerender(
230+
<StripChartComponent
231+
{...defaultProps}
232+
pvData={[
233+
buildPvDatum("TEST:PV", 20, new Date(intialDate.getTime() + 20000))
234+
]}
235+
/>
236+
);
237+
238+
renderedObject.rerender(
239+
<StripChartComponent
240+
{...defaultProps}
241+
pvData={[
242+
buildPvDatum("TEST:PV", 30, new Date(intialDate.getTime() + 40000))
243+
]}
244+
/>
245+
);
246+
247+
renderedObject.rerender(
248+
<StripChartComponent
249+
{...defaultProps}
250+
pvData={[
251+
buildPvDatum("TEST:PV", 40, new Date(intialDate.getTime() + 70000))
252+
]}
253+
/>
254+
);
255+
256+
renderedObject.rerender(
257+
<StripChartComponent
258+
{...defaultProps}
259+
pvData={[
260+
buildPvDatum("TEST:PV", 50, new Date(intialDate.getTime() + 80000))
261+
]}
262+
/>
263+
);
264+
265+
// Now have 80 seconds of data, this should all still be avaliable, until we add the next data point
266+
dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
267+
expect(dataset.length).toBe(5);
268+
expect(dataset[0]["TEST:PV"]).toBe(10);
269+
expect(dataset[1]["TEST:PV"]).toBe(20);
270+
expect(dataset[2]["TEST:PV"]).toBe(30);
271+
expect(dataset[3]["TEST:PV"]).toBe(40);
272+
expect(dataset[4]["TEST:PV"]).toBe(50);
273+
274+
renderedObject.rerender(
275+
<StripChartComponent
276+
{...defaultProps}
277+
pvData={[
278+
buildPvDatum("TEST:PV", 60, new Date(intialDate.getTime() + 90000))
279+
]}
280+
/>
281+
);
282+
283+
// Now have 90 seconds of data, first data point should be dropped
284+
dataset = JSON.parse(lineChart.getAttribute("data-dataset") ?? "");
285+
expect(dataset.length).toBe(5);
286+
expect(dataset[0]["TEST:PV"]).toBe(20);
287+
expect(dataset[1]["TEST:PV"]).toBe(30);
288+
expect(dataset[2]["TEST:PV"]).toBe(40);
289+
expect(dataset[3]["TEST:PV"]).toBe(50);
290+
expect(dataset[4]["TEST:PV"]).toBe(60);
291+
});
120292
});
121293

122294
describe("Styling", () => {

‎src/ui/widgets/StripChart/stripChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export const StripChartComponent = (
9595
const allDates = Object.values(pvData)
9696
.map(pvItem => pvItem?.value?.getTime()?.datetime)
9797
.filter(date => !!date);
98+
9899
if (allDates.length < 1) {
99100
// we have no useful date for the timeseries point
100101
return timeSeries;
@@ -196,7 +197,7 @@ export const StripChartComponent = (
196197

197198
const series = useMemo(
198199
() =>
199-
(traces?.length > 1 ? traces : [new Trace()])
200+
(traces?.length > 0 ? traces : [new Trace()])
200201
?.map((item, index) => {
201202
const pvName = item?.yPv;
202203
const effectivePvName = pvData
@@ -231,7 +232,6 @@ export const StripChartComponent = (
231232
// Add error bars option
232233
// Apply showToolbar
233234
// Use end value - this doesn't seem to do anything in Phoebus?
234-
235235
return (
236236
<Box sx={{ width: "100%", height: "100%" }}>
237237
<Typography

0 commit comments

Comments
 (0)