MHV-64784-use-checkbox-group (#33317)

* uses checkbox groups, updates tests * fixes a11y issues * e2e updates for locators updated element locators for refill error message alert and count --------- Co-authored-by: raji.venkatesh <[email protected]>
department-of-veterans-affairs · Dec 17, 2024 · 708d21b · 708d21b
1 parent 186c85e
commit 708d21b
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 85 deletions.
diff --git a/src/applications/mhv-medications/containers/RefillPrescriptions.jsx b/src/applications/mhv-medications/containers/RefillPrescriptions.jsx
@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   VaButton,
   VaCheckbox,
+  VaCheckboxGroup,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import PageNotFound from '@department-of-veterans-affairs/platform-site-wide/PageNotFound';
 import {
@@ -99,6 +100,9 @@ const RefillPrescriptions = ({ isLoadingList = true }) => {
         item => item.prescriptionId === rx.prescriptionId,
       )
     ) {
+      if (hasNoOptionSelectedError) {
+        setHasNoOptionSelectedError(false);
+      }
       setSelectedRefillList([...selectedRefillList, rx]);
     } else {
       setSelectedRefillList(
@@ -114,6 +118,9 @@ const RefillPrescriptions = ({ isLoadingList = true }) => {
       event.detail.checked &&
       selectedRefillListLength !== fullRefillList.length
     ) {
+      if (hasNoOptionSelectedError) {
+        setHasNoOptionSelectedError(false);
+      }
       setSelectedRefillList(fullRefillList);
     } else if (!event.detail.checked) {
       setSelectedRefillList([]);
@@ -196,71 +203,59 @@ const RefillPrescriptions = ({ isLoadingList = true }) => {
                 >
                   Ready to refill
                 </h2>
-                <p
-                  className={`vads-u-margin-top--3 vads-u-margin-bottom--${
-                    !hasNoOptionSelectedError ? '3' : '2'
-                  }`}
-                  data-testid="refill-page-list-count"
-                  id="refill-page-list-count"
-                >
-                  You have {fullRefillList.length}{' '}
-                  {`prescription${fullRefillList.length !== 1 ? 's' : ''}`}{' '}
-                  ready to refill.
-                </p>
-                <p
-                  id="select-one-rx-error"
-                  data-testid="select-one-rx-error"
-                  className={`vads-u-color--secondary vads-u-font-weight--bold rx-refill-submit-error-${
-                    !hasNoOptionSelectedError ? 'hidden' : 'visible'
-                  }`}
-                  role="alert"
+                <VaCheckboxGroup
+                  data-testid="refill-checkbox-group"
+                  label={`You have ${fullRefillList.length} prescription${
+                    fullRefillList.length !== 1 ? 's' : ''
+                  } ready to refill.`}
+                  class="vads-u-margin-bottom--2 tablet:vads-u-margin-bottom--2p5"
+                  error={
+                    !hasNoOptionSelectedError
+                      ? ''
+                      : 'Select at least one prescription to refill'
+                  }
                 >
-                  <span className="usa-sr-only">Error</span>
-                  <span
-                    className="usa-error-message"
-                    data-testid="select-rx-error-message"
-                  >
-                    Select at least one prescription to refill
-                  </span>
-                </p>
-                {fullRefillList?.length > 1 && (
-                  <VaCheckbox
-                    id="select-all-checkbox"
-                    data-testid="select-all-checkbox"
-                    label={`Select all ${fullRefillList.length} refills`}
-                    name="select-all-checkbox"
-                    className="vads-u-margin-bottom--3 select-all-checkbox no-print"
-                    data-dd-action-name={
-                      dataDogActionNames.refillPage.SELECT_ALL_CHECKBOXES
-                    }
-                    checked={selectedRefillListLength === fullRefillList.length}
-                    onVaChange={onSelectAll}
-                    uswds
-                  />
-                )}
-                {fullRefillList.slice().map((prescription, idx) => (
-                  <div key={idx} className="vads-u-margin-bottom--2">
+                  {fullRefillList?.length > 1 && (
                     <VaCheckbox
-                      id={`checkbox-${prescription.prescriptionId}`}
-                      data-testid={`refill-prescription-checkbox-${idx}`}
-                      label={prescription.prescriptionName}
-                      name={prescription.prescriptionId}
-                      className="select-1-checkbox vads-u-margin-y--0"
+                      id="select-all-checkbox"
+                      data-testid="select-all-checkbox"
+                      label={`Select all ${fullRefillList.length} refills`}
+                      name="select-all-checkbox"
+                      className="vads-u-margin-bottom--3 select-all-checkbox no-print"
                       data-dd-action-name={
-                        dataDogActionNames.refillPage
-                          .SELECT_SINGLE_MEDICATION_CHECKBOX
+                        dataDogActionNames.refillPage.SELECT_ALL_CHECKBOXES
                       }
                       checked={
-                        selectedRefillList.find(
-                          item =>
-                            item.prescriptionId === prescription.prescriptionId,
-                        ) || false
+                        selectedRefillListLength === fullRefillList.length
                       }
-                      onVaChange={() => onSelectPrescription(prescription)}
+                      onVaChange={onSelectAll}
                       uswds
-                      checkbox-description={`Prescription number: ${
-                        prescription.prescriptionNumber
-                      }
+                    />
+                  )}
+                  {fullRefillList.slice().map((prescription, idx) => (
+                    <div key={idx} className="vads-u-margin-bottom--2">
+                      <VaCheckbox
+                        id={`checkbox-${prescription.prescriptionId}`}
+                        data-testid={`refill-prescription-checkbox-${idx}`}
+                        label={prescription.prescriptionName}
+                        name={prescription.prescriptionId}
+                        className="select-1-checkbox vads-u-margin-y--0"
+                        data-dd-action-name={
+                          dataDogActionNames.refillPage
+                            .SELECT_SINGLE_MEDICATION_CHECKBOX
+                        }
+                        checked={
+                          selectedRefillList.find(
+                            item =>
+                              item.prescriptionId ===
+                              prescription.prescriptionId,
+                          ) || false
+                        }
+                        onVaChange={() => onSelectPrescription(prescription)}
+                        uswds
+                        checkbox-description={`Prescription number: ${
+                          prescription.prescriptionNumber
+                        }
                         ${
                           prescription.sortedDispensedDate ||
                           prescription.dispensedDate
@@ -272,9 +267,10 @@ const RefillPrescriptions = ({ isLoadingList = true }) => {
                             : 'Not filled yet'
                         }
                         ${prescription.refillRemaining} refills left`}
-                    />
-                  </div>
-                ))}
+                      />
+                    </div>
+                  ))}
+                </VaCheckboxGroup>
                 <VaButton
                   uswds
                   type="button"

diff --git a/src/applications/mhv-medications/tests/containers/RefillPrescriptions.unit.spec.jsx b/src/applications/mhv-medications/tests/containers/RefillPrescriptions.unit.spec.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { renderWithStoreAndRouter } from '@department-of-veterans-affairs/platform-testing/react-testing-library-helpers';
 import { expect } from 'chai';
+import { waitFor } from '@testing-library/react';
 import {
   mockApiRequest,
   resetFetch,
@@ -107,9 +108,12 @@ describe('Refill Prescriptions Component', () => {
     const title = await screen.findByTestId('refill-page-title');
     expect(title).to.exist;
     expect(title).to.have.text('Refill prescriptions');
-    const subtitle = await screen.findByTestId('refill-page-subtitle');
-    expect(subtitle).to.exist;
-    expect(subtitle).to.have.text('Ready to refill');
+    const heading = await screen.findByRole('heading', {
+      level: 2,
+      name: /Ready to refill/i,
+    });
+    expect(heading).to.exist;
+    expect(heading.tagName).to.equal('H2');
   });
 
   it('Shows the request refill button', async () => {
@@ -200,9 +204,10 @@ describe('Refill Prescriptions Component', () => {
         },
       },
     });
-    const countEl = await screen.findByTestId('refill-page-list-count');
-    expect(countEl).to.exist;
-    expect(countEl).to.have.text('You have 1 prescription ready to refill.');
+    const checkboxGroup = await screen.findByTestId('refill-checkbox-group');
+    expect(checkboxGroup.label).to.equal(
+      'You have 1 prescription ready to refill.',
+    );
   });
 
   it('Completes api request with selected prescriptions', async () => {
@@ -227,24 +232,37 @@ describe('Refill Prescriptions Component', () => {
       },
     });
     const button = await screen.findByTestId('request-refill-button');
+    const checkboxGroup = await screen.findByTestId('refill-checkbox-group');
+    expect(checkboxGroup).to.exist;
+    expect(checkboxGroup.error).to.equal('');
     button.click();
-    const error = await screen.findByTestId('select-one-rx-error');
-    expect(error).to.exist;
-    const focusEl = document.activeElement;
-    expect(focusEl).to.have.property(
-      'id',
-      `checkbox-${prescriptions[0].prescriptionId}`,
+    expect(checkboxGroup.error).to.equal(
+      'Select at least one prescription to refill',
     );
+    await waitFor(() => {
+      const focusEl = document.activeElement;
+      expect(focusEl).to.have.property(
+        'id',
+        `checkbox-${prescriptions[0].prescriptionId}`,
+      );
+    });
   });
 
   it('Checks for error message when refilling with 0 meds selected and many available', async () => {
     const screen = setup();
     const button = await screen.findByTestId('request-refill-button');
+    const checkboxGroup = await screen.findByTestId('refill-checkbox-group');
+    expect(button).to.exist;
+    expect(checkboxGroup).to.exist;
+    expect(checkboxGroup.error).to.equal('');
     button.click();
-    const error = await screen.findByTestId('select-one-rx-error');
-    expect(error).to.exist;
-    const focusEl = document.activeElement;
-    expect(focusEl).to.have.property('id', 'select-all-checkbox');
+    expect(checkboxGroup.error).to.equal(
+      'Select at least one prescription to refill',
+    );
+    await waitFor(() => {
+      const focusEl = document.activeElement;
+      expect(focusEl).to.have.property('id', 'select-all-checkbox');
+    });
   });
 
   it('Shows h1 and note if no prescriptions are refillable', async () => {

diff --git a/src/applications/mhv-medications/tests/e2e/pages/MedicationsRefillPage.js b/src/applications/mhv-medications/tests/e2e/pages/MedicationsRefillPage.js
@@ -141,10 +141,10 @@ class MedicationsRefillPage {
   };
 
   verifyTotalRefillablePrescriptionsCount = count => {
-    cy.get('[data-testid="refill-page-list-count"]').should(
-      'contain',
-      `You have ${count} prescriptions ready to refill.`,
-    );
+    cy.get('[data-testid="refill-checkbox-group"]', { includeShadowDom: true })
+      .shadow()
+      .find('[class="usa-legend"]', { force: true })
+      .should('contain', `You have ${count} prescriptions ready to refill.`);
   };
 
   verifyActiveRxWithRefillsRemainingIsRefillableOnRefillPage = checkBox => {
@@ -369,10 +369,10 @@ class MedicationsRefillPage {
   };
 
   verifyErrorMessageWhenRefillRequestWithoutSelectingPrescription = () => {
-    cy.get('[data-testid="select-rx-error-message"]').should(
-      'contain',
-      'Select at least one prescription',
-    );
+    cy.get('[data-testid="refill-checkbox-group"]', { includeShadowDom: true })
+      .shadow()
+      .find('[id="checkbox-error-message"]')
+      .should('contain', 'Select at least one prescription');
   };
 
   verifyRefillRequestSuccessConfirmationMessage = () => {