Additional differentiation for the status of the test results to a no…

…n admin / signed out user through the test navigator and heading message
w3c · Sep 12, 2024 · 38ef952 · 38ef952
1 parent 643c123
commit 38ef952
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/client/components/TestRun/Heading.js b/client/components/TestRun/Heading.js
@@ -13,6 +13,7 @@ import {
   COLLECTION_JOB_STATUS,
   isJobStatusFinal
 } from '../../utils/collectionJobStatus';
+import { TestResultPropType } from '../common/proptypes';
 
 const TestRunHeading = ({
   at,
@@ -24,6 +25,7 @@ const TestRunHeading = ({
   showEditAtBrowser,
   testPlanTitle,
   testResults,
+  testIndex,
   testCount,
   isReadOnly
 }) => {
@@ -108,17 +110,28 @@ const TestRunHeading = ({
       </div>
     );
   } else if (openAsUser) {
+    let readOnlyStatus;
+    if (isReadOnly) {
+      const test = testResults[testIndex];
+      if (!test) readOnlyStatus = 'unopened';
+      else if (test.completedAt) readOnlyStatus = 'completed';
+      else if (test.startedAt) readOnlyStatus = 'in progress';
+    }
+
     openAsUserHeading = (
       <div className="test-info-entity reviewing-as">
-        {isReadOnly ? 'Viewing' : 'Reviewing'} tests of{' '}
-        <b>{`${openAsUser.username}`}</b>
-        {isReadOnly && ' in read-only mode'}.{' '}
         {isReadOnly ? (
-          <em>No changes can be made or saved.</em>
+          <>
+            Viewing {readOnlyStatus} tests of <b>{openAsUser.username}</b> in
+            read-only mode. <em>No changes can be made or saved.</em>
+          </>
         ) : (
-          <em>
-            All changes will be saved as performed by {openAsUser.username}.
-          </em>
+          <>
+            Reviewing tests of <b>{openAsUser.username}</b>.{' '}
+            <em>
+              All changes will be saved as performed by {openAsUser.username}.
+            </em>
+          </>
         )}
       </div>
     );
@@ -173,7 +186,8 @@ TestRunHeading.propTypes = {
     isBot: PropTypes.bool.isRequired,
     username: PropTypes.string.isRequired
   }),
-  testResults: PropTypes.arrayOf(PropTypes.shape({})),
+  testResults: PropTypes.arrayOf(TestResultPropType),
+  testIndex: PropTypes.number.isRequired,
   testCount: PropTypes.number.isRequired,
   handleEditAtBrowserDetailsClick: PropTypes.func.isRequired,
   isReadOnly: PropTypes.bool

diff --git a/client/components/TestRun/TestNavigator.jsx b/client/components/TestRun/TestNavigator.jsx
@@ -20,7 +20,8 @@ const TestNavigator = ({
   currentTestIndex = 0,
   toggleShowClick = () => {},
   handleTestClick = () => {},
-  testPlanRun = null
+  testPlanRun = null,
+  isReadOnly = false
 }) => {
   const isBotCompletedTest = testPlanRun?.tester?.isBot;
 
@@ -61,8 +62,8 @@ const TestNavigator = ({
           className="test-navigator-list"
         >
           {tests.map((test, index) => {
-            let resultClassName = 'not-started';
-            let resultStatus = 'Not Started';
+            let resultClassName = isReadOnly ? 'missing' : 'not-started';
+            let resultStatus = isReadOnly ? 'Missing' : 'Not Started';
 
             const issuesExist = testPlanReport.issues?.filter(
               issue =>
@@ -95,6 +96,9 @@ const TestNavigator = ({
                 if (test.hasConflicts) {
                   resultClassName = 'conflicts';
                   resultStatus = 'Has Conflicts';
+                } else if (!test.testResult && isReadOnly) {
+                  resultClassName = 'missing';
+                  resultStatus = 'Missing';
                 } else if (test.testResult) {
                   resultClassName = test.testResult.completedAt
                     ? 'complete'
@@ -108,7 +112,7 @@ const TestNavigator = ({
                   test.index === currentTestIndex
                 ) {
                   resultClassName = 'in-progress';
-                  resultStatus = 'In Progress:';
+                  resultStatus = 'In Progress';
                 } else if (isVendor) {
                   if (issuesExist) {
                     resultClassName = 'changes-requested';
@@ -161,7 +165,8 @@ TestNavigator.propTypes = {
   viewedTests: PropTypes.array,
   toggleShowClick: PropTypes.func,
   handleTestClick: PropTypes.func,
-  testPlanRun: PropTypes.object
+  testPlanRun: PropTypes.object,
+  isReadOnly: PropTypes.bool
 };
 
 export default TestNavigator;
diff --git a/client/components/TestRun/TestRun.css b/client/components/TestRun/TestRun.css
@@ -120,6 +120,27 @@ button.test-navigator-toggle:focus {
   border: 2px solid #1e8f37;
 }
 
+.test-name-wrapper.missing .progress-indicator {
+  background: #d2d5d9;
+  border: 2px solid #94979b;
+}
+
+.test-name-wrapper.missing a[aria-current='true'] + .progress-indicator {
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #94979b;
+}
+
+.test-name-wrapper.missing .progress-indicator:before {
+  content: '\f128';
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  color: #94979b;
+  font-size: 10px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .test-name-wrapper.changes-requested .progress-indicator {
   background: #f87f1c;
 }
@@ -218,6 +239,10 @@ button.test-navigator-toggle:focus {
   background: #ffcd00;
 }
 
+.test-name-wrapper.conflicts a[aria-current='true'] + .progress-indicator {
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ffcd00;
+}
+
 .test-name-wrapper.conflicts .progress-indicator:before,
 .test-name-wrapper.conflicts .progress-indicator:after {
   content: '';

diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -42,6 +42,7 @@ import createIssueLink from '../../utils/createIssueLink';
 import { dates } from 'shared';
 import { Provider as CollectionJobContextProvider } from './CollectionJobContext';
 import { useUrlTestIndex } from '../../hooks/useUrlTestIndex';
+import testResult from '@components/common/fragments/TestResult';
 
 const TestRun = () => {
   const params = useParams();
@@ -1155,6 +1156,7 @@ const TestRun = () => {
       testCount={testCount}
       editAtBrowserDetailsButtonRef={editAtBrowserDetailsButtonRef}
       handleEditAtBrowserDetailsClick={handleEditAtBrowserDetailsClick}
+      testIndex={currentTestIndex}
       isSignedIn={isViewingRun}
       isReadOnly={isReadOnly}
     />
@@ -1210,6 +1212,7 @@ const TestRun = () => {
               toggleShowClick={toggleTestNavigator}
               handleTestClick={handleTestClick}
               testPlanRun={testPlanRun}
+              isReadOnly={isReadOnly}
             />
             <Col className="main-test-area" id="main" as="main" tabIndex="-1">
               <Row>