Merge branch 'master' into array-model-markdown-description

.github/issue_template.md

@@ -1,3 +1,63 @@
-When reporting an issue, please provide the following details:
+<!---
-- swagger-ui version
+Thanks for filing an issue 😄 ! Before you submit, please read the following:
-- a swagger file reproducing the issue
+
+Search open/closed issues before submitting since someone might have asked the same thing before!
+
+Issues on GitHub are only related to problems of Swagger-UI itself. We'll try to offer support
+here for your use case, but we can't offer help with projects that use Swagger-UI indirectly,
+like Springfox or swagger-node.
+
+Likewise, we can't accept features or bugs in the Swagger/OpenAPI specifications themselves,
+or anything that violates the specifications.
+
+-->
+
+<!--- Provide a general summary of the issue in the title above -->
+
+
+| Q                               | A
+| ------------------------------- | -------
+| Bug or feature request?         |  
+| Which Swagger/OpenAPI version?  |
+| Which Swagger-UI version?       |
+| How did you install Swagger-UI? | 
+| Which broswer & version?        |
+| Which operating system?         | 
+
+
+### Demonstration API definition
+<!--- If you're describing a bug, please provide an API definition that reproduces your problem -->
+<!--- If you have link to a demo repo please link that! -->
+
+<!--- If your spec is large, please put it into a Gist (https://gist.github.com) instead of pasting it here. -->
+
+```yaml
+your: "API definition goes here"
+```
+
+### Configuration (browser query string, constructor, config.yaml)
+<!--- If describing a bug, tell us what your configuration looks like -->
+
+```js
+{
+  "your": { "constructorConfig": "here" }
+}
+```
+
+`?yourQueryStringConfig=here`
+
+### Expected Behavior
+<!--- If you're describing a bug, tell us what should happen -->
+<!--- If you're suggesting a change/improvement, tell us how it should work -->
+
+### Current Behavior
+<!--- If describing a bug, tell us what happens instead of the expected behavior -->
+<!--- If suggesting a change/improvement, explain the difference from current behavior -->
+
+### Possible Solution
+<!--- Not obligatory, but suggest a fix/reason for the bug, -->
+<!--- or ideas how to implement the addition or change -->
+
+### Context
+<!--- How has this issue affected you? What are you trying to accomplish? -->
+<!--- Providing context helps us come up with a solution that is most useful in the real world -->

.gitignore

@@ -6,3 +6,5 @@ npm-debug.log*
 .eslintcache
 package-lock.json
 *.iml
+selenium-debug.log
+test/e2e/db.json

README.md

@@ -59,6 +59,15 @@ If you'd like to make modifications to the codebase, run the dev server with: `n
 
 If you'd like to rebuild the `/dist` folder with your codebase changes, run `npm run build`.
 
+
+##### Integration Tests
+
+You will need JDK of version 7 or higher as instructed here
+http://nightwatchjs.org/gettingstarted#selenium-server-setup
+
+Integration tests can be run locally with `npm run e2e` - be sure you aren't running a dev server when testing!
+
+
 ##### Browser support
 Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE11.
 

make-webpack-config.js

@@ -1,9 +1,10 @@
 var path = require("path")
 
-var webpack = require("webpack")
+var webpack = require('webpack')
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var deepExtend = require("deep-extend")
+const CopyWebpackPlugin = require('copy-webpack-plugin')
-const {gitDescribeSync} = require("git-describe")
+var deepExtend = require('deep-extend')
+const {gitDescribeSync} = require('git-describe')
 const os = require("os")
 
 var pkg = require("./package.json")
@@ -60,7 +61,8 @@ module.exports = function(rules, options) {
     }))
   }
 
