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.
-
-
- Error
-
- Select at least one prescription 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 = () => {