fix: Radio buttons for assertion verdicts (#1161)

Address #1045
w3c · Aug 26, 2024 · eb8f9ea · eb8f9ea
1 parent a80b80b
commit eb8f9ea
Show file tree

Hide file tree

Showing 6 changed files with 274 additions and 148 deletions.
diff --git a/client/components/TestRenderer/AssertionsFieldset/index.jsx b/client/components/TestRenderer/AssertionsFieldset/index.jsx
@@ -1,11 +1,13 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Fieldset } from '..';
 import styled from '@emotion/styled';
 import supportJson from '../../../resources/support.json';
+import { Fieldset } from '..';
 
 const Label = styled.label`
-  display: block;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
 
   input {
     margin-right: 0.25rem;
@@ -28,18 +30,32 @@ const AssertionsFieldset = ({ assertions, commandIndex, assertionsHeader }) => {
       </legend>
       {assertions.map((assertion, assertionIndex) => {
         const { description, passed, click } = assertion;
-
         return (
-          <Label key={`AssertionKey_${assertionIndex}`}>
-            <input
-              type="checkbox"
-              id={`pass-${commandIndex}-${assertionIndex}`}
-              name={`assertion-${commandIndex}-${assertionIndex}`}
-              defaultChecked={passed}
-              onClick={click}
-            />
-            {description[0]}
-          </Label>
+          <Fieldset key={`AssertionKey_${commandIndex}_${assertionIndex}`}>
+            <legend>{description[0]}</legend>
+            <Label>
+              <input
+                type="radio"
+                id={`pass-${commandIndex}-${assertionIndex}-yes`}
+                name={`assertion-${commandIndex}-${assertionIndex}`}
+                checked={passed === true}
+                onChange={() => click(true)}
+                data-testid={`radio-yes-${commandIndex}-${assertionIndex}`}
+              />
+              Yes
+            </Label>
+            <Label>
+              <input
+                type="radio"
+                id={`pass-${commandIndex}-${assertionIndex}-no`}
+                name={`assertion-${commandIndex}-${assertionIndex}`}
+                checked={passed === false}
+                onChange={() => click(false)}
+                data-testid={`radio-no-${commandIndex}-${assertionIndex}`}
+              />
+              No
+            </Label>
+          </Fieldset>
         );
       })}
     </Fieldset>

diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
@@ -261,9 +261,7 @@ const TestRenderer = ({
         let assertionForCommandIndex = commands[i].assertions.findIndex(
           ({ description }) => description === assertion?.text
         );
-        commands[i].assertions[assertionForCommandIndex].result = passed
-          ? 'pass'
-          : 'fail';
+        commands[i].assertions[assertionForCommandIndex].result = passed;
         commands[i].assertions[assertionForCommandIndex].highlightRequired =
           highlightRequired;
       }

diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -416,7 +416,7 @@ const TestRun = () => {
           ...scenarioResult.assertionResults.find(
             ({ assertion: { text } }) => text === description
           ),
-          passed: result === 'pass'
+          passed: result
         };
         assertionResults.push(
           captureHighlightRequired

diff --git a/client/tests/e2e/TestRun.e2e.test.js b/client/tests/e2e/TestRun.e2e.test.js
@@ -204,23 +204,23 @@ describe('Test Run when signed in as tester', () => {
   });
 
   it('inputs results and navigates between tests to confirm saving', async () => {
-    async function getGeneratedCheckedTestCount(page, checkboxSelector) {
-      return await page.$$eval(checkboxSelector, els => {
-        let checkedCount = 0;
-        const filteredCheckboxes = els.filter(
-          checkbox => checkbox.id && !checkbox.id.includes('undesirable')
+    async function getGeneratedCheckedAssertionCount(page) {
+      return await page.evaluate(() => {
+        const radioGroups = document.querySelectorAll(
+          'input[type="radio"][id^="pass-"]'
         );
-
-        filteredCheckboxes.forEach((checkbox, index) => {
-          // avoid checking the undesirable checkboxes which are conditionally
-          // rendered
-          const isChecked = index % 2 === 0;
-          if (isChecked) {
-            checkedCount++;
-            checkbox.click();
+        let yesCount = 0;
+
+        for (let i = 0; i < radioGroups.length; i += 2) {
+          if (i % 4 === 0) {
+            radioGroups[i].click(); // Click 'Yes' radio
+            yesCount++;
+          } else {
+            radioGroups[i + 1].click(); // Click 'No' radio
           }
-        });
-        return checkedCount;
+        }
+
+        return yesCount;
       });
     }
 
@@ -230,36 +230,32 @@ describe('Test Run when signed in as tester', () => {
       await page.waitForSelector('h1 ::-p-text(Test 1)');
       await page.waitForSelector('button ::-p-text(Next Test)');
 
-      const checkboxSelector = 'input[type="checkbox"]';
+      const radioSelector = 'input[type="radio"]';
       const test1NavSelector = 'nav#test-navigator-nav ol li:nth-child(1)';
       const test2NavSelector = 'nav#test-navigator-nav ol li:nth-child(2)';
       const nextTestButtonSelector = 'button ::-p-text(Next Test)';
       const previousTestButtonSelector = 'button ::-p-text(Previous Test)';
 
-      // Randomly check checkboxes on first test
-      const generatedCheckedTest1Count = await getGeneratedCheckedTestCount(
-        page,
-        checkboxSelector
-      );
+      // Randomly select radio buttons on first test
+      const generatedCheckedTest1Count =
+        await getGeneratedCheckedAssertionCount(page, radioSelector);
 
       // Navigate to test 2 with navigation menu
       await page.$eval(test2NavSelector, el => el.querySelector('a').click());
       await page.waitForNetworkIdle();
       await page.waitForSelector('h1 ::-p-text(Test 2:)');
       await page.waitForSelector('button ::-p-text(Next Test)');
-      const generatedCheckedTest2Count = await getGeneratedCheckedTestCount(
-        page,
-        checkboxSelector
-      );
+      const generatedCheckedTest2Count =
+        await getGeneratedCheckedAssertionCount(page, radioSelector);
 
       // Navigate to test 3 with next button
       await page.click(nextTestButtonSelector);
       await page.waitForNetworkIdle();
       await page.waitForSelector('h1 ::-p-text(Test 3:)');
       await page.waitForSelector('button ::-p-text(Next Test)');
       const test3CheckedCount = await page.$$eval(
-        checkboxSelector,
-        els => els.filter(checkbox => checkbox.checked).length
+        radioSelector,
+        els => els.filter(radio => radio.checked).length
       );
 
       // Navigate back to test 2 with previous button
@@ -268,8 +264,8 @@ describe('Test Run when signed in as tester', () => {
       await page.waitForSelector('h1 ::-p-text(Test 2:)');
       await page.waitForSelector('button ::-p-text(Next Test)');
       const test2CheckedCount = await page.$$eval(
-        checkboxSelector,
-        els => els.filter(checkbox => checkbox.checked).length
+        radioSelector,
+        els => els.filter(radio => radio.checked).length
       );
 
       // Navigate back to Test 1 with navigation menu
@@ -278,18 +274,13 @@ describe('Test Run when signed in as tester', () => {
       await page.waitForSelector('h1 ::-p-text(Test 1:)');
       await page.waitForSelector('button ::-p-text(Next Test)');
       const test1CheckedCount = await page.$$eval(
-        checkboxSelector,
+        radioSelector,
         els =>
-          els.filter(
-            checkbox =>
-              checkbox.id &&
-              !checkbox.id.includes('undesirable') &&
-              checkbox.checked
-          ).length
+          els.filter(radio => radio.checked && radio.id.includes('-yes')).length
       );
 
       expect(test1CheckedCount).toBe(generatedCheckedTest1Count);
-      expect(test2CheckedCount).toBe(generatedCheckedTest2Count);
+      expect(test2CheckedCount).toBe(generatedCheckedTest2Count * 2); // Both 'Yes' and 'No' are checked
       expect(test3CheckedCount).toBe(0);
     });
   });
@@ -320,30 +311,35 @@ describe('Test Run when signed in as tester', () => {
 
       // Input output for valid submission
       await page.evaluate(() => {
-        const checkboxEls = Array.from(
-          document.querySelectorAll('input[type="checkbox"]')
+        const yesRadios = document.querySelectorAll(
+          'input[data-testid^="radio-yes-"]'
         );
-        const filteredCheckboxes = checkboxEls.filter(
-          checkbox => checkbox.id && !checkbox.id.includes('undesirable')
+        const noRadios = document.querySelectorAll(
+          'input[data-testid^="radio-no-"]'
+        );
+        const noUndesiredRadios = document.querySelectorAll(
+          'input[id^="problem-"][id$="-true"]'
+        );
+        const noOutputCheckboxes = document.querySelectorAll(
+          'input[id^="no-output-checkbox"]'
         );
 
-        filteredCheckboxes.forEach((checkbox, index) => {
-          if (checkbox.id.includes('no-output-checkbox')) checkbox.click();
-          else {
-            // Selecting different assertions to force a conflict
-            const check = index % 2 === 0;
-            if (check) checkbox.click();
+        yesRadios.forEach((radio, index) => {
+          if (index % 2 === 0) {
+            radio.click();
+          } else {
+            noRadios[index].click();
           }
         });
 
-        const radioEls = Array.from(
-          document.querySelectorAll('input[type="radio"]')
-        );
-        radioEls.forEach(radio => {
-          if (radio.id && radio.id.includes('true')) radio.click();
+        noUndesiredRadios.forEach(radio => {
+          radio.click();
         });
-      });
 
+        noOutputCheckboxes.forEach(checkbox => {
+          checkbox.click();
+        });
+      });
       // Submit valid form
       await page.click(submitResultsButtonSelector);
       await page.waitForNetworkIdle();

diff --git a/client/tests/e2e/snapshots/saved/_data-management.html b/client/tests/e2e/snapshots/saved/_data-management.html
@@ -1087,7 +1087,7 @@ <h2>Test Plans Status Summary</h2>
                 <td>
                   <div class="css-bpz90">
                     <span class="rd full-width css-be9e2a">R&amp;D</span>
-                    <p class="review-text">Complete <b>Aug 12, 2024</b></p>
+                    <p class="review-text">Complete <b>Aug 21, 2024</b></p>
                   </div>
                 </td>
                 <td>
@@ -1110,7 +1110,7 @@ <h2>Test Plans Status Summary</h2>
                             <path
                               fill="currentColor"
                               d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg
-                          ><b>V24.08.12</b></span
+                          ><b>V24.08.21</b></span
                         ></a
                       ></span
                     ><button