-  if( specialOptions.minimize ) {
+  if( specialOptions.minimize ) {   // production mode
+
     plugins.push(
       new webpack.optimize.UglifyJsPlugin({
         sourceMap: true,
@@ -74,6 +76,8 @@ module.exports = function(rules, options) {
 
     plugins.push( new webpack.NoEmitOnErrorsPlugin())
 
+  } else {    // development mode
+    plugins.push(new CopyWebpackPlugin([ { from: 'test/e2e/specs', to: 'test-specs' } ]))
   }
 
   plugins.push(

package.json

@@ -32,7 +32,11 @@
     "test": "npm run lint-errors && npm run just-test-in-node",
     "test-in-node": "npm run lint-errors && npm run just-test-in-node",
     "just-test": "karma start --config karma.conf.js",
-    "just-test-in-node": "mocha --recursive --compilers js:babel-core/register test/core test/components test/bugs test/swagger-ui-dist-package"
+    "just-test-in-node": "mocha --recursive --compilers js:babel-core/register test/core test/components test/bugs test/swagger-ui-dist-package",
+    "test-e2e": "sleep 3 && nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json",
+    "e2e-initial-render": "nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json --group initial-render",
+    "mock-api": "json-server --watch test/e2e/db.json --port 3204",
+    "e2e": "npm-run-all --parallel -r hot-server mock-api test-e2e"
   },
   "dependencies": {
     "base64-js": "^1.2.0",
@@ -90,6 +94,8 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
     "babel-runtime": "^6.23.0",
+    "chromedriver": "^2.30.1",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "0.28.4",
     "deep-extend": "^0.5.0",
     "deepmerge": "^1.3.2",
@@ -100,9 +106,9 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "0.11.2",
     "git-describe": "^4.0.1",
-    "html-webpack-plugin": "^2.28.0",
     "imports-loader": "0.7.1",
     "json-loader": "0.5.4",
+    "json-server": "^0.11.0",
     "karma": "^1.7.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
@@ -111,6 +117,7 @@
     "less": "2.7.2",
     "license-checker": "^11.0.0",
     "mocha": "^3.4.2",
+    "nightwatch": "^0.9.16",
     "node-sass": "^4.5.0",
     "npm-run-all": "4.0.2",
     "null-loader": "0.1.1",
@@ -121,6 +128,7 @@
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.0",
     "sass-loader": "^6.0.2",
+    "selenium-server-standalone-jar": "3.4.0",
     "standard": "^10.0.2",
     "standard-loader": "^6.0.1",
     "style-loader": "0.18.2",

src/core/components/layouts/base.jsx

@@ -69,7 +69,10 @@ export default class BaseLayout extends React.Component {
               <div className="scheme-container">
                 <Col className="schemes wrapper" mobile={12}>
                   { schemes && schemes.size ? (
-                    <Schemes schemes={ schemes } specActions={ specActions } />
+                    <Schemes
+                      currentScheme={specSelectors.operationScheme()}
+                      schemes={ schemes }
+                      specActions={ specActions } />
                   ) : null }
 
                   { securityDefinitions ? (

src/core/components/operation.jsx

@@ -229,7 +229,7 @@ export default class Operation extends PureComponent {
                              path={ path }
                              method={ method }
                              specActions={ specActions }
-                             operationScheme={ operationScheme } />
+                             currentScheme={ operationScheme } />
                   </div> : null
               }
 

src/core/components/response.jsx

@@ -122,10 +122,10 @@ export default class Response extends React.Component {
 
 
         </td>
-        {specSelectors.isOAS3() ? <td>
+        {specSelectors.isOAS3() ? <td className="col response-col_links">
           { links ?
             links.toSeq().map((link, key) => {
-              return <OperationLink key={key} name={key} link={ link }/>
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
             })
           : <i>No links</i>}
         </td> : null}

src/core/components/responses.jsx

@@ -68,7 +68,7 @@ export default class Responses extends React.Component {
               <tr className="responses-header">
                 <td className="col col_header response-col_status">Code</td>
                 <td className="col col_header response-col_description">Description</td>
-                { specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
               </tr>
             </thead>
             <tbody>

src/core/components/schemes.jsx

@@ -6,9 +6,9 @@ export default class Schemes extends React.Component {
   static propTypes = {
     specActions: PropTypes.object.isRequired,
     schemes: PropTypes.object.isRequired,
+    currentScheme: PropTypes.string.isRequired,
     path: PropTypes.string,
     method: PropTypes.string,
-    operationScheme: PropTypes.string
   }
 
   componentWillMount() {
@@ -19,8 +19,8 @@ export default class Schemes extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
+    if ( !this.props.currentScheme || !nextProps.schemes.includes(this.props.currentScheme) ) {
-      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+      // if we don't have a selected currentScheme or if our selected scheme is no longer an option,
       // then fire 'change' event and select the first scheme in the list of options
       this.setScheme(nextProps.schemes.first())
     }

src/core/plugins/oas3/components/operation-link.jsx

@@ -4,19 +4,24 @@ import ImPropTypes from "react-immutable-proptypes"
 
 class OperationLink extends Component {
   render() {
-    const { link, name } = this.props
+    const { link, name, getComponent } = this.props
+
+    const Markdown = getComponent("Markdown")
 
     let targetOp = link.get("operationId") || link.get("operationRef")
     let parameters = link.get("parameters") && link.get("parameters").toJS()
     let description = link.get("description")
 
-    return <span>
+    return <div style={{ marginBottom: "1.5em" }}>
-      <div style={{ padding: "5px 2px" }}>{name}{description ? `: ${description}` : ""}</div>
+      <div style={{ marginBottom: ".5em" }}>
+        <b><code>{name}</code></b>
+        { description ? <Markdown source={description}></Markdown> : null }
+      </div>
       <pre>
         Operation `{targetOp}`<br /><br />
         Parameters {padString(0, JSON.stringify(parameters, null, 2)) || "{}"}<br />
       </pre>
-    </span>
+    </div>
   }
 
 }
@@ -30,6 +35,7 @@ function padString(n, string) {
 }
 
 OperationLink.propTypes = {
+  getComponent: PropTypes.func.isRequired,
   link: ImPropTypes.orderedMap.isRequired,
   name: PropTypes.String
 }

src/style/_layout.scss

@@ -522,6 +522,22 @@
     }
 }
 
+.response-col_links
+{
+    padding-left: 2em;
+    max-width: 40em;
+    font-size: 14px;
+
+    @include text_body();
+
+    .response-undocumented
+    {
+        font-size: 11px;
+
+        @include text_code(#999);
+    }
+}
+
 .response-col_description__inner
 {
     span

src/style/_table.scss

@@ -52,7 +52,8 @@ table
 
                 &:first-of-type
                 {
-                    width: 20%;
+                    max-width: 20%;
+                    min-width: 6em;
                     padding: 10px 0;
                 }
             }

test/components/schemes.js

@@ -7,35 +7,66 @@ import { fromJS } from "immutable"
 import Schemes from "components/schemes"
 
 describe("<Schemes/>", function(){
-  it("calls props.specActions.setScheme() when no operationScheme is selected", function(){
+  it("calls props.specActions.setScheme() when no currentScheme is selected", function(){
+
+    let setSchemeSpy = createSpy()
 
     // Given
     let props = {
       specActions: {
-        setScheme: createSpy()
+        setScheme: setSchemeSpy
       },
       schemes: fromJS([
         "http",
         "https"
       ]),
-      operationScheme: undefined,
+      currentScheme: undefined,
       path: "/test",
       method: "get"
     }
-    
+
     // When
     let wrapper = shallow(<Schemes {...props}/>)
 
-    // Then operationScheme should default to first scheme in options list
+    // Then currentScheme should default to first scheme in options list
     expect(props.specActions.setScheme).toHaveBeenCalledWith("http", "/test" , "get")
 
-    // When the operationScheme is no longer in the list of options
+    // When the currentScheme is no longer in the list of options
     props.schemes = fromJS([
       "https"
     ])
     wrapper.setProps(props)
 
-    // Then operationScheme should default to first scheme in options list
+    // 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 = createSpy()
+
+    // 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.calls.length).toEqual(1)
+
+    // After an update
+    wrapper.instance().componentWillReceiveProps(props)
+
+    // Should not be called again, since `currentScheme` is in schemes
+    expect(setSchemeSpy.calls.length).toEqual(1)
+  })
 })

test/e2e/db.json

@@ -0,0 +1,130 @@
+{
+  "pet": [
+    {
+      "id": 1,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 2,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 3,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 4,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 5,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 6,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    },
+    {
+      "id": 7,
+      "category": {
+        "id": 0,
+        "name": "string"
+      },
+      "name": "doggie",
+      "photoUrls": [
+        "string"
+      ],
+      "tags": [
+        {
+          "id": 0,
+          "name": "string"
+        }
+      ],
+      "status": "available"
+    }
+  ]
+}

test/e2e/nightwatch.json

@@ -0,0 +1,63 @@
+{
+  "src_folders" : ["test/e2e/scenarios"],
+  "output_folder" : "reports",
+  "live_output": true,
+  "custom_commands_path" : "",
+  "custom_assertions_path" : "",
+  "page_objects_path" : "test/e2e/pages",
+  "globals_path" : "",
+  "test_workers" : {
+    "enabled" : true,
+    "workers" : "auto"
+  },
+
+  "test_runner" : {
+    "type" : "mocha",
+    "options" : {
+      "ui" : "bdd",
+      "reporter" : "list"
+    }
+  },
+
+  "selenium" : {
+    "start_process" : true,
+    "server_path" : "node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-3.4.0.jar",
+    "log_path" : "",
+    "host" : "127.0.0.1",
+    "port" : 4444,
+    "cli_args" : {
+      "webdriver.chrome.driver" : "node_modules/chromedriver/bin/chromedriver",
+      "webdriver.firefox.profile" : "",
+      "webdriver.ie.driver" : ""
+    }
+  },
+
+  "test_settings" : {
+    "default" : {
+      "launch_url" : "http://localhost",
+      "selenium_port"  : 4444,
+      "selenium_host"  : "localhost",
+      "silent": true,
+      "screenshots" : {
+        "enabled" : false,
+        "path" : ""
+      },
+      "desiredCapabilities": {
+        "browserName": "chrome",
+        "marionette": true
+      }
+    },
+
+    "chrome" : {
+      "desiredCapabilities": {
+        "browserName": "chrome"
+      }
+    },
+
+    "edge" : {
+      "desiredCapabilities": {
+        "browserName": "MicrosoftEdge"
+      }
+    }
+  }
+}

test/e2e/pages/main.js

@@ -0,0 +1,505 @@
+module.exports = {
+  sections: {
+    topbar: {
+      selector: ".topbar",
+      elements: {
+        inputBox: {
+          selector: "input"
+        },
+        btnExplore: {
+          selector: "button"
+        }
+      }
+    },
+    informationContainer: {
+      selector: ".information-container.wrapper",
+      elements: {
+        title: {
+          selector: ".title"
+        },
+        version: {
+          selector: ".version"
+        },
+        baseUrl: {
+          selector: ".base-url"
+        },
+        mainUrl: {
+          selector: ".main a"
+        },
+        mainUrlContent: {
+          selector: ".main a span"
+        },
+        description: {
+          selector: ".description p"
+        },
+        swaggerUrl: {
+          selector: ".description p a:nth-of-type(1)"
+        },
+        swaggerircUrl: {
+          selector: ".description p a:nth-of-type(2)"
+        },
+        termsLink: {
+          selector: ".info > div:nth-child(3) a"
+        },
+        contactDevLink: {
+          selector: ".info > div:nth-child(4) a"
+        },
+        apacheLink: {
+          selector: ".info > div:nth-child(5) a"
+        },
+        aboutSwaggerLink: {
+          selector: ".info > a"
+        }
+      }
+    },
+    schemeContainer: {
+      selector: ".scheme-container",
+      elements: {
+        httpOption: {
+          selector: "select option"
+        },
+        btnAuthorize: {
+          selector: "button.authorize"
+        },
+        authorizationModal: {
+          selector: ".dialog-ux"
+        },
+        appName: {
+          selector: ".auth-container h5"
+        },
+        authorizationUrl: {
+          selector: ".auth-container code"
+        },
+        flow: {
+          selector: ".flow code"
+        },
+        inputClientID: {
+          selector: "#client_id"
+        },
+        checkWritePetStoreAuth: {
+          selector: "#write:pets-checkbox-petstore_auth"
+        },
+        checkReadPetStoreAuth: {
+          selector: "#read:pets-checkbox-petstore_auth"
+        }
+      }
+    },
+    apiWrapper: {
+      selector: ".swagger-ui .wrapper:nth-child(3)",
+      elements: {
+        petAPIWrapper: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1)"
+        },
+        petAPIWrapperBar: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) .opblock-tag"
+        },
+        /**
+         * Post pet/ api
+         */
+        petOperationPostContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet"
+        },
+        petOperationPostTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet .opblock-summary-post span.opblock-summary-path span"
+        },
+        petOperationPostCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet .opblock-summary-post"
+        },
+        petOperationPostCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet>div:nth-child(2)"
+        },
+        petOperationPostTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet button.try-out__btn"
+        },
+        petOperationPostTryText: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet textarea.body-param__text"
+        },
+        petOperationPostExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet button.execute"
+        },
+        petOperationPostTryTextArea: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet textarea"
+        },
+        petOperationPostResultsBox: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight"
+        },
+        petOperationPostMockCategoryID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(17)"
+        },
+        petOperationPostMockCategoryName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(23)"
+        },
+        petOperationPostMockName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(31)"
+        },
+        petOperationPostTagID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(54)"
+        },
+        petOperationPostTagName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(60)"
+        },
+        petOperationPostStatus: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(70)"
+        },
+        /**
+         * Put pet/ api
+         */
+        petOperationPutContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet"
+        },
+        petOperationPutTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet .opblock-summary-put span.opblock-summary-path span"
+        },
+        petOperationPutCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet .opblock-summary-put"
+        },
+        petOperationPutCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet>div:nth-child(2)"
+        },
+        petOperationPutTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet button.try-out__btn"
+        },
+        petOperationPutTryText: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet textarea.body-param__text"
+        },
+        petOperationPutExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet button.execute"
+        },
+        petOperationPutTryTextArea: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet textarea"
+        },
+        petOperationPutResultsBox: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight"
+        },
+        petOperationPutMockCategoryID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(17)"
+        },
+        petOperationPutMockCategoryName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(23)"
+        },
+        petOperationPutMockName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(31)"
+        },
+        petOperationPutTagID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(54)"
+        },
+        petOperationPutTagName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(60)"
+        },
+        petOperationPutStatus: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(70)"
+        },
+        /**
+         * Get pet/
+         */
+        petOperationGetByTagContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags"
+        },
+        petOperationGetByTagTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags .opblock-summary-get span.opblock-summary-path__deprecated span"
+        },
+        petOperationGetByTagCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags .opblock-summary-get"
+        },
+        petOperationGetByTagCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags .ReactCollapse--collapse"
+        },
+        petOperationGetByTagTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags button.try-out__btn"
+        },
+        petOperationGetByTagTryAdded: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags button.json-schema-form-item-add"
+        },
+        petOperationGetByTagExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags button.execute"
+        },
+        petOperationGetByTagTryTextArea: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags textarea"
+        },
+        petOperationGetByTagResultsBox: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight"
+        },
+        petOperationGetByTagMockCategoryID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(17)"
+        },
+        petOperationGetByTagMockCategoryName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(23)"
+        },
+        petOperationGetByTagMockName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(31)"
+        },
+        petOperationGetByTagTagID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(54)"
+        },
+        petOperationGetByTagTagName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(60)"
+        },
+        petOperationGetByTagStatus: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(70)"
+        },
+        
+        /**
+         * Delete pet/
+         */
+        petOperationDeleteContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet"
+        },
+        petOperationDeleteTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet .opblock-summary-delete span.opblock-summary-path span"
+        },
+        petOperationDeleteCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet .opblock-summary-delete"
+        },
+        petOperationDeleteCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet>div:nth-child(2)"
+        },
+        petOperationDeleteTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet button.try-out__btn"
+        },
+        petOperationDeleteExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet button.execute"
+        },
+        petOperationDeleteTryTextArea: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet textarea"
+        },
+        petOperationDeleteResultsBox: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight"
+        },
+        petOperationDeleteMockCategoryID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(17)"
+        },
+        petOperationDeleteMockCategoryName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(23)"
+        },
+        petOperationDeleteMockName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(31)"
+        },
+        petOperationDeleteTagID: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(54)"
+        },
+        petOperationDeleteTagName: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(60)"
+        },
+        petOperationDeleteStatus: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-deletePet pre.microlight span:nth-child(70)"
+        },
+
+        /**
+         * ***********Store************
+         */
+        storeAPIWrapper: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2)"
+        },
+        storeAPIWrapperBar: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) .opblock-tag"
+        },
+        /**
+         * Get /store/inventory
+         */
+        storeOperationGetContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory"
+        },
+        storeOperationGetTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory .opblock-summary-get span.opblock-summary-path span"
+        },
+        storeOperationGetCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory .opblock-summary-get"
+        },
+        storeOperationGetCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory>div:nth-child(2)"
+        },
+        storeOperationGetTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory button.try-out__btn"
+        },
+        storeOperationGetExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory button.execute"
+        },
+        storeOperationResponseProps1: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory pre.example.microlight span:nth-child(6)"
+        },
+        storeOperationResponseProps2: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory pre.example.microlight span:nth-child(12)"
+        },
+        storeOperationResponseProps3: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-getInventory pre.example.microlight span:nth-child(18)"
+        },
+        /**
+         * Post /store/order
+         */
+        storeOperationPostContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder"
+        },
+        storeOperationPostTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder .opblock-summary-post span.opblock-summary-path span"
+        },
+        storeOperationPostCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder .opblock-summary-post"
+        },
+        storeOperationPostCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder>div:nth-child(2)"
+        },
+        storeOperationPostTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder button.try-out__btn"
+        },
+        storeOperationPostExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder button.execute"
+        },
+        storeOperationPostResponseId: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder pre.example.microlight span:nth-child(22)"
+        },
+        storeOperationPostResponsePetId: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder pre.example.microlight span:nth-child(31)"
+        },
+        storeOperationPostResponseQuantity: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder pre.example.microlight span:nth-child(40)"
+        },
+        storeOperationPostResponseStatus: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder pre.example.microlight span:nth-child(66)"
+        },
+        storeOperationPostResponseComplete: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-placeOrder pre.example.microlight span:nth-child(75)"
+        },
+        /**
+         * Delete /store/order/{orderId}
+         */
+        storeOperationDeleteContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder"
+        },
+        storeOperationDeleteTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder .opblock-summary-delete span.opblock-summary-path span"
+        },
+        storeOperationDeleteCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder .opblock-summary-delete"
+        },
+        storeOperationDeleteCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder>div:nth-child(2)"
+        },
+        storeOperationDeleteTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder button.try-out__btn"
+        },
+        storeOperationDeleteExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder button.execute"
+        },
+        storeOperationGetResponseHeaders: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(2) div#operations-store-deleteOrder pre span"
+        },
+        /**
+         * *********User**************
+         */
+        userAPIWrapper: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3)"
+        },
+        userAPIWrapperBar: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) .opblock-tag"
+        },
+        /**
+         * Put /user/login
+         */
+        userOperationPutContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser"
+        },
+        userOperationPutTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser .opblock-summary-put span.opblock-summary-path span"
+        },
+        userOperationPutCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser .opblock-summary-put"
+        },
+        userOperationPutCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser>div:nth-child(2)"
+        },
+        userOperationPutTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser button.try-out__btn"
+        },
+        userOperationPutExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser button.execute"
+        },
+        userOperationPutParameter: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser div.parameters-col_description input"
+        },
+        userOperationPutResponseHeader: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-updateUser div.parameters-col_description input"
+        },
+        /**
+         * Delete /user
+         */
+        userOperationDeleteContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser"
+        },
+        userOperationDeleteTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser .opblock-summary-delete span.opblock-summary-path span"
+        },
+        userOperationDeleteCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser .opblock-summary-delete"
+        },
+        userOperationDeleteCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser>div:nth-child(2)"
+        },
+        userOperationDeleteTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser button.try-out__btn"
+        },
+        userOperationDeleteExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser button.execute"
+        },
+        userOperationDeleteParameter: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-user-deleteUser div.parameters-col_description input"
+        },
+        userOperationDeleteResponseHeader: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) .opblock-delete div.parameters-col_description input"
+        },
+
+      }
+    },
+    /* Model Container */
+    modelWrapper: {
+      selector: ".swagger-ui .wrapper:nth-child(4)",
+      elements: {
+        modelContainer: {
+          selector: ".swagger-ui .models"
+        },
+        modelCollapse: {
+          selector: ".swagger-ui .models h4"
+        },
+        orderModel: {
+          selector: "section.models div.model-container:nth-child(1)"
+        },
+        orderModelCallapse: {
+          selector: "section.models div.model-container:nth-child(1) span.model-toggle"
+        },
+        categoryModel: {
+          selector: "section.models div.model-container:nth-child(2)"
+        },
+        categoryModelCallapse: {
+          selector: "section.models div.model-container:nth-child(2) span.model-toggle"
+        },
+        userModel: {
+          selector: "section.models div.model-container:nth-child(3)"
+        },
+        userModelCallapse: {
+          selector: "section.models div.model-container:nth-child(3) span.model-toggle"
+        },
+        tagModel: {
+          selector: "section.models div.model-container:nth-child(4)"
+        },
+        tagModelCallapse: {
+          selector: "section.models div.model-container:nth-child(4) span.model-toggle"
+        },
+        petModel: {
+          selector: "section.models div.model-container:nth-child(5)"
+        },
+        petModelCallapse: {
+          selector: "section.models div.model-container:nth-child(5) span.model-toggle"
+        },
+        apiResponseModel: {
+          selector: "section.models div.model-container:nth-child(6)"
+        },
+        apiResponseModelCallapse: {
+          selector: "section.models div.model-container:nth-child(6) span.model-toggle"
+        },
+      }
+    }
+
+
+
+
+  }
+}

