From 3f039ad6528401bbaa2f1dee5559c2f4d1b97a5d Mon Sep 17 00:00:00 2001
From: Alec M <alec.mattu@nih.gov>
Date: Tue, 28 Jan 2025 11:38:10 -0500
Subject: [PATCH 1/3] CRDCDH-2269 Refactor Footer components

---
 src/components/Footer/FooterDesktop.test.tsx  |  20 ++
 src/components/Footer/FooterDesktop.tsx       | 262 +++++++-----------
 src/components/Footer/FooterMobile.test.tsx   |  37 +++
 src/components/Footer/FooterMobile.tsx        | 170 ++++--------
 src/components/Footer/FooterTablet.test.tsx   |  20 ++
 src/components/Footer/FooterTablet.tsx        | 259 +++++++----------
 src/components/Footer/NewsletterForm.test.tsx | 141 ++++++++++
 src/components/Footer/NewsletterForm.tsx      |  95 +++++++
 src/components/Footer/index.test.tsx          |  56 +++-
 src/components/Footer/index.tsx               |  10 +-
 10 files changed, 628 insertions(+), 442 deletions(-)
 create mode 100644 src/components/Footer/FooterDesktop.test.tsx
 create mode 100644 src/components/Footer/FooterMobile.test.tsx
 create mode 100644 src/components/Footer/FooterTablet.test.tsx
 create mode 100644 src/components/Footer/NewsletterForm.test.tsx
 create mode 100644 src/components/Footer/NewsletterForm.tsx

diff --git a/src/components/Footer/FooterDesktop.test.tsx b/src/components/Footer/FooterDesktop.test.tsx
new file mode 100644
index 000000000..89d0b821d
--- /dev/null
+++ b/src/components/Footer/FooterDesktop.test.tsx
@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { axe } from "jest-axe";
+import FooterDesktop from "./FooterDesktop";
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<FooterDesktop />, { wrapper: (p) => <BrowserRouter {...p} /> });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() =>
+      render(<FooterDesktop />, { wrapper: (p) => <BrowserRouter {...p} /> })
+    ).not.toThrow();
+  });
+});
diff --git a/src/components/Footer/FooterDesktop.tsx b/src/components/Footer/FooterDesktop.tsx
index e78ccc444..784a0258c 100644
--- a/src/components/Footer/FooterDesktop.tsx
+++ b/src/components/Footer/FooterDesktop.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef } from "react";
 import { styled } from "@mui/material";
 import { Link } from "react-router-dom";
 import FooterData from "../../config/FooterConfig";
+import NewsletterForm from "./NewsletterForm";
 
