Add sandbox UI test

css/styles.css

@@ -124,12 +124,17 @@ html, body {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
-  border: none;
   min-width: 200px;
   background: #eee;
 }
-
-
+#sandbox-iframe {
+  border: none;
+  width: 100%;
+}
+#sandbox-iframe.test-mode {
+  max-height: 300px;
+  margin-bottom: 10px;
+}
 .panel-inner {
   padding: 10px;
 }

html/index.mustache.html

@@ -4,7 +4,7 @@
 <title>Web Sandbox</title>
     <link rel="stylesheet" href="/css/normalize.css">
     <link rel="stylesheet" href="/css/main.css">
-<!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
+    {{#testMode}}<link rel="stylesheet" href="/css/qunit-2.4.1.css">{{/testMode}}
     <link rel="stylesheet" href="/css/vendor/pure-grids-min.css">
     <link rel="stylesheet" href="/css/vendor/pure-grids-responsive-min.css">
     <link rel="stylesheet" href="/css/styles.css">
@@ -88,7 +88,14 @@
     <div class="splitter">
     </div>
 
-    <iframe id="sandbox-iframe" class="panel-right" {{#example}}src="/examples/{{repo.path}}/{{example.slug}}"{{/example}}{{^example}}src="/html/start-iframe.html"{{/example}}></iframe>
+    <div class="panel-right">
+      <iframe id="sandbox-iframe"{{#testMode}} class="test-mode"{{/testMode}} {{#example}}src="/examples/{{repo.path}}/{{example.slug}}"{{/example}}{{^example}}src="/html/start-iframe.html"{{/example}}></iframe>
+      {{#testMode}}
+      <div id="qunit"></div>
+      <div id="qunit-fixture"></div>
+      {{/testMode}}
+    </div>
+
 </div>
 
 {{=<% %>=}}
@@ -130,7 +137,10 @@
 <script src="/js/vendor/jquery-3.2.1.min.js" ></script>
 <script src="/js/vendor/jquery-resizable.min.js" ></script>
 <script src="/js/vendor/jquery.color.js" ></script>
-<!-- <script src="/js/vendor/qunit-2.4.1.js" ></script> -->
+{{#testMode}}
+<script src="/js/vendor/qunit-2.4.1.js"></script>
+<script src="/js/test/ws.test.js"></script>
+{{/testMode}}
 <script src="/js/vendor/mustache.min.js" ></script>
 <script src="/js/vendor/lodash.min.js" ></script>
 <script src="/js/vendor/loadJS.js" ></script>

js/test/ws.test.js

@@ -0,0 +1,7 @@
+(function($) {
+  $(document).ready(function() {
+    QUnit.test( "hello test", function( assert ) {
+      assert.ok( 1 == "1", "Passed!" );
+    });
+  });
+})(jQuery);

js/ws-editor.js

@@ -81,7 +81,6 @@ $(document).ready(function() {
 
   function onTabClicked() {
     var clickedItem = $(this);
-    console.log('clicked', this);
     var type = clickedItem.data('type');
     editorSession.setMode("ace/mode/" + mapTypes[type]);
     var name = clickedItem.html();

lib/indexHandlers.js

@@ -35,7 +35,7 @@ module.exports = function(exStore, exDir) {
     return readFilesAsync(exampleDir, files);
   }
 
-  function renderIndex(req, withRepo, withExample) {
+  function renderIndex(req, withRepo, withExample, testMode) {
 
     // Extract repoSlug and exampleSlug from req.params
     const { locale, params: { repoSlug, exampleSlug } } = req;
@@ -46,6 +46,7 @@ module.exports = function(exStore, exDir) {
     // Initialize view data
     let data = {
       menuRepo: exStore.getRepoMenu(),
+      testMode,
       _: translator.getAll(locale)
     };
 
@@ -118,6 +119,16 @@ module.exports = function(exStore, exDir) {
 
 
     /**
+     * Get bare index without repo or examples,
+     * for running tests with QUnit
+     */
+    getIndexTest: function(req, res) {
+      renderIndex(req, false, false, true)
+      .then(({ html, code }) => res.send(html));
+    },
+
+
+    /**
      * Get index with repo selected only
      */
     getIndexRepo: function(req, res) {

sandboxApp.js

@@ -25,6 +25,7 @@ var {
 var {
   getAcceptLanguage,
   getIndexBare,
+  getIndexTest,
   getIndexRepo,
   getIndexExample
 }                 = require('./lib/indexHandlers')(exStore, examplesDir);
@@ -90,6 +91,13 @@ app.get('/parts/:repoSlug/:exampleSlug', getPartsExample);
 app.get('/', getIndexBare);
 
 /**
+ * Index page: render for tests
+ */
+if(process.env.NODE_ENV === 'testing') {
+  app.get('/test', getIndexTest);
+}
+
+/**
  * Repo page: render with repo list and selected repo's example list in menu
  */
 app.get('/:repoSlug', getIndexRepo);