CEC-4214 - Display new digital twin property (#332)

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

@@ -219,6 +219,17 @@ exports[`DigitalTwinTab Render 1`] = `
                 d439abd3662dd20099f49dd8f43f7b145202e961caa2b5aba2c6154c8096348b
               </p>
             </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <p>
+                <b>
+                  Vehicle Speed
+                </b>
+                : 
+                77.7
+              </p>
+            </div>
           </div>
           <div
             style="width: 100vh;"

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -73,6 +73,9 @@ let vehicleState = {
     dbc_version: "d439abd3662dd20099f49dd8f43f7b145202e961caa2b5aba2c6154c8096348b",
     ip: "172.20.0.17:49850",
     updated: "2022-07-26T00:26:38.880381Z",
+    vehicle_speed: {
+      speed: 77.7,
+    },
   },
 };
 
@@ -144,7 +147,7 @@ export const useVehicleContext = () => ({
   getModels: jest.fn(() => {
     models = ["Ocean", "PEAR"];
   }),
-  getState: jest.fn(() => vehicleState),
+  getState: jest.fn().mockResolvedValue(vehicleState),
   getYears: jest.fn(() => {
     years = [2023, 2024];
   }),

src/components/DigitalTwin/index.js

@@ -27,7 +27,7 @@ const windowState = (value) => {
 
 const DigitalTwin = (props) => {
   const classes = useStyles();
-  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks, vcu0x260, charging_metrics, max_range } = props;
+  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks, vcu0x260, charging_metrics, max_range, vehicle_speed } = props;
 
   return (
     <div>
@@ -122,6 +122,11 @@ const DigitalTwin = (props) => {
           {keyValueTemplate("DBC Version", dbc_version)}
         </div>
       )}
+      {vehicle_speed && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Vehicle Speed", vehicle_speed.speed)}
+        </div>
+      )}
     </div>
   );
 };