Correct assertion legend, margin right for checkbox

w3c · Nov 21, 2023 · 53ba106 · 53ba106
1 parent 4e8f0ed
commit 53ba106
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/client/components/TestRenderer/AssertionsFieldset/index.jsx b/client/components/TestRenderer/AssertionsFieldset/index.jsx
@@ -1,16 +1,31 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Fieldset } from '..';
 import styled from '@emotion/styled';
+import supportJson from '../../../resources/support.json';
 
 const Label = styled.label`
     display: block;
+
+    input {
+        margin-right: 0.25rem;
+    }
 `;
 
-const AssertionsFieldset = ({ assertions, commandIndex }) => {
+const AssertionsFieldset = ({ assertions, commandIndex, assertionsHeader }) => {
+    // Handle case where build process didn't include assertionResponseQuestion
+    const normalizedHeader = useMemo(() => {
+        return assertionsHeader?.descriptionHeader?.replace(
+            'undefined',
+            supportJson.testPlanStrings.assertionResponseQuestion
+        );
+    }, [assertionsHeader]);
+
     return (
         <Fieldset>
-            <legend>Assertions</legend>
+            <legend id={`command-${commandIndex}-assertions-heading`}>
+                {normalizedHeader}
+            </legend>
             {assertions.map((assertion, assertionIndex) => {
                 const { description, passed, click } = assertion;
 
@@ -33,7 +48,8 @@ const AssertionsFieldset = ({ assertions, commandIndex }) => {
 
 AssertionsFieldset.propTypes = {
     assertions: PropTypes.array.isRequired,
-    commandIndex: PropTypes.number.isRequired
+    commandIndex: PropTypes.number.isRequired,
+    assertionsHeader: PropTypes.string.isRequired
 };
 
 export default AssertionsFieldset;
diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
@@ -560,9 +560,9 @@ const TestRenderer = ({
                                     header,
                                     atOutput,
                                     assertions,
-                                    unexpectedBehaviors
+                                    unexpectedBehaviors,
+                                    assertionsHeader
                                 } = value;
-
                                 return (
                                     <Fragment
                                         key={`AtOutputKey_${commandIndex}`}
@@ -575,14 +575,10 @@ const TestRenderer = ({
                                             atOutput={atOutput}
                                             isSubmitted={isSubmitted}
                                         />
-                                        <h4
-                                            id={`command-${commandIndex}-assertions-heading`}
-                                        >
-                                            Assertions {header}
-                                        </h4>
                                         <AssertionsFieldset
                                             assertions={assertions}
                                             commandIndex={commandIndex}
+                                            assertionsHeader={assertionsHeader}
                                         />
                                         {/*Unexpected Behaviors*/}
                                         <Fieldset