feat try to unit tests

babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+};

jest.config.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "jsx", "json", "node"],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "\\.(svg)$": "<rootDir>/path/to/svg-transformer.js",
+  },
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/build/"],
+  collectCoverageFrom: [
+    "src/**/*.{js,jsx}",
+    "!<rootDir>/node_modules/",
+    "!<rootDir>/build/",
+  ],
+  coverageReporters: ["html", "text-summary"],
+  verbose: true,
+  transform: {
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+};

package.json

@@ -7,12 +7,15 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest"
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@floating-ui/react": "^0.26.4",
+    "@testing-library/react": "^14.1.2",
     "@vitejs/plugin-react": "^4.2.1",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^6.1.6",
@@ -21,12 +24,18 @@
     "react-toastify": "^9.1.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "vite": "^5.0.10"
   }
 }

src/__tests__/Login.test.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { useAuthContext } from "../context/authContext";
+
+import Login from "../components/login/Login";
+
+jest.mock("../context/authContext", () => ({
+  useAuthContext: jest.fn(),
+}));
+
+describe("Login component", () => {
+  test("renders without error", () => {
+    useAuthContext.mockReturnValue({ userToken: null });
+    render(<Login />);
+  });
+
+  test("displays login form", () => {
+    useAuthContext.mockReturnValue({ userToken: null });
+    const { getByRole } = render(<Login />);
+    const form = getByRole("form");
+    expect(form).toBeInTheDocument();
+  });
+
+  test("displays logged in message if user is already logged in", () => {
+    useAuthContext.mockReturnValue({ userToken: "some_token" });
+    const { getByText } = render(<Login />);
+    const message = getByText("You are already logged in.");
+    expect(message).toBeInTheDocument();
+  });
+
+  test("displays dashboard link if user is already logged in", () => {
+    useAuthContext.mockReturnValue({ userToken: "some_token" });
+    const { getByRole } = render(<Login />);
+    const link = getByRole("link", { name: "Go to dashboard" });
+    expect(link).toBeInTheDocument();
+  });
+});

src/components/navigate/navigaterow/NavigateRow.jsx

@@ -9,15 +9,12 @@ import {
 } from "../../../utils";
 
 const NavigateRow = ({ waypoint, shipProps, flightMode, isOrbited }) => {
-  console.log(shipProps);
   const { shipData, shipNavigate, fuel, updateFuel } = useShipContext();
 
   const [flightModeShip, setFlightModeShip] = useState(
     shipData?.flightMode || flightMode
   );
 
-  console.log(shipProps.waypoint);
-
   const [isLocating, setIsLocating] = useState(
     shipData?.nav?.route?.destination?.symbol || shipProps.waypoint
   );

src/components/ship/Ship.jsx

@@ -119,7 +119,7 @@ const Ship = () => {
               ) : activeButton === "market" ? (
                 <Market data={data} />
               ) : (
-                <Shipyard />
+                <Shipyard data={data} />
               )}
             </div>
           </div>

src/components/ship/about/About.jsx

