From a33c067ffa501ad1b20ace73258be49fecf0dac7 Mon Sep 17 00:00:00 2001
From: Miroslav Bajtos <miroslav@strongloop.com>
Date: Fri, 29 Nov 2013 16:17:59 +0100
Subject: [PATCH] Support custom basePath

Recognize the `basePath` passed to swagger extension and use it in
the webpage to construct the correct `discoveryUrl`.
---
 index.js              |  12 ++++-
 package.json          |   3 +-
 public/index.html     |  35 +++++++++------
 test/explorer.test.js | 100 ++++++++++++++++++++++++++++++------------
 4 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/index.js b/index.js
index cbbb913..645fd5c 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@
 var path = require('path');
 var loopback = require('loopback');
 var swagger = require('loopback/node_modules/strong-remoting/ext/swagger');
+var express = require('loopback/node_modules/express');
 var STATIC_ROOT = path.join(__dirname, 'public');
 
 module.exports = explorer;
@@ -16,7 +17,16 @@ module.exports = explorer;
  */
 
 function explorer(loopbackApplication, options) {
+  var options = options || {};
   var remotes = loopbackApplication.remotes();
   swagger(remotes, options);
-  return loopback.static(STATIC_ROOT);
+
+  var app = express();
+  app.get('/config.json', function(req, res) {
+    res.send({
+      discoveryUrl: (options.basePath || '') + '/swagger/resources'
+    });
+  });
+  app.use(loopback.static(STATIC_ROOT));
+  return app;
 }
diff --git a/package.json b/package.json
index 69a85e0..eea3bba 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   "devDependencies": {
     "loopback": "1.x.x",
     "mocha": "~1.14.0",
-    "supertest": "~0.8.1"
+    "supertest": "~0.8.1",
+    "chai": "~1.8.1"
   }
 }
diff --git a/public/index.html b/public/index.html
index 0b2a25c..03bd2c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,23 +17,30 @@
     <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
 
     <script type="text/javascript">
-	$(function () {
-	    window.swaggerUi = new SwaggerUi({
-                discoveryUrl:"/swagger/resources",
-                apiKey:"",
-                dom_id:"swagger-ui-container",
+        $(function() {
+            $.getJSON('config.json', function(config) {
+                console.log(config);
+                loadSwaggerUi(config);
+            });
+        });
+
+        function loadSwaggerUi(config) {
+            window.swaggerUi = new SwaggerUi({
+                discoveryUrl: config.discoveryUrl || "/swagger/resources",
+                apiKey: "",
+                dom_id: "swagger-ui-container",
                 supportHeaderParams: true,
                 supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
-                onComplete: function(swaggerApi, swaggerUi){
-                	if(console) {
+                onComplete: function(swaggerApi, swaggerUi) {
+                    if (console) {
                         console.log("Loaded SwaggerUI")
                         console.log(swaggerApi);
                         console.log(swaggerUi);
                     }
-                  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+                    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
                 },
                 onFailure: function(data) {
-                	if(console) {
+                    if (console) {
                         console.log("Unable to Load SwaggerUI");
                         console.log(data);
                     }
@@ -42,8 +49,7 @@
             });
 
             window.swaggerUi.load();
-        });
-
+        }
     </script>
 </head>
 
@@ -53,8 +59,11 @@
         <a id="logo">StrongLoop API Explorer</a>
 
         <form id='api_selector'>
-            <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl"
-                                      type="text"/></div>
+            <div class='input'>
+                <input placeholder="http://example.com/api"
+                       id="input_baseUrl" name="baseUrl"
+                       type="text"/>
+            </div>
             <div class='input'><a id="explore" href="#">Explore</a></div>
         </form>
     </div>
diff --git a/test/explorer.test.js b/test/explorer.test.js
index 6ef0103..05cb851 100644
--- a/test/explorer.test.js
+++ b/test/explorer.test.js
@@ -1,38 +1,80 @@
+var loopback = require('loopback');
+var explorer = require('../');
 var request = require('supertest');
 var assert = require('assert');
+var expect = require('chai').expect;
 
-describe('explorer', function () {
-  beforeEach(function (done) {
-    var loopback = require('loopback');
-    var app = this.app = loopback();
-    var explorer = require('../');
-    var Product = loopback.Model.extend('product');
-    Product.attachTo(loopback.memory());
-    app.model(Product);
+describe('explorer', function() {
 
-    app.use(loopback.rest());
-    app.use('/explorer', explorer(app));
+  describe('with default config', function() {
+    beforeEach(givenLoopBackAppWithExplorer());
 
-    done();
+    it('should redirect to /explorer/', function(done) {
+      request(this.app)
+        .get('/explorer')
+        .expect(303)
+        .end(done);
+    });
+
+    it('should serve the explorer at /explorer/', function(done) {
+      request(this.app)
+        .get('/explorer/')
+        .expect('Content-Type', /html/)
+        .expect(200)
+        .end(function(err, res) {
+          if (err) throw err;
+
+          assert(!!~res.text.indexOf('<title>StrongLoop API Explorer</title>'), 'text does not contain expected string');
+          done();
+        });
+    });
+
+    it('should serve correct swagger-ui config', function(done) {
+      request(this.app)
+        .get('/explorer/config.json')
+        .expect('Content-Type', /json/)
+        .expect(200)
+        .end(function(err, res) {
+          if (err) return done(err);
+          expect(res.body).to
+            .have.property('discoveryUrl', '/swagger/resources');
+          done();
+        });
+    });
+  })
+
+  describe('with custom baseUrl', function() {
+    beforeEach(givenLoopBackAppWithExplorer('/api'));
+
+    it('should serve correct swagger-ui config', function(done) {
+      request(this.app)
+        .get('/explorer/config.json')
+        .expect('Content-Type', /json/)
+        .expect(200)
+        .end(function(err, res) {
+          if (err) return done(err);
+          expect(res.body).to
+            .have.property('discoveryUrl', '/api/swagger/resources');
+          done();
+        });
+    });
   });
 
-  it('should redirect to /explorer/', function (done) {
-    request(this.app)
-      .get('/explorer')
-      .expect(303)
-      .end(done);
-  });
+  function givenLoopBackAppWithExplorer(restUrlBase) {
+    return function(done) {
+      var app = this.app = loopback();
+      var Product = loopback.Model.extend('product');
+      Product.attachTo(loopback.memory());
+      app.model(Product);
 
-  it('should serve the explorer at /explorer/', function (done) {
-    request(this.app)
-      .get('/explorer/')
-      .expect('Content-Type', /html/)
-      .expect(200)
-      .end(function(err, res) {
-        if(err) throw err;
-
-        assert(!!~res.text.indexOf('<title>StrongLoop API Explorer</title>'), 'text does not contain expected string');
-        done();
-      });
-  });
+      if (restUrlBase) {
+        app.use(restUrlBase, loopback.rest());
+        app.use('/explorer', explorer(app, { basePath: restUrlBase }));
+      } else {
+        app.use(loopback.rest());
+        app.use('/explorer', explorer(app));
+      }
+      done();
+    }
+  }
 });