Rover image component (#23)

Co-authored-by: preek0719 <preetha.krishnan@softwire.com>
Co-authored-by: Rachel Kelly <rachel.kelly@softwire.com>

Author: 3 people

package-lock.json

@@ -6,14 +6,17 @@
     "@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",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router": "^7.6.0",
     "react-router-dom": "^7.6.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.3",
+    "react-spinners": "^0.17.0",
     "sass": "^1.88.0",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -48,7 +51,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-slick": "^0.23.13",
     "@types/sass": "^1.45.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",

package.json

@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import RoverImages from "./RoverImages";
+
+const photo_mock_data = {
+  photos: [
+    {
+      id: 1,
+      img_src: "https://mars.nasa.gov/",
+    },
+    {
+      id: 2,
+      img_src: "https://mars.nasa.gov/1",
+    },
+  ],
+};
+
+const manifest_mock_data = {
+  photo_manifest: {
+    photos: [
+      {
+        cameras: ["HAZ"],
+      },
+    ],
+  },
+};
+
+describe("Testing the rover image displayed on page load", () => {
+  beforeEach(() => {
+    global.fetch = jest
+      .fn()
+      .mockResolvedValueOnce({
+        json: jest.fn().mockResolvedValue(manifest_mock_data),
+      })
+      .mockResolvedValueOnce({
+        json: jest.fn().mockResolvedValue(photo_mock_data),
+      });
+  });
+  test("Testing the rover image displayed on page load", async () => {
+    render(<RoverImages name="curiosity" />);
+
+    await waitFor(() => {
+      const testImage = document.querySelector("img") as HTMLImageElement;
+      expect(testImage).toHaveAttribute(
+        "src",
+        photo_mock_data.photos[0].img_src,
+      );
+    });
+  });
+
+  test("Testing the rover image is displayed when next is clicked", async () => {
+    render(<RoverImages name="curiosity" />);
+    await waitFor(() => {
+      const firstTestImage = document.querySelector("img") as HTMLImageElement;
+      const firstTestImageDiv = firstTestImage.parentElement?.parentElement;
+      const nextButton = document.getElementsByClassName(
+        "slick-arrow slick-next",
+      );
+      fireEvent.click(nextButton[0]);
+      expect(firstTestImageDiv).toHaveAttribute("aria-hidden", "true");
+    });
+  });
+});

src/Components/RoverImages/RoverImage.spec.tsx

@@ -0,0 +1,28 @@
+body {
+  background: #062356;
+  color: #fffff2;
+}
+
+.sliderContainer {
+  max-width: 30%;
+  margin: auto;
+  padding: 40px;
+}
+
+.error {
+  text-align: center;
+  font-size: 50px;
+}
+
+
+@media screen and (max-width: 1000px) {
+  .sliderContainer {
+    max-width: 60%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .sliderContainer {
+    max-width: 80%;
+  }
+}