changed summary to only animate when updating

When in watch mode, the summary background used to animate all
the time. This meant that it was difficult to understand if the test was
currently running or if the results you were looking at were the result
of the latest test run.

With this change the background only animates when a test is actually
in progress. If you are in watch mode, the play button turns to a stop
button and the background is not animated, But when Jest is running,
the background is animating. When jest finishes, the background stops.

This addresses issue Raathigesh#193

ui/test-file/index.tsx

@@ -89,6 +89,8 @@ function TestFile({ selectedFilePath, isRunning, projectRoot, onStop }: Props) {
     result => result.changeToResult
   );
 
+  const isUpdating = isRunning && (result ===  null ||(result.numPassingTests === 0 && result.numFailingTests === 0));
+
   const haveSnapshotFailures = ((result && result.testResults) || []).some(
     testResult => {
       return (testResult.failureMessages || []).some(failureMessage =>
@@ -115,8 +117,8 @@ function TestFile({ selectedFilePath, isRunning, projectRoot, onStop }: Props) {
         failingTests={result && result.numFailingTests}
         path={selectedFilePath}
         isRunning={isRunning}
+        isUpdating={isUpdating}
         isLoadingResult={loading}
-        haveSnapshotFailures={haveSnapshotFailures}
         onRun={() => {
           runFile();
         }}

ui/test-file/summary/index.tsx

@@ -107,11 +107,11 @@ interface Props {
   passingTests: number;
   failingTests: number;
   isRunning: boolean;
+  isUpdating: boolean;
   isLoadingResult: boolean;
   onRun: () => void;
   onStop: () => void;
   onSnapshotUpdate: () => void;
-  haveSnapshotFailures: boolean;
 }
 
 export default function FileSummary({
@@ -123,11 +123,11 @@ export default function FileSummary({
   passingTests,
   failingTests,
   isRunning,
+  isUpdating,
   isLoadingResult,
   onRun,
   onStop,
-  onSnapshotUpdate,
-  haveSnapshotFailures
+  onSnapshotUpdate
 }: Props) {
   const Icon = isRunning ? StopCircle : Play;
 
@@ -139,7 +139,7 @@ export default function FileSummary({
 
   return (
     <Container p={4} bg="slightDark">
-      {(isRunning || isLoadingResult) && <ContainerBG />}
+      {( isUpdating || isLoadingResult) && <ContainerBG />}
       <RightContainer>
         <FilePath fontSize={15} mb={3}>
           {path.replace(projectRoot, "")}