193 better indication test run status (#198)

* 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

* fixed merge error

cherry picking the commit brought in part of another change.
this undoes that other change and puts the removed code back.

Co-authored-by: Greg Veres <[email protected]>

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,6 +117,7 @@ function TestFile({ selectedFilePath, isRunning, projectRoot, onStop }: Props) {
         failingTests={result && result.numFailingTests}
         path={selectedFilePath}
         isRunning={isRunning}
+        isUpdating={isUpdating}
         isLoadingResult={loading}
         haveSnapshotFailures={haveSnapshotFailures}
         onRun={() => {

ui/test-file/summary/index.tsx

@@ -108,6 +108,7 @@ interface Props {
   passingTests: number;
   failingTests: number;
   isRunning: boolean;
+  isUpdating: boolean;
   isLoadingResult: boolean;
   onRun: () => void;
   onStop: () => void;
@@ -124,6 +125,7 @@ export default function FileSummary({
   passingTests,
   failingTests,
   isRunning,
+  isUpdating,
   isLoadingResult,
   onRun,
   onStop,
@@ -140,7 +142,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, "")}