npm - @truedat/df - Versions diffs - 4.28.1 → 4.28.5 - Mend

@truedat/df 4.28.1 → 4.28.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/src/templates/components/templateForm/__tests__/MandatoryConditional.spec.js ADDED Viewed

@@ -0,0 +1,97 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { MandatoryConditional } from "../MandatoryConditional";
+describe("<MandatoryConditional />", () => {
+  const onChange = jest.fn();
+  const fieldNamePrefix = "fields[0].name";
+  const allFields = [
+    {
+      name: "foo",
+      label: "Foo",
+      type: "string",
+      cardinality: "+",
+      values: { fixed: ["1", "2"] },
+    },
+    {
+      name: "bar",
+      label: "Bar",
+      type: "string",
+      cardinality: "?",
+      values: { fixed: ["3", "4"] },
+    },
+    {
+      name: "xyz",
+      label: "Xyz",
+      type: "string",
+      cardinality: "?",
+    },
+    {
+      name: "name",
+      label: "Name",
+      type: "string",
+      cardinality: "?",
+    },
+  ];
+  const renderOpts = {
+    messages: {
+      en: {
+        "template.field.mandatory.depends": "depends",
+        "template.field.mandatory.depends.on": "on",
+        "template.field.mandatory.depends.to_be": "to be",
+      },
+    },
+  };
+  const field = {
+    name: "name",
+    label: "Name",
+    mandatory: { on: "bar", to_be: ["3"] },
+  };
+  const props = { allFields, field, fieldNamePrefix, onChange };
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <MandatoryConditional {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it("calls onChange when whe select a field", async () => {
+    const { findByRole } = render(
+      <MandatoryConditional {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByRole("option", { name: /Foo/ }));
+    await waitFor(() => {
+      expect(onChange.mock.calls[0][1]).toEqual({
+        name: `${fieldNamePrefix}.mandatory.to_be`,
+        value: [],
+      });
+      expect(onChange.mock.calls[1][1]).toEqual({
+        name: `${fieldNamePrefix}.mandatory.on`,
+        value: "foo",
+      });
+    });
+  });
+  it("calls onChange when whe select a value to a field", async () => {
+    onChange.mockClear();
+    const { findByRole } = render(
+      <MandatoryConditional {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByRole("option", { name: /4/ }));
+    await waitFor(() => {
+      expect(onChange.mock.calls[0][1]).toEqual({
+        name: `${fieldNamePrefix}.mandatory.to_be`,
+        value: ["3", "4"],
+      });
+    });
+  });
+});

package/src/templates/components/templateForm/__tests__/__snapshots__/DependentFormField.spec.js.snap ADDED Viewed

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<DependentFormField /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      label
+    </label>
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="field"
+      >
+        <div
+          class="field"
+        >
+          <div
+            aria-disabled="false"
+            aria-expanded="false"
+            class="ui fluid search selection dropdown"
+            name="field"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider text"
+              role="alert"
+            >
+              bar
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon clear"
+            />
+            <div
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                aria-checked="true"
+                aria-selected="true"
+                class="active selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  bar
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <div
+          class="field"
+        >
+          <div
+            aria-disabled="false"
+            aria-expanded="false"
+            class="ui fluid multiple search selection dropdown"
+            name="value"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <span
+              class="sizer"
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider text"
+              role="alert"
+            >
+              foo
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon clear"
+            />
+            <div
+              aria-multiselectable="true"
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                class="message"
+              >
+                No results found.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap CHANGED Viewed

@@ -1,5 +1,346 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<FieldForm /> manages handleCardinalityChange 1`] = `
+<Segment>
+  <ButtonGroup
+    basic={true}
+    buttons={
+      Array [
+        Object {
+          "disabled": true,
+          "icon": "arrow up",
+          "key": "up",
+          "onClick": [Function],
+        },
+        Object {
+          "disabled": true,
+          "icon": "arrow down",
+          "key": "down",
+          "onClick": [Function],
+        },
+        Object {
+          "disabled": false,
+          "icon": "trash alternate outline",
+          "key": "delete",
+          "onClick": [MockFunction],
+        },
+      ]
+    }
+    color="orange"
+    floated="right"
+    size="tiny"
+  />
+  <Divider
+    clearing={true}
+    hidden={true}
+  />
+  <FormGroup
+    size="small"
+    widths="equal"
+  >
+    <FormInput
+      as={[Function]}
+      control={[Function]}
+      label="template.field.label"
+      name="Group.fields[0].label"
+      onChange={[MockFunction]}
+      required={true}
+      size="small"
+      value="Name"
+    />
+    <FormInput
+      as={[Function]}
+      control={[Function]}
+      disabled={false}
+      fluid={true}
+      label="template.field.name"
+      name="Group.fields[0].name"
+      onChange={[MockFunction]}
+      required={true}
+      size="small"
+      value="name"
+    />
+  </FormGroup>
+  <FormTextArea
+    as={[Function]}
+    control={[Function]}
+    label="template.field.description"
+    name="Group.fields[0].description"
+    onChange={[MockFunction]}
+    rows={4}
+    size="small"
+    value=""
+  />
+  <FormGroup
+    size="small"
+    widths="equal"
+  >
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.widget"
+      name="Group.fields[0].widget"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "icon": "minus",
+            "key": undefined,
+            "text": "Text Input",
+            "value": "string",
+          },
+          Object {
+            "icon": "align justify",
+            "key": undefined,
+            "text": "Textarea",
+            "value": "textarea",
+          },
+          Object {
+            "icon": "arrow down",
+            "key": undefined,
+            "text": "Dropdown",
+            "value": "dropdown",
+          },
+          Object {
+            "icon": "radio",
+            "key": undefined,
+            "text": "Radio",
+            "value": "radio",
+          },
+          Object {
+            "icon": "check square outline",
+            "key": undefined,
+            "text": "Checkbox",
+            "value": "checkbox",
+          },
+          Object {
+            "icon": "linkify",
+            "key": undefined,
+            "text": "Links",
+            "value": "pair_list",
+          },
+          Object {
+            "icon": "tint",
+            "key": undefined,
+            "text": "Colorpicker",
+            "value": "color_picker",
+          },
+          Object {
+            "icon": "text cursor",
+            "key": undefined,
+            "text": "Enrichedtext",
+            "value": "enriched_text",
+          },
+          Object {
+            "icon": "table",
+            "key": undefined,
+            "text": "Table",
+            "value": "table",
+          },
+          Object {
+            "icon": "asterisk",
+            "key": undefined,
+            "text": "Password",
+            "value": "password",
+          },
+          Object {
+            "icon": "image",
+            "key": undefined,
+            "text": "Image",
+            "value": "image",
+          },
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Number",
+            "value": "number",
+          },
+          Object {
+            "icon": "calendar",
+            "key": undefined,
+            "text": "Date",
+            "value": "date",
+          },
+          Object {
+            "icon": "calendar",
+            "key": undefined,
+            "text": "Date Time",
+            "value": "datetime",
+          },
+          Object {
+            "icon": "file alternate outline",
+            "key": undefined,
+            "text": "File Structure",
+            "value": "copy",
+          },
+        ]
+      }
+      required={true}
+      selection={true}
+    />
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.type"
+      name="Group.fields[0].type"
+      onChange={[Function]}
+      options={Array []}
+      required={true}
+      selection={true}
+    />
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.cardinality"
+      name="Group.fields[0].cardinality"
+      onChange={[Function]}
+      options={Array []}
+      required={true}
+      selection={true}
+      value="?"
+    />
+  </FormGroup>
+  <ValuesField
+    defaultField="Group.fields[0].default"
+    field={
+      Object {
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
+        },
+        "name": "name",
+      }
+    }
+    name="Group.fields[0].values"
+    onChange={[MockFunction]}
+    onSelectionChange={[Function]}
+    subscribableField="Group.fields[0].subscribable"
+    values={Array []}
+  />
+  <ConditionalFieldForm
+    allFields={
+      Array [
+        Object {
+          "cardinality": "+",
+          "label": "Foo",
+          "name": "foo",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "1",
+              "2",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Bar",
+          "name": "bar",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "3",
+              "4",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Xyz",
+          "name": "xyz",
+          "type": "string",
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Name",
+          "name": "name",
+          "type": "string",
+        },
+      ]
+    }
+    field={
+      Object {
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
+        },
+        "name": "name",
+      }
+    }
+    fieldNamePrefix="Group.fields[0]"
+    onChange={[MockFunction]}
+  />
+  <MandatoryConditional
+    allFields={
+      Array [
+        Object {
+          "cardinality": "+",
+          "label": "Foo",
+          "name": "foo",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "1",
+              "2",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Bar",
+          "name": "bar",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "3",
+              "4",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Xyz",
+          "name": "xyz",
+          "type": "string",
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Name",
+          "name": "name",
+          "type": "string",
+        },
+      ]
+    }
+    field={
+      Object {
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
+        },
+        "name": "name",
+      }
+    }
+    fieldNamePrefix="Group.fields[0]"
+    onChange={[MockFunction]}
+  />
+</Segment>
+`;
 exports[`<FieldForm /> matches the latest snapshot 1`] = `
 <Segment>
   <ButtonGroup
