Example (#4730)

* add tests for example feature
* refactor ParameterRow value setter logic
* aside: fix property access in sampleFromSchema
* prioritize media type examples for OAS3 responses
* use `example` in schema level example
* refactor: move stringify to utils
* prioritize media type examples in OAS3 request bodies
* modify nightwatch config
* fix parameter/response regressions
* reorder and broaden default value sources
* update lockfile

src/core/components/param-body.jsx

@@ -114,7 +114,7 @@ export default class ParamBody extends PureComponent {
     let { value, isEditBox } = this.state
 
     return (
-      <div className="body-param">
+      <div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
         {
           isEditBox && isExecute
             ? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>

src/core/components/parameter-row.jsx

@@ -30,8 +30,6 @@ export default class ParameterRow extends Component {
     let { specSelectors, pathMethod, rawParam } = props
     let { isOAS3 } = specSelectors
 
-    let example = rawParam.get("example")
-
     let parameterWithMeta = specSelectors.parameterWithMetaByIdentity(pathMethod, rawParam)
     // fallback, if the meta lookup fails
     parameterWithMeta = parameterWithMeta.isEmpty() ? rawParam : parameterWithMeta
@@ -39,7 +37,7 @@ export default class ParameterRow extends Component {
     let enumValue
 
     if(isOAS3()) {
-      let schema = rawParam.get("schema") || Map()
+      let schema = parameterWithMeta.get("schema") || Map()
       enumValue = schema.get("enum")
     } else {
       enumValue = parameterWithMeta ? parameterWithMeta.get("enum") : undefined
@@ -50,15 +48,15 @@ export default class ParameterRow extends Component {
 
     if ( paramValue !== undefined ) {
       value = paramValue
-    } else if ( example !== undefined ) {
-      value = example
     } else if ( rawParam.get("required") && enumValue && enumValue.size ) {
       value = enumValue.first()
     }
 
-    if ( value !== undefined ) {
+    if ( value !== undefined && value !== paramValue ) {
       this.onChangeWrapper(value)
     }
+
+    this.setDefaultValue()
   }
 
   onChangeWrapper = (value, isXml = false) => {
@@ -69,22 +67,28 @@ export default class ParameterRow extends Component {
   setDefaultValue = () => {
     let { specSelectors, pathMethod, rawParam } = this.props
 
-    if (rawParam.get("value") !== undefined) {
+    let paramWithMeta = specSelectors.parameterWithMetaByIdentity(pathMethod, rawParam)
+
+
+    if (paramWithMeta.get("value") !== undefined) {
       return
     }
 
-    let schema = specSelectors.isOAS3() ? rawParam.get("schema", Map({})) : rawParam
+    if( paramWithMeta.get("in") !== "body" ) {
+      let newValue
 
-    let defaultValue = schema.get("default")
-    let xExampleValue = rawParam.get("x-example") // Swagger 2 only
-    let parameter = specSelectors.parameterWithMetaByIdentity(pathMethod, rawParam)
-    let value = parameter ? parameter.get("value") : ""
-
-    if( rawParam.get("in") !== "body" ) {
-      if ( xExampleValue !== undefined && value === undefined && specSelectors.isSwagger2() ) {
-        this.onChangeWrapper(xExampleValue)
-      } else if ( defaultValue !== undefined && value === undefined ) {
-        this.onChangeWrapper(defaultValue)
+      if (specSelectors.isSwagger2()) {
+        newValue = paramWithMeta.get("x-example")
+          || paramWithMeta.getIn(["default"])
+          || paramWithMeta.getIn(["schema", "example"])
+          || paramWithMeta.getIn(["schema", "default"])
+      } else if (specSelectors.isOAS3()) {
+        newValue = paramWithMeta.get("example")
+          || paramWithMeta.getIn(["schema", "example"])
+          || paramWithMeta.getIn(["schema", "default"])
+      }
+      if(newValue !== undefined) {
+        this.onChangeWrapper(newValue)
       }
     }
   }
@@ -161,7 +165,7 @@ export default class ParameterRow extends Component {
     }
 
     return (
-      <tr className="parameters">
+      <tr data-param-name={param.get("name")} data-param-in={param.get("in")}>
         <td className="col parameters-col_name">
           <div className={required ? "parameter__name required" : "parameter__name"}>
             { param.get("name") }

src/core/components/response.jsx

@@ -2,21 +2,13 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import cx from "classnames"
-import { fromJS, Seq, Iterable, List } from "immutable"
-import { getSampleSchema, fromJSOrdered } from "core/utils"
+import { fromJS, Seq, Iterable, List, Map } from "immutable"
+import { getSampleSchema, fromJSOrdered, stringify } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
   if ( examples && examples.size ) {
     return examples.entrySeq().map( ([ key, example ]) => {
-      let exampleValue = example
-      if ( example.toJS ) {
-        try {
-          exampleValue = JSON.stringify(example.toJS(), null, 2)
-        }
-        catch(e) {
-          exampleValue = String(example)
-        }
-      }
+      let exampleValue = stringify(example)
 
       return (<div key={ key }>
         <h5>{ key }</h5>
@@ -97,20 +89,29 @@ export default class Response extends React.Component {
     const ContentType = getComponent("contentType")
 
     var sampleResponse
+    var sampleSchema
     var schema, specPathWithPossibleSchema
 
+    const activeContentType = this.state.responseContentType || contentType
+
     if(isOAS3()) {
-      const schemaPath = List(["content", this.state.responseContentType, "schema"])
-      const oas3SchemaForContentType = response.getIn(schemaPath)
-      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
-        includeReadOnly: true
-      }) : null
+      const mediaType = response.getIn(["content", activeContentType], Map({}))
+      const oas3SchemaForContentType = mediaType.get("schema", Map({}))
+
+      if(mediaType.get("example") !== undefined) {
+        sampleSchema = stringify(mediaType.get("example"))
+      } else {
+        sampleSchema = getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
+          includeReadOnly: true
+        })
+      }
+      sampleResponse = oas3SchemaForContentType ? sampleSchema : null
       schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
-      specPathWithPossibleSchema = oas3SchemaForContentType ? schemaPath : specPath
+      specPathWithPossibleSchema = oas3SchemaForContentType ? List(["content", this.state.responseContentType, "schema"]) : specPath
     } else {
       schema = inferSchema(response.toJS()) // TODO: don't convert back and forth. Lets just stick with immutable for inferSchema
       specPathWithPossibleSchema = response.has("schema") ? specPath.push("schema") : specPath
-      sampleResponse = schema ? getSampleSchema(schema, contentType, {
+      sampleResponse = schema ? getSampleSchema(schema, activeContentType, {
         includeReadOnly: true,
         includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
        }) : null
@@ -126,7 +127,7 @@ export default class Response extends React.Component {
     let example = getExampleComponent( sampleResponse, examples, HighlightCode )
 
     return (
-      <tr className={ "response " + ( className || "") }>
+      <tr className={ "response " + ( className || "") } data-code={code}>
         <td className="col response-col_status">
           { code }
         </td>