test/e2e/scenarios/informationContainer.js

@@ -0,0 +1,48 @@
+describe("render informationContainer", function () {
+    let mainPage
+    let informationContainer
+    beforeEach(function (client, done) {
+        
+        mainPage = client
+        .url("localhost:3200")
+        .page.main()
+        client.waitForElementVisible(".download-url-input", 5000)
+        .pause(5000)
+        .clearValue(".download-url-input")
+        .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+        .click("button.download-url-button")
+        .pause(1000)
+
+        informationContainer = mainPage.section.informationContainer
+        
+        done()
+    })
+
+    it("renders section", function (client) {
+        mainPage.expect.section("@informationContainer").to.be.visible.before(5000)
+
+        client.end()
+    })
+
+    it("renders content", function (client) {
+        informationContainer.waitForElementVisible("@title", 5000)
+            .assert.containsText("@title", "Swagger Petstore")
+            .assert.containsText("@version", "1.0.0")
+            .assert.containsText("@baseUrl", "[ Base URL: localhost:3204/ ]")
+            .assert.attributeEquals("@mainUrl", "href", "http://localhost:3200/test-specs/petstore.json")
+            .assert.containsText("@mainUrlContent", "http://localhost:3200/test-specs/petstore.json")
+            .assert.containsText("@description", "This is a sample server Petstore server. You can find out more about Swagger at http://swagger.io or on irc.freenode.net, #swagger. For this sample, you can use the api key special-key to test the authorization filters.")
+            .assert.attributeEquals("@swaggerUrl", "href", "http://swagger.io/")
+            .assert.attributeEquals("@swaggerircUrl", "href", "http://swagger.io/irc/")
+            .assert.attributeEquals("@termsLink", "href", "http://swagger.io/terms/")
+            .assert.containsText("@termsLink", "Terms of service")
+            .assert.attributeEquals("@contactDevLink", "href", "mailto:apiteam@swagger.io")
+            .assert.containsText("@contactDevLink", "Contact the developer")
+            .assert.attributeEquals("@contactDevLink", "href", "mailto:apiteam@swagger.io")
+            .assert.containsText("@contactDevLink", "Contact the developer")
+            .assert.attributeEquals("@aboutSwaggerLink", "href", "http://swagger.io/")
+            .assert.containsText("@aboutSwaggerLink", "Find out more about Swagger")
+            
+        client.end()
+    })
+})