@@ -42,11 +383,297 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       as={[Function]}
       control={[Function]}
       label="template.field.label"
-      name="undefined.fields[0].label"
+      name="undefined.fields[0].label"
+      onChange={[MockFunction]}
+      required={true}
+      size="small"
+      value="Field 1"
+    />
+    <FormInput
+      as={[Function]}
+      control={[Function]}
+      disabled={false}
+      fluid={true}
+      label="template.field.name"
+      name="undefined.fields[0].name"
+      onChange={[MockFunction]}
+      required={true}
+      size="small"
+      value="field1"
+    />
+  </FormGroup>
+  <FormTextArea
+    as={[Function]}
+    control={[Function]}
+    label="template.field.description"
+    name="undefined.fields[0].description"
+    onChange={[MockFunction]}
+    rows={4}
+    size="small"
+    value="A field for testing"
+  />
+  <FormGroup
+    size="small"
+    widths="equal"
+  >
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.widget"
+      name="undefined.fields[0].widget"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "icon": "minus",
+            "key": undefined,
+            "text": "Text Input",
+            "value": "string",
+          },
+          Object {
+            "icon": "align justify",
+            "key": undefined,
+            "text": "Textarea",
+            "value": "textarea",
+          },
+          Object {
+            "icon": "arrow down",
+            "key": undefined,
+            "text": "Dropdown",
+            "value": "dropdown",
+          },
+          Object {
+            "icon": "radio",
+            "key": undefined,
+            "text": "Radio",
+            "value": "radio",
+          },
+          Object {
+            "icon": "check square outline",
+            "key": undefined,
+            "text": "Checkbox",
+            "value": "checkbox",
+          },
+          Object {
+            "icon": "linkify",
+            "key": undefined,
+            "text": "Links",
+            "value": "pair_list",
+          },
+          Object {
+            "icon": "tint",
+            "key": undefined,
+            "text": "Colorpicker",
+            "value": "color_picker",
+          },
+          Object {
+            "icon": "text cursor",
+            "key": undefined,
+            "text": "Enrichedtext",
+            "value": "enriched_text",
+          },
+          Object {
+            "icon": "table",
+            "key": undefined,
+            "text": "Table",
+            "value": "table",
+          },
+          Object {
+            "icon": "asterisk",
+            "key": undefined,
+            "text": "Password",
+            "value": "password",
+          },
+          Object {
+            "icon": "image",
+            "key": undefined,
+            "text": "Image",
+            "value": "image",
+          },
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Number",
+            "value": "number",
+          },
+          Object {
+            "icon": "calendar",
+            "key": undefined,
+            "text": "Date",
+            "value": "date",
+          },
+          Object {
+            "icon": "calendar",
+            "key": undefined,
+            "text": "Date Time",
+            "value": "datetime",
+          },
+          Object {
+            "icon": "file alternate outline",
+            "key": undefined,
+            "text": "File Structure",
+            "value": "copy",
+          },
+        ]
+      }
+      required={true}
+      selection={true}
+      value="string"
+    />
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.type"
+      name="undefined.fields[0].type"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "key": "string",
+            "text": "template.field.type.string",
+            "value": "string",
+          },
+        ]
+      }
+      required={true}
+      selection={true}
+      value="list"
+    />
+    <FormDropdown
+      as={[Function]}
+      control={[Function]}
+      fluid={true}
+      label="template.field.cardinality"
+      name="undefined.fields[0].cardinality"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "key": "?",
+            "text": "template.field.cardinality.?",
+            "value": "?",
+          },
+          Object {
+            "key": "1",
+            "text": "template.field.cardinality.1",
+            "value": "1",
+          },
+          Object {
+            "key": "*",
+            "text": "template.field.cardinality.*",
+            "value": "*",
+          },
+          Object {
+            "key": "+",
+            "text": "template.field.cardinality.+",
+            "value": "+",
+          },
+        ]
+      }
+      required={true}
+      selection={true}
+    />
+  </FormGroup>
+  <ValuesField
+    defaultField="undefined.fields[0].default"
+    field={
+      Object {
+        "description": "A field for testing",
+        "label": "Field 1",
+        "meta": Object {
+          "role": "Data Owner",
+        },
+        "name": "field1",
+        "required": true,
+        "type": "list",
+        "values": Array [
+          "V1",
+          "V2",
+        ],
+        "widget": "string",
+      }
+    }
+    fieldType="list"
+    keyType="0"
+    name="undefined.fields[0].values"
+    onChange={[MockFunction]}
+    onSelectionChange={[Function]}
+    subscribableField="undefined.fields[0].subscribable"
+    values={Array []}
+  />
+  <ConditionalFieldForm
+    field={
+      Object {
+        "description": "A field for testing",
+        "label": "Field 1",
+        "meta": Object {
+          "role": "Data Owner",
+        },
+        "name": "field1",
+        "required": true,
+        "type": "list",
+        "values": Array [
+          "V1",
+          "V2",
+        ],
+        "widget": "string",
+      }
+    }
+    fieldNamePrefix="undefined.fields[0]"
+    onChange={[MockFunction]}
+  />
+</Segment>
+`;
+exports[`<FieldForm /> renders MandatoryConditional 1`] = `
+<Segment>
+  <ButtonGroup
+    basic={true}
+    buttons={
+      Array [
+        Object {
+          "disabled": true,
+          "icon": "arrow up",
+          "key": "up",
+          "onClick": [Function],
+        },
+        Object {
+          "disabled": true,
+          "icon": "arrow down",
+          "key": "down",
+          "onClick": [Function],
+        },
+        Object {
+          "disabled": false,
+          "icon": "trash alternate outline",
+          "key": "delete",
+          "onClick": [MockFunction],
+        },
+      ]
+    }
+    color="orange"
+    floated="right"
+    size="tiny"
+  />
+  <Divider
+    clearing={true}
+    hidden={true}
+  />
+  <FormGroup
+    size="small"
+    widths="equal"
+  >
+    <FormInput
+      as={[Function]}
+      control={[Function]}
+      label="template.field.label"
+      name="Group.fields[0].label"
       onChange={[MockFunction]}
       required={true}
       size="small"
