Fixes #3633

Make sure PrimitiveModel uses the schema's title first and then falls back to the passed-in `name` property. Added enzyme test for functionality.

Author: owenconti

src/core/components/primitive-model.jsx

@@ -23,14 +23,15 @@ export default class Primitive extends Component {
     let format = schema.get("format")
     let xml = schema.get("xml")
     let enumArray = schema.get("enum")
+    let title = schema.get("title") || name
     let description = schema.get("description")
     let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
     const Markdown = getComponent("Markdown")
     const EnumModel = getComponent("EnumModel")
 
     return <span className="model">
       <span className="prop">
-        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ name }</span> }
+        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ title }</span> }
         <span className="prop-type">{ type }</span>
         { format && <span className="prop-format">(${format})</span>}
         {

test/components/primitive-model.js

@@ -0,0 +1,49 @@
+/* eslint-env mocha */
+import React from "react"
+import expect from "expect"
+import { shallow } from "enzyme"
+import { fromJS } from "immutable"
+import PrimitiveModel from "components/primitive-model"
+
+describe("<PrimitiveModel/>", function() {
+    describe("Model name", function() {
+        const dummyComponent = () => null
+        const components = {
+            Markdown: dummyComponent,
+            EnumModel: dummyComponent
+        }
+        const props = {
+            getComponent: c => components[c],
+            name: "Name from props",
+            depth: 1,
+            schema: fromJS({
+                type: "string",
+                title: "Custom model title"
+            })
+        }
+
+        it("renders the schema's title", function() {
+            // When
+            const wrapper = shallow(<PrimitiveModel {...props}/>)
+            const modelTitleEl = wrapper.find("span.model-title")
+            expect(modelTitleEl.length).toEqual(1)
+
+            // Then
+            expect( modelTitleEl.text() ).toEqual( "Custom model title" )
+        })
+
+        it("falls back to the passed-in `name` prop for the title", function() {
+            // When
+            props.schema = fromJS({
+                type: "string"
+            })
+            const wrapper = shallow(<PrimitiveModel {...props}/>)
+            const modelTitleEl = wrapper.find("span.model-title")
+            expect(modelTitleEl.length).toEqual(1)
+
+            // Then
+            expect( modelTitleEl.text() ).toEqual( "Name from props" )
+        })
+
+    })
+} )