-
- ))}
- {linkItem.title}
- {linkItem.items.map((item) => {
- if (typeof item?.link !== "string") {
- return (
-
- {item.text}
-
- );
- }
-
- return (
-
- {item.link.includes("http") ? (
-
- {item.text}
-
- ) : (
-
- {item.text}
-
- )}
-
- );
- })}
- Sign up for email updates
-
-
-
-
-
-
-
-
-
- Follow Us
-
+
+
+);
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((null);
- const emailInput = useRef(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 (
- <>
-
-
-
- {FooterData.link_sections.map((linkItem) => {
- const linkKey = `link_${linkItem.title}`;
- return (
-
- {FooterData.followUs_links.map((followItem, followidx) => {
- const followkey = `follow_${followidx}`;
+const FooterDesktop = () => (
+
+
+
+ {FooterData.link_sections.map((linkItem) => (
+
-
+ ))}
+
+
+ 
-
+
- {linkItem.title}
+ {linkItem.items.map((item) => {
+ if (typeof item?.link !== "string") {
return (
-
-
+ {item.text}
+
);
- })}
-
+
+
+
+
+
+ Follow Us
+
+
-
-
- );
-};
+
+ {FooterData.followUs_links.map((followItem, idx) => (
+
+
+
+ ))}
+
+
-
-
-
+
);
};
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((null);
- const emailInput = useRef(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 (
- <>
-
-
-
- {FooterData.link_sections.map((linkItem) => (
-
-
-
-
-
-
-
-
- {linkItem.items.map((item) => {
- const itemKey = `item_${item.text}`;
- if (typeof item?.link !== "string") {
- return (
-
- {item.text}
-
- );
- }
-
- return item.link.includes("http") ? (
-
- {item.text}
-
- ) : (
-
+
+
+
+ {FooterData.link_sections.map((linkItem) => {
+ const linkKey = `link_${linkItem.title}`;
+ return (
+
-
-
-
-
-
+
+ );
+ })}
+
+
+
+
- );
- })}
-
+ {linkItem.items.map((item) => {
+ const itemKey = `item_${item.text}`;
+ if (typeof item?.link !== "string") {
+ return (
+
{item.text}
-
+
);
- })}
-
+ }
+
+ return item.link.includes("http") ? (
+
+ {item.text}
+
+ ) : (
+
+ {item.text}
+
+ );
+ })}
Sign up for email updates
-
-
-
-
-
-
- ))}
- {linkItem.title}
- {linkItem.items.map((item) => {
- if (typeof item?.link !== "string") {
- return (
-
- {item.text}
-
- );
- }
-
- return (
-
- {item.link.includes("http") ? (
-
- {item.text}
-
- ) : (
-
- {item.text}
-
- )}
-
- );
- })}
- Sign up for email updates
-
-
-
-
-
-
-
-
-
- Follow Us
-
+
+
+);
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..7d00c3b8a
--- /dev/null
+++ b/src/components/Footer/NewsletterForm.test.tsx
@@ -0,0 +1,153 @@
+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(([" ", "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(;
+
+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 = forwardRef<
+ HTMLFormElement,
+ React.HTMLAttributes
+>((props, ref) => {
+ const { register, handleSubmit, reset } = useForm({
+ defaultValues: {
+ topic_id: FORM_TOPIC_ID,
+ email: "",
+ },
+ shouldUseNativeValidation: true,
+ });
+
+ const onSubmit: SubmitHandler = (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 (
+
+ );
+});
+
+export default memo(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(, { wrapper: (p) => (Footer);
- {FooterData.followUs_links.map((followItem, followidx) => {
- const followkey = `follow_${followidx}`;
+const FooterTablet = () => (
+
+
+
+ {FooterData.link_sections.map((linkItem) => (
+
-
+ ))}
+
+
+
-
+
- {linkItem.title}
+ {linkItem.items.map((item) => {
+ if (typeof item?.link !== "string") {
return (
-
-
+ {item.text}
+
);
- })}
-
+
+
+
+
+
+ Follow Us
+
+
-
-
- );
-};
+
+ {FooterData.followUs_links.map((followItem, ind) => (
+
+
+
+ ))}
+
+