housekeeping: factor out components for easier BaseLayout reuse (#4604)
* improve: wrap schemes to encapsulate rendering logic * improve: wrap filter to encapsulate rendering logic * improve: wrap info section to encapsulate rendering logic * improve: wrap servers plugin to encapsulate rendering logic * improve: added tests for schemes-wrapper rendering logic * improve: added tests for info-wrapper rendering logic, also do not render info if info is undefined * improve: added tests for filter rendering logic * improve: added tests for servers-wrapper rendering logic * `InfoWrapper` -> `InfoContainer` * add `containers` alias to Babel configuration * `SchemesWrapper` -> `SchemesContainer` * drop `container` from container file names * `ServersWrapper` -> `ServersContainer` * `Filter` -> `FilterContainer` * follow `core/containers` pattern in BasePreset
This commit is contained in:
Sofiia
65
test/components/filter.js
Normal file
65
test/components/filter.js
Normal file
@@ -0,0 +1,65 @@
|
||||
|
||||
/* eslint-env mocha */
|
||||
import React from "react"
|
||||
import expect from "expect"
|
||||
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)
|
||||
})
|
||||
})
|
||||
67
test/components/info-wrapper.js
Normal file
67
test/components/info-wrapper.js
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
/* eslint-env mocha */
|
||||
import React from "react"
|
||||
import expect from "expect"
|
||||
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 () {}
|
||||
},
|
||||
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)
|
||||
})
|
||||
})
|
||||
119
test/components/schemes-wrapper.js
Normal file
119
test/components/schemes-wrapper.js
Normal file
@@ -0,0 +1,119 @@
|
||||
|
||||
/* eslint-env mocha */
|
||||
import React from "react"
|
||||
import expect from "expect"
|
||||
import { mount, render } 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)
|
||||
})
|
||||
|
||||
it("renders AuthorizeBtn inside SchemesContainer if security definition is provided", function(){
|
||||
|
||||
// Given
|
||||
let props = {...mockedProps}
|
||||
props.specSelectors = {...mockedProps.specSelectors}
|
||||
props.specSelectors.securityDefinitions = function () {return fromJS(twoSecurityDefinitions)}
|
||||
|
||||
// When
|
||||
let wrapper = render(<SchemesContainer {...props}/>)
|
||||
|
||||
// Then
|
||||
const renderedAuthorizeBtn = wrapper.find("span.mocked-button")
|
||||
expect(renderedAuthorizeBtn.length).toEqual(1)
|
||||
})
|
||||
|
||||
it("does not render AuthorizeBtn if security definition is not provided", function(){
|
||||
|
||||
// Given
|
||||
let props = {...mockedProps}
|
||||
|
||||
// When
|
||||
let wrapper = render(<SchemesContainer {...props}/>)
|
||||
|
||||
// Then
|
||||
const renderedAuthorizeBtn = wrapper.find("span.mocked-button")
|
||||
expect(renderedAuthorizeBtn.length).toEqual(0)
|
||||
})
|
||||
})
|
||||
77
test/core/plugins/oas3/servers-wrapper.js
Normal file
77
test/core/plugins/oas3/servers-wrapper.js
Normal file
@@ -0,0 +1,77 @@
|
||||
|
||||
/* eslint-env mocha */
|
||||
import React from "react"
|
||||
import expect from "expect"
|
||||
import { mount } from "enzyme"
|
||||
import { fromJS } from "immutable"
|
||||
import ServersContainer from "core/plugins/oas3/components/servers-container"
|
||||
import Servers from "core/plugins/oas3/components/servers"
|
||||
import { Col } from "components/layout-utils"
|
||||
|
||||
describe("<ServersContainer/>", function(){
|
||||
|
||||
const components = {
|
||||
Servers,
|
||||
Col
|
||||
}
|
||||
const mockedProps = {
|
||||
specSelectors: {
|
||||
servers() {}
|
||||
},
|
||||
oas3Selectors: {
|
||||
selectedServer() {},
|
||||
serverVariableValue() {},
|
||||
serverEffectiveValue() {}
|
||||
},
|
||||
oas3Actions: {
|
||||
setSelectedServer() {},
|
||||
setServerVariableValue() {}
|
||||
},
|
||||
getComponent: c => components[c]
|
||||
}
|
||||
|
||||
it("renders Servers inside ServersContainer if servers are provided", function(){
|
||||
|
||||
// Given
|
||||
let props = {...mockedProps}
|
||||
props.specSelectors = {...mockedProps.specSelectors}
|
||||
props.specSelectors.servers = function() {return fromJS([{url: "http://server1.com"}])}
|
||||
props.oas3Selectors = {...mockedProps.oas3Selectors}
|
||||
props.oas3Selectors.selectedServer = function() {return "http://server1.com"}
|
||||
|
||||
// When
|
||||
let wrapper = mount(<ServersContainer {...props}/>)
|
||||
|
||||
// Then
|
||||
const renderedServers = wrapper.find(Servers)
|
||||
expect(renderedServers.length).toEqual(1)
|
||||
})
|
||||
|
||||
it("does not render Servers inside ServersContainer if servers are empty", function(){
|
||||
|
||||
// Given
|
||||
let props = {...mockedProps}
|
||||
props.specSelectors = {...mockedProps.specSelectors}
|
||||
props.specSelectors.servers = function() {return fromJS([])}
|
||||
|
||||
// When
|
||||
let wrapper = mount(<ServersContainer {...props}/>)
|
||||
|
||||
// Then
|
||||
const renderedServers = wrapper.find(Servers)
|
||||
expect(renderedServers.length).toEqual(0)
|
||||
})
|
||||
|
||||
it("does not render Servers inside ServersContainer if servers are undefined", function(){
|
||||
|
||||
// Given
|
||||
let props = {...mockedProps}
|
||||
|
||||
// When
|
||||
let wrapper = mount(<ServersContainer {...props}/>)
|
||||
|
||||
// Then
|
||||
const renderedServers = wrapper.find(Servers)
|
||||
expect(renderedServers.length).toEqual(0)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user