Add a test

rjsf-team · May 16, 2022 · 1688d1e · 1688d1e
1 parent 724fb0b
commit 1688d1e
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 0 deletions.
diff --git a/packages/bootstrap-4/test/Array.test.tsx b/packages/bootstrap-4/test/Array.test.tsx
@@ -2,6 +2,27 @@ import React from 'react';
 import Form from "../src/index";
 import { JSONSchema7 } from "json-schema";
 import renderer from "react-test-renderer";
+import { ArrayFieldTemplateProps, UiSchema } from '@rjsf/core';
+
+const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+  const title: string = props.uiSchema['ui:title'] || props.title || '';
+  const description: string = props.uiSchema['ui:description'] || props.schema.description || '';
+  const { TitleField, DescriptionField } = props;
+  return (
+    <div id="custom-tpl" className={props.className}>
+      {title && <TitleField
+          id={`${props.idSchema.$id}__title`}
+          title={title}
+          required={props.required}
+        />}
+      {description && <DescriptionField
+          id={`${props.idSchema.$id}-description`}
+          description={description}
+        />}
+      {props.items.map(item => <div key={item.key}>{item.children}</div>)}
+    </div>
+  );
+}
 
 describe("array fields", () => {
   test("array", () => {
@@ -47,4 +68,32 @@ describe("array fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("customization", () => {
+    const schema: JSONSchema7 = {
+      type: "array",
+      title: "my-title",
+      description: "my-description",
+      items: [
+        {
+          type: "boolean",
+          default: true
+        }
+      ]
+    };
+    const uiSchema: UiSchema = {
+      "ui:ArrayFieldTemplate": ArrayFieldTemplate
+    }
+    const fields = {
+      TitleField: ({ title }: any) => (
+        <div id="custom-title">{title}</div>
+      ),
+      DescriptionField: ({ description }: any) => (
+        <div id="custom-description">{description}</div>
+      ),
+    }
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} fields={fields} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/bootstrap-4/test/__snapshots__/Array.test.tsx.snap b/packages/bootstrap-4/test/__snapshots__/Array.test.tsx.snap
@@ -153,6 +153,69 @@ exports[`array fields checkboxes 1`] = `
 </form>
 `;
 
+exports[`array fields customization 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group"
+  >
+    <div
+      className="field field-array field-array-fixed-items"
+      id="custom-tpl"
+    >
+      <div
+        id="custom-title"
+      >
+        my-title
+      </div>
+      <div
+        id="custom-description"
+      >
+        my-description
+      </div>
+      <div>
+        <div
+          className="form-group"
+        >
+          <div
+            className="checkbox  form-group"
+          >
+            <div
+              className="form-check"
+            >
+              <input
+                autoFocus={false}
+                checked={true}
+                className="form-check-input position-static"
+                disabled={false}
+                id="root_0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={true}
+                type="checkbox"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <button
+      className="btn btn-primary"
+      disabled={false}
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
 exports[`array fields fixed array 1`] = `
 <form
   className="rjsf"