From ce46d1906b4943afebce38794f2e38f26dff2405 Mon Sep 17 00:00:00 2001
From: Helder <heldersepu@gmail.com>
Date: Wed, 15 Jun 2016 05:47:00 -0400
Subject: [PATCH] Animate #testSuite to focus user on errors - As soon as the
 user clicks the button we hide('slow') the div #testSuite - Then on
 displayTestResults we show it.

Use fadeOut/fadeIn instead of hide/show

Scroll the div #scroll-locker to the bottom
- Fix for some challenges with long contents on div #scroll-locker

Fix Err: Strings must use singlequote quotes
---
 client/commonFramework/display-test-results.js | 3 ++-
 client/commonFramework/end.js                  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/commonFramework/display-test-results.js b/client/commonFramework/display-test-results.js
index f30790fddb..a925b3b213 100644
--- a/client/commonFramework/display-test-results.js
+++ b/client/commonFramework/display-test-results.js
@@ -2,6 +2,7 @@ window.common = (function({ $, common = { init: [] }}) {
 
   common.displayTestResults = function displayTestResults(data = []) {
     $('#testSuite').children().remove();
+    $('#testSuite').fadeIn('slow');
     data.forEach(({ err = false, text = '' }) => {
       var iconClass = err ?
         '"ion-close-circled big-error-icon"' :
@@ -20,7 +21,7 @@ window.common = (function({ $, common = { init: [] }}) {
       `)
         .appendTo($('#testSuite'));
     });
-
+    $('#scroll-locker').animate({ scrollTop: $(document).height() }, 'slow');
     return data;
   };
 
diff --git a/client/commonFramework/end.js b/client/commonFramework/end.js
index b2a6b09a67..1a841de50c 100644
--- a/client/commonFramework/end.js
+++ b/client/commonFramework/end.js
@@ -89,6 +89,7 @@ $(document).ready(function() {
     common.submitBtn$
   )
     .flatMap(() => {
+      $('#testSuite').fadeOut('slow');
       common.appendToOutputDisplay('\n// testing challenge...');
       return common.executeChallenge$()
         .map(({ tests, ...rest }) => {