4 mars rover info component

.gitignore

@@ -8,6 +8,9 @@
 # testing
 /coverage
 
+# api key
+.env
+
 # production
 /build
 

package.json

@@ -6,8 +6,7 @@
     "@testing-library/dom": "^10.4.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
+    "dotenv": "^16.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.0",
@@ -48,7 +47,8 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@types/sass": "^1.45.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",

src/App.tsx

@@ -1,24 +1,12 @@
 import React from "react";
 import "./App.scss";
+import { useState } from "react";
+import MissionManifest, {
+  rovers,
+} from "./Components/MissionManifest/MissionManifest";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <MissionManifest roverType={rovers.OPPORTUNITY} />;
 }
 
 export default App;

src/Components/MissionManifest/MissionManifest.scss

@@ -0,0 +1,81 @@
+@import "../../Styles/GlobalStyles.scss";
+
+body{
+    background-color: $blueBackground;
+}
+#mission-manifest-container {
+    font-family: $MartianMono;
+    width: 40vw;
+    margin: 40px auto;
+    background-color: $orangeBackground;
+    color: black;
+    h2 {
+        font-weight: 900;
+    }
+    padding: 20px 25px 30px 25px;
+}
+
+#rover-mission-info-container {
+    display: grid;
+    grid-template-columns: 3fr 5fr;
+    grid-auto-rows: auto;
+    p {
+        font-size: 0.8rem;
+        border: 1px solid black;
+        padding: 5px 9px;
+    }
+}
+.manifest-fieldname{
+    font-weight: 900;
+}
+
+// Media Queries 
+
+@media(max-width: 898px) {
+    #mission-manifest-container {
+    width: 50vw;
+    padding: 12px 20px 22px 20px;
+
+    h2{
+        font-size: 1.3rem;
+    }
+ }
+ #rover-mission-info-container p {
+    font-size: 0.7rem;
+ }
+}
+
+@media(max-width: 656px) {
+    #mission-manifest-container {
+    width: 60vw;
+    padding: 12px 20px 22px 20px;
+
+    h2{
+        font-size: 1.3rem;
+    }
+ }
+ #rover-mission-info-container p {
+    font-size: 0.7rem;
+ }
+}
+
+@media(max-width: 320px) {
+    #mission-manifest-container {
+    width: 70vw;
+    padding: 12px 20px 22px 20px;
+
+    h2{
+        font-size: 1.3rem;
+    }
+ }
+ #rover-mission-info-container p {
+    font-size: 0.7rem;
+ }
+}
+
+@media(max-width: 507px) {
+    #rover-mission-info-container p {
+        display: flex;
+        align-items: center;
+    }
+}

src/Components/MissionManifest/MissionManifest.spec.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { getByText, render, screen, waitFor } from "@testing-library/react";
+import App from "../../App";
+import MissionManifest, { rovers } from "./MissionManifest";
+
+const mockManifestResponse = {
+  photo_manifest: {
+    name: "Opportunity",
+    landing_date: "2004-01-25",
+    launch_date: "2003-07-07",
+    status: "complete",
+    max_sol: 5111,
+    max_date: "2018-06-11",
+    total_photos: 198439,
+  },
+};
+
+beforeEach(() => {
+  global.fetch = jest.fn().mockResolvedValue({
+    json: jest.fn().mockResolvedValue(mockManifestResponse),
+  });
+});
+
+test("renders loading message on initial render", () => {
+  render(<MissionManifest roverType={rovers.SPIRIT} />);
+  expect(screen.getByText("Loading...")).toBeInTheDocument();
+});
+
+test("opportunity rover renders correct p elements", async () => {
+  render(<MissionManifest roverType={rovers.OPPORTUNITY} />);
+  const expectedTexts = [
+    "Rover Name: ",
+    mockManifestResponse.photo_manifest.name,
+    "Landing Date: ",
+    mockManifestResponse.photo_manifest.landing_date,
+    "Launch Date: ",
+    mockManifestResponse.photo_manifest.launch_date,
+    "Status: ",
+    mockManifestResponse.photo_manifest.status,
+    "Max Sol: ",
+    mockManifestResponse.photo_manifest.max_sol.toString(),
+    "Max Date: ",
+    mockManifestResponse.photo_manifest.max_date,
+    "Total photos: ",
+    mockManifestResponse.photo_manifest.total_photos.toString(),
+  ];
+
+  const missionManifestContainer = await screen.findByTestId(
+    "mission-manifest-container",
+  );
+  const pElements = missionManifestContainer.querySelectorAll("p");
+
+  expect(pElements.length).toBe(14);
+  pElements.forEach((p, index) => {
+    expect(p.textContent).toBe(expectedTexts[index]);
+    console.log(p.textContent);
+  });
+});
+
+test("opportunity rover renders correct Heading", async () => {
+  render(<MissionManifest roverType={rovers.OPPORTUNITY} />);
+
+  const missionManifestContainer = await screen.findByTestId(
+    "mission-manifest-container",
+  );
+  const heading = screen.getByText("MISSION MANIFEST");
+
+  expect(heading).toBeInTheDocument();
+});
+
+test("invalid rover renders correct p elements", async () => {
+  const mockInvalidFetchResponse = {
+    photo_manifest: {
+      name: undefined,
+      landing_date: undefined,
+      launch_date: undefined,
+      status: undefined,
+      max_sol: undefined,
+      max_date: undefined,
+      total_photos: undefined,
+    },
+  };
+  global.fetch = jest.fn().mockResolvedValue({
+    json: jest.fn().mockResolvedValue(mockInvalidFetchResponse),
+  });
+
+  render(<MissionManifest roverType={rovers.OPPORTUNITY} />);
+
+  const missionManifestContainer = await screen.findByTestId(
+    "mission-manifest-container",
+  );
+  const pElements = missionManifestContainer.querySelectorAll("p");
+  let NaCounter = 0;
+
+  pElements.forEach((p) => {
+    if (p.textContent === "N/A") NaCounter++;
+  });
+
+  expect(NaCounter).toBe(7);
+});