fix: always display locally-available title property as a model's name (#4542)

* fix: always display locally-available `title` property as a model's name
* fix failing unit test
* add e2e test case
This commit is contained in:
kyle
2018-05-10 22:15:36 -07:00
committed by GitHub
parent 66e9bd735a
commit 9155eb946e
9 changed files with 64 additions and 13 deletions

View File

@@ -11,6 +11,7 @@ export default class ArrayModel extends Component {
getConfigs: PropTypes.func.isRequired,
specSelectors: PropTypes.object.isRequired,
name: PropTypes.string,
displayName: PropTypes.string,
required: PropTypes.bool,
expandDepth: PropTypes.number,
specPath: ImPropTypes.list.isRequired,
@@ -18,10 +19,10 @@ export default class ArrayModel extends Component {
}
render(){
let { getComponent, getConfigs, schema, depth, expandDepth, name, specPath } = this.props
let { getComponent, getConfigs, schema, depth, expandDepth, name, displayName, specPath } = this.props
let description = schema.get("description")
let items = schema.get("items")
let title = schema.get("title") || name
let title = schema.get("title") || displayName || name
let properties = schema.filter( ( v, key) => ["type", "items", "description", "$$ref"].indexOf(key) === -1 )
const Markdown = getComponent("Markdown")

View File

@@ -9,6 +9,7 @@ export default class ModelWrapper extends Component {
static propTypes = {
schema: PropTypes.object.isRequired,
name: PropTypes.string,
displayName: PropTypes.string,
getComponent: PropTypes.func.isRequired,
getConfigs: PropTypes.func.isRequired,
specSelectors: PropTypes.object.isRequired,

View File

@@ -10,6 +10,7 @@ export default class Model extends ImmutablePureComponent {
getConfigs: PropTypes.func.isRequired,
specSelectors: PropTypes.object.isRequired,
name: PropTypes.string,
displayName: PropTypes.string,
isRef: PropTypes.bool,
required: PropTypes.bool,
expandDepth: PropTypes.number,
@@ -33,7 +34,7 @@ export default class Model extends ImmutablePureComponent {
}
render () {
let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath } = this.props
let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath, displayName } = this.props
const ObjectModel = getComponent("ObjectModel")
const ArrayModel = getComponent("ArrayModel")
const PrimitiveModel = getComponent("PrimitiveModel")
@@ -51,7 +52,7 @@ export default class Model extends ImmutablePureComponent {
if(!schema) {
return <span className="model model-title">
<span className="model-title__text">{ name }</span>
<span className="model-title__text">{ displayName || name }</span>
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
marginLeft: "1em",
position: "relative",

View File

@@ -51,9 +51,12 @@ export default class Models extends Component {
</h4>
<Collapse isOpened={showModels}>
{
definitions.entrySeq().map( ( [ name ])=>{
definitions.entrySeq().map(([name])=>{
const schema = specSelectors.specResolvedSubtree([...specPathBase, name])
const fullPath = [...specPathBase, name]
const schema = specSelectors.specResolvedSubtree(fullPath)|| Im.Map()
const rawSchema = specSelectors.specJson().getIn(fullPath, Im.Map())
const displayName = schema.get("title") || rawSchema.get("title") || name
if(layoutSelectors.isShown(["models", name], false) && schema === undefined) {
// Firing an action in a container render is not great,
@@ -63,7 +66,8 @@ export default class Models extends Component {
const content = <ModelWrapper name={ name }
expandDepth={ defaultModelsExpandDepth }
schema={ schema || Im.Map() }
schema={ schema || Im.Map() }
displayName={displayName}
specPath={Im.List([...specPathBase, name])}
getComponent={ getComponent }
specSelectors={ specSelectors }
@@ -72,7 +76,9 @@ export default class Models extends Component {
layoutActions = {layoutActions}/>
const title = <span className="model-box">
<span className="model model-title">{name}</span>
<span className="model model-title">
{displayName}
</span>
</span>
return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }>
@@ -81,6 +87,7 @@ export default class Models extends Component {
collapsedContent={this.getCollapsedContent(name)}
onToggle={this.handleToggle}
title={title}
displayName={displayName}
modelName={name}
hideSelfOnExpand={true}
expanded={defaultModelsExpandDepth > 1}

View File

@@ -15,6 +15,7 @@ export default class ObjectModel extends Component {
onToggle: PropTypes.func,
specSelectors: PropTypes.object.isRequired,
name: PropTypes.string,
displayName: PropTypes.string,
isRef: PropTypes.bool,
expandDepth: PropTypes.number,
depth: PropTypes.number,
@@ -22,7 +23,7 @@ export default class ObjectModel extends Component {
}
render(){
let { schema, name, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
let { schema, name, displayName, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
let { specSelectors,expandDepth } = otherProps
const { isOAS3 } = specSelectors
@@ -35,7 +36,7 @@ export default class ObjectModel extends Component {
let description = schema.get("description")
let properties = schema.get("properties")
let additionalProperties = schema.get("additionalProperties")
let title = schema.get("title") || name
let title = schema.get("title") || displayName || name
let requiredProperties = schema.get("required")
const JumpToPath = getComponent("JumpToPath", true)

View File

@@ -10,11 +10,12 @@ export default class Primitive extends Component {
getComponent: PropTypes.func.isRequired,
getConfigs: PropTypes.func.isRequired,
name: PropTypes.string,
displayName: PropTypes.string,
depth: PropTypes.number
}
render(){
let { schema, getComponent, getConfigs, name, depth } = this.props
let { schema, getComponent, getConfigs, name, displayName, depth } = this.props
const { showExtensions } = getConfigs()
@@ -27,7 +28,7 @@ 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 title = schema.get("title") || displayName || name
let description = schema.get("description")
let extensions = getExtensions(schema)
let properties = schema

View File

@@ -2,7 +2,7 @@
import React from "react"
import expect, { createSpy } from "expect"
import { shallow } from "enzyme"
import { fromJS } from "immutable"
import { fromJS, Map } from "immutable"
import Models from "components/models"
import ModelCollpase from "components/model-collapse"
import ModelComponent from "components/model-wrapper"
@@ -19,6 +19,7 @@ describe("<Models/>", function(){
},
specSelectors: {
isOAS3: () => false,
specJson: () => Map(),
definitions: function() {
return fromJS({
def1: {},

View File

@@ -0,0 +1,29 @@
describe("bug #4536: model name consistency", function () {
let mainPage
beforeEach(function (client, done) {
mainPage = client
.url("localhost:3230")
.page.main()
client.waitForElementVisible(".download-url-input", 5000)
.pause(2000)
.clearValue(".download-url-input")
.setValue(".download-url-input", "http://localhost:3230/test-specs/bugs/4536.yaml")
.click("button.download-url-button")
.pause(1000)
done()
})
afterEach(function (client, done) {
done()
})
it("consistently displays a model's name regardless of expansion state", function (client) {
client.waitForElementVisible("span.model.model-title", 10000)
.assert.containsText("span.model.model-title", "TitleName")
.click("span.model.model-title")
.pause(500)
.assert.containsText("span.model-title__text", "TitleName")
client.end()
})
})

View File

@@ -0,0 +1,9 @@
swagger: '2.0'
info:
version: 0.0.0
title: test
paths: {}
definitions:
ModelName:
title: TitleName