Improve test plan results summary table (#765)

* initial model, migration, and seeder * seeders test plan ids * test plan service * fixing migration * updating migrations to have foreign keys * Implementing Howard's feedback * Start to migrations and functions to support the DB change for further support of 648 * Add phase to TestPlanVersion * Update query and resolvers for test plan version mutations * Restored viewing of CandidateTestPlanRun * Fix graphql.schema * Rename TestPlanVersion date fields with 'status' in name to 'phase' * Add approvedAt column to TestPlanReport * Rename candidateStatusReachedAt to approvedAt * Update migration to be more clear and help in functional priority of following migrations * Start to new Test Plan Results Table * Update styling * Fix issue with submitting test results with new query shape; update blockquote styling * Add space between Run History and above TestPlanResults table on report results page * Fix optional priority string not being shown in TestPlanResultsTable component * Add missing border-bottom to test result heading on reports results page * Changes after rebase * Update Assertion priorities to use MUST/SHOULD instead of REQUIRED/OPTIONAL (#770) * Start to migrations and functions to support the DB change for further support of 648 * Add phase to TestPlanVersion * Update query and resolvers for test plan version mutations * Restored viewing of CandidateTestPlanRun * Rename TestPlanVersion date fields with 'status' in name to 'phase' * Rename candidateStatusReachedAt to approvedAt * Update migration to be more clear and help in functional priority of following migrations * Update REQUIRED and OPTIONAL assertion priorities to be MUST and SHOULD respectively * Add box back to reports --------- Co-authored-by: Erika Miguel <[email protected]> Co-authored-by: alflennik <[email protected]>
w3c · Oct 5, 2023 · 525ae22 · 525ae22
1 parent c86d29f
commit 525ae22
Show file tree

Hide file tree

Showing 13 changed files with 709 additions and 323 deletions.
diff --git a/client/components/CandidateReview/CandidateTestPlanRun/CandidateTestPlanRun.css b/client/components/CandidateReview/CandidateTestPlanRun/CandidateTestPlanRun.css
@@ -132,12 +132,7 @@
 }
 
 .test-results-header {
-    border-bottom: none;
-    margin: 0;
-    padding: 20px;
-    font-size: 20px;
-    background-color: #f5f8fa;
-    border: #e5efe8 1px solid;
+    margin: 0 0 1rem;
 }
 
 .test-results-table {

diff --git a/client/components/CandidateReview/CandidateTestPlanRun/index.jsx b/client/components/CandidateReview/CandidateTestPlanRun/index.jsx
@@ -22,10 +22,10 @@ import '../../TestRun/TestRun.css';
 import '../../App/App.css';
 import { useMediaQuery } from 'react-responsive';
 import { convertDateToString } from '../../../utils/formatter';
-import TestPlanResultsTable from '../../Reports/TestPlanResultsTable';
+import TestPlanResultsTable from '../../common/TestPlanResultsTable';
+import { calculateAssertionsCount } from '../../common/TestPlanResultsTable/utils';
 import ProvideFeedbackModal from '../CandidateModals/ProvideFeedbackModal';
 import ThankYouModal from '../CandidateModals/ThankYouModal';
-import getMetrics from '../../Reports/getMetrics';
 import FeedbackListItem from '../FeedbackListItem';
 import DisclosureComponent from '../../common/DisclosureComponent';
 import createIssueLink, {
@@ -508,17 +508,20 @@ const CandidateTestPlanRun = () => {
                             testPlanReport.finalizedTestResults[
                                 currentTestIndex
                             ];
-                        const { testsPassedCount } = getMetrics({ testResult });
+
+                        const { passedAssertionsCount, failedAssertionsCount } =
+                            calculateAssertionsCount(testResult);
+
                         return (
                             <>
                                 <h2 className="test-results-header">
-                                    Test Result:{' '}
-                                    {testsPassedCount ? 'PASS' : 'FAIL'}
+                                    Test Results&nbsp;(
+                                    {passedAssertionsCount} passed,&nbsp;
+                                    {failedAssertionsCount} failed)
                                 </h2>
                                 <TestPlanResultsTable
-                                    tableClassName="test-results-table"
                                     key={`${testPlanReport.id} + ${testResult.id}`}
-                                    test={currentTest}
+                                    test={{ ...currentTest, at: { name: at } }}
                                     testResult={testResult}
                                 />
                             </>

diff --git a/client/components/Reports/Reports.css b/client/components/Reports/Reports.css
@@ -93,7 +93,6 @@
     background: #e9f0f8;
     padding: 1.75em 1.75em 1em 1.75em;
     border: 1px solid #b5cfec;
-    border-bottom: 0;
     margin-top: 2em;
 }
 

diff --git a/client/components/Reports/SummarizeTestPlanReport.jsx b/client/components/Reports/SummarizeTestPlanReport.jsx
@@ -13,10 +13,20 @@ import {
 import { differenceBy } from 'lodash';
 import { convertDateToString } from '../../utils/formatter';
 import DisclaimerInfo from '../DisclaimerInfo';
-import TestPlanResultsTable from './TestPlanResultsTable';
+import TestPlanResultsTable from '../common/TestPlanResultsTable';
+import { calculateAssertionsCount } from '../common/TestPlanResultsTable/utils';
 import DisclosureComponent from '../common/DisclosureComponent';
 import { Navigate, useLocation, useParams } from 'react-router-dom';
 import createIssueLink from '../../utils/createIssueLink';
+import styled from '@emotion/styled';
+
+const ResultsContainer = styled.div`
+    padding: 1em 1.75em;
+    border-left: 1px solid #dee2e6;
+    border-right: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+    margin-bottom: 2em;
+`;
 
 const getTestersRunHistory = (
     testPlanReport,
@@ -162,14 +172,15 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
                     'https://aria-at.netlify.app'
                 );
 
+                const { passedAssertionsCount, failedAssertionsCount } =
+                    calculateAssertionsCount(testResult);
+
                 return (
                     <Fragment key={testResult.id}>
                         <div className="test-result-heading">
                             <h2 id={`result-${testResult.id}`} tabIndex="-1">
-                                <span className="test-details">
-                                    Details for test:
-                                </span>
-                                {test.title}
+                                {test.title}&nbsp;({passedAssertionsCount}
+                                &nbsp;passed, {failedAssertionsCount} failed)
                                 <DisclaimerInfo phase={testPlanVersion.phase} />
                             </h2>
                             <div className="test-result-buttons">
@@ -199,10 +210,14 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
                                 </Button>
                             </div>
                         </div>
-                        <TestPlanResultsTable
-                            test={test}
-                            testResult={testResult}
-                        />
+
+                        <ResultsContainer>
+                            <TestPlanResultsTable
+                                key={`TestPlanResultsTable__${testResult.id}`}
+                                test={{ ...test, at }}
+                                testResult={testResult}
+                            />
+                        </ResultsContainer>
 
                         <DisclosureComponent
                             componentId={`run-history-${testResult.id}`}

diff --git a/client/components/Reports/SummarizeTestPlanVersion.jsx b/client/components/Reports/SummarizeTestPlanVersion.jsx
@@ -128,8 +128,8 @@ const SummarizeTestPlanVersion = ({ testPlanVersion, testPlanReports }) => {
                             <thead>
                                 <tr>
                                     <th>Test Name</th>
-                                    <th>Required Assertions</th>
-                                    <th>Optional Assertions</th>
+                                    <th>MUST-DO Behaviors</th>
+                                    <th>SHOULD-DO Behaviors</th>
                                     <th>Unexpected Behaviors</th>
                                 </tr>
                             </thead>

diff --git a/client/components/Reports/TestPlanResultsTable.jsx b/client/components/Reports/TestPlanResultsTable.jsx