diff --git a/src/core/components/online-validator-badge.jsx b/src/core/components/online-validator-badge.jsx
index e9c251cb..69b6ba6f 100644
--- a/src/core/components/online-validator-badge.jsx
+++ b/src/core/components/online-validator-badge.jsx
@@ -54,8 +54,8 @@ export default class OnlineValidatorBadge extends React.Component {
         }
 
         return (<span style={{ float: "right"}}>
-                <a target="_blank" href={`${ sanitizedValidatorUrl }/debug?url=${ this.state.url }`}>
-                    <ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ this.state.url }`} alt="Online validator badge"/>
+                <a target="_blank" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
+                    <ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
                 </a>
             </span>)
     }
diff --git a/test/components/online-validator-badge.js b/test/components/online-validator-badge.js
new file mode 100644
index 00000000..60218425
--- /dev/null
+++ b/test/components/online-validator-badge.js
@@ -0,0 +1,79 @@
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { mount } from "enzyme"
+import { fromJS, Map } from "immutable"
+import OnlineValidatorBadge from "components/online-validator-badge"
+
+describe("<OnlineValidatorBadge/>", function () {
+  it("should render a validator link and image correctly for the default validator", function () {
+    // When
+    const props = {
+      getConfigs: () => ({}),
+      getComponent: () => null,
+      specSelectors: {
+        url: () => "swagger.json"
+      }
+    }
+    const wrapper = mount(
+     <OnlineValidatorBadge {...props} />
+    )
+
+    // Then
+    expect(wrapper.find("a").props().href).toEqual(
+      "https://online.swagger.io/validator/debug?url=swagger.json"
+    )
+    expect(wrapper.find("ValidatorImage").length).toEqual(1)
+    expect(wrapper.find("ValidatorImage").props().src).toEqual(
+      "https://online.swagger.io/validator?url=swagger.json"
+    )
+  })
+  it("should encode a definition URL correctly", function () {
+    // When
+    const props = {
+      getConfigs: () => ({}),
+      getComponent: () => null,
+      specSelectors: {
+        url: () => "http://google.com/swagger.json"
+      }
+    }
+    const wrapper = mount(
+      <OnlineValidatorBadge {...props} />
+    )
+
+    // Then
+    expect(wrapper.find("a").props().href).toEqual(
+      "https://online.swagger.io/validator/debug?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
+    )
+    expect(wrapper.find("ValidatorImage").length).toEqual(1)
+    expect(wrapper.find("ValidatorImage").props().src).toEqual(
+      "https://online.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
+    )
+  })
+  it.skip("should resolve a definition URL against the browser's location", function () {
+    // TODO: mock `window`
+    // When
+
+    const props = {
+      getConfigs: () => ({}),
+      getComponent: () => null,
+      specSelectors: {
+        url: () => "http://google.com/swagger.json"
+      }
+    }
+    const wrapper = mount(
+      <OnlineValidatorBadge {...props} />
+    )
+
+    // Then
+    expect(wrapper.find("a").props().href).toEqual(
+      "https://online.swagger.io/validator/debug?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
+    )
+    expect(wrapper.find("ValidatorImage").length).toEqual(1)
+    expect(wrapper.find("ValidatorImage").props().src).toEqual(
+      "https://online.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
+    )
+  })
+  // should resolve a definition URL against the browser's location
+
+})