fixed Enum naming

Author: Hannah Dunsmore

src/Components/MissionManifest/MissionManifest.spec.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import MissionManifest, { rovers } from "./MissionManifest";
+import MissionManifest, { Rovers } from "./MissionManifest";
 
 const mockManifestResponse = {
   photo_manifest: {
@@ -21,12 +21,12 @@ beforeEach(() => {
 });
 
 test("renders loading message on initial render", () => {
-  render(<MissionManifest roverType={rovers.SPIRIT} />);
+  render(<MissionManifest roverType={Rovers.SPIRIT} />);
   expect(screen.getByText("Loading...")).toBeInTheDocument();
 });
 
 test("opportunity rover renders correct p elements", async () => {
-  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
+  render(<MissionManifest roverType={Rovers.OPPORTUNIY} />);
   const expectedTexts = [
     "Rover Name: ",
     mockManifestResponse.photo_manifest.name,
@@ -57,7 +57,7 @@ test("opportunity rover renders correct p elements", async () => {
 });
 
 test("opportunity rover renders correct Heading", async () => {
-  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
+  render(<MissionManifest roverType={Rovers.OPPORTUNIY} />);
 
   const heading = await screen.findByText("MISSION MANIFEST");
 
@@ -80,7 +80,7 @@ test("invalid rover renders correct p elements", async () => {
     json: jest.fn().mockResolvedValue(mockInvalidFetchResponse),
   });
 
-  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
+  render(<MissionManifest roverType={Rovers.OPPORTUNIY} />);
 
   const missionManifestContainer = await screen.findByTestId(
     "mission-manifest-container",

src/Components/MissionManifest/MissionManifest.tsx

@@ -3,14 +3,14 @@ import { useState } from "react";
 import { useEffect } from "react";
 import "./MissionManifest.scss";
 
-export enum rovers {
+export enum Rovers {
   CURIOSITY = "curiosity",
   OPPORTUNIY = "opportunity",
   SPIRIT = "spirit",
 }
 
 export interface MissionManifestProps {
-  roverType: rovers;
+  roverType: Rovers;
 }
 
 type manifestData = {

src/Components/RoverDetails/RoverDetails.tsx

@@ -7,30 +7,30 @@ import opportunityButton from "../../Assets/Images/Opportunity_button.png";
 import "./RoverDetails.scss";
 import RoverImages from "../RoverImages/RoverImages";
 
-export enum rovers {
+export enum Rovers {
   CURIOSITY = "curiosity",
   OPPORTUNIY = "opportunity",
   SPIRIT = "spirit",
 }
 
 export interface MissionManifestProps {
-  roverType: rovers;
+  roverType: Rovers;
 }
 
 function RoverDetails() {
-  const [rover, setRover] = useState<rovers>(rovers.SPIRIT);
-  const [selectedRover, setSelectedRover] = useState<rovers>(rovers.SPIRIT);
+  const [rover, setRover] = useState<Rovers>(Rovers.SPIRIT);
+  const [selectedRover, setSelectedRover] = useState<Rovers>(Rovers.SPIRIT);
 
   const handleClick = (id: string) => {
     if (id === "spirit-button") {
-      setRover(rovers.SPIRIT);
-      setSelectedRover(rovers.SPIRIT);
+      setRover(Rovers.SPIRIT);
+      setSelectedRover(Rovers.SPIRIT);
     } else if (id === "curiosity-button") {
-      setRover(rovers.CURIOSITY);
-      setSelectedRover(rovers.CURIOSITY);
+      setRover(Rovers.CURIOSITY);
+      setSelectedRover(Rovers.CURIOSITY);
     } else if (id === "opportunity-button") {
-      setRover(rovers.OPPORTUNIY);
-      setSelectedRover(rovers.OPPORTUNIY);
+      setRover(Rovers.OPPORTUNIY);
+      setSelectedRover(Rovers.OPPORTUNIY);
     }
   };
 

src/Components/RoverImages/RoverImage.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import RoverImages from "./RoverImages";
-import { rovers } from "../RoverDetails/RoverDetails";
+import { Rovers } from "../RoverDetails/RoverDetails";
 
 const photo_mock_data = {
   photos: [
@@ -38,7 +38,7 @@ describe("Testing the rover image displayed on page load", () => {
       });
   });
   test("Testing the rover image displayed on page load", async () => {
-    render(<RoverImages roverType={rovers.CURIOSITY} />);
+    render(<RoverImages roverType={Rovers.CURIOSITY} />);
 
     await waitFor(() => {
       const testImage = document.querySelector("img") as HTMLImageElement;
@@ -50,7 +50,7 @@ describe("Testing the rover image displayed on page load", () => {
   });
 
   test("Testing the rover image is displayed when next is clicked", async () => {
-    render(<RoverImages roverType={rovers.CURIOSITY} />);
+    render(<RoverImages roverType={Rovers.CURIOSITY} />);
     await waitFor(() => {
       const firstTestImage = document.querySelector("img") as HTMLImageElement;
       const firstTestImageDiv = firstTestImage.parentElement?.parentElement;

src/Components/RoverImages/RoverImages.tsx

@@ -4,7 +4,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./RoverImages.scss";
 import { ClipLoader } from "react-spinners";
-import { MissionManifestProps, rovers } from "../RoverDetails/RoverDetails";
+import { MissionManifestProps, Rovers } from "../RoverDetails/RoverDetails";
 
 type RoverResponse = {
   id: number;
@@ -86,7 +86,7 @@ function RoverImages(props: MissionManifestProps) {
         />
       </div>
     );
-  } else if (props.roverType === rovers.CURIOSITY) {
+  } else if (props.roverType === Rovers.CURIOSITY) {
     return (
       <div className="sliderContainer">
         <Slider {...sliderSettings}>