-const FooterStyled = styled("div")({
+const StyledFooter = styled("footer")({
   backgroundColor: "#1B496E",
   borderTop: "1px solid #6C727B",
   bottom: 0,
@@ -12,7 +12,7 @@ const FooterStyled = styled("div")({
   position: "relative",
 });
 
-const FooterContainer = styled("div")({
+const StyledTopContainer = styled("div")({
   padding: "2rem",
   maxWidth: "1400px",
   marginLeft: "auto",
@@ -21,7 +21,7 @@ const FooterContainer = styled("div")({
   justifyContent: "space-between",
 });
 
-const FooterEmailSignupContainer = styled("form")({
+const StyledNewsletterForm = styled(NewsletterForm)({
   width: "33.3%",
   "& .signUpTitle": {
     fontFamily: "poppins",
@@ -99,7 +99,7 @@ const FooterLinksContainer = styled("div")({
   },
 });
 
-const BottomFooter = styled("div")({
+const StyledBottomContainer = styled("div")({
   background: "#14315C",
   "& span": {
     display: "block",
@@ -196,169 +196,107 @@ const BottomFooter = styled("div")({
   },
 });
 
-const FooterDesktop = () => {
-  const [emailContent, setEmailContent] = useState("");
-  const emailForm = useRef<HTMLFormElement>(null);
-  const emailInput = useRef<HTMLInputElement>(null);
-  function validateEmail(email) {
-    const reg = /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
-    return reg.test(email);
-  }
-
-  const handleSubmit = (e) => {
-    emailForm.current.reportValidity();
-    if (!validateEmail(emailContent)) {
-      emailInput.current.setCustomValidity("Please enter valid email");
-      e.preventDefault();
-    } else {
-      emailInput.current.setCustomValidity("");
-      emailForm.current.submit();
-    }
-  };
-
-  const handleChange = (e) => {
-    setEmailContent(e.target.value);
-  };
-
-  return (
-    <>
-      <FooterStyled role="contentinfo">
-        <FooterContainer>
-          <FooterLinksContainer>
-            {FooterData.link_sections.map((linkItem) => (
-              <div className="footItem" key={`link_${linkItem.title}`}>
-                <div className="footItemTitle">{linkItem.title}</div>
-                {linkItem.items.map((item) => {
-                  if (typeof item?.link !== "string") {
-                    return (
-                      <div className="footItemSubtitle" key={item?.text}>
-                        {item.text}
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <div className="footItemSubtitle" key={item?.text}>
-                      {item.link.includes("http") ? (
-                        <a
-                          className="footItemLink"
-                          href={item.link}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {item.text}
-                        </a>
-                      ) : (
-                        <Link className="footItemLink" to={item.link}>
-                          {item.text}
-                        </Link>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            ))}
-          </FooterLinksContainer>
-          <FooterEmailSignupContainer
-            onSubmit={handleSubmit}
-            ref={emailForm}
-            action="https://public.govdelivery.com/accounts/USNIHNCI/subscribers/qualify"
-            method="post"
-            target="_blank"
-            id="signup"
-            noValidate
-          >
-            <input type="hidden" name="topic_id" id="topic_id" value="USNIHNCI_223" />
-            <div className="signUpTitle">Sign up for email updates</div>
-            <div className="enterTitle">
-              <label htmlFor="email">
-                Sign up for the newsletter
-                <input
-                  ref={emailInput}
-                  id="email"
-                  type="email"
-                  name="email"
-                  className="signUpInputBox"
-                  value={emailContent}
-                  onChange={(e) => handleChange(e)}
-                />
-              </label>
-            </div>
-            <button type="submit" className="signUpButton">
-              Sign up
-            </button>
-          </FooterEmailSignupContainer>
-        </FooterContainer>
-      </FooterStyled>
-      <BottomFooter>
-        <div className="bottom-footer-container">
-          <div id="bottom-footer-header">
-            <a
-              className="logoText"
-              href="https://www.cancer.gov"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="logoUpperText">National Cancer Institute</div>
-              <div className="logoLowerText">at the National Institutes of Health</div>
-            </a>
-          </div>
-          <div id="bottom-footer-contact-us">
-            Contact Us
-            <div id="bottom-footer-contact-links">
-              {FooterData.contact_links.map((contactItem, contactidx) => {
-                const contactkey = `contact_${contactidx}`;
-                return contactItem.link.includes("http") ? (
-                  <a
-                    key={contactkey}
-                    href={contactItem.link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {contactItem.text}
-                  </a>
-                ) : (
-                  <a key={contactkey} href={contactItem.link}>
-                    {contactItem.text}
-                  </a>
-                );
-              })}
-            </div>
-          </div>
-          <div className="break" />
-          <div id="bottom-footer-follow-us">
-            Follow Us
-            <div id="bottom-footer-follow-us-links">
-              {FooterData.followUs_links.map((followItem, followidx) => {
-                const followkey = `follow_${followidx}`;
+const FooterDesktop = () => (
+  <StyledFooter role="contentinfo" data-testid="desktop-footer">
+    <StyledTopContainer>
+      <FooterLinksContainer>
+        {FooterData.link_sections.map((linkItem) => (
+          <div className="footItem" key={`link_${linkItem.title}`}>
+            <div className="footItemTitle">{linkItem.title}</div>
+            {linkItem.items.map((item) => {
+              if (typeof item?.link !== "string") {
                 return (
-                  <a
-                    key={followkey}
-                    className={followidx !== 0 ? "bottom-footer-social-media-imgs" : ""}
-                    href={followItem.link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img src={followItem.img} alt={followItem.description} />
-                  </a>
+                  <div className="footItemSubtitle" key={item?.text}>
+                    {item.text}
+                  </div>
                 );
-              })}
-            </div>
-          </div>
-          <div id="bottom-footer-gov-links">
-            {FooterData.global_footer_links.map((linkItem, idx) => {
-              const linkitemkey = `linkitem_${idx}`;
+              }
+
               return (
-                <a key={linkitemkey} href={linkItem.link} target="_blank" rel="noopener noreferrer">
-                  {linkItem.text}
-                </a>
+                <div className="footItemSubtitle" key={item?.text}>
+                  {item.link.includes("http") ? (
+                    <a
+                      className="footItemLink"
+                      href={item.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {item.text}
+                    </a>
+                  ) : (
+                    <Link className="footItemLink" to={item.link}>
+                      {item.text}
+                    </Link>
+                  )}
+                </div>
               );
             })}
           </div>
+        ))}
+      </FooterLinksContainer>
+      <StyledNewsletterForm />
+    </StyledTopContainer>
+    <StyledBottomContainer>
+      <div className="bottom-footer-container">
+        <div id="bottom-footer-header">
+          <a
+            className="logoText"
+            href="https://www.cancer.gov"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="logoUpperText">National Cancer Institute</div>
+            <div className="logoLowerText">at the National Institutes of Health</div>
+          </a>
+        </div>
+        <div id="bottom-footer-contact-us">
+          Contact Us
+          <div id="bottom-footer-contact-links">
+            {FooterData.contact_links.map((contactItem) =>
+              contactItem.link.includes("http") ? (
+                <a
+                  key={contactItem.link}
+                  href={contactItem.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {contactItem.text}
+                </a>
+              ) : (
+                <a key={contactItem.link} href={contactItem.link}>
+                  {contactItem.text}
+                </a>
+              )
+            )}
+          </div>
+        </div>
+        <div className="break" />
+        <div id="bottom-footer-follow-us">
+          Follow Us
+          <div id="bottom-footer-follow-us-links">
+            {FooterData.followUs_links.map((followItem, idx) => (
+              <a
+                key={followItem.link}
+                className={idx !== 0 ? "bottom-footer-social-media-imgs" : ""}
+                href={followItem.link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={followItem.img} alt={followItem.description} />
+              </a>
+            ))}
+          </div>
+        </div>
+        <div id="bottom-footer-gov-links">
+          {FooterData.global_footer_links.map((linkItem) => (
+            <a key={linkItem?.text} href={linkItem.link} target="_blank" rel="noopener noreferrer">
+              {linkItem.text}
+            </a>
+          ))}
         </div>
-      </BottomFooter>
-    </>
-  );
-};
+      </div>
+    </StyledBottomContainer>
+  </StyledFooter>
+);
 
 export default FooterDesktop;
diff --git a/src/components/Footer/FooterMobile.test.tsx b/src/components/Footer/FooterMobile.test.tsx
new file mode 100644
index 000000000..717b4ebc5
--- /dev/null
+++ b/src/components/Footer/FooterMobile.test.tsx
@@ -0,0 +1,37 @@
+import { render, within } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import FooterMobile from "./FooterMobile";
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<FooterMobile />, { wrapper: (p) => <BrowserRouter {...p} /> });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() =>
+      render(<FooterMobile />, { wrapper: (p) => <BrowserRouter {...p} /> })
+    ).not.toThrow();
+  });
+
+  it("should toggle the expand of sections on click", () => {
+    const { getAllByTestId } = render(<FooterMobile />, {
+      wrapper: (p) => <BrowserRouter {...p} />,
+    });
+
+    const allGroups = getAllByTestId("dropdown-section-group");
+
+    userEvent.click(within(allGroups[0]).getByRole("button"));
+
+    expect(within(allGroups[0]).getByTestId("dropdown-section-content")).toBeVisible();
+
+    userEvent.click(within(allGroups[0]).getByRole("button"));
+
+    expect(within(allGroups[0]).getByTestId("dropdown-section-content")).not.toBeVisible();
+  });
+});
diff --git a/src/components/Footer/FooterMobile.tsx b/src/components/Footer/FooterMobile.tsx
index 99b0a379d..85d71e89d 100644
--- a/src/components/Footer/FooterMobile.tsx
+++ b/src/components/Footer/FooterMobile.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef } from "react";
 import { styled } from "@mui/material";
 import { Link } from "react-router-dom";
 import FooterData from "../../config/FooterConfig";
+import NewsletterForm from "./NewsletterForm";
 
-const FooterStyled = styled("footer")({
+const StyledFooter = styled("footer")({
   backgroundColor: "#1B496E",
   bottom: 0,
   width: "100%",
@@ -19,7 +19,7 @@ const FooterContainer = styled("div")({
   flexDirection: "column",
 });
 
-const FooterEmailSignupContainer = styled("form")({
+const StyledNewsletterForm = styled(NewsletterForm)({
   padding: "1rem 1rem 2rem 1rem",
   "& .signUpTitle": {
     fontFamily: "poppins",
@@ -246,122 +246,70 @@ const BottomFooter = styled("div")({
 });
 
 const FooterMobile = () => {
-  const [emailContent, setEmailContent] = useState("");
-  const emailForm = useRef<HTMLFormElement>(null);
-  const emailInput = useRef<HTMLInputElement>(null);
-
-  function validateEmail(email) {
-    const reg = /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
-    return reg.test(email);
-  }
-
-  const handleSubmit = (e) => {
-    emailForm.current.reportValidity();
-    if (!validateEmail(emailContent)) {
-      emailInput.current.setCustomValidity("Please enter valid email");
-      e.preventDefault();
-    } else {
-      emailInput.current.setCustomValidity("");
-      emailForm.current.submit();
-    }
-  };
-
-  const handleChange = (e) => {
-    setEmailContent(e.target.value);
-  };
   const handleDropdown = (param) => {
     document.getElementById(`${param}Dropdown`).classList.toggle("show");
     document.getElementById(`${param}Arrow`).classList.toggle("rotate");
   };
 
   return (
-    <>
-      <FooterStyled role="contentinfo">
-        <FooterContainer>
-          <FooterLinksContainer>
-            {FooterData.link_sections.map((linkItem) => {
-              const linkKey = `link_${linkItem.title}`;
-              return (
-                <div className="dropdown" key={linkKey}>
-                  <button type="button" onClick={() => handleDropdown(linkKey)} className="dropbtn">
-                    <svg
-                      id={`${linkKey}Arrow`}
-                      className="arrow"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                      />
-                    </svg>
-                    {linkItem.title}
-                  </button>
-                  <div id={`${linkKey}Dropdown`} className="dropdown-content">
-                    {linkItem.items.map((item) => {
-                      const itemKey = `item_${item.text}`;
-                      if (typeof item?.link !== "string") {
-                        return (
-                          <span className="footItemLink" key={itemKey}>
-                            {item.text}
-                          </span>
-                        );
-                      }
-
-                      return item.link.includes("http") ? (
-                        <a
-                          className="footItemLink"
-                          key={itemKey}
-                          href={item.link}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {item.text}
-                        </a>
-                      ) : (
-                        <Link className="footItemLink" key={itemKey} to={item.link}>
+    <StyledFooter role="contentinfo" data-testid="mobile-footer">
+      <FooterContainer>
+        <FooterLinksContainer>
+          {FooterData.link_sections.map((linkItem) => {
+            const linkKey = `link_${linkItem.title}`;
+            return (
+              <div className="dropdown" key={linkKey} data-testid="dropdown-section-group">
+                <button type="button" onClick={() => handleDropdown(linkKey)} className="dropbtn">
+                  <svg
+                    id={`${linkKey}Arrow`}
+                    className="arrow"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                  >
+                    <path fill="currentColor" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                  </svg>
+                  {linkItem.title}
+                </button>
+                <div
+                  id={`${linkKey}Dropdown`}
+                  className="dropdown-content"
+                  data-testid="dropdown-section-content"
+                >
+                  {linkItem.items.map((item) => {
+                    const itemKey = `item_${item.text}`;
+                    if (typeof item?.link !== "string") {
+                      return (
+                        <span className="footItemLink" key={itemKey}>
                           {item.text}
-                        </Link>
+                        </span>
                       );
-                    })}
-                  </div>
+                    }
+
+                    return item.link.includes("http") ? (
+                      <a
+                        className="footItemLink"
+                        key={itemKey}
+                        href={item.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {item.text}
+                      </a>
+                    ) : (
+                      <Link className="footItemLink" key={itemKey} to={item.link}>
+                        {item.text}
+                      </Link>
+                    );
+                  })}
                 </div>
-              );
-            })}
-          </FooterLinksContainer>
-          <FooterEmailSignupContainer
-            onSubmit={handleSubmit}
-            ref={emailForm}
-            action="https://public.govdelivery.com/accounts/USNIHNCI/subscribers/qualify"
-            method="post"
-            target="_blank"
-            id="signup"
-            noValidate
-          >
-            <input type="hidden" name="topic_id" id="topic_id" value="USNIHNCI_223" />
-            <div className="signUpTitle">Sign up for email updates</div>
-            <div className="enterTitle">
-              <label htmlFor="email">
-                Sign up for the newsletter
-                <input
-                  ref={emailInput}
-                  id="email"
-                  type="email"
-                  name="email"
-                  className="signUpInputBox"
-                  value={emailContent}
-                  onChange={(e) => handleChange(e)}
-                />
-              </label>
-            </div>
-            <button type="submit" className="signUpButton">
-              Sign up
-            </button>
-          </FooterEmailSignupContainer>
-        </FooterContainer>
-      </FooterStyled>
+              </div>
+            );
+          })}
+        </FooterLinksContainer>
+        <StyledNewsletterForm />
+      </FooterContainer>
       <BottomFooter>
         <div className="bottom-footer-container">
           <div id="bottom-footer-header">
@@ -429,7 +377,7 @@ const FooterMobile = () => {
           </div>
         </div>
       </BottomFooter>
-    </>
+    </StyledFooter>
   );
 };
 
diff --git a/src/components/Footer/FooterTablet.test.tsx b/src/components/Footer/FooterTablet.test.tsx
new file mode 100644
index 000000000..dde027fc9
--- /dev/null
+++ b/src/components/Footer/FooterTablet.test.tsx
@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { axe } from "jest-axe";
+import FooterTablet from "./FooterTablet";
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<FooterTablet />, { wrapper: (p) => <BrowserRouter {...p} /> });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() =>
+      render(<FooterTablet />, { wrapper: (p) => <BrowserRouter {...p} /> })
+    ).not.toThrow();
+  });
+});
diff --git a/src/components/Footer/FooterTablet.tsx b/src/components/Footer/FooterTablet.tsx
index 9cb41bdef..95602eccd 100644
--- a/src/components/Footer/FooterTablet.tsx
+++ b/src/components/Footer/FooterTablet.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef } from "react";
 import { styled } from "@mui/material";
 import { Link } from "react-router-dom";
 import FooterData from "../../config/FooterConfig";
+import NewsletterForm from "./NewsletterForm";
 
-const FooterStyled = styled("footer")({
+const StyledFooter = styled("footer")({
   backgroundColor: "#1B496E",
   borderTop: "1px solid #6C727B",
   bottom: 0,
@@ -21,7 +21,7 @@ const FooterContainer = styled("div")({
   justifyContent: "space-between",
 });
 
-const FooterEmailSignupContainer = styled("form")({
+const StyledNewsletterForm = styled(NewsletterForm)({
   width: "33.3%",
   "& .signUpTitle": {
     fontFamily: "poppins",
@@ -206,169 +206,108 @@ const BottomFooter = styled("div")({
   },
 });
 
-const FooterTablet = () => {
-  const [emailContent, setEmailContent] = useState("");
-  const emailForm = useRef<HTMLFormElement>(null);
-  const emailInput = useRef<HTMLInputElement>(null);
-
-  function validateEmail(email) {
-    const reg = /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
-    return reg.test(email);
-  }
-
-  const handleSubmit = (e) => {
-    emailForm.current.reportValidity();
-    if (!validateEmail(emailContent)) {
-      emailInput.current.setCustomValidity("Please enter valid email");
-      e.preventDefault();
-    } else {
-      emailInput.current.setCustomValidity("");
-      emailForm.current.submit();
-    }
-  };
-
-  const handleChange = (e) => {
-    setEmailContent(e.target.value);
-  };
-  return (
-    <>
-      <FooterStyled role="contentinfo">
-        <FooterContainer>
-          <FooterLinksContainer>
-            {FooterData.link_sections.map((linkItem) => (
-              <div className="footItem" key={`link_${linkItem.title}`}>
-                <div className="footItemTitle">{linkItem.title}</div>
-                {linkItem.items.map((item) => {
-                  if (typeof item?.link !== "string") {
-                    return (
-                      <div className="footItemSubtitle" key={item?.text}>
-                        {item.text}
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <div className="footItemSubtitle" key={`item_${item.text}`}>
-                      {item.link.includes("http") ? (
-                        <a
-                          className="footItemLink"
-                          href={item.link}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {item.text}
-                        </a>
-                      ) : (
-                        <Link className="footItemLink" to={item.link}>
-                          {item.text}
-                        </Link>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            ))}
-          </FooterLinksContainer>
-          <FooterEmailSignupContainer
-            onSubmit={handleSubmit}
-            ref={emailForm}
-            action="https://public.govdelivery.com/accounts/USNIHNCI/subscribers/qualify"
-            method="post"
-            target="_blank"
-            id="signup"
-            noValidate
-          >
-            <input type="hidden" name="topic_id" id="topic_id" value="USNIHNCI_223" />
-            <div className="signUpTitle">Sign up for email updates</div>
-            <div className="enterTitle">
-              <label htmlFor="email">
-                Sign up for the newsletter
-                <input
-                  ref={emailInput}
-                  id="email"
-                  type="email"
-                  name="email"
-                  className="signUpInputBox"
-                  value={emailContent}
-                  onChange={(e) => handleChange(e)}
-                />
-              </label>
-            </div>
-            <button type="submit" className="signUpButton">
-              Sign up
-            </button>
-          </FooterEmailSignupContainer>
-        </FooterContainer>
-      </FooterStyled>
-      <BottomFooter>
-        <div className="bottom-footer-container">
-          <div id="bottom-footer-header">
-            <a
-              className="logoText"
-              href="https://www.cancer.gov"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div className="logoUpperText">National Cancer Institute</div>
-              <div className="logoLowerText">at the National Institutes of Health</div>
-            </a>
-          </div>
-          <div id="bottom-footer-contact-us">
-            Contact Us
-            <div id="bottom-footer-contact-links">
-              {FooterData.contact_links.map((contactItem, contactidx) => {
-                const contactkey = `contact_${contactidx}`;
-                return contactItem.link.includes("http") ? (
-                  <a
-                    key={contactkey}
-                    href={contactItem.link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {contactItem.text}
-                  </a>
-                ) : (
-                  <a key={contactkey} href={contactItem.link}>
-                    {contactItem.text}
-                  </a>
-                );
-              })}
-            </div>
-          </div>
-          <div className="break" />
-          <div id="bottom-footer-follow-us">
-            Follow Us
-            <div id="bottom-footer-follow-us-links">
-              {FooterData.followUs_links.map((followItem, followidx) => {
-                const followkey = `follow_${followidx}`;
+const FooterTablet = () => (
+  <StyledFooter role="contentinfo" data-testid="tablet-footer">
+    <FooterContainer>
+      <FooterLinksContainer>
+        {FooterData.link_sections.map((linkItem) => (
+          <div className="footItem" key={`link_${linkItem.title}`}>
+            <div className="footItemTitle">{linkItem.title}</div>
+            {linkItem.items.map((item) => {
+              if (typeof item?.link !== "string") {
                 return (
-                  <a
-                    key={followkey}
-                    className={followidx !== 0 ? "bottom-footer-social-media-imgs" : ""}
-                    href={followItem.link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img src={followItem.img} alt={followItem.description} />
-                  </a>
+                  <div className="footItemSubtitle" key={item?.text}>
+                    {item.text}
+                  </div>
                 );
-              })}
-            </div>
-          </div>
-          <div id="bottom-footer-gov-links">
-            {FooterData.global_footer_links.map((linkItem, idx) => {
-              const linkitemkey = `linkitem_${idx}`;
+              }
+
               return (
-                <a key={linkitemkey} href={linkItem.link} target="_blank" rel="noopener noreferrer">
-                  {linkItem.text}
-                </a>
+                <div className="footItemSubtitle" key={`item_${item.text}`}>
+                  {item.link.includes("http") ? (
+                    <a
+                      className="footItemLink"
+                      href={item.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {item.text}
+                    </a>
+                  ) : (
+                    <Link className="footItemLink" to={item.link}>
+                      {item.text}
+                    </Link>
+                  )}
+                </div>
               );
             })}
           </div>
+        ))}
+      </FooterLinksContainer>
+      <StyledNewsletterForm />
+    </FooterContainer>
+
+    <BottomFooter>
+      <div className="bottom-footer-container">
+        <div id="bottom-footer-header">
+          <a
+            className="logoText"
+            href="https://www.cancer.gov"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="logoUpperText">National Cancer Institute</div>
+            <div className="logoLowerText">at the National Institutes of Health</div>
+          </a>
+        </div>
+        <div id="bottom-footer-contact-us">
+          Contact Us
+          <div id="bottom-footer-contact-links">
+            {FooterData.contact_links.map((contactItem) =>
+              contactItem.link.includes("http") ? (
+                <a
+                  key={contactItem.link}
+                  href={contactItem.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {contactItem.text}
+                </a>
+              ) : (
+                <a key={contactItem.link} href={contactItem.link}>
+                  {contactItem.text}
+                </a>
+              )
+            )}
+          </div>
+        </div>
+        <div className="break" />
+        <div id="bottom-footer-follow-us">
+          Follow Us
+          <div id="bottom-footer-follow-us-links">
+            {FooterData.followUs_links.map((followItem, ind) => (
+              <a
+                key={followItem.link}
+                className={ind !== 0 ? "bottom-footer-social-media-imgs" : ""}
+                href={followItem.link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={followItem.img} alt={followItem.description} />
+              </a>
+            ))}
+          </div>
+        </div>
+        <div id="bottom-footer-gov-links">
+          {FooterData.global_footer_links.map((linkItem) => (
+            <a key={linkItem.link} href={linkItem.link} target="_blank" rel="noopener noreferrer">
+              {linkItem.text}
+            </a>
+          ))}
         </div>
-      </BottomFooter>
-    </>
-  );
-};
+      </div>
+    </BottomFooter>
+  </StyledFooter>
+);
 
 export default FooterTablet;
diff --git a/src/components/Footer/NewsletterForm.test.tsx b/src/components/Footer/NewsletterForm.test.tsx
new file mode 100644
index 000000000..610b637ee
--- /dev/null
+++ b/src/components/Footer/NewsletterForm.test.tsx
@@ -0,0 +1,141 @@
+import { render, waitFor, within } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
+import NewsletterForm from "./NewsletterForm";
+
+const mockWindowOpen = jest.spyOn(window, "open").mockImplementation();
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<NewsletterForm />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() => render(<NewsletterForm />)).not.toThrow();
+  });
+
+  it("should not render the topic_id field visually", () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    expect(getByTestId("topic-id-input")).toBeInTheDocument();
+    expect(getByTestId("topic-id-input")).not.toBeVisible();
+  });
+});
+
+describe("Implementation Requirements", () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should have a newsletter form", () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    expect(getByTestId("newsletter-form")).toBeInTheDocument();
+    expect(
+      within(getByTestId("newsletter-form")).getByRole("textbox", {
+        name: "Sign up for the newsletter",
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("should submit the newsletter form if all fields are valid", async () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    userEvent.type(
+      within(getByTestId("newsletter-form")).getByTestId("email-input"),
+      "test.email@nih.gov"
+    );
+
+    // Act warning caused by RHF reset
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      userEvent.click(
+        within(getByTestId("newsletter-form")).getByRole("button", {
+          name: "Sign up",
+        })
+      );
+    });
+
+    expect(mockWindowOpen).toHaveBeenCalledTimes(1);
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      expect.stringMatching(/topic_id=USNIHNCI_255/),
+      expect.anything()
+    );
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      expect.stringMatching(new RegExp(`email=${encodeURIComponent("test.email@nih.gov")}`)),
+      expect.anything()
+    );
+  });
+
+  it.each<string>([" ", "fake@email", "abc.com", "123-123-123@gmail"])(
+    "should not submit the newsletter form if the email is invalid (%s)",
+    async (value) => {
+      const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+      userEvent.type(within(getByTestId("newsletter-form")).getByTestId("email-input"), value);
+
+      userEvent.click(
+        within(getByTestId("newsletter-form")).getByRole("button", {
+          name: "Sign up",
+        })
+      );
+
+      expect(mockWindowOpen).not.toHaveBeenCalled();
+    }
+  );
+
+  it("should submit the form to the correct URL", async () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    userEvent.type(
+      within(getByTestId("newsletter-form")).getByTestId("email-input"),
+      "valid-email@nih.gov"
+    );
+
+    // Act warning caused by RHF reset
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      userEvent.click(
+        within(getByTestId("newsletter-form")).getByRole("button", {
+          name: "Sign up",
+        })
+      );
+    });
+
+    expect(mockWindowOpen).toHaveBeenCalledTimes(1);
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      expect.stringMatching(
+        /https:\/\/public.govdelivery.com\/accounts\/USNIHNCI\/subscribers\/qualify/
+      ),
+      "_blank"
+    );
+  });
+
+  it("should reset the form after submission", async () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    userEvent.type(
+      within(getByTestId("newsletter-form")).getByTestId("email-input"),
+      "valid@nih.gov"
+    );
+
+    // Act warning caused by RHF reset
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      userEvent.click(
+        within(getByTestId("newsletter-form")).getByRole("button", {
+          name: "Sign up",
+        })
+      );
+    });
+
+    await waitFor(() => {
+      expect(within(getByTestId("newsletter-form")).getByTestId("email-input")).toHaveValue("");
+    });
+  });
+});
diff --git a/src/components/Footer/NewsletterForm.tsx b/src/components/Footer/NewsletterForm.tsx
new file mode 100644
index 000000000..66984c6eb
--- /dev/null
+++ b/src/components/Footer/NewsletterForm.tsx
@@ -0,0 +1,95 @@
+import { FC, forwardRef, memo, useCallback } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { validateEmail } from "../../utils";
+
+/**
+ * The props for the NewsletterForm component.
+ */
+export type NewsletterFormProps = React.HTMLAttributes<HTMLFormElement>;
+
+export type NewsletterFormFields = {
+  /**
+   * The topic ID for the email updates subscription.
+   */
+  topic_id: string;
+  /**
+   * The email address to subscribe to the email updates.
+   */
+  email: string;
+};
+
+const FORM_TOPIC_ID = "USNIHNCI_255";
+
+/**
+ * Provides the Signup for email updates form.
+ *
+ * @note This form is unstyled, you must style it yourself.
+ * @param props The form props.
+ * @returns The Email newsletter form.
+ */
+const NewsletterForm: FC<NewsletterFormProps> = forwardRef<
+  HTMLFormElement,
+  React.HTMLAttributes<HTMLFormElement>
+>((props, ref) => {
+  const { register, handleSubmit, reset } = useForm<NewsletterFormFields>({
+    defaultValues: {
+      topic_id: FORM_TOPIC_ID,
+      email: "",
+    },
+    shouldUseNativeValidation: true,
+  });
+
+  const onSubmit: SubmitHandler<NewsletterFormFields> = (data) => {
+    const params = new URLSearchParams({
+      topic_id: data.topic_id,
+      email: data.email,
+    });
+
+    window.open(
+      `https://public.govdelivery.com/accounts/USNIHNCI/subscribers/qualify?${params.toString()}`,
+      "_blank"
+    );
+
+    reset();
+  };
+
+  const isValidEmail = useCallback(
+    (email: string): null | string =>
+      validateEmail(email) ? null : "Please enter a valid email address.",
+    []
+  );
+
+  const isNotEmpty = useCallback(
+    (email: string): null | string => (email?.trim().length > 0 ? null : "This field is required."),
+    []
+  );
+
+  return (
+    <form ref={ref} onSubmit={handleSubmit(onSubmit)} {...props}>
+      <input type="hidden" data-testid="topic-id-input" {...register("topic_id")} />
+      <div className="signUpTitle">Sign up for email updates</div>
+      <div className="enterTitle">
+        <label htmlFor="email-input">
+          Sign up for the newsletter
+          <input
+            id="email-input"
+            data-testid="email-input"
+            className="signUpInputBox"
+            {...register("email", {
+              validate: {
+                validEmail: isValidEmail,
+                notEmpty: isNotEmpty,
+              },
+              required: "This field is required.",
+            })}
+          />
+        </label>
+      </div>
+      <button type="submit" className="signUpButton">
+        Sign up
+      </button>
+    </form>
+  );
+});
+
+export default memo<NewsletterFormProps>(NewsletterForm);
diff --git a/src/components/Footer/index.test.tsx b/src/components/Footer/index.test.tsx
index 5baa75c11..1a4ad2e86 100644
--- a/src/components/Footer/index.test.tsx
+++ b/src/components/Footer/index.test.tsx
@@ -1,13 +1,55 @@
-import { axe } from "jest-axe";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import Footer from "./index";
 
-describe("Footer", () => {
-  it("should not have any accessibility violations", async () => {
-    const { container } = render(<Footer />, { wrapper: (p) => <BrowserRouter {...p} /> });
-    const results = await axe(container);
+const mockUseMediaQuery = jest.fn();
+jest.mock("@mui/material", () => ({
+  ...jest.requireActual("@mui/material"),
+  useMediaQuery: (query: string) => mockUseMediaQuery(query),
+}));
 
-    expect(results).toHaveNoViolations();
+describe("Basic Functionality", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render the desktop footer for large screens", () => {
+    mockUseMediaQuery.mockImplementation(() => false); // Mobile + tablet = false
+
+    const { getByTestId, queryByTestId } = render(<Footer />, {
+      wrapper: (p) => <BrowserRouter {...p} />,
+    });
+
+    expect(getByTestId("desktop-footer")).toBeInTheDocument();
+    expect(queryByTestId("tablet-footer")).not.toBeInTheDocument();
+    expect(queryByTestId("mobile-footer")).not.toBeInTheDocument();
+  });
+
+  it("should render the tablet footer for medium screens", async () => {
+    mockUseMediaQuery.mockImplementation(
+      (query: string) => query === "(min-width: 768px) and (max-width: 1024px)"
+    );
+
+    const { getByTestId, queryByTestId } = render(<Footer />, {
+      wrapper: (p) => <BrowserRouter {...p} />,
+    });
+
+    expect(queryByTestId("desktop-footer")).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByTestId("tablet-footer")).toBeInTheDocument();
+    });
+    expect(queryByTestId("mobile-footer")).not.toBeInTheDocument();
+  });
+
+  it("should render the mobile footer for small screens", () => {
+    mockUseMediaQuery.mockImplementation((query: string) => query === "(max-width: 767px)");
+
+    const { getByTestId, queryByTestId } = render(<Footer />, {
+      wrapper: (p) => <BrowserRouter {...p} />,
+    });
+
+    expect(queryByTestId("desktop-footer")).not.toBeInTheDocument();
+    expect(queryByTestId("tablet-footer")).not.toBeInTheDocument();
+    expect(getByTestId("mobile-footer")).toBeInTheDocument();
   });
 });
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 2ba9dca9d..51f433615 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,9 +1,15 @@
 import { useMediaQuery } from "@mui/material";
+import { FC, memo } from "react";
 import FooterDesktop from "./FooterDesktop";
 import FooterTablet from "./FooterTablet";
 import FooterMobile from "./FooterMobile";
 
-const Footer = () => {
+/**
+ * Provides the footer component based on the screen size.
+ *
+ * @returns The footer component.
+ */
+const Footer: FC = () => {
   const tablet = useMediaQuery("(min-width: 768px) and (max-width: 1024px)");
   const mobile = useMediaQuery("(max-width: 767px)");
 
@@ -18,4 +24,4 @@ const Footer = () => {
   return <FooterDesktop />;
 };
 
-export default Footer;
+export default memo<FC>(Footer);

From 671f338ce2a80863f16393375670e9f13fc7c031 Mon Sep 17 00:00:00 2001
From: Alec M <alec.mattu@nih.gov>
Date: Tue, 28 Jan 2025 11:50:14 -0500
Subject: [PATCH 2/3] Reverse validation order Fixes the test coverage because
 isValidEmail fails first

---
 src/components/Footer/NewsletterForm.test.tsx | 12 ++++++++++++
 src/components/Footer/NewsletterForm.tsx      |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Footer/NewsletterForm.test.tsx b/src/components/Footer/NewsletterForm.test.tsx
index 610b637ee..d1ca3c61c 100644
--- a/src/components/Footer/NewsletterForm.test.tsx
+++ b/src/components/Footer/NewsletterForm.test.tsx
@@ -89,6 +89,18 @@ describe("Implementation Requirements", () => {
     }
   );
 
+  it("should not submit the newsletter form if the email is invalid (empty)", async () => {
+    const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
+
+    userEvent.click(
+      within(getByTestId("newsletter-form")).getByRole("button", {
+        name: "Sign up",
+      })
+    );
+
+    expect(mockWindowOpen).not.toHaveBeenCalled();
+  });
+
   it("should submit the form to the correct URL", async () => {
     const { getByTestId } = render(<NewsletterForm data-testid="newsletter-form" />);
 
diff --git a/src/components/Footer/NewsletterForm.tsx b/src/components/Footer/NewsletterForm.tsx
index 66984c6eb..9519a287d 100644
--- a/src/components/Footer/NewsletterForm.tsx
+++ b/src/components/Footer/NewsletterForm.tsx
@@ -77,8 +77,8 @@ const NewsletterForm: FC<NewsletterFormProps> = forwardRef<
             className="signUpInputBox"
             {...register("email", {
               validate: {
-                validEmail: isValidEmail,
                 notEmpty: isNotEmpty,
+                validEmail: isValidEmail,
               },
               required: "This field is required.",
             })}

From 73ffab6b08e32b746ec44a3dbf80c844c21e5190 Mon Sep 17 00:00:00 2001
From: Alec M <alec.mattu@nih.gov>
Date: Tue, 28 Jan 2025 11:56:25 -0500
Subject: [PATCH 3/3] fix: Incomplete regular expression for hostnames

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 src/components/Footer/NewsletterForm.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footer/NewsletterForm.test.tsx b/src/components/Footer/NewsletterForm.test.tsx
index d1ca3c61c..7d00c3b8a 100644
--- a/src/components/Footer/NewsletterForm.test.tsx
+++ b/src/components/Footer/NewsletterForm.test.tsx
@@ -122,7 +122,7 @@ describe("Implementation Requirements", () => {
     expect(mockWindowOpen).toHaveBeenCalledTimes(1);
     expect(mockWindowOpen).toHaveBeenCalledWith(
       expect.stringMatching(
-        /https:\/\/public.govdelivery.com\/accounts\/USNIHNCI\/subscribers\/qualify/
+        /https:\/\/public\.govdelivery\.com\/accounts\/USNIHNCI\/subscribers\/qualify/
       ),
       "_blank"
     );