From a621f65c28ba99cbd631b4bbeca747861402eadf Mon Sep 17 00:00:00 2001
From: Krishna Acondy <kc.acondy@outlook.com>
Date: Sun, 26 Jul 2020 12:34:24 +0100
Subject: [PATCH] feat(re-run): add ability to re-run test suites

---
 src/components/TestSuite.tsx       | 131 ++++++++++++++++++-----------
 src/components/TestSuiteCard.scss  |  11 +++
 src/components/TestSuiteCard.tsx   |   6 +-
 src/components/TestSuiteRunner.tsx |  72 +++++-----------
 4 files changed, 122 insertions(+), 98 deletions(-)

diff --git a/src/components/TestSuite.tsx b/src/components/TestSuite.tsx
index a051521..39e06df 100644
--- a/src/components/TestSuite.tsx
+++ b/src/components/TestSuite.tsx
@@ -3,10 +3,12 @@ import "./TestSuiteCard.scss";
 import { Test } from "../types";
 import TestComponent from "./Test";
 import TestCard from "./TestCard";
+import TestSuiteCard from "./TestSuiteCard";
 
 interface TestSuiteProps {
   name: string;
   tests: Test[];
+  isRunning: boolean;
   beforeAll?: (...args: any) => Promise<any>;
   afterAll?: (...args: any) => Promise<any>;
   onCompleted: (
@@ -20,8 +22,9 @@ interface TestSuiteProps {
   ) => void;
 }
 const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
-  const { name, tests, beforeAll, afterAll, onCompleted } = props;
+  const { name, tests, isRunning, beforeAll, afterAll, onCompleted } = props;
   const [context, setContext] = useState<any>(null);
+  const [running, setRunning] = useState<boolean>(false);
   const [completedTests, setCompletedTests] = useState<
     {
       test: Test;
@@ -40,6 +43,10 @@ const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
     }
   }, [beforeAll]);
 
