Merge pull request #19 from sasjs/test-suite-run-order

fix(test-suite-run): Run test suites in serial order
sasjs · Aug 8, 2020 · e596327 · e596327
2 parents a6cc277 + 7d3eccf
commit e596327
Show file tree

Hide file tree

Showing 9 changed files with 411 additions and 129 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
   ],
   "dependencies": {
     "@types/react-highlight.js": "^1.0.0",
+    "immer": "^7.0.7",
     "moment": "^2.27.0",
     "react-highlight.js": "^1.0.7",
     "semantic-ui-css": "^2.4.1",

diff --git a/src/components/TestCard.scss b/src/components/TestCard.scss
@@ -6,6 +6,8 @@
   border: 1px solid #ddd;
   border-radius: 5px;
   width: 20%;
+  min-height: 150px;
+  min-width: 375px;
 
   .title {
     font-weight: bold;

diff --git a/src/components/TestCard.tsx b/src/components/TestCard.tsx
@@ -6,7 +6,7 @@ interface TestCardProps {
   description: string;
   status: string;
   error: Error | null;
-  executionTime?: number;
+  executionTime?: number | null;
   onRerun?: () => void;
 }
 const TestCard = (props: TestCardProps): ReactElement<TestCardProps> => {
@@ -17,8 +17,13 @@ const TestCard = (props: TestCardProps): ReactElement<TestCardProps> => {
       <div>
         <code className="title">{title}</code>
         {!!onRerun && (
-          <button className="re-run-button" onClick={onRerun}>
-            Re-run
+          <button
+            className={`re-run-button ${
+              status === "running" ? "disabled" : ""
+            }`}
+            onClick={onRerun}
+          >
+            {status === "running" ? "Running" : "Re-run"}
           </button>
         )}
       </div>

diff --git a/src/components/TestSuite.tsx b/src/components/TestSuite.tsx
@@ -3,21 +3,29 @@ import "./TestSuiteCard.scss";
 import { Test } from "../types";
 import TestComponent from "./Test";
 import TestCard from "./TestCard";
-import TestSuiteCard from "./TestSuiteCard";
+// import TestSuiteCard from "./TestSuiteCard";
 
 interface TestSuiteProps {
   name: string;
   tests: Test[];
   isRunning: boolean;
   beforeAll?: (...args: any) => Promise<any>;
   afterAll?: (...args: any) => Promise<any>;
-  onCompleted: () => void;
+  onCompleted: (
+    name: string,
+    completedTests: {
+      test: Test;
+      result: boolean;
+      error: Error | null;
+      executionTime: number;
+    }[]
+  ) => void;
 }
 const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
-  const { name, tests, isRunning, beforeAll, afterAll, onCompleted } = props;
+  const { name, tests, beforeAll, afterAll, onCompleted } = props;
   const [context, setContext] = useState<any>(null);
-  const [running, setRunning] = useState<boolean>(false);
-  const [isSingleTest, setIsSingleTest] = useState<boolean>(false);
+  // const [running, setRunning] = useState<boolean>(false);
+  // const [isSingleTest, setIsSingleTest] = useState<boolean>(false);
   const [completedTests, setCompletedTests] = useState<
     {
       test: Test;
@@ -36,9 +44,9 @@ const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
     }
   }, [beforeAll]);
 
-  useEffect(() => {
-    setRunning(isRunning);
-  }, [isRunning]);
+  // useEffect(() => {
+  //   setRunning(isRunning);
+  // }, [isRunning]);
 
   useEffect(() => {
     if (tests.length) {
@@ -48,109 +56,105 @@ const TestSuite = (props: TestSuiteProps): ReactElement<TestSuiteProps> => {
     setContext(null);
   }, [tests]);
 
-  if (!running && completedTests.length) {
-    return (
-      <TestSuiteCard
-        tests={completedTests}
-        name={name}
-        onRerunTest={(test: Test) => {
-          const newCompleteTests = completedTests.filter(
-            (t) => t.test !== test
-          );
-          setCompletedTests(newCompleteTests);
-          setCurrentTest(test);
-          setRunning(true);
-          setIsSingleTest(true);
-        }}
-        onRerun={() => {
-          setCompletedTests([]);
-          setRunning(true);
-          setContext(null);
-          if (beforeAll) {
-            beforeAll().then((data) => setContext({ data }));
-          }
-          if (tests.length) {
-            setCurrentTest(tests[0]);
-          }
-        }}
-      />
-    );
-  }
+  // if (!running && completedTests.length) {
+  //   return (
+  //     <TestSuiteCard
+  //       tests={completedTests}
+  //       name={name}
+  //       onRerunTest={(test: Test) => {
+  //         const newCompleteTests = completedTests.filter(
+  //           (t) => t.test !== test
+  //         );
+  //         setCompletedTests(newCompleteTests);
+  //         setCurrentTest(test);
+  //         setRunning(true);
+  //         setIsSingleTest(true);
+  //       }}
+  //       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}
+  return (!!beforeAll && !!context) || !beforeAll ? (
+    <div className="test-suite">
+      <div className="test-suite-name running">{name}</div>
+      {currentTest && (
+        <TestComponent
+          {...currentTest}
+          context={context}
+          onRerun={() => {
+            const newCompleteTests = completedTests.filter(
+              (t) => t.test.title !== currentTest.title
+            );
+            setCompletedTests(newCompleteTests);
+            setCurrentTest(currentTest);
+          }}
+          onCompleted={(completedTest) => {
+            const newCompleteTests = [
+              {
+                test: currentTest,
+                result: completedTest.result,
+                error: completedTest.error,
+                executionTime: completedTest.executionTime
+              },
+              ...completedTests
+            ];
+            setCompletedTests(newCompleteTests);
+            // if (!isSingleTest) {
+            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(() => {
+                  // 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}
             onRerun={() => {
               const newCompleteTests = completedTests.filter(
-                (t) => t.test.title !== currentTest.title
+                (t) => t.test !== currentTest
               );
               setCompletedTests(newCompleteTests);
               setCurrentTest(currentTest);
             }}
-            onCompleted={(completedTest) => {
-              const newCompleteTests = [
-                {
-                  test: currentTest,
-                  result: completedTest.result,
-                  error: completedTest.error,
-                  executionTime: completedTest.executionTime
-                },
-                ...completedTests
-              ];
-              setCompletedTests(newCompleteTests);
-              if (!isSingleTest) {
-                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(() => {
-                    setRunning(false);
-                    onCompleted();
-                  });
-                } else {
-                  setRunning(false);
-                  onCompleted();
-                }
-              }
-            }}
+            title={title}
+            description={description}
+            status={result === true ? "passed" : "failed"}
+            error={error}
           />
-        )}
-        {completedTests.map((completedTest, index) => {
-          const { test, result, error } = completedTest;
-          const { title, description } = test;
-          return (
-            <TestCard
-              key={index}
-              onRerun={() => {
-                const newCompleteTests = completedTests.filter(
-                  (t) => t.test !== currentTest
-                );
-                setCompletedTests(newCompleteTests);
-                setCurrentTest(currentTest);
-              }}
-              title={title}
-              description={description}
-              status={result === true ? "passed" : "failed"}
-              error={error}
-            />
-          );
-        })}
-      </div>
-    ) : (
-      <div />
-    )
+        );
+      })}
+    </div>
   ) : (
     <div />
   );

diff --git a/src/components/TestSuiteCard.scss b/src/components/TestSuiteCard.scss
@@ -31,4 +31,10 @@
   border-radius: 5px;
   padding: 5px;
   margin-left: 10px;
+
+  &.disabled {
+    background-color: #787b93;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
diff --git a/src/components/TestSuiteCard.tsx b/src/components/TestSuiteCard.tsx
@@ -7,9 +7,10 @@ interface TestSuiteCardProps {
   name: string;
   tests: {
     test: Test;
+    isRunning?: boolean;
     result: boolean;
     error: Error | null;
-    executionTime: number;
+    executionTime: number | null;
   }[];
   onRerun: () => void;
   onRerunTest: (test: Test) => void;
@@ -19,25 +20,35 @@ const TestSuiteCard = (
 ): ReactElement<TestSuiteCardProps> => {
   const { name, tests, onRerun, onRerunTest } = props;
   const overallStatus = tests.map((t) => t.result).reduce((x, y) => x && y);
+  const isSuiteRunning = tests.map((t) => t.isRunning).reduce((x, y) => x || y);
 
   return (
     <div className="test-suite">
-      <div className={`test-suite-name ${overallStatus ? "passed" : "failed"}`}>
+      <div
+        className={`test-suite-name ${
+          isSuiteRunning ? "running" : overallStatus ? "passed" : "failed"
+        }`}
+      >
         {name}
-        <button className="re-run-button" onClick={onRerun}>
-          Re-run
+        <button
+          className={`re-run-button ${isSuiteRunning ? "disabled" : ""}`}
+          onClick={onRerun}
+        >
+          {isSuiteRunning ? "Running" : "Re-run"}
         </button>
       </div>
       {tests.map((completedTest, index) => {
-        const { test, result, error, executionTime } = completedTest;
+        const { test, result, error, executionTime, isRunning } = completedTest;
         const { title, description } = test;
         return (
           <TestCard
             key={index}
             title={title}
             onRerun={() => onRerunTest(test)}
             description={description}
-            status={result === true ? "passed" : "failed"}
+            status={
+              isRunning ? "running" : result === true ? "passed" : "failed"
+            }
             error={error}
             executionTime={executionTime}
           />