fix(validator-badge): resolve definition URLs against browser location (#4580)

src/core/components/online-validator-badge.jsx

@@ -1,6 +1,9 @@
 import React from "react"
+import URL from "url-parse"
+
 import PropTypes from "prop-types"
 import { sanitizeUrl } from "core/utils"
+import win from "core/window"
 
 export default class OnlineValidatorBadge extends React.Component {
     static propTypes = {
@@ -11,20 +14,28 @@ export default class OnlineValidatorBadge extends React.Component {
 
     constructor(props, context) {
         super(props, context)
-        let { specSelectors, getConfigs } = props
+        let { getConfigs } = props
         let { validatorUrl } = getConfigs()
         this.state = {
-            url: specSelectors.url(),
+            url: this.getDefinitionUrl(),
             validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         }
     }
 
+    getDefinitionUrl = () => {
+      // TODO: test this behavior by stubbing `window.location` in an Enzyme/JSDom env
+      let { specSelectors } = this.props
+
+      const urlObject = new URL(specSelectors.url(), win.location)
+      return urlObject.toString()
+    }
+
     componentWillReceiveProps(nextProps) {
-        let { specSelectors, getConfigs } = nextProps
+        let { getConfigs } = nextProps
         let { validatorUrl } = getConfigs()
 
         this.setState({
-            url: specSelectors.url(),
+            url: this.getDefinitionUrl(),
             validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         })
     }