@@ -11,8 +11,8 @@ import "../ship.css";
 import greaterThan from "../../../assets/icons/greater-than.svg";
 
 const About = ({ data }) => {
-  const { shipData, orbitShip } = useShipContext();
-  const [status, setStatus] = useState(data.nav.status);
+  const { shipData, orbitShip, updateStatusNavigation, statusNavigation } =
+    useShipContext();
   const [flightMode, setFlightMode] = useState(data.nav.flightMode);
   const [arrivalDate, setArrivalDate] = useState({
     time: data.nav.route.arrival,
@@ -32,7 +32,9 @@ const About = ({ data }) => {
 
   useEffect(() => {
     if (shipData) {
-      setStatus(shipData?.nav?.status || data.nav.status || shipData?.status);
+      updateStatusNavigation(
+        shipData?.nav?.status || data.nav.status || shipData?.status
+      );
       setFlightMode(
         shipData?.flightMode || data.nav.flightMode || shipData?.nav?.flightMode
       );
@@ -63,9 +65,9 @@ const About = ({ data }) => {
           <span className="about__flight-mode badge-gray">
             {formatFirstLetterToUpperCase(flightMode)}
           </span>
-          {status === "IN_ORBIT" ? (
+          {statusNavigation === "IN_ORBIT" ? (
             <span className="about__in-orbit badge-gray">In orbit</span>
-          ) : status === "DOCKED" ? (
+          ) : statusNavigation === "DOCKED" ? (
             <span className="about__docked badge-gray">Docked</span>
           ) : (
             <span className="about__in-transit badge-gray">In transit</span>

src/components/ship/shipyard/Shipyard.jsx

@@ -3,11 +3,92 @@ import React, { useState, useEffect } from "react";
 import { useShipContext } from "../../../context/shipContext";
 import { useAuthContext } from "../../../context/authContext";
 
+import fuelIcon from "../../../assets/icons/fuel.svg";
+import cargoIcon from "../../../assets/icons/cargo.svg";
+
 import "./shipyard.css";
-const Shipyard = () => {
-  const { shipyard, getShipyard } = useShipContext();
-  const { agent } = useAuthContext();
-  return <div>Shipyard</div>;
+
+const Shipyard = ({ data }) => {
+  const {
+    shipyard,
+    getShipyard,
+    shipData,
+    statusNavigation,
+    updateStatusNavigation,
+    buyShip,
+  } = useShipContext();
+  const { agent, updateAgent } = useAuthContext();
+  const [waypoint, setWaypoint] = useState("");
+
+  const purchaseShip = (ship) => {
+    buyShip(ship.type, waypoint);
+    updateAgent();
+  };
+
+  const canBuyShip = (ship) => {
+    return agent.credits >= ship.purchasePrice && statusNavigation === "DOCKED";
+  };
+
+  const renderBuyButton = (ship) => {
+    return (
+      <button
+        className="shipyard-price__button"
+        disabled={!canBuyShip(ship)}
+        onClick={() => {
+          if (canBuyShip(ship)) {
+            purchaseShip(ship);
+          }
+        }}
+      >
+        Buy
+      </button>
+    );
+  };
+
+  useEffect(() => {
+    if (shipData?.nav) {
+      const { systemSymbol, waypointSymbol, status } = shipData.nav;
+      getShipyard(systemSymbol, waypointSymbol);
+      updateStatusNavigation(status);
+      setWaypoint(waypointSymbol);
+    }
+  }, [shipData]);
+
+  useEffect(() => {
+    const { systemSymbol, waypointSymbol } = data.nav;
+    getShipyard(systemSymbol, waypointSymbol);
+    setWaypoint(waypointSymbol);
+  }, []);
+
+  return (
+    <div className="shipyard-container">
+      {shipyard ? (
+        <div className="shipyard">
+          {shipyard.ships.map((ship, index) => (
+            <div key={index} className="shipyard-card">
+              <p className="shipyard-name">{ship.name}</p>
+              <div className="shipyard-capacity-container">
+                <p className="shipyard-capacity">
+                  <img src={cargoIcon} alt="cargo icon" />
+                  {ship.crew.capacity}
+                </p>
+                <p className="shipyard-capacity">
+                  <img src={fuelIcon} alt="fuel icon" />
+                  {ship.frame.fuelCapacity}
+                </p>
+              </div>
+              <div className="shipyard-price">
+                <p className="shipyard-price__text">{ship.purchasePrice}</p>
+                {renderBuyButton(ship)}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p style={{ color: "#fff" }}>No shipyard...</p>
+      )}
+    </div>
+  );
 };
 
 export default Shipyard;

src/components/ship/shipyard/shipyard.css

@@ -0,0 +1,56 @@
+.shipyard-container {
+  width: 100%;
+}
+
+.shipyard {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--white);
+}
+
+.shipyard-capacity-container {
+  display: flex;
+  gap: 1rem;
+}
+
+.shipyard-card {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--gray);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  gap: 0.5rem;
+}
+
+.shipyard-name {
+  font-weight: var(--font-weight-semibold);
+}
+
+.shipyard-capacity,
+.shipyard-price {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.shipyard-price {
+  gap: 0.5rem;
+}
+
+.shipyard-price__button {
+  background: linear-gradient(94deg, var(--cream) -1.06%, var(--lavender) 100%);
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  color: var(--black);
+  font-weight: var(--font-weight-semibold);
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+}
+
+.shipyard-price__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

src/components/ship/state/State.jsx

@@ -7,20 +7,27 @@ import cargoIcon from "../../../assets/icons/cargo.svg";
 import wrenchIcon from "../../../assets/icons/wrench.svg";
 
 const State = ({ data }) => {
-  const { shipData, refuelShip, updateFuel, fuel, getFuel } = useShipContext();
+  const {
+    shipData,
+    refuelShip,
+    updateFuel,
+    fuel,
+    getFuel,
+    statusNavigation,
+    updateStatusNavigation,
+  } = useShipContext();
 
   const [isFull, setIsFull] = useState();
-  const [isDocked, setIsDocked] = useState();
   const [cargoUnits, setCargoUnits] = useState();
 
   useEffect(() => {
-    if (shipData && shipData.nav) {
-      setIsDocked(shipData.nav.status);
+    if (shipData?.nav) {
+      updateStatusNavigation(shipData.nav.status);
     }
     if (fuel === data.fuel.capacity) {
       setIsFull(true);
     }
-    if (shipData && shipData.cargo) {
+    if (shipData?.cargo) {
       setCargoUnits(shipData.cargo.units);
     }
   }, [shipData?.nav, fuel]);
@@ -38,14 +45,18 @@ const State = ({ data }) => {
       }
     };
 
-    setIsDocked(data.nav.status);
+    updateStatusNavigation(data.nav.status);
     setCargoUnits(data.cargo.units);
     setIsFull(data.fuel.current === data.fuel.capacity);
     fetchData();
   }, [data.symbol]);
 
   const handleClickRefuel = async () => {
-    if (isFull || isDocked === "IN_ORBIT" || isDocked === "IN_TRANSIT") {
+    if (
+      isFull ||
+      statusNavigation === "IN_ORBIT" ||
+      statusNavigation === "IN_TRANSIT"
+    ) {
       return;
     }
     try {
@@ -66,15 +77,16 @@ const State = ({ data }) => {
           <div className="ship-state__item-value-container">
             <img src={fuelIcon} alt="Fuel Icon" />
             <span className="ship-state__item-value">
-              {fuel?.current !== undefined ? fuel.current : "N/A"} /{" "}
-              {data.fuel.capacity}
+              {fuel?.current ?? "N/A"} / {data.fuel.capacity}
             </span>
           </div>
           <button
             className="ship-state__item-button"
             onClick={handleClickRefuel}
             disabled={
-              isFull || isDocked === "IN_ORBIT" || isDocked === "IN_TRANSIT"
+              isFull ||
+              statusNavigation === "IN_ORBIT" ||
+              statusNavigation === "IN_TRANSIT"
             }
           >
             Refuel