From 4cc4621506adbe7a6b0208108f8c8024ac5e16e2 Mon Sep 17 00:00:00 2001 From: Vitalii Menshutin Date: Mon, 30 Sep 2024 15:59:07 -0400 Subject: [PATCH 1/5] MHV-61349: Focus & Offline handling --- .../components/shared/PrintDownload.jsx | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/src/applications/mhv-medications/components/shared/PrintDownload.jsx b/src/applications/mhv-medications/components/shared/PrintDownload.jsx index 292815a942ab..31c8d34af27c 100644 --- a/src/applications/mhv-medications/components/shared/PrintDownload.jsx +++ b/src/applications/mhv-medications/components/shared/PrintDownload.jsx @@ -9,7 +9,8 @@ const PrintDownload = props => { const [menuOpen, setMenuOpen] = useState(false); const [printIndex, setPrintIndex] = useState(0); - const menu = useRef(null); + const containerEl = useRef(null); + const toggleButton = useRef(null); let toggleMenuButtonClasses = 'toggle-menu-button vads-u-justify-content--space-between'; let menuOptionsClasses = 'menu-options'; @@ -20,8 +21,14 @@ const PrintDownload = props => { } const handleDownload = async format => { + setMenuOpen(!menuOpen); + toggleButton.current.focus(); + if (!navigator.onLine) { + setIsError(true); + return; + } + try { - setMenuOpen(!menuOpen); setIsError(false); if (format === DOWNLOAD_FORMAT.TXT && onText) { onText(); @@ -43,7 +50,11 @@ const PrintDownload = props => { }; const closeMenu = e => { - if (menu.current && menuOpen && !menu.current.contains(e.target)) { + if ( + containerEl.current && + menuOpen && + !containerEl.current.contains(e.target) + ) { setMenuOpen(false); } }; @@ -77,23 +88,27 @@ const PrintDownload = props => { {isLoading && ( )} - {isSuccess && ( -
- -

Download started

-

- Check your device’s downloads location for your file. -

- -
- )} + {isSuccess && + !isError && ( +
+ +

Download started

+

+ Check your device’s downloads location for your file. +

+ +
+ )} + {/* hack to generate va-alert and va-telephone web components in case there is no network at the time of download */} + + + {isError && (
@@ -119,7 +134,7 @@ const PrintDownload = props => { className="print-download vads-u-margin-y--2 no-print" role="none" onKeyDown={handleUserKeyPress} - ref={menu} + ref={containerEl} onFocus={handleFocus} >
From 61f306ed66d402ddcb3da893935dfe20688d6d7e Mon Sep 17 00:00:00 2001 From: "raji.venkatesh" Date: Tue, 1 Oct 2024 12:40:46 -0500 Subject: [PATCH 3/5] e2e updates added assertion to validate focus on print or download button after download --- .../e2e/medications-download-pdf-details-page.cypress.spec.js | 1 + .../tests/e2e/medications-download-pdf-list-page.cypress.spec.js | 1 + .../e2e/medications-download-txt-details-page.cypress.spec.js | 1 + .../tests/e2e/medications-download-txt-list-page.cypress.spec.js | 1 + 4 files changed, 4 insertions(+) diff --git a/src/applications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js b/src/applications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js index c9de9e7ba71a..bb071749bbf0 100644 --- a/src/applications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js +++ b/src/applications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js @@ -21,6 +21,7 @@ describe('Medications Details Page Download', () => { detailsPage.clickDownloadMedicationDetailsAsPdfOnDetailsPage(); detailsPage.verifyLoadingSpinnerForDownloadOnDetailsPage(); listPage.verifyDownloadCompleteSuccessMessageBanner(); + detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage(); site.verifyDownloadedPdfFile( 'VA-medications-list-Safari-Mhvtp', moment(), diff --git a/src/applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js b/src/applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js index 94be3ac54a30..133fad4ec044 100644 --- a/src/applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js +++ b/src/applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js @@ -18,6 +18,7 @@ describe('Medications Download PDF on List Page', () => { listPage.clickDownloadListAsPDFButtonOnListPage(); listPage.verifyLoadingSpinnerForDownloadOnListPage(); listPage.verifyDownloadCompleteSuccessMessageBanner(); + listPage.verifyFocusOnPrintDownloadDropDownButton(); site.verifyDownloadedPdfFile( 'VA-medications-list-Safari-Mhvtp', moment(), diff --git a/src/applications/mhv-medications/tests/e2e/medications-download-txt-details-page.cypress.spec.js b/src/applications/mhv-medications/tests/e2e/medications-download-txt-details-page.cypress.spec.js index 3189fcf38392..a59cbaed550f 100644 --- a/src/applications/mhv-medications/tests/e2e/medications-download-txt-details-page.cypress.spec.js +++ b/src/applications/mhv-medications/tests/e2e/medications-download-txt-details-page.cypress.spec.js @@ -18,6 +18,7 @@ describe('Medications Details Page Download', () => { detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage(); detailsPage.clickDownloadMedicationsDetailsAsTxtOnDetailsPage(); listPage.verifyDownloadCompleteSuccessMessageBanner(); + detailsPage.verifyFocusOnPrintOrDownloadDropdownButtonOnDetailsPage(); listPage.verifyDownloadTextFileHeadless('Safari', 'Mhvtp', 'Mhvtp, Safari'); cy.injectAxe(); cy.axeCheck('main'); diff --git a/src/applications/mhv-medications/tests/e2e/medications-download-txt-list-page.cypress.spec.js b/src/applications/mhv-medications/tests/e2e/medications-download-txt-list-page.cypress.spec.js index 4dc778e5e432..6e357decf4fd 100644 --- a/src/applications/mhv-medications/tests/e2e/medications-download-txt-list-page.cypress.spec.js +++ b/src/applications/mhv-medications/tests/e2e/medications-download-txt-list-page.cypress.spec.js @@ -17,6 +17,7 @@ describe('Medications Download Txt on List Page', () => { listPage.clickDownloadListAsTxtButtonOnListPage(); listPage.verifyLoadingSpinnerForDownloadOnListPage(); listPage.verifyDownloadCompleteSuccessMessageBanner(); + listPage.verifyFocusOnPrintDownloadDropDownButton(); listPage.verifyDownloadTextFileHeadless('Safari', 'Mhvtp', 'Mhvtp, Safari'); }); }); From 8890cb7d8093fc8541d2e5a6b5f8b534d996f431 Mon Sep 17 00:00:00 2001 From: Vitalii Menshutin Date: Wed, 2 Oct 2024 11:08:10 -0400 Subject: [PATCH 4/5] fixed failing unit tests --- .../tests/components/shared/PrintDownload.unit.spec.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/applications/mhv-medications/tests/components/shared/PrintDownload.unit.spec.jsx b/src/applications/mhv-medications/tests/components/shared/PrintDownload.unit.spec.jsx index 8e3954e4f18c..0cc6b9b9c461 100644 --- a/src/applications/mhv-medications/tests/components/shared/PrintDownload.unit.spec.jsx +++ b/src/applications/mhv-medications/tests/components/shared/PrintDownload.unit.spec.jsx @@ -95,6 +95,9 @@ describe('Medicaitons Print/Download button component', () => { }); it('should start downloading PDF on PDF button click', () => { + global.navigator = { + onLine: true, + }; const screen = setup(handleFullListDownload, false, true); const downloadButton = screen.getByText('Download a PDF of this list'); fireEvent.click(downloadButton); @@ -104,6 +107,9 @@ describe('Medicaitons Print/Download button component', () => { }); it('should start downloading TXT on TXT button click', () => { + global.navigator = { + onLine: true, + }; const screen = setup(handleFullListDownload, false, true); const downloadButton = screen.getByText( 'Download a text file (.txt) of this list', @@ -122,6 +128,9 @@ describe('Medicaitons Print/Download button component', () => { }); it('should start txt download using custom fn on txt button click', () => { + global.navigator = { + onLine: true, + }; const screen = setup( undefined, false, From a7cc5da63f27a815704cf0372f6a62911ed0c3fa Mon Sep 17 00:00:00 2001 From: Vitalii Menshutin Date: Fri, 4 Oct 2024 15:46:10 -0400 Subject: [PATCH 5/5] MHV-61850: fixed status tag from div to p (carryover from MHV-62452) --- .../components/PrescriptionDetails/NonVaPrescription.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/applications/mhv-medications/components/PrescriptionDetails/NonVaPrescription.jsx b/src/applications/mhv-medications/components/PrescriptionDetails/NonVaPrescription.jsx index 826ade3cdd78..0c98d91a6a67 100644 --- a/src/applications/mhv-medications/components/PrescriptionDetails/NonVaPrescription.jsx +++ b/src/applications/mhv-medications/components/PrescriptionDetails/NonVaPrescription.jsx @@ -16,7 +16,7 @@ const NonVaPrescription = prescription => {

Status

-
{validateField(status)}
+

{validateField(status)}