From 4c13593bb2b3b73a071a26a7ec644b2597a3b3be Mon Sep 17 00:00:00 2001 From: asiisii <36644181+asiisii@users.noreply.github.com> Date: Thu, 11 Jul 2024 14:19:50 -0600 Subject: [PATCH] 87553: fix: close direct deposit form on cancel to prevent white screen issue (#30768) * 87553: fix: close direct deposit form on cancel to prevent white screen issue * 87553: add test to verify cancel button doesnt break the page --- .../direct-deposit/AccountInfoView.jsx | 161 +++++++++--------- .../direct-deposit/DirectDeposit.jsx | 6 +- .../profile/hooks/useDirectDepositEffects.js | 2 +- .../focus-accessibility.cypress.spec.js | 53 ++++++ 4 files changed, 135 insertions(+), 87 deletions(-) create mode 100644 src/applications/personalization/profile/tests/e2e/direct-deposit/focus-accessibility.cypress.spec.js diff --git a/src/applications/personalization/profile/components/direct-deposit/AccountInfoView.jsx b/src/applications/personalization/profile/components/direct-deposit/AccountInfoView.jsx index b73449c3fe72..e205c11d3dd4 100644 --- a/src/applications/personalization/profile/components/direct-deposit/AccountInfoView.jsx +++ b/src/applications/personalization/profile/components/direct-deposit/AccountInfoView.jsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; @@ -10,63 +10,59 @@ import recordEvent from '~/platform/monitoring/record-event'; import { toggleDirectDepositEdit } from '../../actions/directDeposit'; import { DIRECT_DEPOSIT_ALERT_SETTINGS } from '../../constants'; -const AccountWithInfo = ({ - paymentAccount, - showUpdateSuccess, - editButtonRef, - toggleEdit, - recordEventImpl, -}) => { - return ( -
-
-
Bank name:
-
{paymentAccount?.name}
-
Bank account number:
-
{paymentAccount?.accountNumber}
-
Bank account type:
-
{`${paymentAccount?.accountType} account`}
-
+const AccountWithInfo = forwardRef( + ({ paymentAccount, showUpdateSuccess, toggleEdit, recordEventImpl }, ref) => { + return ( +
+
+
Bank name:
+
{paymentAccount?.name}
+
Bank account number:
+
{paymentAccount?.accountNumber}
+
Bank account type:
+
{`${paymentAccount?.accountType} account`}
+
-
- - {!!showUpdateSuccess && ( - -
- -
- - )} - +
+ + {!!showUpdateSuccess && ( + +
+ +
+ + )} + +
+ { + recordEventImpl({ + event: 'profile-navigation', + 'profile-action': 'edit-link', + 'profile-section': `direct-deposit-information`, + }); + toggleEdit(); + }} + />
- { - recordEventImpl({ - event: 'profile-navigation', - 'profile-action': 'edit-link', - 'profile-section': `direct-deposit-information`, - }); - toggleEdit(); - }} - /> -
- ); -}; + ); + }, +); AccountWithInfo.propTypes = { paymentAccount: PropTypes.shape({ @@ -76,7 +72,6 @@ AccountWithInfo.propTypes = { }).isRequired, showUpdateSuccess: PropTypes.bool.isRequired, toggleEdit: PropTypes.func.isRequired, - editButtonRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }), recordEventImpl: PropTypes.func, }; @@ -84,7 +79,7 @@ AccountWithInfo.defaultProps = { recordEventImpl: recordEvent, }; -const NoAccountInfo = ({ editButtonRef, toggleEdit, recordEventImpl }) => { +const NoAccountInfo = forwardRef(({ toggleEdit, recordEventImpl }, ref) => { return (

@@ -95,7 +90,7 @@ const NoAccountInfo = ({ editButtonRef, toggleEdit, recordEventImpl }) => { text="Edit" data-testid="edit-bank-info-button" aria-label="Edit your direct deposit bank information" - ref={editButtonRef} + ref={ref} onClick={() => { recordEventImpl({ event: 'profile-navigation', @@ -107,11 +102,10 @@ const NoAccountInfo = ({ editButtonRef, toggleEdit, recordEventImpl }) => { />

); -}; +}); NoAccountInfo.propTypes = { toggleEdit: PropTypes.func.isRequired, - editButtonRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }), recordEventImpl: PropTypes.func, }; @@ -119,30 +113,27 @@ NoAccountInfo.defaultProps = { recordEventImpl: recordEvent, }; -export const AccountInfoView = ({ - paymentAccount, - showUpdateSuccess, - recordEventImpl, -}) => { - const editButtonRef = useRef(); - const dispatch = useDispatch(); - const toggleEdit = () => dispatch(toggleDirectDepositEdit()); - return paymentAccount?.accountNumber ? ( - - ) : ( - - ); -}; +export const AccountInfoView = forwardRef( + ({ paymentAccount, showUpdateSuccess, recordEventImpl }, ref) => { + const dispatch = useDispatch(); + const toggleEdit = () => dispatch(toggleDirectDepositEdit()); + return paymentAccount?.accountNumber ? ( + + ) : ( + + ); + }, +); AccountInfoView.propTypes = { showUpdateSuccess: PropTypes.bool.isRequired, diff --git a/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx b/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx index 73edbb34b1f6..ef337fce36ba 100644 --- a/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx +++ b/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx @@ -144,7 +144,11 @@ export const DirectDeposit = () => { {...directDepositHookResult} /> ) : ( - + ); return ( diff --git a/src/applications/personalization/profile/hooks/useDirectDepositEffects.js b/src/applications/personalization/profile/hooks/useDirectDepositEffects.js index 97e60c4edbd0..c22a9c04f2fc 100644 --- a/src/applications/personalization/profile/hooks/useDirectDepositEffects.js +++ b/src/applications/personalization/profile/hooks/useDirectDepositEffects.js @@ -80,7 +80,7 @@ export const useDirectDepositEffects = ({ useEffect( () => { if (wasEditing && !ui.isEditing) { - focusElement('button', {}, '#edit-bank-info-button'); + focusElement('button', {}, editButtonRef.current); } }, [wasEditing, ui.isEditing, editButtonRef], diff --git a/src/applications/personalization/profile/tests/e2e/direct-deposit/focus-accessibility.cypress.spec.js b/src/applications/personalization/profile/tests/e2e/direct-deposit/focus-accessibility.cypress.spec.js new file mode 100644 index 000000000000..cdd7b7c94d3c --- /dev/null +++ b/src/applications/personalization/profile/tests/e2e/direct-deposit/focus-accessibility.cypress.spec.js @@ -0,0 +1,53 @@ +import directDepositMocks from '@@profile/mocks/endpoints/direct-deposits'; +import DirectDepositPage from './page-objects/DirectDeposit'; + +const directDeposit = new DirectDepositPage(); + +describe('Direct Deposit', () => { + beforeEach(() => { + directDeposit.setup(); + }); + + it('should open the bank account information form and return to the original state on cancel', () => { + const editButton = 'va-button[text="Edit"]'; + const cancelButton = 'va-button[text="Cancel"]'; + // Mock the API response for direct deposits eligibility + cy.intercept( + 'GET', + 'v0/profile/direct_deposits', + directDepositMocks.isEligible, + ); + directDeposit.visitPage(); + cy.injectAxeThenAxeCheck(); + + // Verify initial prompt to add bank information is visible + cy.contains('p', 'Edit your profile to add your bank information.').should( + 'be.visible', + ); + cy.get(editButton) + .should('exist') + .should('not.be.focused'); + + // Click the Edit button and ensure it is removed from the DOM + cy.get(editButton).click(); + cy.get(editButton).should('not.exist'); + + // Verify the bank account information form appears and is focused + cy.contains( + 'p', + 'Provide your account type, routing number, and account number.', + ).should('be.visible'); + cy.get('#bank-account-information').should('be.focused'); + + // Click the Cancel button to close the form + cy.get(cancelButton) + .should('exist') + .click(); + + // Verify the page returns to the original state and Edit button is focused + cy.findByRole('heading', { name: 'Direct deposit information' }).should( + 'exist', + ); + cy.get(editButton).should('be.focused'); + }); +});