Disallowing Test Plans with Incomplete Tests

client/components/CandidateTests/CandidateTestPlanRun/CandidateTestPlanRun.css

@@ -157,3 +157,12 @@
     position: relative;
     top: -5px;
 }
+
+.incomplete-test-plan-information-text {
+    margin-top: 5%;
+}
+
+.status-bar {
+    display: flex;
+    align-items: center;
+}

client/components/CandidateTests/CandidateTestPlanRun/index.jsx

@@ -29,6 +29,7 @@ import ThankYouModal from '../CandidateModals/ThankYouModal';
 import getMetrics from '../../Reports/getMetrics';
 import FeedbackListItem from '../FeedbackListItem';
 import DisclosureComponent from '../../common/DisclosureComponent';
+import StatusBar from '../../TestRun/StatusBar';
 
 // https://codesandbox.io/s/react-hookresize-observer-example-ft88x
 function useSize(target) {
@@ -165,6 +166,21 @@ const CandidateTestPlanRun = () => {
         setThankYouModalShowing(true);
     };
 
+    const handleIncompleteTestPlans = () => {
+        const runnableTests = testPlanReport.runnableTests;
+        const finalizedTests = testPlanReport.finalizedTestResults;
+        const finalizedTestIds = finalizedTests.map(x => x.test.id);
+
+        const hasIncompleteTests =
+            runnableTests.length != finalizedTests.length;
+
+        const viewedCompleteTests = viewedTests.filter(viewedTest =>
+            finalizedTestIds.includes(viewedTest)
+        );
+
+        return { hasIncompleteTests, viewedCompleteTests };
+    };
+
     useEffect(() => {
         if (data) {
             if (
@@ -345,6 +361,9 @@ const CandidateTestPlanRun = () => {
         }
     };
 
+    const { hasIncompleteTests, viewedCompleteTests } =
+        handleIncompleteTestPlans();
+
     const heading = (
         <div className="test-info-heading">
             <div className="sr-only" aria-live="polite" aria-atomic="true">
@@ -369,6 +388,10 @@ const CandidateTestPlanRun = () => {
                     </Badge>
                 )}
             </h1>
+            {hasIncompleteTests &&
+            (
+                <StatusBar isCandidateTestRun={true} hasIncompleteTestRuns={true} />
+            )}
         </div>
     );
 
@@ -492,21 +515,34 @@ const CandidateTestPlanRun = () => {
                             testPlanReport.finalizedTestResults[
                                 currentTestIndex
                             ];
-                        const { testsPassedCount } = getMetrics({ testResult });
-                        return (
-                            <>
-                                <h2 className="test-results-header">
-                                    Test Result:{' '}
-                                    {testsPassedCount ? 'PASS' : 'FAIL'}
-                                </h2>
-                                <TestPlanResultsTable
-                                    tableClassName="test-results-table"
-                                    key={`${testPlanReport.id} + ${testResult.id}`}
-                                    test={currentTest}
-                                    testResult={testResult}
-                                />
-                            </>
-                        );
+
+                        if (testResult) {
+                            const { testsPassedCount } = getMetrics({
+                                testResult
+                            });
+                            return (
+                                <>
+                                    <h2 className="test-results-header">
+                                        Test Result:{' '}
+                                        {testsPassedCount ? 'PASS' : 'FAIL'}
+                                    </h2>
+                                    <TestPlanResultsTable
+                                        tableClassName="test-results-table"
+                                        key={`${testPlanReport.id} + ${testResult.id}`}
+                                        test={currentTest}
+                                        testResult={testResult}
+                                    />
+                                </>
+                            );
+                        } else {
+                            return (
+                                <>
+                                    <h2 className="test-results-header">
+                                        Test Result: INCOMPLETE
+                                    </h2>
+                                </>
+                            );
+                        }
                     })
                 ]}
                 stacked
@@ -542,7 +578,7 @@ const CandidateTestPlanRun = () => {
                     currentTestIndex={currentTestIndex}
                     toggleShowClick={toggleTestNavigator}
                     handleTestClick={handleTestClick}
-                    viewedTests={viewedTests}
+                    viewedTests={viewedCompleteTests}
                 />
                 <Col
                     className="candidate-test-area"
@@ -601,7 +637,10 @@ const CandidateTestPlanRun = () => {
                                                             true
                                                         );
                                                     }}
-                                                    disabled={!isLastTest}
+                                                    disabled={
+                                                        !isLastTest ||
+                                                        hasIncompleteTests
+                                                    }
                                                 >
                                                     Finish
                                                 </Button>

client/components/TestQueueRow/TestQueueRow.css

@@ -107,6 +107,14 @@ button.more-actions:active {
     width: initial;
 }
 
+.next-report-status-information-text {
+    font-size: small;
+    text-align: center;
+    display: block;
+    margin: 5%;
+    color:gray;
+}
+
 /* tr.test-queue-run-row td:first-child {
     padding: 0.75rem;
 } */

