Add initialErrors to Form (#195)

src/components/Form.js

@@ -25,10 +25,17 @@ Form.DEFAULT_PROPS = DEFAULT_PROPS;
 
 function Form(_props) {
   const props = { ...DEFAULT_PROPS, ..._props };
-  const { initialValues, onSubmit, debug, children, testId } = props;
+  const {
+    initialValues,
+    initialErrors,
+    onSubmit,
+    debug,
+    children,
+    testId,
+  } = props;
   const [state, setState] = useState({
     values: initialValues,
-    errors: {},
+    errors: initialErrors ?? {},
     shouldValidateOnChange: false,
     namesToValidate: null,
     submitStatus: "READY",
@@ -301,6 +308,7 @@ function Form(_props) {
 Form.propTypes = {
   ...responsiveWidthType,
   initialValues: PropTypes.object.isRequired,
+  initialErrors: PropTypes.object,
   onSubmit: PropTypes.func,
   debug: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,

src/components/Form.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React, { useState } from "react";
 import "@testing-library/jest-dom/extend-expect";
 import {
@@ -45,7 +46,6 @@ const hungryOptions = [
   },
 ];
 
-// eslint-disable-next-line react/prop-types
 function SimpleForm({ testId }) {
   const initialValues = {
     name: "",
@@ -58,8 +58,12 @@ function SimpleForm({ testId }) {
   );
 }
 
-// eslint-disable-next-line react/prop-types
-function ComplexForm({ initialValues, onSubmit, unMountFormOnSubmit = false }) {
+function ComplexForm({
+  initialValues,
+  initialErrors,
+  onSubmit,
+  unMountFormOnSubmit = false,
+}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   const formInitialValues = {
     name: "",
@@ -90,6 +94,7 @@ function ComplexForm({ initialValues, onSubmit, unMountFormOnSubmit = false }) {
   return (
     <Form
       initialValues={formInitialValues}
+      initialErrors={initialErrors}
       onSubmit={(args) => {
         onSubmit(args);
 
@@ -136,6 +141,7 @@ function ComplexForm({ initialValues, onSubmit, unMountFormOnSubmit = false }) {
     </Form>
   );
 }
+// eslint-disable react/prop-types
 
 describe("Form", () => {
   it("renders a form", () => {
@@ -286,6 +292,21 @@ describe("Form", () => {
     });
   });
 
+  it("with initialErrors", () => {
+    const initialErrors = {
+      name: ["This name is already taken."],
+      aboutYourself: ["You can't use inappropriate words.", "Max 500 words."],
+    };
+
+    render(<ComplexForm initialErrors={initialErrors} />);
+
+    expect(screen.getByText("This name is already taken.")).toBeInTheDocument();
+    expect(
+      screen.getByText("You can't use inappropriate words.")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Max 500 words.")).toBeInTheDocument();
+  });
+
   it("with testId", () => {
     const { container } = render(<SimpleForm testId="my-form" />);