test/e2e/scenarios/models.js

@@ -0,0 +1,79 @@
+describe("Render Model Wrapper", function () {
+    let modelWrapper, mainPage
+
+    beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3200")
+            .page.main()
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        modelWrapper = mainPage.section.modelWrapper
+
+        done()
+    })
+    afterEach(function (client, done){
+        done()
+    })
+    it("Render model wrapper", function(client){
+        mainPage.expect.section("@modelWrapper").to.be.visible.before(5000)
+
+        client.end()
+    })
+
+    it("Render model wrapper collapse", function(client){
+        modelWrapper.waitForElementVisible("@modelContainer", 5000)
+            .click("@modelCollapse")
+            .assert.cssClassNotPresent("@modelContainer", "is-open")
+
+        client.end()
+    })
+
+    it("Testing order model", function(client){
+        modelWrapper.waitForElementVisible("@orderModel")
+            .click("@orderModelCallapse")
+            .assert.cssClassNotPresent("@orderModelCallapse", "callapsed")
+
+        client.end()
+    })
+
+    it("Testing category model", function(client){
+        modelWrapper.waitForElementVisible("@categoryModel")
+            .click("@categoryModelCallapse")
+            .assert.cssClassNotPresent("@categoryModelCallapse", "callapsed")
+
+        client.end()
+    })
+    it("Testing user model", function(client){
+        modelWrapper.waitForElementVisible("@userModel")
+            .click("@userModelCallapse")
+            .assert.cssClassNotPresent("@userModelCallapse", "callapsed")
+
+        client.end()
+    })
+    it("Testing tag model", function(client){
+        modelWrapper.waitForElementVisible("@tagModel")
+            .click("@tagModelCallapse")
+            .assert.cssClassNotPresent("@tagModelCallapse", "callapsed")
+
+        client.end()
+    })
+    it("Testing pet model", function(client){
+        modelWrapper.waitForElementVisible("@petModel")
+            .click("@petModelCallapse")
+            .assert.cssClassNotPresent("@petModelCallapse", "callapsed")
+
+        client.end()
+    })
+    it("Testing apiResponse model", function(client){
+        modelWrapper.waitForElementVisible("@apiResponseModel")
+            .click("@apiResponseModelCallapse")
+            .assert.cssClassNotPresent("@apiResponseModelCallapse", "callapsed")
+
+        client.end()
+    })
+})

