Track spam form submissions

src/components/form/Form.test.tsx

@@ -4,7 +4,7 @@ import { rest } from "msw";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
-import { Form } from "./Form";
+import { Form, HoneypotFormData } from "./Form";
 import { AccessibilityFormData } from "../../pages/accessibility-issues/AccessibilityIssues";
 import { mockServer } from "../../mock-server/mock-server";
 import { BASE_URL } from "../../utilities/base-url";
@@ -13,15 +13,19 @@ import { FormField } from "./FormField";
 import { Validator } from "../../hooks/form-validation/useValidation";
 import { RadioButtonGroup, RadioOption } from "./RadioButtonGroup";
 import { USER_EVENT_KEYS_FOR_TESTING_ONLY } from "../../../test/user-event-keys";
+import { now } from "../../utilities/date-utilities";
+import mocked = jest.mocked;
 
 const submitEndpoint = "form-submit-endpoint";
 const formLabelText = "Short information about the form";
 
 const successMessage = "Your issue has been reported, thank you!";
 const pageIdentifier = "test-page";
 
+jest.mock("../../utilities/date-utilities");
+
 describe(Form.name, () => {
- let capturedFormData: AccessibilityFormData;
+ let capturedFormData: AccessibilityFormData & HoneypotFormData;
  let user: UserEvent;
  let form: HTMLFormElement;
  let liveRegion: HTMLDivElement;
@@ -35,7 +39,7 @@ describe(Form.name, () => {
  });
 
  mockServer.use(
- rest.post(`${BASE_URL()}/${submitEndpoint}`, buildPostResolver<AccessibilityFormData>({
+ rest.post(`${BASE_URL()}/${submitEndpoint}`, buildPostResolver<AccessibilityFormData & HoneypotFormData>({
  captor: (requestBody) => capturedFormData = requestBody,
  delayUntil: delayPromise,
  })),
@@ -137,25 +141,50 @@ describe(Form.name, () => {
  });
 
  describe("without errors", () => {
+ let honeypotContainer: HTMLDivElement;
+ let honeypotInput: HTMLInputElement;
+ const honeypotValue = "I'm a robot";
+
+ const timeFormWasRendered = 42892453216246;
+ const timeFormWasSubmitted = 42892453641411;
+ const timeFormSubmissionSucceeded = 42892453683426;
+ const timeFormWasSubmittedAgain = 42892456381145;
+
  beforeEach(async () => {
+ mocked(now).mockName("now").mockReturnValue(timeFormWasRendered);
+
  render(<FormWithInputs/>);
 
  form = screen.getByRole("form");
  liveRegion = screen.getByTestId("form-live-region");
 
  nameInput = within(form).getByRole("textbox", { name: "Name" });
  ageInput = within(form).getByRole("textbox", { name: "Age" });
+ honeypotContainer = within(form).getByTestId("honeypot");
+ honeypotInput = within(honeypotContainer).getByRole("textbox", { name: "Robot Input" });
  const radioButton: HTMLInputElement = within(form).getByRole("radio", { name: color });
  submitButton = within(form).getByRole("button", { name: "Submit" });
 
  await user.type(nameInput, name);
  await user.type(ageInput, age);
  await user.click(radioButton);
+ honeypotInput.value = honeypotValue;
 
+ mocked(now).mockReturnValue(timeFormWasSubmitted);
  submitButton.focus();
  await user.keyboard(USER_EVENT_KEYS_FOR_TESTING_ONLY.enter);
  });
 
+ test("has a hidden honeypot input with a description in case someone finds it", () => {
+ expect(honeypotContainer.className).toContain("display-none");
+
+ let honeypotDescriptionId = "honeypot-description";
+ expect(honeypotInput.getAttribute("aria-describedby")).toEqual(honeypotDescriptionId);
+
+ const honeypotDescription = within(honeypotContainer).getByText("This field is a trap for robots to prevent spam. Please don't fill it out.");
+ expect(honeypotDescription.id).toEqual(honeypotDescriptionId);
+ });
+
  test("the submit button is aria-disabled", async () => {
  await waitFor(() => {
  expect(submitButton.className).toContain("disabled-form-submit");
@@ -180,12 +209,20 @@ describe(Form.name, () => {
  });
 
  test("the form's data is sent to the server", async () => {
- expect(capturedFormData).toEqual({ name, age, color });
+ expect(capturedFormData).toEqual({
+ name,
+ age,
+ color,
+ honeypotValue,
+ timeToFillForm: `${timeFormWasSubmitted - timeFormWasRendered} milliseconds`
+ });
  });
 
  describe("when form submission succeeds", () => {
  let successElement: HTMLSpanElement;
  beforeEach(async () => {
+ mocked(now).mockReturnValue(timeFormSubmissionSucceeded);
+
  resolveRequest({ statusCode: 200 });
  await waitFor(() => {
  successElement = screen.getByText(successMessage);
@@ -212,6 +249,20 @@ describe(Form.name, () => {
  });
  });
 
+ test("time tracking is reset", async () => {
+ await user.type(nameInput, name);
+
+ mocked(now).mockReturnValue(timeFormWasSubmittedAgain);
+ await user.click(submitButton);
+
+ expect(capturedFormData.timeToFillForm).toEqual(`${timeFormWasSubmittedAgain - timeFormSubmissionSucceeded} milliseconds`);
+
+ // wait for the live region to clear before ending test and unmounting component
+ await waitFor(() => {
+ expect(liveRegion.textContent).toEqual("");
+ });
+ });
+
  describe("when the user moves focus from the success message", () => {
  beforeEach(async () => {
  await waitFor(() => {

src/components/form/Form.tsx

@@ -8,13 +8,16 @@ import { FormProvider } from "../../contexts/FormContext";
 import { Observable } from "../../utilities/observable";
 import { SubmitLoadingIcon } from "./SubmitLoadingIcon";
 import { useLiveRegionText } from "../../hooks/useLiveRegionText";
+import { now } from "../../utilities/date-utilities";
 
 type FormProps = ChildrenProps & {
  ariaLabelledBy: string
  submitEndpoint: string
  successMessage: string
 }
 
+export type HoneypotFormData = { honeypotValue: string, timeToFillForm: string };
+
 export const Form = ({ children, ariaLabelledBy, submitEndpoint, successMessage }: FormProps) => {
  const responseMessage = useRef<HTMLSpanElement>(null);
 
@@ -23,6 +26,7 @@ export const Form = ({ children, ariaLabelledBy, submitEndpoint, successMessage
  const [showSuccessMessage, setShowSuccessMessage] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [liveRegionText, setLiveRegionText] = useLiveRegionText("");
+ const [timeBeganFillingForm, setTimeBeganFillingForm] = useState(now());
 
  const postFormData = usePOST(submitEndpoint);
 
@@ -56,19 +60,23 @@ export const Form = ({ children, ariaLabelledBy, submitEndpoint, successMessage
 
  const formData = extractFormData(form);
 
+ const timeFormWasSubmitted = now();
+ formData.timeToFillForm = `${timeFormWasSubmitted - timeBeganFillingForm} milliseconds`;
+
  postFormData(formData, (ok, _, error) => {
  setSubmitting(false);
  setServerResponded(true);
 
  if (ok) {
  onClearObservable.notify();
+ setTimeBeganFillingForm(now());
  setShowSuccessMessage(true);
  } else {
  setErrorMessage(error);
  }
  });
  }
- }, [onSubmitObservable, setLiveRegionText, postFormData, onClearObservable]);
+ }, [onSubmitObservable, setLiveRegionText, postFormData, onClearObservable, timeBeganFillingForm]);
 
  return (<div className={"form-container"}>
  {showSuccessMessage &&
@@ -95,6 +103,15 @@ export const Form = ({ children, ariaLabelledBy, submitEndpoint, successMessage
  {liveRegionText}
  </div>
  </div>
+ <div className={"display-none"} data-testid={"honeypot"}>
+ <label htmlFor={"robot-input"}>
+ Robot Input
+ <input name={"honeypotValue"} id={"robot-input"} aria-describedby={"honeypot-description"}/>
+ </label>
+ <p id={"honeypot-description"}>
+ This field is a trap for robots to prevent spam. Please don't fill it out.
+ </p>
+ </div>
  </form>
  </div>
  );

src/index.css

@@ -70,3 +70,7 @@ fieldset {
  top: -10000px;
  width: 1px;
 }
+
+.display-none {
+ display: none;
+}

src/pages/accessibility-issues/AccessibilityIssues.test.tsx

@@ -20,19 +20,20 @@ import { INVALID_PHONE_MESSAGE } from "../../hooks/form-validation/validatePhone
 import { MISSING_REQUIRED_MESSAGE } from "../../hooks/form-validation/validateRequired";
 import { Container } from "react-dom";
 import { USER_EVENT_KEYS_FOR_TESTING_ONLY } from "../../../test/user-event-keys";
+import { HoneypotFormData } from "../../components/form/Form";
 
 describe(`${AccessibilityIssues.name} form`, () => {
  const successMessage = "Your issue has been reported, thank you!";
- let capturedFormData: AccessibilityFormData;
+ let capturedFormData: AccessibilityFormData & HoneypotFormData;
  let user: UserEvent;
  let form: HTMLFormElement;
  let container: Container;
 
  beforeEach(() => {
  user = userEvent.setup();
- capturedFormData = null as unknown as AccessibilityFormData;
+ capturedFormData = null as unknown as AccessibilityFormData & HoneypotFormData;
 
- const resolver = buildPostResolver<AccessibilityFormData>({
+ const resolver = buildPostResolver<AccessibilityFormData & HoneypotFormData>({
  captor: (requestBody) => capturedFormData = requestBody,
  });
 
@@ -104,7 +105,9 @@ describe(`${AccessibilityIssues.name} form`, () => {
 
  await user.keyboard(USER_EVENT_KEYS_FOR_TESTING_ONLY.enter);
 
- expect(capturedFormData).toEqual(stubAccessibilityFormData({ name, email, phone, comments }));
+ const { honeypotValue, timeToFillForm, ...userInputtedFormData } = capturedFormData;
+
+ expect(userInputtedFormData).toEqual(stubAccessibilityFormData({ name, email, phone, comments }));
 
  await waitFor(() => {
  expect(screen.getByText(successMessage)).toBeInTheDocument();

src/pages/contact-us/ContactUs.test.tsx

@@ -15,20 +15,21 @@ import { MISSING_REQUIRED_MESSAGE } from "../../hooks/form-validation/validateRe
 import { Container } from "react-dom";
 import { CONTACT_PAGE_HEADING, CONTACT_PAGE_IDENTIFIER, ContactFormData, ContactUs } from "./ContactUs";
 import { USER_EVENT_KEYS_FOR_TESTING_ONLY } from "../../../test/user-event-keys";
+import { HoneypotFormData } from "../../components/form/Form";
 
 describe(`${ContactUs.name} form`, () => {
  const formLabelText = "General Contact";
  const successMessage = "Your message has been sent, thank you!";
- let capturedFormData: ContactFormData;
+ let capturedFormData: ContactFormData & HoneypotFormData;
  let user: UserEvent;
  let form: HTMLFormElement;
  let container: Container;
 
  beforeEach(() => {
  user = userEvent.setup();
- capturedFormData = null as unknown as ContactFormData;
+ capturedFormData = null as unknown as ContactFormData & HoneypotFormData;
 
- const resolver = buildPostResolver<ContactFormData>({
+ const resolver = buildPostResolver<ContactFormData & HoneypotFormData>({
  captor: (requestBody) => capturedFormData = requestBody,
  });
 
@@ -79,7 +80,7 @@ describe(`${ContactUs.name} form`, () => {
  expect(commentsInput).toHaveFocus();
  const comments = "There was an input that didn't have a label";
  await user.keyboard(comments);
- 
+
  await user.tab();
  expect(nameInput).toHaveFocus();
  const name = "Linda Cardellini";
@@ -100,7 +101,9 @@ describe(`${ContactUs.name} form`, () => {
 
  await user.keyboard(USER_EVENT_KEYS_FOR_TESTING_ONLY.enter);
 
- expect(capturedFormData).toEqual(stubAccessibilityFormData({ name, email, phone, comments }));
+ const { honeypotValue, timeToFillForm, ...userInputtedFormData } = capturedFormData;
+
+ expect(userInputtedFormData).toEqual(stubAccessibilityFormData({ name, email, phone, comments }));
 
  await waitFor(() => {
  expect(screen.getByText(successMessage)).toBeInTheDocument();

src/pages/report-id-refusal/ReportIdRefused.test.tsx

@@ -20,20 +20,21 @@ import {
  ReportIdRefused
 } from "./ReportIdRefused";
 import { USER_EVENT_KEYS_FOR_TESTING_ONLY } from "../../../test/user-event-keys";
+import { HoneypotFormData } from "../../components/form/Form";
 
 describe(`${ReportIdRefused.name} form`, () => {
  const formLabelText = "Report Refusal of ID";
  const successMessage = "Your message has been sent, thank you!";
- let capturedFormData: IdRefusedFormData;
+ let capturedFormData: IdRefusedFormData & HoneypotFormData;
  let user: UserEvent;
  let form: HTMLFormElement;
  let container: Container;
 
  beforeEach(() => {
  user = userEvent.setup();
- capturedFormData = null as unknown as IdRefusedFormData;
+ capturedFormData = null as unknown as IdRefusedFormData & HoneypotFormData;
 
- const resolver = buildPostResolver<IdRefusedFormData>({
+ const resolver = buildPostResolver<IdRefusedFormData & HoneypotFormData>({
  captor: (requestBody) => capturedFormData = requestBody,
  });
 
@@ -152,7 +153,9 @@ describe(`${ReportIdRefused.name} form`, () => {
 
  await user.keyboard(USER_EVENT_KEYS_FOR_TESTING_ONLY.enter);
 
- expect(capturedFormData).toEqual(stubRefusedIdData({
+ const { honeypotValue, timeToFillForm, ...userInputtedFormData } = capturedFormData;
+
+ expect(userInputtedFormData).toEqual(stubRefusedIdData({
  name,
  email,
  phone,

src/utilities/date-utilities.test.ts

@@ -0,0 +1,12 @@
+import { now } from "./date-utilities";
+
+describe("date utilities", () => {
+ test("now returns current time in milliseconds since the epoch", () => {
+ const timeFromDate = Date.now();
+ const time = now();
+ const fiveSeconds = 5000;
+
+ expect(time).toBeGreaterThanOrEqual(timeFromDate);
+ expect(time).toBeLessThanOrEqual(timeFromDate + fiveSeconds);
+ });
+});

src/utilities/date-utilities.ts

@@ -0,0 +1 @@
+export const now = (): number => Date.now();