-      value="Field 1"
+      value="Name"
     />
     <FormInput
       as={[Function]}
@@ -54,22 +681,22 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       disabled={false}
       fluid={true}
       label="template.field.name"
-      name="undefined.fields[0].name"
+      name="Group.fields[0].name"
       onChange={[MockFunction]}
       required={true}
       size="small"
-      value="field1"
+      value="name"
     />
   </FormGroup>
   <FormTextArea
     as={[Function]}
     control={[Function]}
     label="template.field.description"
-    name="undefined.fields[0].description"
+    name="Group.fields[0].description"
     onChange={[MockFunction]}
     rows={4}
     size="small"
-    value="A field for testing"
+    value=""
   />
   <FormGroup
     size="small"
@@ -80,7 +707,7 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       control={[Function]}
       fluid={true}
       label="template.field.widget"
-      name="undefined.fields[0].widget"
+      name="Group.fields[0].widget"
       onChange={[Function]}
       options={
         Array [
@@ -178,109 +805,164 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       }
       required={true}
       selection={true}
-      value="string"
     />
     <FormDropdown
       as={[Function]}
       control={[Function]}
       fluid={true}
       label="template.field.type"
-      name="undefined.fields[0].type"
+      name="Group.fields[0].type"
       onChange={[Function]}
-      options={
-        Array [
-          Object {
-            "key": "string",
-            "text": "template.field.type.string",
-            "value": "string",
-          },
-        ]
-      }
+      options={Array []}
       required={true}
       selection={true}
-      value="list"
     />
     <FormDropdown
       as={[Function]}
       control={[Function]}
       fluid={true}
       label="template.field.cardinality"
-      name="undefined.fields[0].cardinality"
-      onChange={[MockFunction]}
-      options={
-        Array [
-          Object {
-            "key": "?",
-            "text": "template.field.cardinality.?",
-            "value": "?",
-          },
-          Object {
-            "key": "1",
-            "text": "template.field.cardinality.1",
-            "value": "1",
-          },
-          Object {
-            "key": "*",
-            "text": "template.field.cardinality.*",
-            "value": "*",
-          },
-          Object {
-            "key": "+",
-            "text": "template.field.cardinality.+",
-            "value": "+",
-          },
-        ]
-      }
+      name="Group.fields[0].cardinality"
+      onChange={[Function]}
+      options={Array []}
       required={true}
       selection={true}
+      value="?"
     />
   </FormGroup>
   <ValuesField
-    defaultField="undefined.fields[0].default"
+    defaultField="Group.fields[0].default"
     field={
       Object {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "meta": Object {
-          "role": "Data Owner",
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
         },
-        "name": "field1",
-        "required": true,
-        "type": "list",
-        "values": Array [
-          "V1",
-          "V2",
-        ],
-        "widget": "string",
+        "name": "name",
       }
     }
-    fieldType="list"
-    keyType="0"
-    name="undefined.fields[0].values"
+    name="Group.fields[0].values"
     onChange={[MockFunction]}
     onSelectionChange={[Function]}
-    subscribableField="undefined.fields[0].subscribable"
+    subscribableField="Group.fields[0].subscribable"
     values={Array []}
   />
   <ConditionalFieldForm
+    allFields={
+      Array [
+        Object {
+          "cardinality": "+",
+          "label": "Foo",
+          "name": "foo",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "1",
+              "2",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Bar",
+          "name": "bar",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "3",
+              "4",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Xyz",
+          "name": "xyz",
+          "type": "string",
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Name",
+          "name": "name",
+          "type": "string",
+        },
+      ]
+    }
     field={
       Object {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "meta": Object {
-          "role": "Data Owner",
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
         },
-        "name": "field1",
-        "required": true,
-        "type": "list",
-        "values": Array [
-          "V1",
-          "V2",
-        ],
-        "widget": "string",
+        "name": "name",
       }
     }
-    fieldNamePrefix="undefined.fields[0]"
+    fieldNamePrefix="Group.fields[0]"
+    onChange={[MockFunction]}
+  />
+  <MandatoryConditional
+    allFields={
+      Array [
+        Object {
+          "cardinality": "+",
+          "label": "Foo",
+          "name": "foo",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "1",
+              "2",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Bar",
+          "name": "bar",
+          "type": "string",
+          "values": Object {
+            "fixed": Array [
+              "3",
+              "4",
+            ],
+          },
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Xyz",
+          "name": "xyz",
+          "type": "string",
+        },
+        Object {
+          "cardinality": "?",
+          "label": "Name",
+          "name": "name",
+          "type": "string",
+        },
+      ]
+    }
+    field={
+      Object {
+        "cardinality": "?",
+        "label": "Name",
+        "mandatory": Object {
+          "on": "bar",
+          "to_be": Array [
+            "3",
+          ],
+        },
+        "name": "name",
+      }
+    }
+    fieldNamePrefix="Group.fields[0]"
     onChange={[MockFunction]}
   />
 </Segment>
@@ -507,7 +1189,7 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
       fluid={true}
       label="template.field.cardinality"
       name="Group.fields[0].cardinality"
-      onChange={[MockFunction]}
+      onChange={[Function]}
       options={
         Array [
           Object {