From 0eb6429a8acfd6dab56bebead95de66fa7945271 Mon Sep 17 00:00:00 2001
From: Greg Veres <greg.veres@rogers.com>
Date: Thu, 14 May 2020 21:55:54 -0400
Subject: [PATCH] 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 #193
---
 ui/test-file/index.tsx         | 4 +++-
 ui/test-file/summary/index.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/test-file/index.tsx b/ui/test-file/index.tsx
index 9a945eb..73d6a54 100644
--- a/ui/test-file/index.tsx
+++ b/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();
         }}
diff --git a/ui/test-file/summary/index.tsx b/ui/test-file/summary/index.tsx
index 163cc18..579f5f3 100644
--- a/ui/test-file/summary/index.tsx
+++ b/ui/test-file/summary/index.tsx
@@ -110,11 +110,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({
@@ -126,11 +126,11 @@ export default function FileSummary({
   passingTests,
   failingTests,
   isRunning,
+  isUpdating,
   isLoadingResult,
   onRun,
   onStop,
-  onSnapshotUpdate,
-  haveSnapshotFailures
+  onSnapshotUpdate
 }: Props) {
   const Icon = isRunning ? StopCircle : Play;
 
@@ -148,7 +148,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, "")}