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

@@ -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;
   };
 

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 }) => {