fix existing tests

__tests__/components/app-header.test.tsx

@@ -2,50 +2,83 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { AppHeaderComponent } from "@/components/app-header";
 
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => <img {...props} />,
+}));
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    href,
+  }: {
+    children: React.ReactNode;
+    href: string;
+  }) => <a href={href}>{children}</a>,
+}));
+
 describe("AppHeaderComponent", () => {
-  it("renders the App Header Component and associated content", () => {
+  beforeEach(() => {
     render(<AppHeaderComponent />);
+  });
 
-    const moultrieLogo = screen.getByRole("img", {
-      name: "Moultrie Animal Clinic Logo",
-    });
+  it("renders the Moultrie Animal Clinic logo", () => {
+    const logo = screen.getByAltText(
+      "Small Moultrie Animal Clinic dog and cat logo."
+    );
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute("src");
+  });
 
-    const homeLink = screen.getByRole("link", {
-      name: "Home",
-    });
-    const meetOurTeamLink = screen.getByRole("link", {
-      name: "Meet Our Team",
-    });
-    const ourServicesLink = screen.getByRole("link", {
-      name: "Our Services",
-    });
-    const takeATourLink = screen.getByRole("link", {
-      name: "Take a Tour",
-    });
-    const newClientsLink = screen.getByRole("link", {
-      name: "New Clients",
-    });
-    const onlinePharmacyLink = screen.getByRole("link", {
-      name: "Online Pharmacy",
-    });
+  it("renders navigation links with correct hrefs", () => {
+    const navItems = [
+      { href: "/", label: "Home" },
+      { href: "/meet-our-team", label: "Meet Our Team" },
+      { href: "/our-services", label: "Our Services" },
+      { href: "/take-a-tour", label: "Take a Tour" },
+      { href: "/new-clients", label: "New Clients" },
+      {
+        href: "https://moultrieanimalclinic.securevetsource.com/site/view/site/view/HomeDelivery.pml?retUrl=https://moultrieanimalclinic.com/&cmsTitle=MOULTRIE%20ANIMAL%20CLINIC",
+        label: "Online Pharmacy",
+      },
+    ];
 
-    const facebookLogo = screen.getByRole("img", {
-      name: "Facebook Icon",
+    navItems.forEach(({ href, label }) => {
+      const link = screen.getByRole("link", { name: label });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("href", href);
     });
-    const phoneNumber = screen.getByRole("link", {
-      name: "+1 (904) 797-5601",
+  });
+
+  it("renders social links and contact information", () => {
+    const facebookLink = screen.getByRole("link", {
+      name: /visit the moultrie animal clinic facebook/i,
     });
+    expect(facebookLink).toBeInTheDocument();
+    expect(facebookLink).toHaveAttribute(
+      "href",
+      "https://www.facebook.com/Moultrieanimalclinic"
+    );
 
-    expect(moultrieLogo).toBeInTheDocument();
+    const phoneLink = screen.getByRole("link", { name: "+1 (904) 797-5601" });
+    expect(phoneLink).toBeInTheDocument();
+    expect(phoneLink).toHaveAttribute("href", "tel:+19047975601");
 
-    expect(homeLink).toBeInTheDocument();
-    expect(meetOurTeamLink).toBeInTheDocument();
-    expect(ourServicesLink).toBeInTheDocument();
-    expect(takeATourLink).toBeInTheDocument();
-    expect(newClientsLink).toBeInTheDocument();
-    expect(onlinePharmacyLink).toBeInTheDocument();
+    const emailLink = screen.getByRole("link", {
+      name: "[email protected]",
+    });
+    expect(emailLink).toBeInTheDocument();
+    expect(emailLink).toHaveAttribute(
+      "href",
+      "mailto:[email protected]"
+    );
+  });
 
-    expect(facebookLogo).toBeInTheDocument();
-    expect(phoneNumber).toBeInTheDocument();
+  it("renders the mobile menu", () => {
+    const mobileMenu = screen.getByRole("button", {
+      name: "Mobile Toggle Menu",
+    });
+    expect(mobileMenu).toBeInTheDocument();
   });
 });

__tests__/components/contact-page.test.tsx

@@ -1,45 +1,85 @@
-import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { ContactPageComponent } from "@/components/contact-page";
+import "@testing-library/jest-dom";
 
 describe("ContactPageComponent", () => {
-  it("renders the Contact Page Component and associated content", () => {
+  beforeEach(() => {
     render(<ContactPageComponent />);
+  });
 
-    const contactUsHeading = screen.getByRole("heading", {
-      name: "Contact Us",
-    });
-    const phoneNumber = screen.getByRole("link", {
-      name: "+1 (904) 797-5601",
-    });
-    const email = screen.getByRole("link", {
+  it("renders the Contact Us heading", () => {
+    const heading = screen.getByRole("heading", { name: "Contact Us" });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("displays correct contact information", () => {
+    expect(screen.getByText("+1 (904) 797-5601")).toBeInTheDocument();
+    expect(
+      screen.getByText("[email protected]")
+    ).toBeInTheDocument();
+    expect(screen.getByText("+1 (904) 794-7170")).toBeInTheDocument();
+    expect(
+      screen.getByText("3450 US Hwy 1 S, Saint Augustine, FL 32086")
+    ).toBeInTheDocument();
+  });
+
+  it("contains correct links with proper attributes", () => {
+    const phoneLink = screen.getByRole("link", { name: "+1 (904) 797-5601" });
+    expect(phoneLink).toHaveAttribute("href", "tel:+19047975601");
+
+    const emailLink = screen.getByRole("link", {
       name: "[email protected]",
     });
-    const faxNumber = screen.getByRole("link", {
-      name: "+1 (904) 794-7170",
-    });
-    const address = screen.getByRole("link", {
+    expect(emailLink).toHaveAttribute(
+      "href",
+      "mailto:[email protected]"
+    );
+
+    const faxLink = screen.getByRole("link", { name: "+1 (904) 794-7170" });
+    expect(faxLink).toHaveAttribute("href", "tel:+19047947170");
+
+    const addressLink = screen.getByRole("link", {
       name: "3450 US Hwy 1 S, Saint Augustine, FL 32086",
     });
-    const hoursOfOperatian = screen.getByRole("heading", {
+    expect(addressLink).toHaveAttribute(
+      "href",
+      "https://www.google.com/maps/search/?api=1&query=3450+US+Hwy+1+S,+Saint+Augustine,+FL+32086"
+    );
+    expect(addressLink).toHaveAttribute("target", "_blank");
+    expect(addressLink).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("displays Hours of Operation", () => {
+    const hoursHeading = screen.getByRole("heading", {
       name: "Hours of Operation",
     });
-    const googleMap = screen.getByTitle("Google Map of Moultrie Animal Clinic");
+    expect(hoursHeading).toBeInTheDocument();
+  });
+
+  it("renders Google Map", () => {
+    const map = screen.getByTitle("Google Map of Moultrie Animal Clinic");
+    expect(map).toBeInTheDocument();
+  });
+
+  it("renders social media links", () => {
     const facebookLink = screen.getByRole("link", {
-      name: "Facebook Icon",
+      name: "Visit the Moultrie Animal Clinic Facebook.",
     });
+    expect(facebookLink).toHaveAttribute(
+      "href",
+      "https://www.facebook.com/Moultrieanimalclinic"
+    );
+    expect(facebookLink).toHaveAttribute("target", "_blank");
+    expect(facebookLink).toHaveAttribute("rel", "noopener noreferrer");
+
     const googleLink = screen.getByRole("link", {
-      name: "Google Icon",
+      name: "Visit the Moultrie Animial Clinic Google search entry.",
     });
-
-    expect(contactUsHeading).toBeInTheDocument();
-    expect(phoneNumber).toBeInTheDocument();
-    expect(email).toBeInTheDocument();
-    expect(faxNumber).toBeInTheDocument();
-    expect(address).toBeInTheDocument();
-    expect(hoursOfOperatian).toBeInTheDocument();
-    expect(googleMap).toBeInTheDocument();
-    expect(facebookLink).toBeInTheDocument();
-    expect(googleLink).toBeInTheDocument();
+    expect(googleLink).toHaveAttribute(
+      "href",
+      "https://www.google.com/search?q=Moultrie+Animal+Clinic"
+    );
+    expect(googleLink).toHaveAttribute("target", "_blank");
+    expect(googleLink).toHaveAttribute("rel", "noopener noreferrer");
   });
 });

__tests__/components/home-page.test.tsx

@@ -7,21 +7,17 @@ jest.mock("next/image", () => ({
   default: (props: any) => <img {...props} />,
 }));
 
-jest.mock("@/components/google-map", () => ({
-  GoogleMapComponent: () => <div data-testid="google-map">Google Map</div>,
-}));
-
 describe("HomePageComponent", () => {
   beforeEach(() => {
     render(<HomePageComponent />);
   });
 
   it("renders the Moultrie Animal Clinic logo and tagline", () => {
     const logo = screen.getByAltText(
-      "Full Moultrie Animal Clinic logo with lighthouse and clinic name."
+      "Moultrie Animal Clinic logo with lighthouse and clinic name."
     );
     const tagline = screen.getByText(
-      "Family Owned and Providing Compassionate Care for Your Furry Family Members Since 1985!"
+      "Family Owned - Providing Compassionate Care for Your Furry Family Members Since 1985"
     );
 
     expect(logo).toBeInTheDocument();
@@ -50,7 +46,11 @@ describe("HomePageComponent", () => {
     const servicesHeading = screen.getByRole("heading", {
       name: "Our Services",
     });
-    const serviceCards = screen.getAllByRole("heading", { level: 3 });
+    const serviceCards = screen
+      .getAllByRole("heading", { level: 3 })
+      .filter((heading) =>
+        heading.closest("section")?.textContent?.includes("Our Services")
+      );
     const viewAllServicesButton = screen.getByRole("link", {
       name: "View All Services",
     });
@@ -89,7 +89,7 @@ describe("HomePageComponent", () => {
   });
 
   it("renders the Google Map component", () => {
-    const googleMap = screen.getByTestId("google-map");
-    expect(googleMap).toBeInTheDocument();
+    const map = screen.getByTitle("Google Map of Moultrie Animal Clinic");
+    expect(map).toBeInTheDocument();
   });
 });

src/components/google-map.tsx

@@ -35,7 +35,7 @@ export function GoogleMapComponent() {
         title="Google Map of Moultrie Animal Clinic"
         onLoad={() => setIsMapLoaded(true)}
         className={isMapLoaded ? "opacity-100" : "opacity-0"}
-      ></iframe>
+      />
     </div>
   );
 }

src/components/mobile-menu.tsx

@@ -24,7 +24,7 @@ export function MobileMenu({ navItems }: MobileMenuProps) {
       <SheetTrigger asChild>
         <Button variant="outline" size="icon">
           <Menu className="h-5 w-5" />
-          <span className="sr-only">Toggle menu</span>
+          <span className="sr-only">Mobile Toggle Menu</span>
         </Button>
       </SheetTrigger>
       <SheetContent side="right" className="w-[300px] sm:w-[400px]">