Merge pull request #30 from mvdwg/start-and-end-animations

Start and end animations
mvdwg · Feb 1, 2017 · ab24a51 · ab24a51
2 parents a82f031 + 701979a
commit ab24a51
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 18 deletions.
diff --git a/addon/animation.js b/addon/animation.js
@@ -99,9 +99,29 @@ function scrollToElement($element) {
   }, SCROLL_SPEED);
 }
 
+function finish() {
+  $('body').fadeOut(3000).fadeIn(0);
+  return sleep(3000);
+}
+
+function osd(text, timeout) {
+  timeout = timeout || 3000;
+
+  $('<div>', {
+    text,
+    class: 'tsOSD'
+  })
+  .appendTo($('body'))
+  .animate({
+    opacity: 1
+  }, timeout, function() { $(this).remove(); });
+}
+
 export default {
   pointer,
   movePointerTo,
+  finish,
+  osd,
   clickEffectBefore() {
     return () => clickEffectBefore();
   },

diff --git a/addon/index.js b/addon/index.js
@@ -7,8 +7,35 @@ export function shutdown(returnValue) {
   let promise = RSVP.resolve(returnValue);
 
   if (window.QUnit && window.QUnit.urlParams.tellingStories) {
-    return Animation.sleep(3000)().then(() => promise);
+    return Animation.finish().then(() => promise);
   }
 
   return promise;
 }
+
+export function suiteStart(totalTests) {
+  console.log(`Test suite starts. Total tests: ${totalTests}`);
+}
+
+export function suiteEnd() {
+  console.log('Test suite ends');
+}
+
+export function moduleStart(name) {
+  console.log(`Module starts: ${name}`);
+}
+
+export function moduleEnd() {
+  console.log('Module ends');
+}
+
+export function testStart(context) {
+  console.log(`Test starts: %o`, context);
+  if (/^Acceptance/.test(context.module)) {
+    Animation.osd(context.name);
+  }
+}
+
+export function testEnd() {
+  console.log(`Test ends`);
+}
diff --git a/addon/page-object-execution-context.js b/addon/page-object-execution-context.js
@@ -7,7 +7,7 @@ export default function TellingStoriesContext(pageObjectNode) {
   this.pageObjectNode = pageObjectNode;
 }
 
-let previousElement = null;
+// let previousElement = null;
 
 TellingStoriesContext.prototype = {
   run(cb) {
@@ -26,9 +26,12 @@ TellingStoriesContext.prototype = {
   visit(path) {
     /* global visit */
     visit(path);
+    wait().then(Animation.sleep(3000));
   },
 
   click(selector, container) {
+    container = container || '#ember-testing';
+
     /* global wait */
     wait()
       .then(Animation.movePointerTo(selector, container))
@@ -41,6 +44,8 @@ TellingStoriesContext.prototype = {
   },
 
   fillIn(selector, container, text) {
+    container = container || '#ember-testing';
+
     /* global wait */
     wait()
       .then(Animation.movePointerTo(selector, container))
@@ -55,6 +60,8 @@ TellingStoriesContext.prototype = {
   },
 
   triggerEvent(selector, container, eventName, eventOptions) {
+    container = container || '#ember-testing';
+
     /* global wait */
     wait().then(Animation.sleep(500));
 
@@ -76,7 +83,7 @@ TellingStoriesContext.prototype = {
     selector = buildSelector(this.pageObjectNode, selector, options);
 
     /* global find */
-    result = find(selector, options.testContainer);
+    result = find(selector, options.testContainer || findClosestValue(this.pageObjectNode, 'testContainer'));
 
     this.attention(result);
 
@@ -100,15 +107,15 @@ TellingStoriesContext.prototype = {
     return result;
   },
 
-  attention(element) {
-    wait().then(() => {
-      if (previousElement) {
-        previousElement.removeClass('tsAttention');
-      }
-
-      previousElement = element.addClass('tsAttention');
-
-      return Animation.sleep(1000)();
-    });
+  attention(/* element */) {
+    // wait().then(() => {
+    //   if (previousElement) {
+    //     previousElement.removeClass('tsAttention');
+    //   }
+    //
+    //   previousElement = element.addClass('tsAttention');
+    //
+    //   return Animation.sleep(1000)();
+    // });
   }
 };
diff --git a/index.js b/index.js
@@ -18,7 +18,7 @@ module.exports = {
 
     this._super.included.apply(this, arguments);
 
-    app.import('vendor/telling-stories/qunit-configuration.js', { type: 'test' });
+    app.import('vendor/telling-stories/qunit-configuration.js', { type: 'test', prepend: true });
     app.import('vendor/telling-stories/player-mode.css', { type: 'test' });
   },
 

diff --git a/vendor/telling-stories/player-mode.css b/vendor/telling-stories/player-mode.css
@@ -54,3 +54,15 @@
   75% { opacity: .5; }
   100% { opacity: 1; }
 }
+
+.tsOSD {
+  position: fixed;
+  top: 150px;
+  left: 150px;
+  font-size: 40px;
+  z-index: 99999;
+  padding: 20px 40px;
+  background: rgba(255,255,255,0.8);
+  border-radius: 5px;
+  box-shadow: 0 0 5px black;
+}
diff --git a/vendor/telling-stories/qunit-configuration.js b/vendor/telling-stories/qunit-configuration.js
@@ -1,13 +1,24 @@
 jQuery(function() {
-  if (window.QUnit) {
-    window.QUnit.config.urlConfig.push({
+  var qunit = window.QUnit;
+
+  if (qunit) {
+    qunit.config.urlConfig.push({
       id: 'tellingStories',
       label: 'Tell me the story'
     });
 
-    if (window.QUnit.urlParams.tellingStories) {
-      window.QUnit.urlParams.devmode = true;
+    if (qunit.urlParams.tellingStories) {
+      qunit.urlParams.devmode = true;
       $('body').addClass('telling-stories');
+
+      var callbacks = require('telling-stories');
+
+      qunit.begin(callbacks.suiteStart);
+      qunit.done(callbacks.suiteEnd);
+      qunit.moduleStart(callbacks.moduleStart);
+      qunit.moduleDone(callbacks.moduleEnd);
+      qunit.testStart(callbacks.testStart);
+      qunit.testDone(callbacks.testEnd);
     }
   }
 });