87553: fix: close direct deposit form on cancel to prevent white scre…

…en 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
department-of-veterans-affairs · Jul 11, 2024 · 4c13593 · 4c13593
1 parent ecabac6
commit 4c13593
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 87 deletions.
diff --git 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 (
-    <div>
-      <dl className="vads-u-margin-y--0 vads-u-line-height--6">
-        <dt className="sr-only">Bank name:</dt>
-        <dd>{paymentAccount?.name}</dd>
-        <dt className="sr-only">Bank account number:</dt>
-        <dd>{paymentAccount?.accountNumber}</dd>
-        <dt className="sr-only">Bank account type:</dt>
-        <dd>{`${paymentAccount?.accountType} account`}</dd>
-      </dl>
+const AccountWithInfo = forwardRef(
+  ({ paymentAccount, showUpdateSuccess, toggleEdit, recordEventImpl }, ref) => {
+    return (
+      <div>
+        <dl className="vads-u-margin-y--0 vads-u-line-height--6">
+          <dt className="sr-only">Bank name:</dt>
+          <dd>{paymentAccount?.name}</dd>
+          <dt className="sr-only">Bank account number:</dt>
+          <dd>{paymentAccount?.accountNumber}</dd>
+          <dt className="sr-only">Bank account type:</dt>
+          <dd>{`${paymentAccount?.accountType} account`}</dd>
+        </dl>
 
-      <div role="alert" aria-atomic="true">
-        <TransitionGroup>
-          {!!showUpdateSuccess && (
-            <CSSTransition
-              classNames="form-expanding-group-inner"
-              appear
-              timeout={{
-                appear: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
-                enter: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
-                exit: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
-              }}
-            >
-              <div data-testid="bankInfoUpdateSuccessAlert">
-                <ContactInformationUpdateSuccessAlert fieldName="direct-deposit" />
-              </div>
-            </CSSTransition>
-          )}
-        </TransitionGroup>
+        <div role="alert" aria-atomic="true">
+          <TransitionGroup>
+            {!!showUpdateSuccess && (
+              <CSSTransition
+                classNames="form-expanding-group-inner"
+                appear
+                timeout={{
+                  appear: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
+                  enter: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
+                  exit: DIRECT_DEPOSIT_ALERT_SETTINGS.FADE_SPEED,
+                }}
+              >
+                <div data-testid="bankInfoUpdateSuccessAlert">
+                  <ContactInformationUpdateSuccessAlert fieldName="direct-deposit" />
+                </div>
+              </CSSTransition>
+            )}
+          </TransitionGroup>
+        </div>
+        <VaButton
+          id="edit-bank-info-button"
+          data-testid="edit-bank-info-button"
+          data-field-name="direct-deposit"
+          text="Edit"
+          className="vads-u-margin--0 vads-u-margin-top--1p5 vads-u-width--full"
+          aria-label="Edit your direct deposit bank information"
+          ref={ref}
+          onClick={() => {
+            recordEventImpl({
+              event: 'profile-navigation',
+              'profile-action': 'edit-link',
+              'profile-section': `direct-deposit-information`,
+            });
+            toggleEdit();
+          }}
+        />
       </div>
-      <VaButton
-        id="edit-bank-info-button"
-        data-testid="edit-bank-info-button"
-        data-field-name="direct-deposit"
-        text="Edit"
-        className="vads-u-margin--0 vads-u-margin-top--1p5 vads-u-width--full"
-        aria-label="Edit your direct deposit bank information"
-        ref={editButtonRef}
-        onClick={() => {
-          recordEventImpl({
-            event: 'profile-navigation',
-            'profile-action': 'edit-link',
-            'profile-section': `direct-deposit-information`,
-          });
-          toggleEdit();
-        }}
-      />
-    </div>
-  );
-};
+    );
+  },
+);
 
 AccountWithInfo.propTypes = {
   paymentAccount: PropTypes.shape({
@@ -76,15 +72,14 @@ AccountWithInfo.propTypes = {
   }).isRequired,
   showUpdateSuccess: PropTypes.bool.isRequired,
   toggleEdit: PropTypes.func.isRequired,
-  editButtonRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   recordEventImpl: PropTypes.func,
 };
 
 AccountWithInfo.defaultProps = {
   recordEventImpl: recordEvent,
 };
 
-const NoAccountInfo = ({ editButtonRef, toggleEdit, recordEventImpl }) => {
+const NoAccountInfo = forwardRef(({ toggleEdit, recordEventImpl }, ref) => {
   return (
     <div>
       <p className="vads-u-margin--0">
@@ -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,42 +102,38 @@ const NoAccountInfo = ({ editButtonRef, toggleEdit, recordEventImpl }) => {
       />
     </div>
   );
-};
+});
 
 NoAccountInfo.propTypes = {
   toggleEdit: PropTypes.func.isRequired,
-  editButtonRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   recordEventImpl: PropTypes.func,
 };
 
 NoAccountInfo.defaultProps = {
   recordEventImpl: recordEvent,
 };
 
-export const AccountInfoView = ({
-  paymentAccount,
-  showUpdateSuccess,
-  recordEventImpl,
-}) => {
-  const editButtonRef = useRef();
-  const dispatch = useDispatch();
-  const toggleEdit = () => dispatch(toggleDirectDepositEdit());
-  return paymentAccount?.accountNumber ? (
-    <AccountWithInfo
-      paymentAccount={paymentAccount}
-      showUpdateSuccess={showUpdateSuccess}
-      editButtonRef={editButtonRef}
-      toggleEdit={toggleEdit}
-      recordEventImpl={recordEventImpl}
-    />
-  ) : (
-    <NoAccountInfo
-      editButtonRef={editButtonRef}
-      toggleEdit={toggleEdit}
-      recordEventImpl={recordEventImpl}
-    />
-  );
-};
+export const AccountInfoView = forwardRef(
+  ({ paymentAccount, showUpdateSuccess, recordEventImpl }, ref) => {
+    const dispatch = useDispatch();
+    const toggleEdit = () => dispatch(toggleDirectDepositEdit());
+    return paymentAccount?.accountNumber ? (
+      <AccountWithInfo
+        paymentAccount={paymentAccount}
+        showUpdateSuccess={showUpdateSuccess}
+        ref={ref}
+        toggleEdit={toggleEdit}
+        recordEventImpl={recordEventImpl}
+      />
+    ) : (
+      <NoAccountInfo
+        ref={ref}
+        toggleEdit={toggleEdit}
+        recordEventImpl={recordEventImpl}
+      />
+    );
+  },
+);
 
 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
@@ -144,7 +144,11 @@ export const DirectDeposit = () => {
       {...directDepositHookResult}
     />
   ) : (
-    <AccountInfoView {...directDepositHookResult} isSaving={ui.isSaving} />
+    <AccountInfoView
+      ref={directDepositHookResult.editButtonRef}
+      isSaving={ui.isSaving}
+      {...directDepositHookResult}
+    />
   );
 
   return (

diff --git 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/...ions/personalization/profile/tests/e2e/direct-deposit/focus-accessibility.cypress.spec.js b/...ions/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');
+  });
+});