tests updated

app/components/__tests__/card-hazard.test.tsx

@@ -12,33 +12,35 @@ jest.mock("../pill.tsx", () => () => (
 describe("CardHazard Component", () => {
   beforeEach(() => {
     Hazards[0] = {
+      id: 4,
       title: "Earthquake",
+      name: "seismic",
       description: "Potential hazard in the area.",
       color: "#FF0000",
       update: "2 days ago",
     };
   });
 
   it("renders without crashing", () => {
-    render(<CardHazard />);
+    render(<CardHazard hazard={Hazards[0]} />);
     expect(screen.getByText("Earthquake")).toBeInTheDocument();
   });
 
   it("displays the hazard title and description", () => {
-    render(<CardHazard />);
+    render(<CardHazard hazard={Hazards[0]} />);
     expect(screen.getByText("Earthquake")).toBeInTheDocument();
     expect(
       screen.getByText("Potential hazard in the area.")
     ).toBeInTheDocument();
   });
 
   it("displays the hazard's updated time", () => {
-    render(<CardHazard />);
+    render(<CardHazard hazard={Hazards[0]} />);
     expect(screen.getByText("Updated 2 days ago")).toBeInTheDocument();
   });
 
   it("displays the hazard's color in the SVG circle", () => {
-    render(<CardHazard />);
+    render(<CardHazard hazard={Hazards[0]} />);
     const svgCircle = screen.getByRole("img", { hidden: true });
     expect(svgCircle).toHaveAttribute("fill", "#FF0000");
   });