api

frontend/web/api-doc/test/unit/components/filter.jsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { mount } from "enzyme"
+import FilterContainer from "containers/filter"
+import { Col } from "components/layout-utils"
+
+describe("<FilterContainer/>", function(){
+
+  const mockedProps = {
+    specSelectors: {
+      loadingStatus() {}
+    },
+    layoutSelectors: {
+      currentFilter() {}
+    },
+    getComponent: () => {return Col}
+  }
+
+  it("renders FilterContainer if filter is provided", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.layoutSelectors = {...mockedProps.specSelectors}
+    props.layoutSelectors.currentFilter = function() {return true}
+
+    // When
+    let wrapper = mount(<FilterContainer {...props}/>)
+
+    // Then
+    const renderedColInsideFilter = wrapper.find(Col)
+    expect(renderedColInsideFilter.length).toEqual(1)
+  })
+
+  it("does not render FilterContainer if filter is null", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.layoutSelectors = {...mockedProps.specSelectors}
+    props.layoutSelectors.currentFilter = function() {return null}
+
+    // When
+    let wrapper = mount(<FilterContainer {...props}/>)
+
+    // Then
+    const renderedColInsideFilter = wrapper.find(Col)
+    expect(renderedColInsideFilter.length).toEqual(0)
+  })
+
+  it("does not render FilterContainer if filter is false", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.layoutSelectors = {...mockedProps.specSelectors}
+    props.layoutSelectors.currentFilter = function() {return false}
+
+    // When
+    let wrapper = mount(<FilterContainer {...props}/>)
+
+    // Then
+    const renderedColInsideFilter = wrapper.find(Col)
+    expect(renderedColInsideFilter.length).toEqual(0)
+  })
+})

frontend/web/api-doc/test/unit/components/info-wrapper.jsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { mount } from "enzyme"
+import { fromJS } from "immutable"
+import InfoContainer from "containers/info"
+
+describe("<InfoContainer/>", function () {
+
+  const components = {
+    info: () => <span className="mocked-info"/>
+  }
+  const mockedProps = {
+    specSelectors: {
+      info () {},
+      url () {},
+      basePath () {},
+      host () {},
+      externalDocs () {},
+    },
+    oas3Selectors: {
+      selectedServer () {},
+    },
+    getComponent: c => components[c]
+  }
+
+  it("renders Info inside InfoContainer if info is provided", function () {
+
+    // Given
+    let props = {...mockedProps}
+    props.specSelectors = {...mockedProps.specSelectors}
+    props.specSelectors.info = function () {return fromJS(["info1", "info2"])}
+
+    // When
+    let wrapper = mount(<InfoContainer {...props}/>)
+
+    // Then
+    const renderedInfo = wrapper.find("span.mocked-info")
+    expect(renderedInfo.length).toEqual(1)
+  })
+
+  it("does not render Info inside InfoContainer if no info is provided", function () {
+
+    // Given
+    let props = {...mockedProps}
+    props.specSelectors = {...mockedProps.specSelectors}
+    props.specSelectors.info = function () {return fromJS([])}
+
+    // When
+    let wrapper = mount(<InfoContainer {...props}/>)
+
+    // Then
+    const renderedInfo = wrapper.find("span.mocked-info")
+    expect(renderedInfo.length).toEqual(0)
+  })
+
+  it("does not render Info inside InfoContainer if info is undefined", function () {
+
+    // Given
+    let props = {...mockedProps}
+
+    // When
+    let wrapper = mount(<InfoContainer {...props}/>)
+
+    // Then
+    const renderedInfo = wrapper.find("span.mocked-info")
+    expect(renderedInfo.length).toEqual(0)
+  })
+})

frontend/web/api-doc/test/unit/components/json-schema-form.jsx

@@ -0,0 +1,257 @@
+import React from "react"
+import Immutable, { List } from "immutable"
+import { Select, Input, TextArea } from "components/layout-utils"
+import { mount, render } from "enzyme"
+import * as JsonSchemaComponents from "core/json-schema-components"
+import { JsonSchemaForm } from "core/json-schema-components"
+
+const components = {...JsonSchemaComponents, Select, Input, TextArea}
+
+const getComponentStub = (name) => {
+  if(components[name]) return components[name]
+
+  return null
+}
+
+describe("<JsonSchemaForm/>", function(){
+  describe("strings", function() {
+    it("should render the correct options for a string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "string",
+          enum: ["one", "two"]
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("option").length).toEqual(3)
+      expect(wrapper.find("option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("option").eq(1).text()).toEqual("one")
+      expect(wrapper.find("option").eq(2).text()).toEqual("two")
+    })
+
+    it("should render a string enum as disabled when JsonSchemaForm is disabled", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "string",
+          enum: ["one", "two"]
+        }),
+        disabled: true
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.attr("disabled")).toEqual("disabled")
+    })
+
+
+    it("should render the correct options for a required string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: Immutable.fromJS({
+          type: "string",
+          enum: ["one", "two"]
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("select option").length).toEqual(2)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("one")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("two")
+    })
+  })
+  describe("booleans", function() {
+    it("should render the correct options for a boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "boolean"
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("false")
+    })
+
+
+    it("should render the correct options for an enum boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "boolean",
+          enum: ["true"]
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("select option").length).toEqual(2)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("--")
+    })
+
+    it("should render the correct options for a required boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "boolean",
+          required: true
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("false")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("--")
+    })
+
+    it("should render the correct options for a required enum boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: Immutable.fromJS({
+          type: "boolean",
+          enum: ["true"]
+        })
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.get(0).name).toEqual("select")
+      expect(wrapper.find("select option").length).toEqual(1)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("true")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("true")
+    })
+  })
+  describe("objects", function() {
+    it("should render the correct editor for an OAS3 object parameter", function(){
+      let updateQueue = []
+
+      let props = {
+        getComponent: getComponentStub,
+        value: `{\n  "id": "abc123"\n}`,
+        onChange: (value) => {
+          updateQueue.push({ value })
+        },
+        keyName: "",
+        fn: {},
+        errors: List(),
+        schema: Immutable.fromJS({
+          type: "object",
+          properties: {
+            id: {
+              type: "string",
+              example: "abc123"
+            }
+          }
+        })
+      }
+
+      let wrapper = mount(<JsonSchemaForm {...props}/>)
+
+      updateQueue.forEach(newProps => wrapper.setProps(newProps))
+
+      expect(wrapper.find("textarea").length).toEqual(1)
+      expect(wrapper.find("textarea").text()).toEqual(`{\n  "id": "abc123"\n}`)
+    })
+  })
+  describe("unknown types", function() {
+    it("should render unknown types as strings", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "NotARealType"
+        })
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("input")
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+
+    it("should render unknown types as strings when a format is passed", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: Immutable.fromJS({
+          type: "NotARealType",
+          format: "NotARealFormat"
+        })
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.length).toEqual(1)
+      expect(wrapper.get(0).name).toEqual("input")
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+  })
+})

