Merge pull request #1385 from w3c/development

Create April 28, 2025 Release

Author: jugglinmike

admins.txt

@@ -17,3 +17,4 @@ Paul-Clue
 gracemccants
 outofambit
 ChrisC
+LouisDo10

client/components/TestQueue/AssignTesters.jsx

@@ -4,7 +4,7 @@ import { useApolloClient } from '@apollo/client';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faRobot, faUser } from '@fortawesome/free-solid-svg-icons';
 import { Button, Dropdown } from 'react-bootstrap';
-import CompletionStatusListItem from './CompletionStatusListItem';
+import CompletionStatusListItem from '../TestQueueCompletionStatusListItem';
 import useConfirmationModal from '../../hooks/useConfirmationModal';
 import BasicThemedModal from '../common/BasicThemedModal';
 import { LoadingStatus, useTriggerLoad } from '../common/LoadingStatus';

client/components/TestQueue/CompletionStatusListItem/index.jsx

@@ -4,82 +4,80 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRobot } from '@fortawesome/free-solid-svg-icons';
 import BotTestCompletionStatus from './BotTestCompletionStatus';
 import PreviouslyAutomatedTestCompletionStatus from './PreviouslyAutomatedTestCompletionStatus';
-import { TestPlanRunPropType } from '../common/proptypes';
+import {
+  TestPlanReportPropType,
+  TestPlanRunPropType,
+  UserPropType
+} from '../common/proptypes';
+import testQueueStyles from '../TestQueue/TestQueue.module.css';
 
 const TestQueueCompletionStatusListItem = ({
-  runnableTestsLength,
+  rowId,
+  testPlanReport,
   testPlanRun,
-  id
+  tester
 }) => {
-  const { testResultsLength, tester } = testPlanRun;
+  const { username, isBot } = tester;
   const testPlanRunPreviouslyAutomated = useMemo(
     () => testPlanRun.initiatedByAutomation,
     [testPlanRun]
   );
 
-  const renderTesterInfo = () => {
-    if (tester.isBot) {
-      return (
-        <span aria-describedby={id}>
-          <FontAwesomeIcon icon={faRobot} />
-          {tester.username}
-        </span>
-      );
-    } else {
-      return (
-        <a
-          href={`https://github.com/` + `${tester.username}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          // Allows ATs to read the number of
-          // completed tests when tabbing to this
-          // link
-          aria-describedby={id}
-        >
-          {tester.username}
-        </a>
-      );
-    }
-  };
+  let info;
+  let completionStatus;
 
-  const renderTestCompletionStatus = () => {
-    if (tester.isBot) {
-      return (
-        <BotTestCompletionStatus
-          id={id}
-          testPlanRun={testPlanRun}
-          runnableTestsLength={runnableTestsLength}
-        />
-      );
-    } else if (testPlanRunPreviouslyAutomated) {
-      return (
-        <PreviouslyAutomatedTestCompletionStatus
-          id={id}
-          testPlanRunId={testPlanRun.id}
-          runnableTestsLength={runnableTestsLength}
-        />
-      );
-    } else {
-      return (
-        <div id={id} className="text-secondary">
-          {`${testResultsLength} of ${runnableTestsLength} tests complete`}
-        </div>
-      );
-    }
-  };
+  if (isBot) {
+    info = (
+      <span>
+        <FontAwesomeIcon icon={faRobot} />
+        {username}
+      </span>
+    );
+    completionStatus = (
+      <BotTestCompletionStatus
+        id={`BotTestCompletionStatus_${rowId}`}
+        testPlanRun={testPlanRun}
+        runnableTestsLength={testPlanReport.runnableTestsLength}
+      />
+    );
+  } else {
+    info = (
+      <a
+        href={`https://github.com/${username}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {username}
+      </a>
+    );
+
+    completionStatus = testPlanRunPreviouslyAutomated ? (
+      <PreviouslyAutomatedTestCompletionStatus
+        id={`PreviouslyAutomatedTestCompletionStatus_${rowId}`}
+        testPlanRunId={testPlanRun.id}
+        runnableTestsLength={testPlanReport.runnableTestsLength}
+      />
+    ) : (
+      <em>
+        {`${testPlanRun.testResultsLength} of ` +
+          `${testPlanReport.runnableTestsLength} tests complete`}
+      </em>
+    );
+  }
 
   return (
-    <li className="mb-2 text-nowrap">
-      {renderTesterInfo()}
-      {renderTestCompletionStatus()}
+    <li className={testQueueStyles.completionStatusListItem}>
+      {info}
+      {completionStatus}
     </li>
   );
 };
 
 TestQueueCompletionStatusListItem.propTypes = {
-  runnableTestsLength: PropTypes.number.isRequired,
+  rowId: PropTypes.string.isRequired,
+  testPlanReport: TestPlanReportPropType.isRequired,
   testPlanRun: TestPlanRunPropType.isRequired,
-  id: PropTypes.string.isRequired
+  tester: UserPropType.isRequired
 };
 
 export default TestQueueCompletionStatusListItem;

client/components/TestQueueCompletionStatusListItem/index.js

@@ -580,7 +580,9 @@ const TestRun = () => {
 
           // check to see if form was successfully submitted, if so, return to top of summary document
           const forceFocusOnSave = await saveForm(true);
-          if (forceFocusOnSave) if (titleRef.current) titleRef.current.focus();
+          if (forceFocusOnSave) {
+            if (titleRef.current) titleRef.current.focus();
+          }
         }
         break;
       }
@@ -880,13 +882,18 @@ const TestRun = () => {
 
   const handleAtAndBrowserDetailsModalCloseAction = () => {
     setIsShowingAtBrowserModal(false);
-    if (isEditAtBrowserDetailsModalClick)
+    if (
+      isEditAtBrowserDetailsModalClick &&
+      editAtBrowserDetailsButtonRef.current
+    ) {
       editAtBrowserDetailsButtonRef.current.focus();
+    }
   };
 
   const onThemedModalClose = () => {
     setShowThemedModal(false);
-    editAtBrowserDetailsButtonRef.current.focus();
+    if (editAtBrowserDetailsButtonRef.current)
+      editAtBrowserDetailsButtonRef.current.focus();
   };
 
   const renderTestContent = (testPlanReport, currentTest, heading) => {

client/components/TestRun/index.jsx

@@ -98,7 +98,7 @@ <h2>Admin Actions</h2>
             <button type="button" class="btn btn-primary">
               Import Latest Test Plan Versions
             </button>
-            <p>Date of latest test plan version: April 9, 2025 18:39 UTC</p>
+            <p>Date of latest test plan version: April 22, 2025 14:04 UTC</p>
           </section>
         </main>
       </div>