feat(Add Tests for Failing Form Validation) (#1556)

* extract validated form element to its own component and replace instances thereof

* build out basic component test scaffolding

* build out test suite for Input Component with integer schema

* move getStrapiInputComponent + error expectations to discrete file

* add tests for DateInput

* add test for Strapi Textarea

* add SelectComponent tests

* add test for Dropdown

* add tests for Checkbox component

* add tests for TileGroup component

app/components/form/ValidatedFlowForm.tsx

@@ -0,0 +1,49 @@
+import { useParams, useLocation } from "@remix-run/react";
+import { ValidatedForm } from "remix-validated-form";
+import type { ButtonNavigationProps } from "~/components/form/ButtonNavigation";
+import { ButtonNavigation } from "~/components/form/ButtonNavigation";
+import type { Context } from "~/domains/contexts";
+import { StrapiFormComponents } from "~/services/cms/components/StrapiFormComponents";
+import type { StrapiFormComponent } from "~/services/cms/models/StrapiFormComponent";
+import { splatFromParams } from "~/services/params";
+import { CSRFKey } from "~/services/security/csrf/csrfKey";
+import { validatorForFieldnames } from "~/services/validation/buildStepValidator";
+
+type ValidatedFlowFormProps = {
+  stepData: Context;
+  formElements: StrapiFormComponent[];
+  buttonNavigationProps: ButtonNavigationProps;
+  csrf: string;
+};
+
+function ValidatedFlowForm({
+  stepData,
+  formElements,
+  buttonNavigationProps,
+  csrf,
+}: Readonly<ValidatedFlowFormProps>) {
+  const stepId = splatFromParams(useParams());
+  const { pathname } = useLocation();
+  const fieldNames = formElements.map((entry) => entry.name);
+  const validator = validatorForFieldnames(fieldNames, pathname);
+  return (
+    <ValidatedForm
+      id={`${stepId}_form`}
+      method="post"
+      validator={validator}
+      defaultValues={stepData}
+      noValidate
+      action={pathname}
+    >
+      <input type="hidden" name={CSRFKey} value={csrf} />
+      <div className="ds-stack-40">
+        <div className="ds-stack-40">
+          <StrapiFormComponents components={formElements} />
+        </div>
+        <ButtonNavigation {...buttonNavigationProps} />
+      </div>
+    </ValidatedForm>
+  );
+}
+
+export default ValidatedFlowForm;