added unit tests

Author: Hannah Dunsmore

src/App.test.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import "./App.scss";
 import {useState} from 'react';
-import MissionManifest from "./Components/MissionManifest/MissionManifest";
+import MissionManifest, { rovers } from "./Components/MissionManifest/MissionManifest";
 
 
 
 function App() {
-  const [rover, setRover] = useState("spirit");
+  const [rover, setRover] = useState<rovers>(rovers.SPIRIT);
 
   return (
-  <MissionManifest roverName={rover} />
-  );
+  <MissionManifest roverType={rover} />
+  )
 }
 
 export default App;

src/App.tsx

@@ -1,10 +1,82 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { getByText, render, screen, waitFor } from "@testing-library/react";
 import App from "../../App";
-import MissionManifest from "./MissionManifest";
+import MissionManifest, { rovers } from "./MissionManifest";
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+
+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),
+    });
+  });
+
+// Ensures component renders a loading state before data arrives
+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.OPP}/>);
+    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.OPP}/>);
+    
+    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.OPP}/>);
+    
+    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);
+})

src/Components/MissionManifest/MissionManifest.spec.tsx

@@ -4,8 +4,14 @@ import { config } from 'dotenv';
 import { json } from 'stream/consumers';
 import "./MissionManifest.scss";
 
-type RoverType = {
-    roverName: string;
+export enum rovers {
+    CURIOSITY = 'curiosity',
+    OPP = 'opportunity',
+    SPIRIT = 'spirit'
+    };
+
+export interface MissionManifestProps {
+    roverType: rovers;
 } 
 
 type manifestData = {
@@ -18,15 +24,14 @@ type manifestData = {
     totalPhotos: number
 }
 
-const rovers = ['curiosity', 'opportunity', 'spirit'];
 
-function MissionManifest(props: RoverType) {
+
+function MissionManifest(props: MissionManifestProps) {
     const apiKey = process.env.REACT_APP_API_KEY;
-    const [manifestData, setManifestData] = useState({} as manifestData);
+    const [manifestData, setManifestData] = useState<manifestData | null>(null);
 
     useEffect(() => {
-        if (rovers.includes(props.roverName.toLowerCase())) {
-            fetch(`https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverName}?api_key=${apiKey}`).then(response => response.json()).then((response) => {
+            fetch(`https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverType}?api_key=${apiKey}`).then(response => response.json()).then((response) => {
             let data = response.photo_manifest;
             setManifestData({
                     name: data.name,
@@ -38,15 +43,14 @@ function MissionManifest(props: RoverType) {
                     totalPhotos: data.total_photos
             })
             });
-        } 
-    }, [props.roverName]);
+    }, [props.roverType]);
 
 
     if (!manifestData) {
         return <p>Loading...</p>
     } else {
     return (
-        <div id='mission-manifest-container'>
+        <div id='mission-manifest-container' data-testid="mission-manifest-container">
             <h2>MISSION MANIFEST</h2>
             <div id='rover-mission-info-container'>
                 <p className='manifest-fieldname'>Rover Name: </p>