Merge pull request #477 from piotrpalek/twiddle-test-switch

Twiddle testing
ember-cli · Sep 9, 2016 · c6132ae · c6132ae
2 parents 5c51831 + cb0fe7f
commit c6132ae
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 32 deletions.
diff --git a/app/components/main-gist.js b/app/components/main-gist.js
@@ -5,7 +5,7 @@ import FilesMixin from "../mixins/files";
 import TestFilesMixin from "../mixins/test-files";
 import AppBuilderMixin from "../mixins/app-builder";
 
-const { inject } = Ember;
+const { inject, computed } = Ember;
 
 export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin, TestFilesMixin, {
   emberCli: inject.service('ember-cli'),
@@ -18,8 +18,8 @@ export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin,
   fullScreen: false,
   openFiles: "",
 
-  init(...args) {
-    this._super(...args);
+  init() {
+    this._super(...arguments);
     this.set('settings', Settings.create({
       isFastBoot: this.get('fastboot.isFastBoot')
     }));
@@ -76,11 +76,13 @@ export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin,
    */
   fileTreeShown: true,
 
+  testsEnabled: computed.oneWay('emberCli.enableTesting'),
+
   /**
    * reinitialize component when the model has changed
    */
   didReceiveAttrs() {
-    this._super.apply(this, arguments);
+    this._super(...arguments);
 
     const model = this.get('model');
 
@@ -238,6 +240,16 @@ export default Ember.Component.extend(AppBuilderMixin, ColumnsMixin, FilesMixin,
       const settings = this.get('settings');
       settings.set('keyMap', keyMap);
       settings.save();
+    },
+
+    switchTests(testsEnabled) {
+      this.ensureTestHelperExists();
+      this.ensureTestResolverExists();
+      this.ensureTestStartAppHelperExists();
+      this.ensureTestDestroyAppHelperExists();
+
+      this.get('emberCli').setTesting(this.get('model'), testsEnabled);
+      this.get('rebuildApp').perform();
     }
   }
 });
diff --git a/app/services/ember-cli.js b/app/services/ember-cli.js
@@ -157,6 +157,7 @@ export default Ember.Service.extend({
   twiddleJson: inject.service(),
 
   usePods: computed.readOnly('twiddleJson.usePods'),
+  enableTesting: false,
 
   setup(gist) {
     this.get('twiddleJson').setup(gist);
@@ -197,7 +198,7 @@ export default Ember.Service.extend({
    * @return {Ember Object}       Source code for built Ember app
    */
   compileGist (gist) {
-    var promise = new RSVP.Promise((resolve, reject) => {
+    let promise = new RSVP.Promise((resolve, reject) => {
       let errors = [];
       let out = [];
       let cssOut = [];
@@ -214,14 +215,23 @@ export default Ember.Service.extend({
 
       this.addBoilerPlateFiles(out, gist);
 
-      resolve(this.get('twiddleJson').getTwiddleJson(gist).then(twiddleJson => {
+      resolve(this.get('twiddleJson').getTwiddleJson(gist).then(twiddleJSON => {
 
-        this.addConfig(out, gist, twiddleJson);
+        this.addConfig(out, gist, twiddleJSON);
+        this.set('enableTesting', testingEnabled(twiddleJSON));
 
         // Add boot code
-        contentForAppBoot(out, {modulePrefix: twiddleAppName, dependencies: twiddleJson.dependencies});
-
-        return RSVP.resolve(this.buildHtml(gist, out.join('\n'), cssOut.join('\n'), twiddleJson));
+        contentForAppBoot(
+          out,
+          {
+            modulePrefix: twiddleAppName,
+            dependencies: twiddleJSON.dependencies,
+            testingEnabled: testingEnabled(twiddleJSON),
+            legacyTesting: legacyTesting(twiddleJSON)
+          }
+        );
+
+        return RSVP.resolve(this.buildHtml(gist, out.join('\n'), cssOut.join('\n'), twiddleJSON));
       }));
     });
 
@@ -272,7 +282,14 @@ export default Ember.Service.extend({
     let appStyleTag = `<style type="text/css">${appCSS}</style>`;
 
     index = index.replace('{{content-for \'head\'}}', `${depCssLinkTags}\n${appStyleTag}`);
-    index = index.replace('{{content-for \'body\'}}', `${depScriptTags}\n${appScriptTag}\n${testStuff}\n<div id="root"></div>`);
+
+    let contentForBody = `${depScriptTags}\n${appScriptTag}\n${testStuff}\n`;
+
+    if (!testingEnabled(twiddleJSON) || legacyTesting(twiddleJSON)) {
+      contentForBody += '<div id="root"></div>';
+    }
+
+    index = index.replace('{{content-for \'body\'}}', contentForBody);
 
     // replace the {{build-timestamp}} placeholder with the number of
     // milliseconds since the Unix Epoch:
@@ -307,9 +324,7 @@ export default Ember.Service.extend({
 
     depScriptTags += `<script type="text/javascript" src="${config.assetsHost}assets/twiddle-deps.js?${config.APP.version}"></script>`;
 
-    const testingEnabled = twiddleJSON.options && twiddleJSON.options["enable-testing"];
-
-    if (testingEnabled) {
+    if (testingEnabled(twiddleJSON)) {
       const testJSFiles = ['assets/test-loader.js', 'testem.js'];
 
       testJSFiles.forEach(jsFile => {
@@ -427,6 +442,10 @@ export default Ember.Service.extend({
         "import $1 from $2twiddle/");
     });
     return code;
+  },
+
+  setTesting(gist, enabled = true) {
+    this.get('twiddleJson').setTesting(gist, enabled);
   }
 });
 
@@ -468,11 +487,13 @@ function contentForAppBoot (content, config) {
     content.push('  require("'+mod+'").__esModule=true;');
   });
 
-  content.push('  require("' +
-    config.modulePrefix +
-    '/app")["default"].create(' +
-    calculateAppConfig(config) +
-    ');');
+  if (!config.testingEnabled || config.legacyTesting) {
+    content.push('  require("' +
+      config.modulePrefix +
+      '/app")["default"].create(' +
+      calculateAppConfig(config) +
+      ');');
+  }
 }
 
 /**
@@ -483,3 +504,11 @@ function calculateAppConfig(config) {
   appConfig.rootElement="#root";
   return JSON.stringify(appConfig);
 }
+
+function testingEnabled(twiddleJSON) {
+  return twiddleJSON && twiddleJSON.options && twiddleJSON.options["enable-testing"];
+}
+
+function legacyTesting(twiddleJSON) {
+  return twiddleJSON && twiddleJSON.options && twiddleJSON.options["legacy-testing"];
+}
diff --git a/app/services/twiddle-json.js b/app/services/twiddle-json.js
@@ -113,11 +113,15 @@ export default Ember.Service.extend({
   },
 
   ensureTestingEnabled(gist) {
+    return this.setTesting(gist, true);
+  },
+
+  setTesting(gist, enabled = true) {
     return this._updateTwiddleJson(gist, (json) => {
       if (!json.options) {
         json.options = {};
       }
-      json.options["enable-testing"] = true;
+      json.options["enable-testing"] = enabled;
       return json;
     });
   }

diff --git a/app/styles/_output-pane.scss b/app/styles/_output-pane.scss
@@ -35,3 +35,11 @@
     height: 100%;
   }
 }
+
+.twiddle-run-tests {
+  position: absolute;
+  right: 106px;
+  top: 10px;
+  margin: 10px 25px;
+  text-align: right;
+}
diff --git a/app/templates/components/gist-body.hbs b/app/templates/components/gist-body.hbs
@@ -3,8 +3,8 @@
     {{#if fileTreeShown}}
       <div class="col-md-4 file-tree">
         {{file-tree model=model
-                    openFile=(action this.attrs.openFile)
-                    hideFileTree=(action this.attrs.hideFileTree)
+                    openFile=(action this.openFile)
+                    hideFileTree=(action this.hideFileTree)
         }}
       </div>
     {{/if}}
@@ -18,12 +18,12 @@
                                keyMap=settings.keyMap
                                numColumns=numColumns
                                fileTreeShown=fileTreeShown
-                               focusEditor=(action this.attrs.focusEditor)
-                               selectFile=(action this.attrs.selectFile)
-                               contentChanged=(action this.attrs.updateColumn)
-                               removeColumn=(action this.attrs.removeColumn)
-                               addColumn=(action this.attrs.addColumn)
-                               showFileTree=(action this.attrs.showFileTree)
+                               focusEditor=(action this.focusEditor)
+                               selectFile=(action this.selectFile)
+                               contentChanged=(action this.updateColumn)
+                               removeColumn=(action this.removeColumn)
+                               addColumn=(action this.addColumn)
+                               showFileTree=(action this.showFileTree)
           }}
         </div>
       {{/if}}
@@ -33,14 +33,18 @@
   <div class="col-md-4 output {{if fullScreen 'full-screen'}}">
     <div class="header">
       {{#if noColumns}}
-        <span class="glyphicon glyphicon-plus" {{action (action this.attrs.addColumn)}} title="Show an editor panel"></span>
+        <span class="glyphicon glyphicon-plus" {{action (action this.addColumn)}} title="Show an editor panel"></span>
       {{/if}}
       {{build-messages notify=notify
                        isBuilding=isBuilding
                        buildErrors=buildErrors
       }}
     </div>
-    {{run-or-live-reload liveReloadChanged=(action this.attrs.liveReloadChanged) runNow=(action this.attrs.runNow)}}
+    <label class="checkbox-inline twiddle-run-tests">
+      {{better-checkbox id="switch-tests" checked=testsEnabled action=(action this.switchTests)}}
+      Run Tests
+    </label>
+    {{run-or-live-reload liveReloadChanged=(action this.liveReloadChanged) runNow=(action this.runNow)}}
     <div class="url-bar">
       {{input value=applicationUrl enter=(route-action "urlChanged")}}
     </div>
@@ -49,7 +53,7 @@
     {{/if}}
     {{dummy-app html=buildOutput isBuilding=isBuilding}}
     {{#if fullScreen}}
-      <a class="exit-full-screen-link" {{action (action this.attrs.exitFullScreen)}}>Edit Twiddle</a>
+      <a class="exit-full-screen-link" {{action (action this.exitFullScreen)}}>Edit Twiddle</a>
     {{/if}}
   </div>
-{{/twiddle-panes}}
+{{/twiddle-panes}}
diff --git a/app/templates/components/main-gist.hbs b/app/templates/components/main-gist.hbs
@@ -28,6 +28,7 @@
             buildErrors=buildErrors
             applicationUrl=applicationUrl
             buildOutput=buildOutput
+            testsEnabled=testsEnabled
             openFile=(action "openFile")
             hideFileTree=(action "hideFileTree")
             focusEditor=(action "focusEditor")
@@ -39,4 +40,5 @@
             liveReloadChanged=(action "liveReloadChanged")
             runNow=(action "runNow")
             exitFullScreen=(action "exitFullScreen")
+            switchTests=(action "switchTests")
 }}