frontend/web/api-doc/test/unit/components/live-response.jsx

@@ -0,0 +1,101 @@
+import React from "react"
+import { fromJSOrdered } from "core/utils"
+import { shallow } from "enzyme"
+import Curl from "components/curl"
+import LiveResponse from "components/live-response"
+import ResponseBody from "components/response-body"
+
+describe("<LiveResponse/>", function(){
+  let request = fromJSOrdered({
+    credentials: "same-origin",
+    headers: {
+      accept: "application/xml"
+    },
+    url: "http://petstore.swagger.io/v2/pet/1"
+  })
+
+  let mutatedRequest = fromJSOrdered({
+    credentials: "same-origin",
+    headers: {
+      accept: "application/xml",
+      mutated: "header"
+    },
+    url: "http://mutated.petstore.swagger.io/v2/pet/1"
+  })
+
+  let requests = {
+    request: request,
+    mutatedRequest: mutatedRequest
+  }
+
+  const tests = [
+    { showMutatedRequest: true, expected: { request: "mutatedRequest", requestForCalls: 0, mutatedRequestForCalls: 1 } },
+    { showMutatedRequest: false, expected: { request: "request", requestForCalls: 1, mutatedRequestForCalls: 0 } }
+  ]
+
+  tests.forEach(function(test) {
+    it("passes " + test.expected.request + " to Curl when showMutatedRequest = " + test.showMutatedRequest, function() {
+
+      // Given
+
+      let response = fromJSOrdered({
+        status: 200,
+        url: "http://petstore.swagger.io/v2/pet/1",
+        headers: {
+          "content-type": "application/xml"
+        },
+        text: "<response/>",
+        duration: 50
+      })
+
+      let mutatedRequestForSpy = jest.fn().mockImplementation(function(mutatedRequest) { return mutatedRequest })
+      let requestForSpy = jest.fn().mockImplementation(function(request) { return request }) 
+
+      let components = {
+        curl: Curl,
+        responseBody: ResponseBody
+      }
+
+      let props = {
+        response: response, 
+        specSelectors: {
+          mutatedRequestFor: mutatedRequestForSpy,
+          requestFor: requestForSpy,
+        },
+        pathMethod: [ "/one", "get" ],
+        getComponent: (c) => {
+          return components[c]
+        },
+        displayRequestDuration: true,
+        getConfigs: () => ({ showMutatedRequest: test.showMutatedRequest })
+      }
+
+      // When
+      let wrapper = shallow(<LiveResponse {...props}/>)
+
+      // Then
+      expect(mutatedRequestForSpy.calls.length).toEqual(test.expected.mutatedRequestForCalls)
+      expect(requestForSpy.calls.length).toEqual(test.expected.requestForCalls)
+
+      const curl = wrapper.find(Curl)
+      expect(curl.length).toEqual(1)
+      expect(curl.props().request).toBe(requests[test.expected.request])
+
+      const expectedUrl = requests[test.expected.request].get("url")
+      expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
+
+      let duration = wrapper.find("Duration")
+      expect(duration.length).toEqual(1)
+      expect(duration.props().duration).toEqual(50)
+      expect(duration.html())
+        .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
+
+      let responseHeaders = wrapper.find("Headers")
+      expect(duration.length).toEqual(1)
+      expect(responseHeaders.props().headers.length).toEqual(1)
+      expect(responseHeaders.props().headers[0].key).toEqual("content-type")
+      expect(responseHeaders.html())
+        .toEqual("<div><h5>Response headers</h5><pre class=\"microlight\"><span class=\"headerline\"> content-type: application/xml </span></pre></div>")
+    })
+  })
+})

