WIP

* extend getExtensions

Add optional param to getExtensions that can retrieve more stuff

* Add getCommonExtensions

* Trim trailing spaces

* Remove unused parameter

* Move the format inline with the param type

* correction to UnitTest

README.md

@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.13.4 | 2018-04-15 | 2.0, 3.0 | [tag v3.13.4](https://github.com/swagger-api/swagger-ui/tree/v3.13.4)
+3.13.5 | 2018-04-20 | 2.0, 3.0 | [tag v3.13.5](https://github.com/swagger-api/swagger-ui/tree/v3.13.5)
 3.0.21 | 2017-07-26 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21)
 2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10)
 2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5)

dev-helpers/dev.yaml

@@ -0,0 +1,81 @@
+openapi: "3.0.0"
+info:
+  version: 1.0.0
+  title: Brentertainment OAuth2 Test Server
+  description: >
+    The server does not support CORS (yet?), so you need to take the strange step of disabling Same-Origin Policy in your browser.
+    [Here](https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/) are some instructions.
+  license:
+    name: MIT
+servers:
+  - url: http://brentertainment.com/oauth2/lockdin/
+paths:
+  /resource:
+    get:
+      description: Protected resource
+      security:
+      - oauth2AuthorizationCode: ["resource"]
+      - oauth2Implicit: ["resource"]
+      - oauth2Password: ["resource"]
+      - oauth2ClientCredentials: ["resource"]
+      - oauth2Multiflow: ["resource"]
+      responses:
+        200:
+          description: the only response
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: string
+components:
+  securitySchemes:
+    oauth2AuthorizationCode:
+      type: oauth2
+      flows:
+        authorizationCode:
+          authorizationUrl: "http://brentertainment.com/oauth2/lockdin/authorize"
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope
+    oauth2Implicit:
+      type: oauth2
+      flows:
+        implicit:
+          authorizationUrl: "http://brentertainment.com/oauth2/lockdin/authorize"
+          scopes:
+            resource: our only scope
+    oauth2Password:
+      type: oauth2
+      flows:
+        password:
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope
+    oauth2ClientCredentials:
+      type: oauth2
+      flows:
+        clientCredentials:
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope
+    oauth2Multiflow:
+      type: oauth2
+      flows:
+        clientCredentials:
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope
+        password:
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope
+        implicit:
+          authorizationUrl: "http://brentertainment.com/oauth2/lockdin/authorize"
+          scopes:
+            resource: our only scope
+        authorizationCode:
+          authorizationUrl: "http://brentertainment.com/oauth2/lockdin/authorize"
+          tokenUrl: "http://brentertainment.com/oauth2/lockdin/token"
+          scopes:
+            resource: our only scope

docs/customization/plugin-api.md

@@ -68,7 +68,7 @@ There is no dependency management built into the plugin system, so if you create
 
 ### Interfaces
 
