Merge pull request #3964 from shockey/bug/3949-enum-selectable-values

Bug/3949 enum selectable values

Author: shockey

src/core/components/layout-utils.jsx

@@ -183,7 +183,7 @@ export class Select extends React.Component {
         { allowEmptyValue ? <option value="">--</option> : null }
         {
           allowedValues.map(function (item, key) {
-            return <option key={ key } value={ String(item) }>{ item }</option>
+            return <option key={ key } value={ String(item) }>{ String(item) }</option>
           })
         }
       </select>

src/core/json-schema-components.js

@@ -36,7 +36,7 @@ export class JsonSchemaForm extends Component {
 
     let { type, format="" } = schema
 
-    let Comp = getComponent(`JsonSchema_${type}_${format}`) || getComponent(`JsonSchema_${type}`) || getComponent("JsonSchema_string")
+    let Comp = (format ? getComponent(`JsonSchema_${type}_${format}`) : getComponent(`JsonSchema_${type}`)) || getComponent("JsonSchema_string")
     return <Comp { ...this.props } fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema}/>
   }
 
@@ -68,19 +68,19 @@ export class JsonSchema_string extends Component {
     const isDisabled = schema["in"] === "formData" && !("FormData" in window)
     const Input = getComponent("Input")
     if (schema["type"] === "file") {
-      return (<Input type="file" 
-                     className={ errors.length ? "invalid" : ""} 
+      return (<Input type="file"
+                     className={ errors.length ? "invalid" : ""}
                      title={ errors.length ? errors  : ""}
-                     onChange={ this.onChange } 
+                     onChange={ this.onChange }
                      disabled={isDisabled}/>)
     }
     else {
-      return (<Input type={ schema.format === "password" ? "password" : "text" } 
-                     className={ errors.length ? "invalid" : ""} 
+      return (<Input type={ schema.format === "password" ? "password" : "text" }
+                     className={ errors.length ? "invalid" : ""}
                      title={ errors.length ? errors  : ""}
-                     value={value} 
-                     placeholder={description} 
-                     onChange={ this.onChange } 
+                     value={value}
+                     placeholder={description}
+                     onChange={ this.onChange }
                      disabled={isDisabled}/>)
     }
   }
@@ -189,8 +189,8 @@ export class JsonSchema_boolean extends Component {
     return (<Select className={ errors.length ? "invalid" : ""}
                     title={ errors.length ? errors  : ""}
                     value={ String(value) }
-                    allowedValues={ fromJS(["true", "false"]) }
-                    allowEmptyValue={ true }
+                    allowedValues={ fromJS(schema.enum || ["true", "false"]) }
+                    allowEmptyValue={ !this.props.required }
                     onChange={ this.onEnumChange }/>)
   }
 }

test/components/json-schema-form.js

@@ -0,0 +1,154 @@
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { Select, Input } from "components/layout-utils"
+import { render } from "enzyme"
+import * as JsonSchemaComponents from "core/json-schema-components"
+import { JsonSchemaForm } from "core/json-schema-components"
+
+const components = {...JsonSchemaComponents, Select, Input}
+
+const getComponentStub = (name) => {
+  if(components[name]) return components[name]
+
+  return null
+}
+
+describe("<JsonSchemaForm/>", function(){
+  describe("strings", function() {
+    it("should render the correct options for a string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "string",
+          enum: ["one", "two"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("one")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("two")
+    })
+
+    it("should render the correct options for a required string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: {
+          type: "string",
+          enum: ["one", "two"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(2)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("one")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("two")
+    })
+  })
+  describe("booleans", function() {
+    it("should render the correct options for a boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "boolean"
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("false")
+    })
+
+    it("should render the correct options for a required enum boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: {
+          type: "boolean",
+          enum: ["true"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(1)
+      expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+  })
+  describe("unknown types", function() {
+    it("should render unknown types as strings", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "NotARealType"
+        }
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("input").length).toEqual(1)
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+
+    it("should render unknown types as strings when a format is passed", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "NotARealType",
+          format: "NotARealFormat"
+        }
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("input").length).toEqual(1)
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+  })
+})