frontend/web/api-doc/test/unit/components/markdown.jsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { render } from "enzyme"
+import Markdown from "components/providers/markdown"
+import { Markdown as OAS3Markdown } from "corePlugins/oas3/wrap-components/markdown.jsx"
+
+describe("Markdown component", function () {
+  describe("Swagger 2.0", function () {
+    it("allows elements with class, style and data-* attribs", function () {
+      const getConfigs = () => ({ useUnsafeMarkdown: true })
+      const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
+      const el = render(<Markdown source={str} getConfigs={getConfigs} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p>\n</div>`)
+    })
+
+    it("strips class, style and data-* attribs from elements", function () {
+      const getConfigs = () => ({ useUnsafeMarkdown: false })
+      const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
+      const el = render(<Markdown source={str} getConfigs={getConfigs} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><span>ONE</span></p>\n</div>`)
+    })
+
+    it("allows td elements with colspan attrib", function () {
+      const str = `<table><tr><td>ABC</td></tr></table>`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><table><tbody><tr><td>ABC</td></tr></tbody></table></div>`)
+    })
+
+    it("allows image elements", function () {
+      const str = `![Image alt text](http://image.source "Image title")`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p>\n</div>`)
+    })
+
+    it("allows image elements with https scheme", function () {
+      const str = `![Image alt text](https://image.source "Image title")`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p>\n</div>`)
+    })
+
+    it("allows image elements with data scheme", function () {
+      const str = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p>` + str + `</p>\n</div>`)
+    })
+
+    it("allows heading elements", function () {
+      const str = `
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6>\n</div>`)
+    })
+
+    it("allows links", function () {
+      const str = `[Link](https://example.com/)`
+      const el = render(<Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="markdown"><p><a rel="noopener noreferrer" target="_blank" href="https://example.com/">Link</a></p>\n</div>`)
+    })
+  })
+
+  describe("OAS 3", function () {
+    it("allows elements with class, style and data-* attribs", function () {
+      const getConfigs = () => ({ useUnsafeMarkdown: true })
+      const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
+      const el = render(<OAS3Markdown source={str} getConfigs={getConfigs} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><span data-attr="value" style="border-width: 1px" class="method">ONE</span></p></div>`)
+    })
+
+    it("strips class, style and data-* attribs from elements", function () {
+      const getConfigs = () => ({ useUnsafeMarkdown: false })
+      const str = `<span class="method" style="border-width: 1px" data-attr="value">ONE</span>`
+      const el = render(<OAS3Markdown source={str} getConfigs={getConfigs} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><span>ONE</span></p></div>`)
+    })
+
+    it("allows image elements", function () {
+      const str = `![Image alt text](http://image.source "Image title")`
+      const el = render(<OAS3Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="http://image.source"></p></div>`)
+    })
+
+    it("allows image elements with https scheme", function () {
+      const str = `![Image alt text](https://image.source "Image title")`
+      const el = render(<OAS3Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p><img title="Image title" alt="Image alt text" src="https://image.source"></p></div>`)
+    })
+
+    it("allows image elements with data scheme", function () {
+      const str = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">`
+      const el = render(<OAS3Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><p>` + str + `</p></div>`)
+    })
+
+    it("allows heading elements", function () {
+      const str = `
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6`
+      const el = render(<OAS3Markdown source={str} />)
+      expect(el.prop("outerHTML")).toEqual(`<div class="renderedMarkdown"><h1>h1</h1>\n<h2>h2</h2>\n<h3>h3</h3>\n<h4>h4</h4>\n<h5>h5</h5>\n<h6>h6</h6></div>`)
+    })
+  })
+})

frontend/web/api-doc/test/unit/components/model-example.jsx

@@ -0,0 +1,122 @@
+import React from "react"
+import { shallow } from "enzyme"
+import ModelExample from "components/model-example"
+import ModelComponent from "components/model-wrapper"
+
+describe("<ModelExample/>", function(){
+  let components, props
+  
+  let exampleSelectedTestInputs = [
+    { defaultModelRendering: "model", isExecute: true },
+    { defaultModelRendering: "example", isExecute: true },
+    { defaultModelRendering: "example", isExecute: false },
+    { defaultModelRendering: "othervalue", isExecute: true },
+    { defaultModelRendering: "othervalue", isExecute: false }
+  ]
+  
+  let modelSelectedTestInputs = [
+    { defaultModelRendering: "model", isExecute: false }
+  ]
+
+  beforeEach(() => {
+    components = {
+      ModelWrapper: ModelComponent
+    }
+    
+    props = {
+      getComponent: (c) => {
+          return components[c]
+      },
+      specSelectors: {
+        isOAS3: () => false
+      },
+      schema: {},
+      example: "{\"example\": \"value\"}",
+      isExecute: false,
+      getConfigs: () => ({
+        defaultModelRendering: "model",
+        defaultModelExpandDepth: 1
+      })
+    }
+  })
+
+
+  it("renders model and example tabs", function(){
+    // When
+    let wrapper = shallow(<ModelExample {...props}/>)
+
+    // Then should render tabs
+    expect(wrapper.find("div > ul.tab").length).toEqual(1)
+
+    let tabs = wrapper.find("div > ul.tab").children()
+    expect(tabs.length).toEqual(2)
+    tabs.forEach((node) => {
+      expect(node.length).toEqual(1)
+      expect(node.name()).toEqual("li")
+      expect(node.hasClass("tabitem")).toEqual(true)
+    })
+    expect(tabs.at(0).text()).toEqual("Example Value")
+    expect(tabs.at(1).text()).toEqual("Model")
+  })
+
+  exampleSelectedTestInputs.forEach(function(testInputs) {
+    it("example tab is selected if isExecute = " + testInputs.isExecute + " and defaultModelRendering = " + testInputs.defaultModelRendering, function(){
+      // When
+      props.isExecute = testInputs.isExecute
+      props.getConfigs = () => ({
+        defaultModelRendering: testInputs.defaultModelRendering,
+        defaultModelExpandDepth: 1
+      })
+      let wrapper = shallow(<ModelExample {...props}/>)
+
+      // Then
+      let tabs = wrapper.find("div > ul.tab").children()
+
+      let exampleTab = tabs.at(0)
+      expect(exampleTab.hasClass("active")).toEqual(true)
+      let modelTab = tabs.at(1)
+      expect(modelTab.hasClass("active")).toEqual(false)
+
+      expect(wrapper.find("div > div").length).toEqual(1)
+      expect(wrapper.find("div > div").text()).toEqual(props.example)
+    })
+  })
+
+  modelSelectedTestInputs.forEach(function(testInputs) {
+    it("model tab is selected if isExecute = " + testInputs.isExecute + " and defaultModelRendering = " + testInputs.defaultModelRendering, function(){
+      // When
+      props.isExecute = testInputs.isExecute
+      props.getConfigs = () => ({
+        defaultModelRendering: testInputs.defaultModelRendering,
+        defaultModelExpandDepth: 1
+      })
+      let wrapper = shallow(<ModelExample {...props}/>)
+
+      // Then
+      let tabs = wrapper.find("div > ul.tab").children()
+
+      let exampleTab = tabs.at(0)
+      expect(exampleTab.hasClass("active")).toEqual(false)
+      let modelTab = tabs.at(1)
+      expect(modelTab.hasClass("active")).toEqual(true)
+
+      expect(wrapper.find("div > div").length).toEqual(1)
+      expect(wrapper.find("div > div").find(ModelComponent).props().expandDepth).toBe(1)
+    })
+  })
+
+  it("passes defaultModelExpandDepth to ModelComponent", function(){
+      // When
+      let expandDepth = 0
+      props.isExecute = false
+      props.getConfigs = () => ({
+        defaultModelRendering: "model",
+        defaultModelExpandDepth: expandDepth
+      })
+      let wrapper = shallow(<ModelExample {...props}/>)
+
+      // Then
+      expect(wrapper.find("div > div").find(ModelComponent).props().expandDepth).toBe(expandDepth)
+  })
+
+})

frontend/web/api-doc/test/unit/components/models.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { shallow } from "enzyme"
+import { fromJS, Map } from "immutable"
+import Models from "components/models"
+import ModelCollapse from "components/model-collapse"
+import ModelComponent from "components/model-wrapper"
+
+describe("<Models/>", function(){
+  const dummyComponent = () => null
+  // Given
+  let components = {
+    Collapse: ModelCollapse,
+    ModelWrapper: ModelComponent,
+    JumpToPath: dummyComponent,
+  }
+  let props = {
+    getComponent: (c) => {
+        return components[c]
+    },
+    specSelectors: {
+      isOAS3: () => false,
+      specJson: () => Map(),
+      definitions: function() {
+        return fromJS({
+          def1: {},
+          def2: {}
+        })
+      },
+      specResolvedSubtree: () => {}
+    },
+    layoutSelectors: {
+      isShown: jest.fn()
+    },
+    layoutActions: {},
+    getConfigs: () => ({
+      docExpansion: "list",
+      defaultModelsExpandDepth: 0
+    })
+  }
+
+
+  it("passes defaultModelsExpandDepth to ModelWrapper", function(){
+    // When
+    let wrapper = shallow(<Models {...props}/>)
+
+    // Then should render tabs
+    expect(wrapper.find("ModelCollapse").length).toEqual(1)
+    expect(wrapper.find("ModelWrapper").length).toBeGreaterThan(0)
+    wrapper.find("ModelComponent").forEach((modelWrapper) => {
+      expect(modelWrapper.props().expandDepth).toBe(0)
+    })
+  })
+
+})

frontend/web/api-doc/test/unit/components/object-model.jsx

@@ -0,0 +1,109 @@
+import React from "react"
+import { shallow } from "enzyme"
+import { List } from "immutable"
+import ObjectModel from "components/object-model"
+// import ModelExample from "components/model-example"
+import Immutable from "immutable"
+import Model from "components/model"
+import ModelCollapse from "components/model-collapse"
+import Property from "components/property"
+// import { inferSchema } from "corePlugins/samples/fn"
+
+describe("<ObjectModel />", function() {
+    const dummyComponent = () => null
+    const components = {
+      "JumpToPath" : dummyComponent,
+      "Markdown" : dummyComponent,
+      "Model" : Model,
+      "ModelCollapse" : ModelCollapse,
+      "Property" : Property
+    }
+    const props = {
+      getComponent: c => components[c],
+      getConfigs: () => {
+        return {
+          showExtensions: true
+        }
+      },
+      isRef : false,
+      specPath: List(),
+      schema: Immutable.fromJS(
+        {
+          "properties": {
+            // Note reverse order: c, b, a
+            c: {
+              type: "integer",
+              name: "c"
+            },
+            b: {
+              type: "boolean",
+              name: "b"
+            },
+            a: {
+              type: "string",
+              name: "a"
+            }
+          }
+        }
+      ),
+      specSelectors: {
+        isOAS3(){
+          return false
+        }
+      },
+      className: "for-test"
+    }
+    const propsNullable = {
+      ...props,
+      schema: props.schema.set("nullable", true)
+    }
+    const propsMinMaxProperties = {
+      ...props,
+      schema: props.schema.set("minProperties", 1).set("maxProperties", 5)
+    }
+
+    it("renders a collapsible header", function(){
+      const wrapper = shallow(<ObjectModel {...props}/>)
+      const renderedModelCollapse = wrapper.find(ModelCollapse)
+      expect(renderedModelCollapse.length).toEqual(1)
+    })
+
+    it("renders the object properties in order", function() {
+        const wrapper = shallow(<ObjectModel {...props}/>)
+        const renderedModel = wrapper.find(Model)
+        expect(renderedModel.length).toEqual(3)
+        expect(renderedModel.get(0).props.schema.get("name")).toEqual("c")
+        expect(renderedModel.get(1).props.schema.get("name")).toEqual("b")
+        expect(renderedModel.get(2).props.schema.get("name")).toEqual("a")
+    })
+
+    it("doesn't render `nullable` for model when it absent", function() {
+      const wrapper = shallow(<ObjectModel {...props}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(0)
+    })
+
+    it("renders `nullable` for model", function() {
+      const wrapper = shallow(<ObjectModel {...propsNullable}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(1)
+      expect(renderProperties.get(0).props.propKey).toEqual("nullable")
+      expect(renderProperties.get(0).props.propVal).toEqual(true)
+    })
+
+    it("doesn't render `minProperties` and `maxProperties` if they are absent", function() {
+      const wrapper = shallow(<ObjectModel {...props}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(0)
+    })
+
+    it("renders `minProperties` and `maxProperties` if they are defined", function() {
+      const wrapper = shallow(<ObjectModel {...propsMinMaxProperties}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(2)
+      expect(renderProperties.get(0).props.propKey).toEqual("minProperties")
+      expect(renderProperties.get(0).props.propVal).toEqual(1)
+      expect(renderProperties.get(1).props.propKey).toEqual("maxProperties")
+      expect(renderProperties.get(1).props.propVal).toEqual(5)
+    })
+})

frontend/web/api-doc/test/unit/components/online-validator-badge.jsx

@@ -0,0 +1,76 @@
+import React from "react"
+import { mount } from "enzyme"
+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://validator.swagger.io/validator/debug?url=swagger.json"
+    )
+    expect(wrapper.find("ValidatorImage").length).toEqual(1)
+    expect(wrapper.find("ValidatorImage").props().src).toEqual(
+      "https://validator.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://validator.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://validator.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://validator.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://validator.swagger.io/validator?url=http%3A%2F%2Fgoogle.com%2Fswagger.json"
+    )
+  })
+  // should resolve a definition URL against the browser's location
+
+})

frontend/web/api-doc/test/unit/components/operation-tag.jsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { shallow } from "enzyme"
+import OperationTag from "components/operation-tag"
+import Im from "immutable"
+import { Link } from "components/layout-utils"
+
+describe("<OperationTag/>", function(){
+  it("render externalDocs URL for swagger v2", function(){
+
+    const dummyComponent = () => null
+    const components = {
+      Collapse: () => dummyComponent,
+      Markdown: () => dummyComponent,
+      DeepLink: () => dummyComponent,
+      Link
+    }
+
+    let props = {
+      tagObj: Im.fromJS({
+        tagDetails: {
+          externalDocs: {
+            description: "Find out more",
+            url: "http://swagger.io"
+          }
+        }
+      }),
+      tag: "testtag",
+      getConfigs: () => ({}),
+      getComponent: c => components[c],
+      layoutSelectors: {
+        currentFilter() {
+          return null
+        },
+        isShown() {
+          return true
+        },
+        show() {
+          return true
+        }
+      }
+    }
+
+    let wrapper = shallow(<OperationTag {...props}/>)
+
+    const opblockTag = wrapper.find(".opblock-tag")
+    expect(opblockTag.length).toEqual(1)
+    expect(opblockTag.getElement().type).toEqual("h3")
+
+    const renderedLink = wrapper.find("Link")
+    expect(renderedLink.length).toEqual(1)
+    expect(renderedLink.props().href).toEqual("http://swagger.io")
+  })
+})

frontend/web/api-doc/test/unit/components/operation.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { shallow } from "enzyme"
+import Operation from "components/operation"
+
+describe("<Operation/>", function(){
+  it.skip("blanket tests", function(){
+
+    let props = {
+      operation: {get: ()=>{}},
+      getComponent: ()=> "div",
+      specSelectors: { security(){} },
+      path: "/one",
+      method: "get",
+      shown: true,
+      showOpId: "",
+      showOpIdPrefix: "",
+      toggleCollapse: jest.fn()
+    }
+
+    let wrapper = shallow(<Operation {...props}/>)
+
+    expect(wrapper.find(".opblock").length).toEqual(1)
+    expect(wrapper.find(".opblock-summary-method").text()).toEqual("GET")
+    expect(wrapper.find(".opblock-summary-path").text().trim()).toEqual("/one")
+    expect(wrapper.find("[isOpened]").prop("isOpened")).toEqual(true)
+
+    wrapper.find(".opblock-summary").simulate("click")
+    expect(props.toggleCollapse).toHaveBeenCalled()
+  })
+})

frontend/web/api-doc/test/unit/components/operations.jsx

@@ -0,0 +1,126 @@
+import React from "react"
+import { render } from "enzyme"
+import { fromJS } from "immutable"
+import DeepLink from "components/deep-link"
+import Operations from "components/operations"
+import {Collapse} from "components/layout-utils"
+
+const components = {
+  Collapse,
+  DeepLink,
+  OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />,
+  OperationTag: "div",
+}
+
+describe("<Operations/>", function(){
+  it("should render a Swagger2 `get` method, but not a `trace` or `foo` method", function(){
+
+    let props = {
+      fn: {},
+      specActions: {},
+      layoutActions: {},
+      getComponent: (name)=> {
+        return components[name] || null
+      },
+      getConfigs: () => {
+        return {}
+      },
+      specSelectors: {
+        isOAS3() { return false },
+        url() { return "https://petstore.swagger.io/v2/swagger.json" },
+        taggedOperations() {
+          return fromJS({
+          "default": {
+            "operations": [
+              {
+                "path": "/pets/{id}",
+                "method": "get"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "trace"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "foo"
+              },
+            ]
+          }
+        })
+        },
+      },
+      layoutSelectors: {
+        currentFilter() {
+          return null
+        },
+        isShown() {
+          return true
+        },
+        show() {
+          return true
+        }
+      }
+    }
+
+    let wrapper = render(<Operations {...props}/>)
+
+    expect(wrapper.find("span.mocked-op").length).toEqual(1)
+    expect(wrapper.find("span.mocked-op").eq(0).attr("id")).toEqual("/pets/{id}-get")
+  })
+
+  it("should render an OAS3 `get` and `trace` method, but not a `foo` method", function(){
+
+    let props = {
+      fn: {},
+      specActions: {},
+      layoutActions: {},
+      getComponent: (name)=> {
+        return components[name] || null
+      },
+      getConfigs: () => {
+        return {}
+      },
+      specSelectors: {
+        isOAS3() { return true },
+        url() { return "https://petstore.swagger.io/v2/swagger.json" },
+        taggedOperations() {
+          return fromJS({
+          "default": {
+            "operations": [
+              {
+                "path": "/pets/{id}",
+                "method": "get"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "trace"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "foo"
+              },
+            ]
+          }
+        })
+        },
+      },
+      layoutSelectors: {
+        currentFilter() {
+          return null
+        },
+        isShown() {
+          return true
+        },
+        show() {
+          return true
+        }
+      }
+    }
+
+    let wrapper = render(<Operations {...props}/>)
+
+    expect(wrapper.find("span.mocked-op").length).toEqual(2)
+    expect(wrapper.find("span.mocked-op").eq(0).attr("id")).toEqual("/pets/{id}-get")
+    expect(wrapper.find("span.mocked-op").eq(1).attr("id")).toEqual("/pets/{id}-trace")
+  })
+})

frontend/web/api-doc/test/unit/components/parameter-row.jsx

@@ -0,0 +1,257 @@
+import React from "react"
+import { List, fromJS } from "immutable"
+import { render } from "enzyme"
+import ParameterRow from "components/parameter-row"
+
+describe("<ParameterRow/>", () => {
+  const createProps = ({ param, isOAS3 }) => ({
+    getComponent: () => "div",
+    specSelectors: {
+      parameterWithMetaByIdentity: () => param,
+      isOAS3: () => isOAS3,
+      isSwagger2: () => !isOAS3
+    },
+    oas3Selectors: { activeExamplesMember: () => {} },
+    param,
+    rawParam: param,
+    pathMethod: [],
+    getConfigs: () => ({})
+  })
+
+  it("Can render Swagger 2 parameter type with format", () => {
+    const param = fromJS({
+      name: "petUuid",
+      in: "path",
+      description: "UUID that identifies a pet",
+      type: "string",
+      format: "uuid"
+    })
+
+    const props = createProps({ param, isOAS3: false })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("string($uuid)")
+  })
+
+  it("Can render Swagger 2 parameter type without format", () => {
+    const param = fromJS({
+      name: "petId",
+      in: "path",
+      description: "ID that identifies a pet",
+      type: "string"
+    })
+
+    const props = createProps({ param, isOAS3: false })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("string")
+  })
+
+  it("Can render Swagger 2 parameter type boolean without format", () => {
+    const param = fromJS({
+      name: "hasId",
+      in: "path",
+      description: "boolean value to indicate if the pet has an id",
+      type: "boolean"
+    })
+
+    const props = createProps({ param, isOAS3: false })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("boolean")
+  })
+
+  it("Can render OAS3 parameter type with format", () => {
+    const param = fromJS({
+      name: "petUuid",
+      in: "path",
+      description: "UUID that identifies a pet",
+      schema: {
+        type: "string",
+        format: "uuid"
+      }
+    })
+
+    const props = createProps({ param, isOAS3: true })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("string($uuid)")
+  })
+
+  it("Can render OAS3 parameter type without format", () => {
+    const param = fromJS({
+      name: "petId",
+      in: "path",
+      description: "ID that identifies a pet",
+      schema: {
+        type: "string"
+      }
+    })
+
+    const props = createProps({ param, isOAS3: true })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("string")
+  })
+
+  it("Can render OAS3 parameter type boolean without format", () => {
+    const param = fromJS({
+      name: "hasId",
+      in: "path",
+      description: "boolean value to indicate if the pet has an id",
+      schema: {
+        type: "boolean"
+      }
+    })
+
+    const props = createProps({ param, isOAS3: true })
+    const wrapper = render(<ParameterRow {...props}/>)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("boolean")
+  })
+})
+
+describe("bug #5573: zero default and example values", function () {
+  it("should apply a Swagger 2.0 default value of zero", function () {
+    const paramValue = fromJS({
+      description: "a pet",
+      type: "integer",
+      default: 0
+    })
+
+    let props = {
+      getComponent: () => "div",
+      specSelectors: {
+        security() { },
+        parameterWithMetaByIdentity() { return paramValue },
+        isOAS3() { return false },
+        isSwagger2() { return true }
+      },
+      fn: {},
+      operation: { get: () => { } },
+      onChange: jest.fn(),
+      param: paramValue,
+      rawParam: paramValue,
+      onChangeConsumes: () => { },
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props} />)
+
+    expect(props.onChange).toHaveBeenCalled()
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "0", false)
+  })
+  it("should apply a Swagger 2.0 example value of zero", function () {
+    const paramValue = fromJS({
+      description: "a pet",
+      type: "integer",
+      schema: {
+        example: 0
+      }
+    })
+
+    let props = {
+      getComponent: () => "div",
+      specSelectors: {
+        security() { },
+        parameterWithMetaByIdentity() { return paramValue },
+        isOAS3() { return false },
+        isSwagger2() { return true }
+      },
+      fn: {},
+      operation: { get: () => { } },
+      onChange: jest.fn(),
+      param: paramValue,
+      rawParam: paramValue,
+      onChangeConsumes: () => { },
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props} />)
+
+    expect(props.onChange).toHaveBeenCalled()
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "0", false)
+  })
+  it("should apply an OpenAPI 3.0 default value of zero", function () {
+    const paramValue = fromJS({
+      description: "a pet",
+      schema: {
+        type: "integer",
+        default: 0
+      }
+    })
+
+    let props = {
+      getComponent: () => "div",
+      specSelectors: {
+        security() { },
+        parameterWithMetaByIdentity() { return paramValue },
+        isOAS3() { return true },
+        isSwagger2() { return false }
+      },
+      oas3Selectors: {
+        activeExamplesMember: () => null
+      },
+      fn: {},
+      operation: { get: () => { } },
+      onChange: jest.fn(),
+      param: paramValue,
+      rawParam: paramValue,
+      onChangeConsumes: () => { },
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props} />)
+
+    expect(props.onChange).toHaveBeenCalled()
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "0", false)
+  })
+  it("should apply an OpenAPI 3.0 example value of zero", function () {
+    const paramValue = fromJS({
+      description: "a pet",
+      schema: {
+        type: "integer",
+        example: 0
+      }
+    })
+
+    let props = {
+      getComponent: () => "div",
+      specSelectors: {
+        security() { },
+        parameterWithMetaByIdentity() { return paramValue },
+        isOAS3() { return true },
+        isSwagger2() { return false }
+      },
+      oas3Selectors: {
+        activeExamplesMember: () => null
+      },
+      fn: {},
+      operation: { get: () => { } },
+      onChange: jest.fn(),
+      param: paramValue,
+      rawParam: paramValue,
+      onChangeConsumes: () => { },
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props} />)
+
+    expect(props.onChange).toHaveBeenCalled()
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "0", false)
+  })
+})

frontend/web/api-doc/test/unit/components/primitive-model.jsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { shallow } from "enzyme"
+import { fromJS } from "immutable"
+import PrimitiveModel from "components/primitive-model"
+import ModelCollapse from "components/model-collapse"
+
+describe("<PrimitiveModel/>", function () {
+    const dummyComponent = () => null
+    const components = {
+      Markdown: dummyComponent,
+      EnumModel: dummyComponent,
+      Property: dummyComponent,
+      "ModelCollapse" : ModelCollapse,
+    }
+    const props = {
+      getComponent: c => components[c],
+      getConfigs: () => ({
+        showExtensions: false
+      }),
+      name: "Name from props",
+      depth: 1,
+      schema: fromJS({
+        type: "string",
+        title: "Custom model title"
+      }),
+      expandDepth: 1
+    }
+
+    it("renders the schema's title", function () {
+      // When
+      const wrapper = shallow(<PrimitiveModel {...props} />)
+      const modelTitleEl = wrapper.find("ModelCollapse").prop("title").props.children.props.children
+
+      expect(modelTitleEl).toEqual("Custom model title")
+    })
+
+    it("falls back to the passed-in `name` prop for the title", function () {
+      // When
+      props.schema = fromJS({
+        type: "string"
+      })
+      const wrapper = shallow(<PrimitiveModel {...props} />)
+      const modelTitleEl = wrapper.find("ModelCollapse").prop("title").props.children.props.children
+
+      // Then
+      expect(modelTitleEl).toEqual("Name from props")
+
+    })
+
+    it("renders a collapsible header", function(){
+      const wrapper = shallow(<PrimitiveModel {...props}/>)
+      const renderedModelCollapse = wrapper.find(ModelCollapse)
+      expect(renderedModelCollapse.length).toEqual(1)
+    })
+})

frontend/web/api-doc/test/unit/components/response-body.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { shallow } from "enzyme"
+import ResponseBody from "components/response-body"
+
+describe("<ResponseBody />", function () {
+  const highlightCodeComponent = () => null
+  const components = {
+    highlightCode: highlightCodeComponent
+  }
+  const props = {
+    getComponent: c => components[c],
+  }
+
+  it("renders ResponseBody as 'application/json'", function () {
+    props.contentType = "application/json"
+    props.content = "{\"key\": \"a test value\"}"
+    const wrapper = shallow(<ResponseBody {...props} />)
+    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
+  })
+
+  it("renders ResponseBody as 'text/html'", function () {
+    props.contentType = "application/json"
+    props.content = "<b>Result</b>"
+    const wrapper = shallow(<ResponseBody {...props} />)
+    expect(wrapper.find("highlightCodeComponent").length).toEqual(1)
+  })
+
+  it("renders ResponseBody as 'image/svg'", function () {
+    props.contentType = "image/svg"
+    const wrapper = shallow(<ResponseBody {...props} />)
+    console.warn(wrapper.debug())
+    expect(wrapper.find("highlightCodeComponent").length).toEqual(0)
+  })
+
+  it("should render a copyable highlightCodeComponent for text types", function () {
+    props.contentType = "text/plain"
+    props.content = "test text"
+    const wrapper = shallow(<ResponseBody {...props} />)
+    console.warn(wrapper.debug())
+    expect(wrapper.find("highlightCodeComponent[canCopy]").length).toEqual(1)
+  })
+})

frontend/web/api-doc/test/unit/components/response.jsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { shallow } from "enzyme"
+import { fromJS, List } from "immutable"
+import Response from "components/response"
+import ModelExample from "components/model-example"
+import { inferSchema } from "corePlugins/samples/fn"
+
+describe("<Response />", function () {
+  const dummyComponent = () => null
+  const components = {
+    headers: dummyComponent,
+    highlightCode: dummyComponent,
+    modelExample: ModelExample,
+    Markdown: dummyComponent,
+    operationLink: dummyComponent,
+    contentType: dummyComponent
+  }
+  const props = {
+    getComponent: c => components[c],
+    getConfigs: () => {
+      return {}
+    },
+    specSelectors: {
+      isOAS3() {
+        return false
+      }
+    },
+    fn: {
+      inferSchema
+    },
+    contentType: "application/json",
+    className: "for-test",
+    specPath: List(),
+    response: fromJS({
+      schema: {
+        type: "object",
+        properties: {
+          // Note reverse order: c, b, a
+          "c": {
+            type: "integer"
+          },
+          "b": {
+            type: "boolean"
+          },
+          "a": {
+            type: "string"
+          }
+        }
+      }
+    }),
+    code: "200"
+  }
+
+  it("renders the model-example schema properties in order", function () {
+    const wrapper = shallow(<Response {...props} />)
+    const renderedModelExample = wrapper.find(ModelExample)
+    expect(renderedModelExample.length).toEqual(1)
+
+    // Assert the schema's properties have maintained their order
+    const modelExampleSchemaProperties = renderedModelExample.props().schema.toJS().properties
+    expect(Object.keys(modelExampleSchemaProperties)).toEqual(["c", "b", "a"])
+  })
+})

frontend/web/api-doc/test/unit/components/schemes-wrapper.jsx

@@ -0,0 +1,88 @@
+import React from "react"
+import { mount } from "enzyme"
+import { fromJS } from "immutable"
+import SchemesContainer from "containers/schemes"
+import Schemes from "components/schemes"
+import { Col } from "components/layout-utils"
+
+describe("<SchemesContainer/>", function(){
+
+  const components = {
+    schemes: Schemes,
+    Col,
+    authorizeBtn: () => <span className="mocked-button" id="mocked-button" />
+  }
+  const mockedProps = {
+    specSelectors: {
+      securityDefinitions() {},
+      operationScheme() {},
+      schemes() {}
+    },
+    specActions: {
+      setScheme() {}
+    },
+    getComponent: c => components[c]
+  }
+  const twoSecurityDefinitions = {
+    "petstore_auth": {
+      "type": "oauth2",
+      "authorizationUrl": "http://petstore.swagger.io/oauth/dialog",
+      "flow": "implicit",
+      "scopes": {
+        "write:pets": "modify pets in your account",
+        "read:pets": "read your pets"
+      }
+    },
+    "api_key": {
+      "type": "apiKey",
+      "name": "api_key",
+      "in": "header"
+    }
+  }
+
+  it("renders Schemes inside SchemesContainer if schemes are provided", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.specSelectors = {...mockedProps.specSelectors}
+    props.specSelectors.operationScheme = function() {return "http"}
+    props.specSelectors.schemes = function() {return fromJS(["http", "https"])}
+
+    // When
+    let wrapper = mount(<SchemesContainer {...props}/>)
+
+    // Then
+    const renderedSchemes = wrapper.find(Schemes)
+    expect(renderedSchemes.length).toEqual(1)
+  })
+
+  it("does not render Schemes inside SchemeWrapper if empty array of schemes is provided", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.specSelectors = {...mockedProps.specSelectors}
+    props.specSelectors.schemes = function() {return fromJS([])}
+
+    // When
+    let wrapper = mount(<SchemesContainer {...props}/>)
+
+    // Then
+    const renderedSchemes = wrapper.find(Schemes)
+    expect(renderedSchemes.length).toEqual(0)
+  })
+
+  it("does not render Schemes inside SchemeWrapper if provided schemes are undefined", function(){
+
+    // Given
+    let props = {...mockedProps}
+    props.specSelectors = {...mockedProps.specSelectors}
+    props.specSelectors.schemes = function() {return undefined}
+
+    // When
+    let wrapper = mount(<SchemesContainer {...props}/>)
+
+    // Then
+    const renderedSchemes = wrapper.find(Schemes)
+    expect(renderedSchemes.length).toEqual(0)
+  })
+})

frontend/web/api-doc/test/unit/components/schemes.jsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { shallow } from "enzyme"
+import { fromJS } from "immutable"
+import Schemes from "components/schemes"
+
+describe("<Schemes/>", function(){
+  it("calls props.specActions.setScheme() when no currentScheme is selected", function(){
+
+    let setSchemeSpy = jest.fn()
+
+    // Given
+    let props = {
+      specActions: {
+        setScheme: setSchemeSpy
+      },
+      schemes: fromJS([
+        "http",
+        "https"
+      ]),
+      currentScheme: undefined,
+      path: "/test",
+      method: "get"
+    }
+
+    // When
+    let wrapper = shallow(<Schemes {...props}/>)
+
+    // Then currentScheme should default to first scheme in options list
+    expect(props.specActions.setScheme).toHaveBeenCalledWith("http", "/test" , "get")
+
+    // When the currentScheme is no longer in the list of options
+    props.schemes = fromJS([
+      "https"
+    ])
+    wrapper.setProps(props)
+
+    // Then currentScheme should default to first scheme in options list, again
+    expect(props.specActions.setScheme).toHaveBeenCalledWith("https", "/test", "get")
+  })
+
+  it("doesn't call props.specActions.setScheme() when schemes hasn't changed", function(){
+
+    let setSchemeSpy = jest.fn()
+
+    // Given
+    let props = {
+      specActions: {
+        setScheme: setSchemeSpy
+      },
+      schemes: fromJS([
+        "http",
+        "https"
+      ]),
+      currentScheme: "https"
+    }
+
+    // When
+    let wrapper = shallow(<Schemes {...props}/>)
+
+    // Should be called initially, to set the global state
+    expect(setSchemeSpy.mock.calls.length).toEqual(1)
+
+    // After an update
+    wrapper.instance().UNSAFE_componentWillReceiveProps(props)
+
+    // Should not be called again, since `currentScheme` is in schemes
+    expect(setSchemeSpy.mock.calls.length).toEqual(1)
+  })
+})

frontend/web/api-doc/test/unit/components/version-pragma-filter.jsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { shallow } from "enzyme"
+import VersionPragmaFilter from "components/version-pragma-filter"
+
+describe("<VersionPragmaFilter/>", function(){
+  it("renders children for a Swagger 2 definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={true} isOAS3={false}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders children for an OpenAPI 3 definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={false} isOAS3={true}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders children when a bypass prop is set", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter bypass>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders the correct message for an ambiguous-version definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={true} isOAS3={true}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div.version-pragma__message--ambiguous").length).toEqual(1)
+    expect(wrapper.find("div.version-pragma__message--missing").length).toEqual(0)
+  })
+  it("renders the correct message for a missing-version definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={false} isOAS3={false}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div.version-pragma__message--missing").length).toEqual(1)
+    expect(wrapper.find("div.version-pragma__message--ambiguous").length).toEqual(0)
+  })
+
+})