test/e2e/scenarios/operations/pet.js

@@ -0,0 +1,172 @@
+describe("render pet api container", function () {
+    let mainPage
+    let apiWrapper
+    beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3200")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        apiWrapper = mainPage.section.apiWrapper
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("render section", function (client) {
+        mainPage.expect.section("@apiWrapper").to.be.visible.before(10000)
+        client.end()
+    })
+    it("test rendered pet container", function (client) {
+        apiWrapper.waitForElementVisible("@petAPIWrapper", 5000)
+            .expect.element("@petAPIWrapper").to.be.visible
+
+        client.end()
+    })
+    it("collapse pet wrapper", function (client) {
+        apiWrapper.waitForElementVisible("@petAPIWrapper", 5000)
+            .click("@petAPIWrapperBar")
+            .assert.cssClassNotPresent("@petAPIWrapper", "is-open")
+
+        client.end()
+    })
+    it("render post /pet api container", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationPostContainer", 10000)
+            .assert.containsText("@petOperationPostTitle", "/pet")
+            .click("@petOperationPostCollpase")
+            .waitForElementVisible("@petOperationPostCollapseContainer", 5000)
+            .click("@petOperationPostTryBtn")
+            .waitForElementVisible("@petOperationPostTryText", 1000)
+            .waitForElementVisible("@petOperationPostExecuteBtn", 1000)
+            .click("@petOperationPostTryBtn")
+            .assert.cssClassNotPresent("@petOperationPostTryBtn", "cancel")
+
+        client.end()
+    })
+
+    it("Testing post /pet api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationPostContainer", 5000)
+            .click("@petOperationPostCollpase")
+            .waitForElementVisible("@petOperationPostCollapseContainer", 5000)
+            .click("@petOperationPostTryBtn")
+            .waitForElementVisible("@petOperationPostExecuteBtn", 1000)
+            .click("@petOperationPostExecuteBtn")
+            .waitForElementVisible("@petOperationPostMockCategoryID", 2000)
+            .assert.containsText("@petOperationPostMockCategoryID", "0")
+            .assert.containsText("@petOperationPostMockCategoryName", "\"string\"")
+            .assert.containsText("@petOperationPostMockName", "\"doggie\"")
+            .assert.containsText("@petOperationPostTagID", "0")
+            .assert.containsText("@petOperationPostTagName", "\"string\"")
+            .assert.containsText("@petOperationPostStatus", "\"available\"")
+            .click("@petOperationPostTryBtn")
+            .assert.cssClassNotPresent("@petOperationPostTryBtn", "cancel")
+
+        client.end()
+    })
+
+    it("render put /pet api container", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationPutContainer", 5000)
+            .assert.containsText("@petOperationPutTitle", "/pet")
+            .click("@petOperationPutCollpase")
+            .waitForElementVisible("@petOperationPutCollapseContainer", 3000)
+            .click("@petOperationPutTryBtn")
+            .waitForElementVisible("@petOperationPutTryText", 1000)
+            .waitForElementVisible("@petOperationPutExecuteBtn", 1000)
+            .click("@petOperationPutTryBtn")
+            .assert.cssClassNotPresent("@petOperationPutTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("Testing put /pet api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationPutContainer", 5000)
+            .click("@petOperationPutCollpase")
+            .waitForElementVisible("@petOperationPutCollapseContainer", 3000)
+            .click("@petOperationPutTryBtn")
+            .waitForElementVisible("@petOperationPutExecuteBtn", 1000)
+            .click("@petOperationPutExecuteBtn")
+            .waitForElementVisible("@petOperationPutMockCategoryID")
+            .assert.containsText("@petOperationPutMockCategoryID", "0")
+            .assert.containsText("@petOperationPutMockCategoryName", "\"string\"")
+            .assert.containsText("@petOperationPutMockName", "\"doggie\"")
+            .assert.containsText("@petOperationPutTagID", "0")
+            .assert.containsText("@petOperationPutTagName", "\"string\"")
+            .assert.containsText("@petOperationPutStatus", "\"available\"")
+            .click("@petOperationPutTryBtn")
+            .assert.cssClassNotPresent("@petOperationPutTryBtn", "Cancel")
+
+        client.end()
+    })
+
+    it("render get by tag /pet api container", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationGetByTagContainer", 5000)
+            .assert.containsText("@petOperationGetByTagTitle", "/pet/findByTags")
+            .click("@petOperationGetByTagCollpase")
+            .waitForElementVisible("@petOperationGetByTagCollapseContainer", 3000)
+            .click("@petOperationGetByTagTryBtn")
+            .waitForElementVisible("@petOperationGetByTagTryAdded", 1000)
+            .waitForElementVisible("@petOperationGetByTagExecuteBtn", 1000)
+            .click("@petOperationGetByTagTryBtn")
+            .assert.cssClassNotPresent("@petOperationGetByTagTryBtn", "cancel")
+            
+        client.end()
+    })
+
+    it("Testing get by tag /pet api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationGetByTagContainer", 5000)
+            .click("@petOperationGetByTagCollpase")
+            .waitForElementVisible("@petOperationGetByTagCollapseContainer", 3000)
+            .click("@petOperationGetByTagTryBtn")
+            .waitForElementVisible("@petOperationGetByTagExecuteBtn", 1000)
+            .click("@petOperationGetByTagExecuteBtn")
+            .waitForElementVisible("@petOperationGetByTagMockCategoryID")
+            .assert.containsText("@petOperationGetByTagMockCategoryID", "0")
+            .assert.containsText("@petOperationGetByTagMockCategoryName", "\"string\"")
+            .assert.containsText("@petOperationGetByTagMockName", "\"doggie\"")
+            .assert.containsText("@petOperationGetByTagTagID", "0")
+            .assert.containsText("@petOperationGetByTagTagName", "\"string\"")
+            .assert.containsText("@petOperationGetByTagStatus", "\"available\"")
+            .click("@petOperationGetByTagTryBtn")
+            .assert.cssClassNotPresent("@petOperationGetByTagTryBtn", "cancel")
+
+        client.end()
+    })
+
+    it("render delete /pet api container", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationDeleteContainer")
+            .assert.containsText("@petOperationDeleteTitle", "/pet/{petId}")
+            .click("@petOperationDeleteCollpase")
+            .waitForElementVisible("@petOperationDeleteCollapseContainer", 3000)
+            .click("@petOperationDeleteTryBtn")
+            .waitForElementVisible("@petOperationDeleteExecuteBtn", 1000)
+            .click("@petOperationDeleteTryBtn")
+            .assert.cssClassNotPresent("@petOperationDeleteTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("Testing delete /pet api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationDeleteContainer", 3000)
+            .click("@petOperationDeleteCollpase")
+            .waitForElementVisible("@petOperationDeleteCollapseContainer", 3000)
+            .click("@petOperationDeleteTryBtn")
+            .waitForElementVisible("@petOperationDeleteExecuteBtn", 1000)
+            .click("@petOperationDeleteExecuteBtn")
+            .waitForElementVisible("@petOperationDeleteMockCategoryID")
+            .assert.containsText("@petOperationDeleteMockCategoryID", "0")
+            .assert.containsText("@petOperationDeleteMockCategoryName", "\"string\"")
+            .assert.containsText("@petOperationDeleteMockName", "\"doggie\"")
+            .assert.containsText("@petOperationDeleteTagID", "0")
+            .assert.containsText("@petOperationDeleteTagName", "\"string\"")
+            .assert.containsText("@petOperationDeleteStatus", "\"available\"")
+            .click("@petOperationDeleteTryBtn")
+            .assert.cssClassNotPresent("@petOperationDeleteTryBtn", "cancel")
+
+        client.end()
+    })
+})