client/components/TestQueueRow/index.jsx

@@ -427,12 +427,20 @@ const TestQueueRow = ({
     };
 
     const evaluateNewReportStatus = () => {
-        const { status, conflictsLength } = testPlanReport;
+        const { status, conflictsLength, runnableTestsLength, draftTestPlanRuns } =
+            testPlanReport;
+
         const conflictsCount = conflictsLength;
+        const draftTestPlansTestResultsLengths = draftTestPlanRuns.map(x => x.testResultsLength);
+
+        const hasIncompleteTests = draftTestPlansTestResultsLengths.filter(x => x != runnableTestsLength).length > 0
 
         // If there are no conflicts OR the test has been marked as "final",
         // and admin can mark a test run as "draft"
         let newStatus;
+        let newStatusCanContinue;
+        let newStatusInformationText;
+
         if (
             (status !== 'IN_REVIEW' &&
                 conflictsCount === 0 &&
@@ -450,11 +458,24 @@ const TestQueueRow = ({
         ) {
             newStatus = 'CANDIDATE';
         }
-        return newStatus;
+
+        if (newStatus === 'CANDIDATE' && hasIncompleteTests) {
+            newStatusCanContinue = false;
+            newStatusInformationText =
+                'Incomplete test plans cannot transition to the candidate report status.';
+        } else {
+            newStatusCanContinue = true;
+        }
+
+        return { newStatus, newStatusCanContinue, newStatusInformationText };
     };
 
     const { status, results } = evaluateStatusAndResults();
-    const nextReportStatus = evaluateNewReportStatus();
+    const {
+        newStatus: nextReportStatus,
+        newStatusCanContinue: nextReportStatusCanContinue,
+        newStatusInformationText: nextReportStatusInformationText
+    } = evaluateNewReportStatus();
 
     const getRowId = tester =>
         [
@@ -533,25 +554,37 @@ const TestQueueRow = ({
                     <div className="status-wrapper">{status}</div>
                     {isSignedIn && isTester && (
                         <div className="secondary-actions">
-                            {isAdmin && !isLoading && nextReportStatus && (
-                                <>
-                                    <Button
-                                        ref={updateTestPlanStatusButtonRef}
-                                        variant="secondary"
-                                        onClick={async () => {
-                                            focusButtonRef.current =
-                                                updateTestPlanStatusButtonRef.current;
-                                            await updateReportStatus(
-                                                nextReportStatus
-                                            );
-                                        }}
-                                    >
-                                        Mark as{' '}
-                                        {capitalizeEachWord(nextReportStatus, {
-                                            splitChar: '_'
-                                        })}
-                                    </Button>
-                                </>
+                            {isAdmin &&
+                                !isLoading &&
+                                nextReportStatus &&
+                                nextReportStatusCanContinue && (
+                                    <>
+                                        <Button
+                                            ref={updateTestPlanStatusButtonRef}
+                                            variant="secondary"
+                                            onClick={async () => {
+                                                focusButtonRef.current =
+                                                    updateTestPlanStatusButtonRef.current;
+                                                await updateReportStatus(
+                                                    nextReportStatus
+                                                );
+                                            }}
+                                        >
+                                            Mark as{' '}
+                                            {capitalizeEachWord(
+                                                nextReportStatus,
+                                                {
+                                                    splitChar: '_'
+                                                }
+                                            )}
+                                        </Button>
+                                    </>
+                                )}
+
+                            {nextReportStatusInformationText && (
+                                <span className="next-report-status-information-text">
+                                    {nextReportStatusInformationText}
+                                </span>
                             )}
                             {results}
                         </div>

client/components/TestRun/StatusBar/index.jsx

@@ -6,6 +6,8 @@ import nextId from 'react-id-generator';
 
 const StatusBar = ({
     hasConflicts = false,
+    hasIncompleteTestRuns = false,
+    isCandidateTestRun = false,
     handleReviewConflictsButtonClick = () => {}
 }) => {
     const [statuses, setStatuses] = useState([]);
@@ -34,6 +36,17 @@ const StatusBar = ({
             });
         }
 
+        if(hasIncompleteTestRuns && isCandidateTestRun) {
+            const variant = 'warning';
+            const icon = 'alert';
+            const message = 'This Candidate Test Plan has incomplete test results and cannot be finished. Please move this Test Plan back to Draft and complete recording all test results.';
+            statuses.push({
+                icon,
+                message,
+                variant
+            });
+        }
+
         setStatuses(statuses);
     }, []);
 
@@ -59,6 +72,8 @@ const StatusBar = ({
 StatusBar.propTypes = {
     issues: PropTypes.array,
     hasConflicts: PropTypes.bool,
+    hasIncompleteTestRuns: PropTypes.bool,
+    isCandidateTestRun: PropTypes.bool,
     handleReviewConflictsButtonClick: PropTypes.func
 };