-##### Actions
+#### Actions
 
 ```javascript
 const MyActionPlugin = () => {
@@ -102,7 +102,7 @@ This action creator function will be exposed to container components as `example
 
 For more information about the concept of actions in Redux, see the [Redux Actions documentation](http://redux.js.org/docs/basics/Actions.html).
 
-##### Reducers
+#### Reducers
 
 Reducers take a state (which is an [Immutable.js map](https://facebook.github.io/immutable-js/docs/#/Map)) and an action, and return a new state.
 
@@ -126,7 +126,7 @@ const MyReducerPlugin = function(system) {
 }
 ```
 
-##### Selectors
+#### Selectors
 
 Selectors reach into their namespace's state to retrieve or derive data from the state.
 
@@ -172,7 +172,7 @@ Once a selector has been defined, you can use it anywhere that you can get a sys
 system.exampleSelectors.myFavoriteColor() // gets `favColor` in state for you
 ```
 
-##### Components
+#### Components
 
 You can provide a map of components to be integrated into the system.
 
@@ -214,7 +214,7 @@ const NeverShowInfoPlugin = function(system) {
 }
 ```
 
-##### Wrap-Actions
+#### Wrap-Actions
 
 Wrap Actions allow you to override the behavior of an action in the system.
 
@@ -262,7 +262,7 @@ const MyWrapActionPlugin = function(system) {
 }
 ```
 
-##### Wrap-Selectors
+#### Wrap-Selectors
 
 Wrap Selectors allow you to override the behavior of a selector in the system.
 
@@ -307,7 +307,7 @@ const MyWrapSelectorsPlugin = function(system) {
 }
 ```
 
-##### Wrap-Components
+#### Wrap-Components
 
 Wrap Components allow you to override a component registered within the system.
 
@@ -381,7 +381,7 @@ const MyWrapComponentPlugin = function(system) {
 }
 ```
 
-##### `rootInjects`
+#### `rootInjects`
 
 The `rootInjects` interface allows you to inject values at the top level of the system.
 
@@ -398,7 +398,7 @@ const MyRootInjectsPlugin = function(system) {
 }
 ```
 
-##### `afterLoad`
+#### `afterLoad`
 
 The `afterLoad` plugin method allows you to get a reference to the system after your plugin has been registered.
 
@@ -431,7 +431,7 @@ const MyMethodProvidingPlugin = function() {
 }
 ```
 
-##### fn
+#### fn
 
 The fn interface allows you to add helper functions to the system for use elsewhere.
 

docs/usage/configuration.md

@@ -58,6 +58,7 @@ Parameter Name | Description
 `maxDisplayedTags` | `Number`. If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
 `operationsSorter` | `Function=(a => a)`. Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
 `showExtensions` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
+`showCommonExtensions` | `Boolean=false`. Controls the display of extensions (`pattern`, `maxLength`, `minLength`, `maximum`, `minimum`) fields and values for Parameters.
 `tagsSorter` | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
 `onComplete` | `Function=NOOP`. Provides a mechanism to be notified when Swagger-UI has finished rendering a newly provided definition.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.13.4",
+  "version": "3.13.6",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -84,7 +84,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.7.0",
+    "swagger-client": "^3.7.2",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",

src/core/components/auth/auths.jsx

@@ -99,10 +99,13 @@ export default class Auths extends React.Component {
             {
               definitions.filter( schema => schema.get("type") === "oauth2")
                 .map( (schema, name) =>{
-                  return (<div key={ name }>
+                  const { flow } = schema
+                  const key = [name, flow].join("__").slice(0, -2)
+                  return (<div key={ key }>
                     <Oauth2 authorized={ authorized }
                             schema={ schema }
-                            name={ name } />
+                            authId={ key }
+                            name={ key || schema.get("name") || name } />
                   </div>)
                 }
                 ).toArray()

src/core/components/auth/oauth2.jsx

@@ -47,11 +47,11 @@ export default class Oauth2 extends React.Component {
   }
 
   authorize =() => {
-    let { authActions, errActions, getConfigs, authSelectors } = this.props
+    let { authActions, errActions, getConfigs, authSelectors, authId } = this.props
     let configs = getConfigs()
     let authConfigs = authSelectors.getConfigs()
 
-    errActions.clear({authId: name,type: "auth", source: "auth"})
+    errActions.clear({authId: authId ,type: "auth", source: "auth"})
     oauth2Authorize({auth: this.state, authActions, errActions, configs, authConfigs })
   }
 
@@ -79,15 +79,15 @@ export default class Oauth2 extends React.Component {
 
   logout =(e) => {
     e.preventDefault()
-    let { authActions, errActions, name } = this.props
+    let { authActions, errActions, authId } = this.props
 
-    errActions.clear({authId: name, type: "auth", source: "auth"})
-    authActions.logout([ name ])
+    errActions.clear({authId: authId, type: "auth", source: "auth"})
+    authActions.logout([ authId ])
   }
 
   render() {
     let {
-      schema, getComponent, authSelectors, errSelectors, name, specSelectors
+      schema, getComponent, authSelectors, errSelectors, name, authId, specSelectors
     } = this.props
     const Input = getComponent("Input")
     const Row = getComponent("Row")
@@ -107,9 +107,9 @@ export default class Oauth2 extends React.Component {
 
     let flow = schema.get("flow")
     let scopes = schema.get("allowedScopes") || schema.get("scopes")
-    let authorizedAuth = authSelectors.authorized().get(name)
+    let authorizedAuth = authSelectors.authorized().get(authId)
     let isAuthorized = !!authorizedAuth
-    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
+    let errors = errSelectors.allErrors().filter( err => err.get("authId") === authId)
     let isValid = !errors.filter( err => err.get("source") === "validation").size
     let description = schema.get("description")
 

src/core/components/highlight-code.jsx

@@ -36,10 +36,11 @@ export default class HighlightCode extends Component {
 
     const scrollOffset = visibleHeight + scrollTop
 
+    const isElementScrollable = contentHeight > visibleHeight
     const isScrollingPastTop = scrollTop === 0 && deltaY < 0
     const isScrollingPastBottom = scrollOffset >= contentHeight && deltaY > 0
 
-    if (isScrollingPastTop || isScrollingPastBottom) {
+    if (isElementScrollable && (isScrollingPastTop || isScrollingPastBottom)) {
       e.preventDefault()
     }
   }

src/core/components/parameter-row.jsx

@@ -3,7 +3,7 @@ import { Map } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
-import { getExtensions } from "core/utils"
+import { getExtensions, getCommonExtensions } from "core/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -82,7 +82,7 @@ export default class ParameterRow extends Component {
 
     let { isOAS3 } = specSelectors
 
-    const { showExtensions } = getConfigs()
+    const { showExtensions, showCommonExtensions } = getConfigs()
 
     // const onChangeWrapper = (value) => onChange(param, value)
     const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -106,15 +106,17 @@ export default class ParameterRow extends Component {
     const ParameterExt = getComponent("ParameterExt")
 
     let paramWithMeta = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
-
+    let format = param.get("format")
     let schema = isOAS3 && isOAS3() ? param.get("schema") : param
     let type = schema.get("type")
     let isFormData = inType === "formData"
     let isFormDataSupported = "FormData" in win
     let required = param.get("required")
     let itemType = schema.getIn(["items", "type"])
+
     let value = paramWithMeta ? paramWithMeta.get("value") : ""
-    let extensions = getExtensions(param)
+    let commonExt = showCommonExtensions ? getCommonExtensions(param) : null
+    let extensions = showExtensions ? getExtensions(param) : null
 
     let paramItems // undefined
     let paramEnum // undefined
@@ -153,11 +155,16 @@ export default class ParameterRow extends Component {
             { param.get("name") }
             { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
           </div>
-          <div className="parameter__type">{ type } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">
+            { type }
+            { itemType && `[${itemType}]` }
+            { format && <span className="prop-format">(${format})</span>}
+          </div>
           <div className="parameter__deprecated">
             { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
           </div>
           <div className="parameter__in">({ param.get("in") })</div>
+          { !showCommonExtensions || !commonExt.size ? null : commonExt.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
           { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
         </td>
 

src/core/components/providers/markdown.jsx

@@ -35,7 +35,7 @@ function Markdown({ source, className = "" }) {
 
 Markdown.propTypes = {
     source: PropTypes.string.isRequired,
-    className: PropTypes.string.isRequired
+    className: PropTypes.string
 }
 
 export default Markdown

src/core/index.js

@@ -49,6 +49,7 @@ module.exports = function SwaggerUI(opts) {
     defaultModelExpandDepth: 1,
     defaultModelsExpandDepth: 1,
     showExtensions: false,
+    showCommonExtensions: false,
     supportedSubmitMethods: [
       "get",
       "put",

src/core/plugins/configs/helpers.js

@@ -0,0 +1,12 @@
+import YAML from "js-yaml"
+
+export const parseYamlConfig = (yaml, system) => {
+  try {
+    return YAML.safeLoad(yaml)
+  } catch(e) {
+    if (system) {
+      system.errActions.newThrownErr( new Error(e) )
+    }
+    return {}
+  }
+}

src/core/plugins/configs/index.js

@@ -1,46 +1,10 @@
-import YAML from "js-yaml"
 import yamlConfig from "root/swagger-config.yaml"
+import { parseYamlConfig } from "./helpers"
 import * as actions from "./actions"
+import * as specActions from "./spec-actions"
 import * as selectors from "./selectors"
 import reducers from "./reducers"
 
-const parseYamlConfig = (yaml, system) => {
-  try {
-    return YAML.safeLoad(yaml)
-  } catch(e) {
-    if (system) {
-      system.errActions.newThrownErr( new Error(e) )
-    }
-    return {}
-  }
-}
-
-
-const specActions = {
-  downloadConfig: (url) => ({fn}) => {
-    let {fetch} = fn
-    return fetch(url)
-  },
-
-  getConfigByUrl: (configUrl, cb)=> ({ specActions }) => {
-    if (configUrl) {
-      return specActions.downloadConfig(configUrl).then(next, next)
-    }
-
-    function next(res) {
-      if (res instanceof Error || res.status >= 400) {
-        specActions.updateLoadingStatus("failedConfig")
-        specActions.updateLoadingStatus("failedConfig")
-        specActions.updateUrl("")
-        console.error(res.statusText + " " + configUrl)
-        cb(null)
-      } else {
-        cb(parseYamlConfig(res.text))
-      }
-    }
-  }
-}
-
 const specSelectors = {
   getLocalConfig: () => {
     return parseYamlConfig(yamlConfig)

src/core/plugins/configs/spec-actions.js

@@ -0,0 +1,34 @@
+import { parseYamlConfig } from "./helpers"
+
+export const downloadConfig = (url) => ({fn: { fetch }, getConfigs}) => {
+  const { requestInterceptor, responseInterceptor } = getConfigs()
+  let req = { url }
+  if(requestInterceptor) {
+    req = requestInterceptor(req)
+  }
+  return fetch(req)
+    .then(res => {
+      if(res) {
+        return responseInterceptor(res)
+      }
+      return res
+    })
+}
+
+export const getConfigByUrl = (configUrl, cb)=> ({ specActions }) => {
+  if (configUrl) {
+    return specActions.downloadConfig(configUrl).then(next, next)
+  }
+
+  function next(res) {
+    if (res instanceof Error || res.status >= 400) {
+      specActions.updateLoadingStatus("failedConfig")
+      specActions.updateLoadingStatus("failedConfig")
+      specActions.updateUrl("")
+      console.error(res.statusText + " " + configUrl)
+      cb(null)
+    } else {
+      cb(parseYamlConfig(res.text))
+    }
+  }
+}

src/core/plugins/oas3/auth-extensions/wrap-selectors.js

@@ -33,6 +33,7 @@ export const definitionsToAuthorize = onlyOAS3(createSelector(
           definition.get("flows").entrySeq().forEach(([flowKey, flowVal]) => {
             let translatedDef = fromJS({
               flow: flowKey,
+              name: defName,
               authorizationUrl: flowVal.get("authorizationUrl"),
               tokenUrl: flowVal.get("tokenUrl"),
               scopes: flowVal.get("scopes"),
@@ -40,7 +41,7 @@ export const definitionsToAuthorize = onlyOAS3(createSelector(
             })
 
             list = list.push(new Map({
-              [defName]: translatedDef.filter((v) => {
+              [`${defName}__${flowKey}`]: translatedDef.filter((v) => {
                 // filter out unset values, sometimes `authorizationUrl`
                 // and `tokenUrl` come out as `undefined` in the data
                 return v !== undefined

src/core/plugins/oas3/components/callbacks.jsx

@@ -16,8 +16,14 @@ const Callbacks = (props) => {
     return <div key={callbackName}>
       <h2>{callbackName}</h2>
       { callback.map((pathItem, pathItemName) => {
+        if(pathItemName === "$$ref") {
+          return null
+        }
         return <div key={pathItemName}>
           { pathItem.map((operation, method) => {
+            if(method === "$$ref") {
+              return null
+            }
             let op = fromJS({
               operation
             })

src/core/plugins/spec/reducers.js

@@ -118,7 +118,11 @@ export default {
     let operationPath = ["paths", ...path]
     let metaPath = ["meta", "paths", ...path]
 
-    if(!state.getIn(["json", ...operationPath]) && !state.getIn(["resolved", ...operationPath])) {
+    if(
+      !state.getIn(["json", ...operationPath])
+      && !state.getIn(["resolved", ...operationPath])
+      && !state.getIn(["resolvedSubtrees", ...operationPath])
+    ) {
       // do nothing if the operation does not exist
       return state
     }

src/core/utils.js

@@ -712,6 +712,7 @@ export const createDeepLinkPath = (str) => typeof str == "string" || str instanc
 export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
 
 export const getExtensions = (defObj) => defObj.filter((v, k) => /^x-/.test(k))
+export const getCommonExtensions = (defObj) => defObj.filter((v, k) => /^pattern|maxLength|minLength|maximum|minimum/.test(k))
 
 // Deeply strips a specific key from an object.
 //

test/core/plugins/configs/actions.js

@@ -0,0 +1,84 @@
+/* eslint-env mocha */
+import expect, { createSpy } from "expect"
+import { downloadConfig } from "corePlugins/configs/spec-actions"
+
+describe("configs plugin - actions", () => {
+
+  describe("downloadConfig", () => {
+    it("should call the system fetch helper with a provided url", () => {
+      const fetchSpy = createSpy(async () => {}).andCallThrough()
+      const system = {
+        fn: {
+          fetch: fetchSpy
+        },
+        getConfigs() {
+          return {}
+        }
+      }
+
+      const url = "http://swagger.io/one"
+
+      downloadConfig(url)(system)
+
+      expect(fetchSpy).toHaveBeenCalledWith({
+        url: url
+      })
+    })
+    it("should allow the globally configured requestInterceptor to modify the request", () => {
+      const fetchSpy = createSpy(async () => {}).andCallThrough()
+      const requestInterceptorSpy = createSpy((req) => {
+        req.url = "http://swagger.io/two"
+        return req
+      }).andCallThrough()
+      const system = {
+        fn: {
+          fetch: fetchSpy
+        },
+        getConfigs() {
+          return {
+            requestInterceptor: requestInterceptorSpy
+          }
+        }
+      }
+
+      const url = "http://swagger.io/one"
+
+      downloadConfig(url)(system)
+
+      expect(fetchSpy).toHaveBeenCalledWith({
+        url: "http://swagger.io/two"
+      })
+    })
+    it("should allow the globally configured responseInterceptor to modify the response", async () => {
+      const fetchSpy = createSpy(async (req) => {
+        return {
+          url: req.url,
+          ok: true
+        }
+      }).andCallThrough()
+      const responseInterceptorSpy = createSpy((res) => {
+        res.url = "http://swagger.io/two"
+        return res
+      }).andCallThrough()
+      const system = {
+        fn: {
+          fetch: fetchSpy
+        },
+        getConfigs() {
+          return {
+            responseInterceptor: responseInterceptorSpy
+          }
+        }
+      }
+
+      const url = "http://swagger.io/one"
+
+      const res = await downloadConfig(url)(system)
+
+      expect(res).toEqual({
+        url: "http://swagger.io/two",
+        ok: true
+      })
+    })
+  })
+})

test/core/utils.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
 import expect from "expect"
-import { fromJS, OrderedMap } from "immutable"
+import { Map, fromJS, OrderedMap } from "immutable"
 import {
   mapToList,
   parseSearch,
@@ -20,6 +20,8 @@ import {
   getAcceptControllingResponse,
   createDeepLinkPath,
   escapeDeepLinkPath,
+  getExtensions,
+  getCommonExtensions,
   sanitizeUrl,
   extractFileNameFromContentDispositionHeader,
   deeplyStripKey
@@ -943,6 +945,24 @@ describe("utils", function() {
     })
   })
 
+  describe("getExtensions", function() {
+    const objTest = Map([[ "x-test", "a"], ["minimum", "b"]])
+    it("does not error on empty array", function() {
+      const result1 = getExtensions([])
+      expect(result1).toEqual([])
+      const result2 = getCommonExtensions([])
+      expect(result2).toEqual([])
+    })
+    it("gets only the x- keys", function() {
+      const result = getExtensions(objTest)
+      expect(result).toEqual(Map([[ "x-test", "a"]]))
+    })
+    it("gets the common keys", function() {
+      const result = getCommonExtensions(objTest, true)
+      expect(result).toEqual(Map([[ "minimum", "b"]]))
+    })
+  })
+  
   describe("deeplyStripKey", function() {
     it("should filter out a specified key", function() {
       const input = {

test/e2e/scenarios/bugs/4445.js

@@ -0,0 +1,32 @@
+describe("bug #4445: callback-via-$ref rendering", function () {
+    let mainPage
+    beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3230")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/bugs/4445.yaml")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("expands an operation that has a visible callback", function (client) {
+        client.waitForElementVisible(".opblock-tag-section", 10000)
+            .click(".opblock")
+            .waitForElementVisible(".opblock-body", 5000)
+            .click(".opblock-section-header > .tab-header > div.tab-item:nth-of-type(2)")
+            .waitForElementVisible(".callbacks-container .opblock", 5000)
+            .click(".callbacks-container .opblock")
+            .waitForElementVisible(".callbacks-container .opblock-body", 5000)
+            .assert.containsText(".callbacks-container .opblock-description-wrapper:nth-of-type(2) p", "subscription payload")
+
+        client.end()
+    })
+})

test/e2e/scenarios/bugs/4485.js

@@ -0,0 +1,31 @@
+describe("bug #4485: operation metadata storage when referenced via path item $ref", 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/4485/main.yaml")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("sets a consumes value for a body parameter correctly", function (client) {
+        client.waitForElementVisible(".opblock-tag-section", 10000)
+            .click(".opblock")
+            .waitForElementVisible(".opblock-body", 5000)
+            .click("button.btn.try-out__btn")
+            .click("select.content-type [value=\"application/xml\"]")
+            .pause(500)
+            .assert.value("select.content-type", "application/xml")
+
+        client.end()
+    })
+})

test/e2e/specs/bugs/4445.yaml

@@ -0,0 +1,64 @@
+openapi: 3.0.0
+info:
+  title: Callback Example
+  version: 1.0.0
+paths:
+  /streams:
+    post:
+      description: subscribes a client to receive out-of-band data
+      parameters:
+        - name: callbackUrl
+          in: query
+          required: true
+          description: |
+            the location where data will be sent.  Must be network accessible
+            by the source server
+          schema:
+            type: string
+            format: uri
+            example: https://tonys-server.com
+      responses:
+        '201':
+          description: subscription successfully created
+          content:
+            application/json:
+              schema:
+                description: subscription information
+                required:
+                  - subscriptionId
+                properties:
+                  subscriptionId:
+                    description: this unique identifier allows management of the subscription
+                    type: string
+                    example: 2531329f-fb09-4ef7-887e-84e648214436
+      callbacks:
+        # the name `onData` is a convenience locator
+        onData:
+          $ref: '#/components/callbacks/onData'
+components:
+  callbacks:
+    onData:
+      # when data is sent, it will be sent to the `callbackUrl` provided
+      # when making the subscription PLUS the suffix `/data`
+      '{$request.query.callbackUrl}/data':
+        post:
+          requestBody:
+            description: subscription payload
+            content:
+              application/json:
+                schema:
+                  properties:
+                    timestamp:
+                      type: string
+                      format: date-time
+                    userData:
+                      type: string
+          responses:
+            '202':
+              description: |
+                Your server implementation should return this HTTP status code
+                if the data was received successfully
+            '204':
+              description: |
+                Your server should return this HTTP status code if no longer interested
+                in further updates

test/e2e/specs/bugs/4485/book.yaml

@@ -0,0 +1,15 @@
+---
+post:
+  description: Book
+  operationId: buy
+  summary: Buy a book
+  tags:
+  - Book
+  consumes:
+  - application/json
+  - application/xml
+  parameters:
+  - name: requestBody
+    in: body
+    description: Buy a Book
+    required: true

test/e2e/specs/bugs/4485/main.yaml

@@ -0,0 +1,5 @@
+---
+swagger: '2.0'
+paths:
+  "/v1/book":
+    "$ref": "./book.yaml"