test/e2e/scenarios/operations/store.js

@@ -0,0 +1,113 @@
+describe("render store api container", function(){
+    let mainPage
+    let apiWrapper
+    beforeEach( function(client, done){
+        mainPage = client
+            .url("localhost:3200")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(3000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        apiWrapper = mainPage.section.apiWrapper
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("test rendered store container", function(client){
+        apiWrapper.waitForElementVisible("@storeAPIWrapper", 5000)
+            .expect.element("@storeAPIWrapper").to.be.visible
+
+    client.end()
+    })
+    it("callapse store wrapper", function(client){
+        apiWrapper.waitForElementVisible("@storeAPIWrapper", 5000)
+            .click("@storeAPIWrapperBar")
+            .assert.cssClassNotPresent("@storeAPIWrapper", "is-open")
+
+        client.end()
+    })
+    it("render get /store/inventory api container", function (client) {
+        apiWrapper.waitForElementVisible("@storeOperationGetContainer", 5000)
+            .assert.containsText("@storeOperationGetTitle", "/store/inventory")
+            .click("@storeOperationGetCollpase")
+            .waitForElementVisible("@storeOperationGetCollapseContainer", 5000)
+            .click("@storeOperationGetTryBtn")
+            .waitForElementVisible("@storeOperationGetExecuteBtn", 1000)
+            .click("@storeOperationGetTryBtn")
+            .assert.cssClassNotPresent("@storeOperationGetTryBtn", "cancel")
+            
+        client.end()
+    })
+
+    it("Testing get /store/inventory api Mock data ", function (client) {
+        apiWrapper.waitForElementVisible("@storeOperationGetContainer", 5000)
+            .assert.containsText("@storeOperationGetTitle", "/store/inventory")
+            .click("@storeOperationGetCollpase")
+            .waitForElementVisible("@storeOperationGetCollapseContainer", 3000)
+            .click("@storeOperationGetTryBtn")
+            .waitForElementVisible("@storeOperationGetExecuteBtn", 1000)
+            .click("@storeOperationGetExecuteBtn")
+            .waitForElementVisible("@storeOperationResponseProps1")
+            .assert.containsText("@storeOperationResponseProps1", "0")
+            .assert.containsText("@storeOperationResponseProps2", "0")
+            .assert.containsText("@storeOperationResponseProps3", "0")
+            .click("@storeOperationGetTryBtn")
+            .assert.cssClassNotPresent("@storeOperationGetTryBtn", "cancel")
+            
+        client.end()
+    })
+
+    it("render post /store/order api container", function (client) {
+        apiWrapper.waitForElementVisible("@storeOperationPostContainer")
+            .assert.containsText("@storeOperationPostTitle", "/store/order")
+            .click("@storeOperationPostCollpase")
+            .waitForElementVisible("@storeOperationPostCollapseContainer", 3000)
+            .click("@storeOperationPostTryBtn")
+            .waitForElementVisible("@storeOperationPostExecuteBtn", 1000)
+            .click("@storeOperationPostTryBtn")
+            .assert.cssClassNotPresent("@storeOperationPostTryBtn", "cancel")
+            
+        client.end()
+    })
+
+    it("Testing post /store/order api Mock Data", function (client) {
+        apiWrapper.waitForElementVisible("@storeOperationPostContainer")
+            .assert.containsText("@storeOperationPostTitle", "/store/order")
+            .click("@storeOperationPostCollpase")
+            .waitForElementVisible("@storeOperationPostCollapseContainer", 3000)
+            .click("@storeOperationPostTryBtn")
+            .waitForElementVisible("@storeOperationPostExecuteBtn", 1000)
+            .click("@storeOperationPostExecuteBtn")
+            .waitForElementVisible("@storeOperationPostResponseId")
+            .assert.containsText("@storeOperationPostResponseId", "0")
+            .assert.containsText("@storeOperationPostResponsePetId", "0")
+            .assert.containsText("@storeOperationPostResponseQuantity", "0")
+            .assert.containsText("@storeOperationPostResponseStatus", "placed")
+            .assert.containsText("@storeOperationPostResponseComplete", "false")
+            .click("@storeOperationPostTryBtn")
+            .assert.cssClassNotPresent("@storeOperationPostTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("render delete /store/order/{orderId} api container", function (client) {
+        apiWrapper.waitForElementVisible("@storeOperationDeleteContainer")
+            .assert.containsText("@storeOperationDeleteTitle", "/store/order/{orderId}")
+            .click("@storeOperationDeleteCollpase")
+            .waitForElementVisible("@storeOperationDeleteCollapseContainer", 3000)
+            .click("@storeOperationDeleteTryBtn")
+            .waitForElementVisible("@storeOperationDeleteExecuteBtn", 1000)
+            .click("@storeOperationDeleteExecuteBtn")
+            .waitForElementVisible("@storeOperationGetResponseHeaders", "content-type: application/xml")
+            .click("@storeOperationDeleteTryBtn")
+            .assert.cssClassNotPresent("@storeOperationDeleteTryBtn", "cancel")
+            
+        client.end()
+    })
+})

test/e2e/scenarios/operations/user.js

@@ -0,0 +1,94 @@
+describe("render user api container", function(){
+    let mainPage
+    let apiWrapper
+    beforeEach( function(client, done){
+        mainPage = client
+            .url("localhost:3200")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        apiWrapper = mainPage.section.apiWrapper
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("test rendered user container", function(client){
+        apiWrapper.waitForElementVisible("@userAPIWrapper", 5000)
+            .expect.element("@userAPIWrapper").to.be.visible
+
+    client.end()
+    })
+    it("callapse user wrapper", function(client){
+        apiWrapper.waitForElementVisible("@userAPIWrapper", 5000)
+            .click("@userAPIWrapperBar")
+            .assert.cssClassNotPresent("@userAPIWrapper", "is-open")
+
+        client.end()
+    })
+    it("render put /user/{username} api container", function (client) {
+        apiWrapper.waitForElementVisible("@userOperationPutContainer", 5000)
+            .assert.containsText("@userOperationPutTitle", "/user/{username}")
+            .click("@userOperationPutCollpase")
+            .waitForElementVisible("@userOperationPutCollapseContainer", 3000)
+            .click("@userOperationPutTryBtn")
+            .waitForElementVisible("@userOperationPutExecuteBtn", 1000)
+            .click("@userOperationPutTryBtn")
+            .assert.cssClassNotPresent("@userOperationPutTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("Test put /user/{username} api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@userOperationPutContainer", 5000)
+            .assert.containsText("@userOperationPutTitle", "/user/{username}")
+            .click("@userOperationPutCollpase")
+            .waitForElementVisible("@userOperationPutCollapseContainer", 3000)
+            .click("@userOperationPutTryBtn")
+            .waitForElementVisible("@userOperationPutParameter")
+            .setValue("@userOperationPutParameter", "123")
+            .waitForElementVisible("@userOperationPutExecuteBtn", 1000)
+            .click("userOperationPutExecuteBtn")
+            .waitForElementVisible("@userOperationPutResponseHeader")
+            .assert.containsText("@userOperationPutResponseHeader", "content-type: application/xml")
+            .click("@userOperationPutTryBtn")
+            .assert.cssClassNotPresent("@userOperationPutTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("render delete /user/{username} api container", function (client) {
+        apiWrapper.waitForElementVisible("@userOperationDeleteContainer", 5000)
+            .assert.containsText("@userOperationDeleteTitle", "/user/{username}")
+            .click("@userOperationDeleteCollpase")
+            .waitForElementVisible("@userOperationDeleteCollapseContainer", 3000)
+            .click("@userOperationDeleteTryBtn")
+            .waitForElementVisible("@userOperationDeleteExecuteBtn", 1000)
+            .click("@userOperationDeleteTryBtn")
+            .assert.cssClassNotPresent("@userOperationDeleteTryBtn", "cancel")
+            
+        client.end()
+    })
+    it("Test delete /user/{username} api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@userOperationDeleteContainer", 5000)
+            .assert.containsText("@userOperationDeleteTitle", "/user/{username}")
+            .click("@userOperationDeleteCollpase")
+            .waitForElementVisible("@userOperationDeleteCollapseContainer", 3000)
+            .click("@userOperationDeleteTryBtn")
+            .waitForElementVisible("@userOperationDeleteParameter")
+            .setValue("@userOperationDeleteParameter", "123")
+            .waitForElementVisible("@userOperationDeleteExecuteBtn", 1000)
+            .click("userOperationDeleteExecuteBtn")
+            .waitForElementVisible("@userOperationDeleteResponseHeader")
+            .assert.containsText("@userOperationDeleteResponseHeader", "content-type: application/xml")
+            .click("@userOperationDeleteTryBtn")
+            .assert.cssClassNotPresent("@userOperationDeleteTryBtn", "cancel")
+            
+        client.end()
+    })
+})

test/e2e/scenarios/schemeContainer.js

@@ -0,0 +1,52 @@
+describe("Render scheme", function () {
+    let mainPage
+    let schemeContainer
+    beforeEach(function (client, done) {
+
+        mainPage = client
+        .url("localhost:3200")
+        .page.main()
+
+        schemeContainer = mainPage.section.schemeContainer
+
+        client.waitForElementVisible(".download-url-input", 5000)
+        .pause(5000)
+        .clearValue(".download-url-input")
+        .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+        .click("button.download-url-button")
+        .pause(1000)
+
+
+        done()
+    })
+
+    it("render section", function (client) {
+        mainPage.expect.section("@schemeContainer").to.be.visible.before(5000)
+
+        client.end()
+    })
+    it("render scheme option", function (client) {
+        schemeContainer.waitForElementVisible("@httpOption", 5000)
+        .expect.element("@httpOption").to.be.selected
+
+        client.end()
+    })
+
+    it("render authorized button", function (client) {
+        schemeContainer.waitForElementVisible("@btnAuthorize", 5000)
+        .expect.element("@btnAuthorize").to.be.visible
+
+        client.end()
+    })
+    it("render click event", function(client) {
+        schemeContainer.waitForElementVisible("@btnAuthorize", 5000)
+        .click("@btnAuthorize")
+        .assert.visible("@authorizationModal")
+        .assert.containsText("@appName", "Application: your-app-name")
+        .assert.containsText("@authorizationUrl", "http://petstore.swagger.io/oauth/dialog")
+        .assert.containsText("@flow", "implicit")
+        .assert.value("@inputClientID", "your-client-id")
+
+        client.end()
+    })
+})

test/e2e/scenarios/topbar.js

@@ -0,0 +1,52 @@
+describe("initial render", function () {
+    let mainPage
+    describe("for topbar", function () {
+        let topbar
+        before(function (client, done) {
+        done()
+        })
+
+        after(function (client, done) {
+        client.end(function () {
+            done()
+        })
+        })
+
+        afterEach(function (client, done) {
+        done()
+        })
+
+        beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3200")
+            .page.main()
+
+        topbar = mainPage.section.topbar
+
+        client.waitForElementVisible(".download-url-input", 10000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        done()
+        })
+
+        it("renders section", function (client) {
+        mainPage.expect.section("@topbar").to.be.visible
+        client.end()
+        })
+
+        it("renders input box", function (client) {
+        topbar.expect.element("@inputBox").to.be.visible
+        client.end()
+        })
+
+        it("renders explore button", function (client) {
+        topbar.expect.element("@btnExplore").to.be.visible
+
+        client.end()
+        })
+    })
+})

webpack-watch.config.js

@@ -1,3 +1,8 @@
 const config = require("./webpack-dist.config.js")
 
+config.plugins = config.plugins.filter(plugin => {
+  // Disable minification
+  return plugin.constructor.name !== "UglifyJsPlugin"
+})
+
 module.exports = config