refactor code and check coverage

src/components/Devices.js

@@ -1,35 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
-import * as _ from 'lodash';
+import { query, collection, onSnapshot } from 'firebase/firestore';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
-import Select from 'react-select';
 
 import DeviceGraph from "./DeviceGraph";
 import db from '../firebase';
 import './Devices.css';
 
-const styles = {
-    menuList: (base) => ({
-        ...base,
-
-        "::-webkit-scrollbar": {
-            width: "4px",
-            height: "0px",
-        },
-        "::-webkit-scrollbar-track": {
-            background: "#f1f1f1"
-        },
-        "::-webkit-scrollbar-thumb": {
-            background: "#888"
-        },
-        "::-webkit-scrollbar-thumb:hover": {
-            background: "#555"
-        }
-    })
-};
-
 const Devices = () => {
     const [device, setDevice] = useState("Select a device");
     const [testDate, setTestDate] = useState("Select a test date");
@@ -42,14 +20,9 @@ const Devices = () => {
     const [showGraph, setShowGraph] = useState(false);
 
     const changeDevice = ({ value }) => {
-        console.log(value);
-        // console.log(event);
-
         setDevice(value);
         setDays([...new Set(allTests
-            .filter((x) => {
-                if (x.deviceSerialNumber === value) return x;
-            })
+            .filter((x) => x.deviceSerialNumber === value)
             .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
             .sort()
             .reverse());
@@ -61,9 +34,7 @@ const Devices = () => {
         setCurTestData(null);
         setShowGraph(false);
         setTests(allTests
-            .filter((x) => {
-                if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day'))) return x;
-            })
+            .filter((x) => x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day')))
             .map(x => x._id)
             .sort());
     }
@@ -99,17 +70,15 @@ const Devices = () => {
                     hposTests.push(hposTestData);
                     const { deviceSerialNumber } = hposTestData;
                     testDevices.add(deviceSerialNumber);
-                    // console.log(document.data());
                 });
                 const groups = [...testDevices];
-                // console.log(groups);
                 setDevices(groups);
                 setAllTests(hposTests);
             });
 
             return () => unsub;
         }
-    }, [curTestData, curTest, device, testDate]);
+    }, [curTestData, curTest, device, testDate, allTests]);
 
     return (
         <div className="devices-page">
@@ -123,7 +92,7 @@ const Devices = () => {
                 <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
                 <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
 
-                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</button>
+                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')} alt='icon'></img>{curTestData ? 'Clear' : 'Show'}</button>
             </div>
 
             <div className='graph-person-conatiner'>