CEC-1183/CEC-1201 fleet vehicles forms (#130)

* working fleet vehicles forms

* snapshots and api tests

src/components/Contexts/FleetContext.jsx

@@ -5,9 +5,13 @@ const FleetContext = React.createContext();
 
 export const FleetProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
+
   const [fleets, setFleets] = useState([]);
   const [totalFleets, setTotalFleets] = useState(0);
 
+  const [fleetVehicles, setFleetVehicles] = useState([]);
+  const [totalFleetVehicles, setTotalFleetVehicles] = useState(0);
+
   const addFleet = async (fleet, token) => {
     try {
       setBusy(true);
@@ -31,7 +35,6 @@ export const FleetProvider = ({ children }) => {
         setFleets([])
         throw new Error(`Get fleets error. ${result.message}`);
       }
-
       setFleets(result.data)
       if (result.total) {
         setTotalFleets(result.total);
@@ -78,16 +81,80 @@ export const FleetProvider = ({ children }) => {
     }
   }
 
+  const getFleetVehicles = async (name, search, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getFleetVehicles(name, search, token);
+      if (result.error) {
+        setFleetVehicles([])
+        throw new Error(`Get fleet vehicles error. ${result.message}`);
+      }
+
+      setFleetVehicles(result.data)
+      if (result.total) {
+        setTotalFleetVehicles(result.total);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const addFleetVehicle = async (name, vehicle, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateVIN(vehicle.vin);
+
+      const result = await api.addFleetVehicle(name, vehicle, token);
+      if (result.error) {
+        throw new Error(`Add fleet vehicle error. ${result.message}`);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const deleteFleetVehicle = async (name, vehicle, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateVIN(vehicle.vin);
+
+      const result = await api.deleteFleetVehicle(name, vehicle, token);
+      if (result.error) {
+        throw new Error(`Delete fleet vehicle error. ${result.message}`);
+      }
+
+      const index = fleetVehicles.findIndex(element => element === vehicle.vin);
+      if (index >= 0) fleetVehicles.splice(index, 1);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <FleetContext.Provider
       value={{
         busy,
+
         fleets,
         totalFleets,
         addFleet,
         getFleets,
         updateFleet,
-        deleteFleet
+        deleteFleet,
+
+        fleetVehicles,
+        totalFleetVehicles,
+        getFleetVehicles,
+        addFleetVehicle,
+        deleteFleetVehicle
       }}
     >
       {children}
@@ -104,9 +171,15 @@ const validateFleet = (fleet) => {
 }
 
 const validateFleetName = (name) => {
-  if (name == null || !/^[A-Za-z-]+$/.test(name)) {
+  if (name == null || !/^[0-9A-Za-z-]+$/.test(name)) {
     throw new Error("Invalid name");
   }
 }
 
+const validateVIN = (vin) => {
+  if (vin == null || vin.length !== 17) {
+    throw new Error("Invalid VIN");
+  }
+}
+
 export const useFleetContext = () => useContext(FleetContext);

src/components/Contexts/FleetContext.test.jsx

@@ -15,6 +15,11 @@ const checkFleetResults = (error, busy, fleets) => {
   expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
 };
 
+const checkFleetVehicleResults = (error, busy, vehicles) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("fleet-vehicles").innerHTML).toEqual(vehicles);
+}
+
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
@@ -271,10 +276,208 @@ describe("FleetContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("getFleetVehicles", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, fleetVehicles, getFleetVehicles } = useFleetContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="fleet-vehicles">{JSON.stringify(fleetVehicles)}</div>
+            <button
+              data-testid="getFleetVehicles"
+              onClick={() => getFleetVehicles("US-WEST")}
+            />
+          </>
+        );
+      };
+      render(
+        <FleetProvider>
+          <TestComp />
+        </FleetProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkFleetVehicleResults("", "false", "[]");
+    });
+
+    it("getFleetVehicles", async () => {
+      fireEvent.click(screen.getByTestId("getFleetVehicles"));
+      await waitFor(() =>
+        expect(screen.getByTestId("fleet-vehicles").innerHTML).not.toBe("[]")
+      );
+      checkFleetVehicleResults("", "false", JSON.stringify(expectedFleetVehiclesData));
+    });
+  });
+
+  describe("addFleetVehicle", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, addFleetVehicle } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const add = async (name, vehicle) => {
+          try {
+            await addFleetVehicle(name, vehicle);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="addFleetVehicleNull" onClick={() => add(null)} />
+            <button data-testid="addFleetVehicleNoName" onClick={() => add({})} />
+            <button
+              data-testid="addFleetVehicle"
+              onClick={() =>
+                add("US-TEST", { vin: "TESTVIN1234567890" })
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("addFleetVehicleNull", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicleNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetVehicleNoName", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicleNoName"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetVehicle", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicle"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
+
+  describe("deleteFleetVehicle", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, deleteFleetVehicle } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const deleteFV = async (name, vehicle) => {
+          try {
+            await deleteFleetVehicle(name, vehicle);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="deleteFleetVehicleNull" onClick={() => deleteFV("US-WEST", null)} />
+            <button data-testid="deleteFleetVehicleInvalid" onClick={() => deleteFV("US-WEST", "INVALID")} />
+            <button
+              data-testid="deleteFleetVehicle"
+              onClick={() =>
+                deleteFV("US-WEST", { vin: "USWESTVIN12345678" })
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("deleteFleetVehicleNull", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicleNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Cannot read property 'vin' of null", "false");
+    });
+
+    it("deleteFleetVehicleNonexistent", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicleInvalid"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid VIN", "false");
+    });
+
+    it("deleteFleetVehicle", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicle"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
 });
 
 const expectedFleetsData = [
-  { name: "US-WEST", log_level: "info", canbus: { enabled: true } },
-  { name: "US-CENTRAL", log_level: "warn", canbus: { enabled: false } },
-  { name: "US-EAST", log_level: "error", canbus: { enabled: true } },
+  {
+    name: "US-WEST",
+    log_level: "info",
+    canbus: { enabled: true },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+  },
+  {
+    name: "US-CENTRAL",
+    log_level: "warn",
+    canbus: { enabled: false },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+  },
+  {
+    name: "US-EAST",
+    log_level: "error",
+    canbus: { enabled: true },
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+  },
 ];
+
+const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -1,10 +1,27 @@
 let busy = false;
 let fleets = [
-  { name: "US-WEST", log_level: "info", canbus: { enabled: true } },
-  { name: "US-CENTRAL", log_level: "warn", canbus: { enabled: false } },
-  { name: "US-EAST", log_level: "error", canbus: { enabled: true } },
+  {
+    name: "US-WEST",
+    log_level: "info",
+    canbus: { enabled: true },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+  },
+  {
+    name: "US-CENTRAL",
+    log_level: "warn",
+    canbus: { enabled: false },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+  },
+  {
+    name: "US-EAST",
+    log_level: "error",
+    canbus: { enabled: true },
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+  },
 ];
 let totalFleets = 3;
+let fleetVehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+let totalFleetVehicles = 3;
 
 export const FleetProvider = ({ children }) => {
   return <div data-testid="mocked-fleetprovider">{children}</div>;
@@ -12,10 +29,17 @@ export const FleetProvider = ({ children }) => {
 
 export const useFleetContext = () => ({
   busy,
+
   fleets,
   totalFleets,
   addFleet: jest.fn(),
   getFleets: jest.fn(),
   updateFleet: jest.fn(),
   deleteFleet: jest.fn(),
+
+  fleetVehicles,
+  totalFleetVehicles,
+  getFleetVehicles: jest.fn(),
+  addFleetVehicle: jest.fn(),
+  deleteFleetVehicle: jest.fn()
 });