+  useEffect(() => {
+    setRunning(isRunning);
+  }, [isRunning]);
+
   useEffect(() => {
     if (tests.length) {
       setCurrentTest(tests[0]);
@@ -48,56 +55,84 @@ const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
     setContext(null);
   }, [tests]);
 
-  return (!!beforeAll && !!context) || !beforeAll ? (
-    <div className="test-suite">
-      <div className="test-suite-name running">{name}</div>
-      {currentTest && (
-        <TestComponent
-          {...currentTest}
-          context={context}
-          onCompleted={(completedTest) => {
-            const newCompleteTests = [
-              ...completedTests,
-              {
-                test: currentTest,
-                result: completedTest.result,
-                error: completedTest.error,
-                executionTime: completedTest.executionTime
-              }
-            ];
-            setCompletedTests(newCompleteTests);
-            const currentIndex = tests.indexOf(currentTest);
-            const nextIndex =
-              currentIndex < tests.length - 1 ? currentIndex + 1 : -1;
-            if (nextIndex >= 0) {
-              setCurrentTest(tests[nextIndex]);
-            } else {
-              setCurrentTest(null);
-            }
-            if (newCompleteTests.length === tests.length) {
-              if (afterAll) {
-                afterAll().then(() => onCompleted(name, newCompleteTests));
+  if (!running && completedTests.length) {
+    return (
+      <TestSuiteCard
+        tests={completedTests}
+        name={name}
+        onRerun={() => {
+          setCompletedTests([]);
+          setRunning(true);
+          setContext(null);
+          if (beforeAll) {
+            beforeAll().then((data) => setContext({ data }));
+          }
+          if (tests.length) {
+            setCurrentTest(tests[0]);
+          }
+        }}
+      />
+    );
+  }
+
+  return running ? (
+    (!!beforeAll && !!context) || !beforeAll ? (
+      <div className="test-suite">
+        <div className="test-suite-name running">{name}</div>
+        {currentTest && (
+          <TestComponent
+            {...currentTest}
+            context={context}
+            onCompleted={(completedTest) => {
+              const newCompleteTests = [
+                ...completedTests,
+                {
+                  test: currentTest,
+                  result: completedTest.result,
+                  error: completedTest.error,
+                  executionTime: completedTest.executionTime
+                }
+              ];
+              setCompletedTests(newCompleteTests);
+              const currentIndex = tests.indexOf(currentTest);
+              const nextIndex =
+                currentIndex < tests.length - 1 ? currentIndex + 1 : -1;
+              if (nextIndex >= 0) {
+                setCurrentTest(tests[nextIndex]);
               } else {
-                onCompleted(name, newCompleteTests);
+                setCurrentTest(null);
+              }
+              if (newCompleteTests.length === tests.length) {
+                if (afterAll) {
+                  afterAll().then(() => {
+                    setRunning(false);
+                    onCompleted(name, newCompleteTests);
+                  });
+                } else {
+                  setRunning(false);
+                  onCompleted(name, newCompleteTests);
+                }
               }
-            }
-          }}
-        />
-      )}
-      {completedTests.map((completedTest, index) => {
-        const { test, result, error } = completedTest;
-        const { title, description } = test;
-        return (
-          <TestCard
-            key={index}
-            title={title}
-            description={description}
-            status={result === true ? "passed" : "failed"}
-            error={error}
+            }}
           />
-        );
-      })}
-    </div>
+        )}
+        {completedTests.map((completedTest, index) => {
+          const { test, result, error } = completedTest;
+          const { title, description } = test;
+          return (
+            <TestCard
+              key={index}
+              title={title}
+              description={description}
+              status={result === true ? "passed" : "failed"}
+              error={error}
+            />
+          );
+        })}
+      </div>
+    ) : (
+      <div />
+    )
   ) : (
     <div />
   );
diff --git a/src/components/TestSuiteCard.scss b/src/components/TestSuiteCard.scss
index ed744b8..7244fd1 100644
--- a/src/components/TestSuiteCard.scss
+++ b/src/components/TestSuiteCard.scss
@@ -3,6 +3,8 @@
     font-size: 1.5em;
     font-weight: bold;
     color: #1f2027;
+    display: flex;
+    align-items: center;
 
     &.passed {
       color: green;
@@ -17,3 +19,12 @@
     }
   }
 }
+
+.re-run-button {
+  background-color: rgb(0, 115, 255);
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  padding: 5px;
+  margin-left: 10px;
+}
diff --git a/src/components/TestSuiteCard.tsx b/src/components/TestSuiteCard.tsx
index c573e03..ba8bd0a 100644
--- a/src/components/TestSuiteCard.tsx
+++ b/src/components/TestSuiteCard.tsx
@@ -11,17 +11,21 @@ interface TestSuiteCardProps {
     error: Error | null;
     executionTime: number;
   }[];
+  onRerun: () => void;
 }
 const TestSuiteCard = (
   props: TestSuiteCardProps
 ): ReactElement<TestSuiteCardProps> => {
-  const { name, tests } = props;
+  const { name, tests, onRerun } = props;
   const overallStatus = tests.map((t) => t.result).reduce((x, y) => x && y);
 
   return (
     <div className="test-suite">
       <div className={`test-suite-name ${overallStatus ? "passed" : "failed"}`}>
         {name}
+        <button className="re-run-button" onClick={onRerun}>
+          Re-run
+        </button>
       </div>
       {tests.map((completedTest, index) => {
         const { test, result, error, executionTime } = completedTest;
diff --git a/src/components/TestSuiteRunner.tsx b/src/components/TestSuiteRunner.tsx
index be8adf6..a5fdece 100644
--- a/src/components/TestSuiteRunner.tsx
+++ b/src/components/TestSuiteRunner.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, ReactElement } from "react";
 import TestSuiteComponent from "./TestSuite";
-import TestSuiteCard from "./TestSuiteCard";
 import { TestSuite, Test } from "../types";
 import "./TestSuiteRunner.scss";
 
@@ -23,22 +22,10 @@ const TestSuiteRunner = (
       }[];
     }[]
   >([]);
-  const [currentTestSuite, setCurrentTestSuite] = useState<TestSuite | null>(
-    (null as unknown) as TestSuite
-  );
-
-  useEffect(() => {
-    if (testSuites && testSuites.length) {
-      setCurrentTestSuite(testSuites[0]);
-    }
-  }, [testSuites]);
 
   useEffect(() => {
     if (runTests) {
       setCompletedTestSuites([]);
-      if (testSuites && testSuites.length) {
-        setCurrentTestSuite(testSuites[0]);
-      }
     }
   }, [runTests, testSuites]);
 
@@ -59,47 +46,34 @@ const TestSuiteRunner = (
           )}
         </button>
       </div>
-      {completedTestSuites.map((completedTestSuite, index) => {
+      {testSuites.map((testSuite, index) => {
         return (
-          <TestSuiteCard
+          <TestSuiteComponent
             key={index}
-            tests={completedTestSuite.completedTests}
-            name={completedTestSuite.name}
+            {...testSuite}
+            isRunning={runTests}
+            onCompleted={(
+              name,
+              completedTests: {
+                test: Test;
+                result: boolean;
+                error: Error | null;
+                executionTime: number;
+              }[]
+            ) => {
+              const newCompletedTestSuites = [
+                ...completedTestSuites,
+                { name, completedTests }
+              ];
+              setCompletedTestSuites(newCompletedTestSuites);
+
+              if (newCompletedTestSuites.length === testSuites.length) {
+                setRunTests(false);
+              }
+            }}
           />
         );
       })}
-      {currentTestSuite && runTests && (
-        <TestSuiteComponent
-          {...currentTestSuite}
-          onCompleted={(
-            name,
-            completedTests: {
-              test: Test;
-              result: boolean;
-              error: Error | null;
-              executionTime: number;
-            }[]
-          ) => {
-            const currentIndex = testSuites.indexOf(currentTestSuite);
-            const nextIndex =
-              currentIndex < testSuites.length - 1 ? currentIndex + 1 : -1;
-            if (nextIndex >= 0) {
-              setCurrentTestSuite(testSuites[nextIndex]);
-            } else {
-              setCurrentTestSuite(null);
-            }
-            const newCompletedTestSuites = [
-              ...completedTestSuites,
-              { name, completedTests }
-            ];
-            setCompletedTestSuites(newCompletedTestSuites);
-
-            if (newCompletedTestSuites.length === testSuites.length) {
-              setRunTests(false);
-            }
-          }}
-        />
-      )}
     </div>
   );
 };