diff --git a/src/applications/mhv-medications/containers/RefillPrescriptions.jsx b/src/applications/mhv-medications/containers/RefillPrescriptions.jsx index 425f10596016..4861dd66a9b2 100644 --- 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 -

- You have {fullRefillList.length}{' '} - {`prescription${fullRefillList.length !== 1 ? 's' : ''}`}{' '} - ready to refill. -

- - {fullRefillList?.length > 1 && ( - - )} - {fullRefillList.slice().map((prescription, idx) => ( -
+ {fullRefillList?.length > 1 && ( - 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) => ( +
+ + 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`} - /> -
- ))} + /> +
+ ))} + { 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 index 833922bfecd8..03c75b12b76d 100644 --- 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 = () => {