Update snapshots and ListField test

apache · Jan 7, 2025 · 0431d8c · 0431d8c
1 parent a109611
commit 0431d8c
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 424 deletions.
diff --git a/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx b/packages/form-code-generator-patternfly-theme/src/uniforms/ListField.tsx
@@ -54,12 +54,34 @@ const List: React.FC<ListFieldProps> = (props: ListFieldProps) => {
     },
     props.disabled
   );
+
+  const getNewItemProps = () => {
+    const typeName = listItem?.ref.dataType.name;
+    if (typeName?.endsWith("[]")) {
+      return listItem?.ref.dataType.defaultValue ?? [];
+    }
+    switch (typeName) {
+      case "string":
+        return listItem?.ref.dataType.defaultValue ?? "";
+      case "number":
+        return listItem?.ref.dataType.defaultValue ?? null;
+      case "boolean":
+        return listItem?.ref.dataType.defaultValue ?? false;
+      case "object":
+        return listItem?.ref.dataType.defaultValue ?? {};
+      default: // any
+        return listItem?.ref.dataType.defaultValue;
+    }
+  };
+
   const jsxCode = `<div fieldId={'${props.id}'}>
       <Split hasGutter>
         <SplitItem>
           {'${props.label}' && (
-            <label>
-              '${props.label}'
+            <label className={"pf-c-form__label"}>
+              <span className={"pf-c-form__label-text"}>
+                ${props.label}
+              </span>
             </label>
           )}
         </SplitItem>
@@ -71,7 +93,7 @@ const List: React.FC<ListFieldProps> = (props: ListFieldProps) => {
             style={{ paddingLeft: '0', paddingRight: '0' }}
             disabled={${props.maxCount === undefined ? props.disabled : `${props.disabled} || !(${props.maxCount} <= (${ref.stateName}?.length ?? -1))`}}
             onClick={() => {
-              !${props.disabled} && ${props.maxCount === undefined ? `${ref.stateSetter}((${ref.stateName} ?? []).concat([]))` : `!(${props.maxCount} <= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}((${ref.stateName} ?? []).concat([]))`};
+              !${props.disabled} && ${props.maxCount === undefined ? `${ref.stateSetter}((${ref.stateName} ?? []).concat([${getNewItemProps()}]))` : `!(${props.maxCount} <= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}((${ref.stateName} ?? []).concat([]))`};
             }}
           >
             <PlusCircleIcon color='#0088ce' />
@@ -95,8 +117,8 @@ const List: React.FC<ListFieldProps> = (props: ListFieldProps) => {
                 variant='plain'
                 style={{ paddingLeft: '0', paddingRight: '0' }}
                 onClick={() => {
-                  const value = ${ref.stateName}!.slice();
-                  value.splice(${+joinName(null, "")[joinName(null, "").length - 1]}, 1);
+                  const value = [...${ref.stateName}]
+                  value.splice(itemIndex, 1);
                   !${props.disabled} && ${props.minCount === undefined ? `${ref.stateSetter}(value)` : `!(${props.minCount} >= (${ref.stateName}?.length ?? -1)) && ${ref.stateSetter}(value)`};
                 }}
               >

diff --git a/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx b/packages/form-code-generator-patternfly-theme/tests/ListField.test.tsx
@@ -21,40 +21,65 @@ import * as React from "react";
 import { render } from "@testing-library/react";
 import createSchema from "./_createSchema";
 import AutoForm, { AutoFormProps } from "../src/uniforms/AutoForm";
+import { renderField } from "./_render";
+import { ListField } from "../src/uniforms";
+import { InputsContainer } from "../src/api";
 
 describe("<ListField> tests", () => {
   it("<ListField>", () => {
-    const schema = {
-      friends: { type: Array },
-      "friends.$": Object,
-      "friends.$.name": { type: String },
-      "friends.$.age": { type: Number },
-      "friends.$.country": { type: String, allowedValues: ["US", "Brazil"] },
-      "friends.$.married": { type: Boolean },
-      "friends.$.know": {
-        type: Array,
-        allowedValues: ["Java", "Node", "Docker"],
-        uniforms: {
-          checkboxes: true,
-        },
-      },
-      "friends.$.know.$": String,
-      "friends.$.areas": {
-        type: String,
-        allowedValues: ["Developer", "HR", "UX"],
+    const { container, formElement } = renderField(
+      ListField,
+      {
+        id: "id",
+        label: "Friends",
+        name: "friends",
+        disabled: false,
       },
-      "friends.$.birthday": { type: Date },
-    };
-
-    const props: AutoFormProps = {
-      id: "hiring_ITInterview",
-      schema: createSchema(schema),
-      disabled: false,
-      placeholder: true,
-    };
-
-    const { container } = render(<AutoForm {...props} />);
+      {
+        friends: { type: Array },
+        "friends.$": Object,
+        "friends.$.name": { type: String },
+        "friends.$.age": { type: Number },
+        "friends.$.country": { type: String, allowedValues: ["US", "Brazil"] },
+        "friends.$.married": { type: Boolean },
+        "friends.$.know": {
+          type: Array,
+          allowedValues: ["Java", "Node", "Docker"],
+          uniforms: {
+            checkboxes: true,
+          },
+        },
+        "friends.$.know.$": String,
+        "friends.$.areas": {
+          type: String,
+          allowedValues: ["Developer", "HR", "UX"],
+        },
+        "friends.$.birthday": { type: Date },
+      }
+    );
 
     expect(container).toMatchSnapshot();
+
+    const inputContainer = formElement as InputsContainer;
+    expect(inputContainer.pfImports).toStrictEqual([
+      "Split",
+      "SplitItem",
+      "Button",
+      "Card",
+      "CardBody",
+      "TextInput",
+      "FormGroup",
+      "SelectOption",
+      "SelectOptionObject",
+      "Select",
+      "SelectVariant",
+      "Checkbox",
+      "DatePicker",
+      "Flex",
+      "FlexItem",
+      "InputGroup",
+      "TimePicker",
+    ]);
+    expect(inputContainer.pfIconImports).toStrictEqual(["PlusCircleIcon", "MinusCircleIcon"]);
   });
 });
diff --git a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
@@ -576,7 +576,13 @@ const Form__HRInterview: React.FC&lt;any&gt; = (props: any) =&gt; {
 			&lt;/Card&gt;
 			&lt;div fieldId={&#39;uniforms-0000-000x&#39;}&gt;
 				&lt;Split hasGutter&gt;
-					&lt;SplitItem&gt;{&#39;Friends&#39; &amp;&amp; &lt;label&gt;&#39;Friends&#39;&lt;/label&gt;}&lt;/SplitItem&gt;
+					&lt;SplitItem&gt;
+						{&#39;Friends&#39; &amp;&amp; (
+							&lt;label className={&#39;pf-c-form__label&#39;}&gt;
+								&lt;span className={&#39;pf-c-form__label-text&#39;}&gt;Friends&lt;/span&gt;
+							&lt;/label&gt;
+						)}
+					&lt;/SplitItem&gt;
 					&lt;SplitItem isFilled /&gt;
 					&lt;SplitItem&gt;
 						&lt;Button
@@ -585,7 +591,7 @@ const Form__HRInterview: React.FC&lt;any&gt; = (props: any) =&gt; {
 							style={{ paddingLeft: &#39;0&#39;, paddingRight: &#39;0&#39; }}
 							disabled={false}
 							onClick={() =&gt; {
-								!false &amp;&amp; set__friends((friends ?? []).concat([]));
+								!false &amp;&amp; set__friends((friends ?? []).concat([undefined]));
 							}}&gt;
 							&lt;PlusCircleIcon color=&#39;#0088ce&#39; /&gt;
 						&lt;/Button&gt;
@@ -653,8 +659,8 @@ const Form__HRInterview: React.FC&lt;any&gt; = (props: any) =&gt; {
 									variant=&#39;plain&#39;
 									style={{ paddingLeft: &#39;0&#39;, paddingRight: &#39;0&#39; }}
 									onClick={() =&gt; {
-										const value = friends!.slice();
-										value.splice(NaN, 1);
+										const value = [...friends];
+										value.splice(itemIndex, 1);
 										!false &amp;&amp; set__friends(value);
 									}}&gt;
 									&lt;MinusCircleIcon color=&#39;#cc0000&#39; /&gt;