From 221eb9e52b666215ac405abb470a14c732a70acc Mon Sep 17 00:00:00 2001 From: Paul Adamsen <117673433+pauladamseniii@users.noreply.github.com> Date: Tue, 6 Jun 2023 19:58:55 -0400 Subject: [PATCH] CEC-4248 - Add time settings to DTC timeline page (#348) --- .../__snapshots__/index.test.jsx.snap | 730 ++++++++++++++++++ .../DTCTimeline/DTCTimeline/index.jsx | 172 +++-- .../DTCTimeline/DTCTimeline/index.test.jsx | 42 + 3 files changed, 893 insertions(+), 51 deletions(-) create mode 100644 src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap create mode 100644 src/components/DTCTimeline/DTCTimeline/index.test.jsx diff --git a/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000..222305a --- /dev/null +++ b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap @@ -0,0 +1,730 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render Render 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + +
+ + Id + + + + + VIN + + + + + ECU + + + + + Trouble Code + + + + + Status Code + + + + Error Text + + + Date + + sorted descending + + + +
+
+
+

+ Rows per page: +

+
+ + +
+

+ 0-0 of 0 +

+
+ + +
+
+
+
+
+
+
+
+
+`; diff --git a/src/components/DTCTimeline/DTCTimeline/index.jsx b/src/components/DTCTimeline/DTCTimeline/index.jsx index c632d36..bd788ae 100644 --- a/src/components/DTCTimeline/DTCTimeline/index.jsx +++ b/src/components/DTCTimeline/DTCTimeline/index.jsx @@ -1,6 +1,6 @@ import DateFnsUtils from '@date-io/date-fns'; -import { Button, CircularProgress, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core"; -import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import { Button, Checkbox, CircularProgress, FormControlLabel, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core"; +import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; import clsx from "clsx"; import React, { useEffect, useState } from "react"; import { logger } from "../../../services/monitoring"; @@ -20,10 +20,11 @@ const MainForm = ({ vin }) => { const [pageIndex, setPageIndex] = useState(0); const [orderBy, setOrderBy] = useState("epoch_usec"); const [order, setOrder] = useState("desc"); - const { dtcData, getDTCData, total=0 } = useDTCTimelineContext(); + const { dtcData, getDTCData, total = 0 } = useDTCTimelineContext(); const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000)); const [selectedEndDate, setSelectedEndDate] = useState(new Date()); const [selectedECU, setSelectedECU] = useState(""); + const [gmtTimezone, setGmtTimezone] = useState(false); const [loading, setLoading] = useState(false); const { setMessage } = useStatusContext(); @@ -51,7 +52,7 @@ const MainForm = ({ vin }) => { { id: "ErrorText", label: "Error Text", - no_sort : true, + no_sort: true, }, { id: "epoch_usec", @@ -117,15 +118,119 @@ const MainForm = ({ vin }) => { return date.toLocaleString(); } - useEffect(() => { - fetchDTCData(); - // eslint-disable-next-line react-hooks/exhaustive-deps + const handleDateChange = (value, dateType) => { + const newDate = new Date(value); + const oldDate = dateType === "start" ? selectedStartDate || new Date() : selectedEndDate || new Date(); + newDate.setHours(oldDate.getHours()); + newDate.setMinutes(oldDate.getMinutes()); + newDate.setSeconds(oldDate.getSeconds()); + if (dateType === "start") { + setSelectedStartDate(newDate); + } else { + setSelectedEndDate(newDate); + } + }; + + const handleTimeFromChange = (value) => { + setSelectedStartDate(value); + }; + + const handleTimeToChange = (value) => { + setSelectedEndDate(value); + }; + + const displayTimeAsGMT = (date) => { + return gmtTimezone + ? date.toLocaleString("en-US", { timeZone: "Etc/GMT" }) + : date; + } + + useEffect(() => { + fetchDTCData(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [vin, selectedECU, selectedStartDate, selectedEndDate, pageIndex, pageSize, order, orderBy]); return (
- - + + + + + + handleDateChange(value, "start")} + KeyboardButtonProps={{ + 'aria-label': 'change date', + }} + /> + + + + + + handleDateChange(value, "end")} + KeyboardButtonProps={{ + 'aria-label': 'change date', + }} + /> + + + + + + setGmtTimezone((current) => !current)} + /> + } + /> + + + + +
{ />
- - - - - - - - - - - + - -
+
{ ))} - + { onPageChange={handleChangePageIndex} onRowsPerPageChange={handleChangePageSize} /> - - + +
-
+
+
); diff --git a/src/components/DTCTimeline/DTCTimeline/index.test.jsx b/src/components/DTCTimeline/DTCTimeline/index.test.jsx new file mode 100644 index 0000000..58e29f1 --- /dev/null +++ b/src/components/DTCTimeline/DTCTimeline/index.test.jsx @@ -0,0 +1,42 @@ +jest.mock("../../Contexts/StatusContext"); +jest.mock("../../Contexts/UserContext"); +jest.mock("../../../services/CANSignalAPI"); +jest.useFakeTimers(); +jest.setSystemTime(new Date(2023, 3, 1, 6, 30, 45, 100)); + +import { render, waitFor } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import addSnapshotSerializer from "../../../utils/snapshot"; +import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing"; + +import { StatusProvider } from "../../Contexts/StatusContext"; +import { setToken, UserProvider } from "../../Contexts/UserContext"; +import DTCTimeline from "./index"; + +const renderDTCTimeline = async () => { + const { container } = render( + + + + + + + + ); + await waitFor(() => { + /* render */ + }); + return container; +}; + +describe("Render", () => { + beforeAll(() => { + addSnapshotSerializer(expect); + }); + + it("Render", async () => { + setToken(TEST_AUTH_OBJECT_FISKER); + const container = await renderDTCTimeline(); + expect(container).toMatchSnapshot(); + }); +});