write mechanism to provide local spec JSON to SwaggerUIBundle

dev-helpers/template.ejs

@@ -5,7 +5,6 @@
   <meta charset="UTF-8">
   <title>Swagger UI</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
   <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
   <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
   <style>
@@ -67,37 +66,38 @@
 
 <div id="swagger-ui"></div>
 
-<script src="./swagger-ui-bundle.js"> </script>
-<script src="./swagger-ui-standalone-preset.js"> </script>
 <script>
-window.onload = function() {
-  window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
-  window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
-  // Build a system
-  const ui = SwaggerUIBundle({
-    url: "http://petstore.swagger.io/v2/swagger.json",
-    dom_id: '#swagger-ui',
-    presets: [
-      SwaggerUIBundle.presets.apis,
-      SwaggerUIStandalonePreset
-    ],
-    plugins: [
-      SwaggerUIBundle.plugins.DownloadUrl
-    ],
-    layout: "StandaloneLayout"
-  })
+  window.onload = function() {
+    window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
+    window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
 
-  window.ui = ui
+    var spec = '<%- htmlWebpackPlugin.options.spec %>'
+    // Build a system
+    const ui = SwaggerUIBundle({
+      url: "http://petstore.swagger.io/v2/swagger.json",
+      spec: spec && JSON.parse(decodeURI(spec)),
+      dom_id: '#swagger-ui',
+      presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIStandalonePreset
+      ],
+      plugins: [
+        SwaggerUIBundle.plugins.DownloadUrl
+      ],
+      layout: "StandaloneLayout"
+    })
 
-  ui.initOAuth({
-    clientId: "your-client-id",
-    clientSecret: "your-client-secret-if-required",
-    realm: "your-realms",
-    appName: "your-app-name",
-    scopeSeparator: " ",
-    additionalQueryStringParams: {}
-  })
-}
+    window.ui = ui
+
+    ui.initOAuth({
+      clientId: "your-client-id",
+      clientSecret: "your-client-secret-if-required",
+      realm: "your-realms",
+      appName: "your-app-name",
+      scopeSeparator: " ",
+      additionalQueryStringParams: {}
+    })
+  }
 </script>
 </body>
 

make-webpack-config.js

@@ -2,8 +2,9 @@ var path = require('path')
 
 var webpack = require('webpack')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
 var deepExtend = require('deep-extend')
-const {gitDescribeSync} = require('git-describe');
+const {gitDescribeSync} = require('git-describe')
 
 var pkg = require('./package.json')
 
@@ -59,7 +60,7 @@ module.exports = function(rules, options) {
     }))
   }
 
-  if( specialOptions.minimize ) {
+  if( specialOptions.minimize ) {   // production mode
 
     plugins.push(
       new webpack.optimize.UglifyJsPlugin({
@@ -74,6 +75,18 @@ module.exports = function(rules, options) {
 
     plugins.push( new webpack.NoErrorsPlugin())
 
+  } else {    // development mode
+    var spec
+    if (specialOptions.testSpecName) {
+      spec = require('./test/e2e/specs/' + specialOptions.testSpecName)
+    }
+
+    plugins.push(
+      new HtmlWebpackPlugin({
+        template: 'dev-helpers/template.ejs',
+        spec: spec && encodeURI(JSON.stringify(spec))   // using given test spec definition
+      })
+    )
   }
 
   plugins.push(

package.json

@@ -34,7 +34,8 @@
     "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",
     "e2e": "nightwatch test/e2e/scenarios --config test/e2e/nightwatch.json --verbose",
-    "e2e-initial-render": "nightwatch test/e2e/scenarios --config test/e2e/nightwatch.json --group initial-render"
+    "e2e-initial-render": "nightwatch test/e2e/scenarios --config test/e2e/nightwatch.json --group initial-render",
+    "dev:e2e": "TEST_SPEC_NAME=1.json webpack-dev-server --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress --content-base dev-helpers/"
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0",
@@ -101,7 +102,7 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "0.11.2",
     "git-describe": "^4.0.1",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^2.29.0",
     "imports-loader": "0.7.1",
     "json-loader": "0.5.4",
     "karma": "^1.7.0",

webpack-hot-dev-server.config.js

@@ -57,6 +57,7 @@ var rules = [
 module.exports = require("./make-webpack-config")(rules, {
   _special: {
     separateStylesheets: false,
+    testSpecName: process.env['TEST_SPEC_NAME']
   },
 	devtool: "eval",
   entry: {