Appoint a Rep component unit tests (#33325)

* Moved parseRepType to helpers

* Added test data for initialized form data

* parse rep type unit test

* SubmissionError unit test

* Removed unused component

* Removed confirmClaimantPersonalInformation (not in use)

* Contact Accredited Rep unit tests

* Added check for review mode before routing to review page

* Select Accredited Representative unit tests

* Refactor selectOrganization tests

* Added test to render organization for selectAccreditedRepresentativeReview

* ClaimantType unit test

* Uncommented test

* Added render test for GetFormHelp

* removed repetitive comments

* Fixed useRef definition

* Refactored unit tests for legibility

* Refactor unit test for legibility

* Added .current prop for comparing newly selected rep to previous one

* Form config unit tests

* Deleted prefill transformer (unused)

src/applications/representative-appoint/components/CurrentAccreditedRepresentative.jsx

@@ -2,50 +2,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import AddressEmailPhone from './AddressEmailPhone';
-import { getEntityAddressAsObject } from '../utilities/helpers';
+import { getEntityAddressAsObject, parseRepType } from '../utilities/helpers';
 
 const CurrentAccreditedRepresentative = ({ repType, repAttributes }) => {
   const addressData = getEntityAddressAsObject(repAttributes);
   const repName = repAttributes.name || repAttributes.fullName;
   const { email, phone } = repAttributes;
 
-  const parseRepType = () => {
-    const parsedRep = {};
-
-    switch (repType) {
-      case 'Organization':
-        parsedRep.title = 'Veterans Service Organization (VSO)';
-        parsedRep.subTitle = 'Veteran Service Organization';
-        break;
-      case 'Attorney':
-        parsedRep.title = 'accredited attorney';
-        parsedRep.subTitle = 'Accredited attorney';
-        break;
-      case 'Claims Agent':
-        parsedRep.title = 'accredited claims agent';
-        parsedRep.subTitle = 'Accredited claims agent';
-        break;
-      default:
-        parsedRep.title = 'accredited representative';
-        parsedRep.subTitle = 'Accredited representative';
-    }
-
-    return parsedRep;
-  };
-
   return (
     <va-card class="representative-result-card vads-u-padding--4 vads-u-background-color--gray-lightest vads-u-border--0">
       <div className="representative-result-card-content">
         <div className="representative-info-heading">
           <h3 className="vads-u-margin-y--0">
-            Your current {parseRepType().title}
+            Your current {parseRepType(repType).title}
           </h3>
           {repName && (
             <>
               <h4 className="vads-u-font-family--serif vads-u-margin-top--1p5 vads-u-margin-bottom--0p5">
                 {repName}
               </h4>
-              <p className="vads-u-margin-y--0">{parseRepType().subTitle}</p>
+              <p className="vads-u-margin-y--0">
+                {parseRepType(repType).subTitle}
+              </p>
             </>
           )}
         </div>

src/applications/representative-appoint/components/SelectAccreditedRepresentative.jsx

@@ -27,9 +27,7 @@ const SelectAccreditedRepresentative = props => {
   const representativeResults =
     formData?.['view:representativeSearchResults'] || null;
 
-  const currentSelectedRep = useRef(
-    formData?.['view:representativeSearchResults'],
-  );
+  const currentSelectedRep = useRef(formData?.['view:selectedRepresentative']);
 
   const query = formData['view:representativeQuery'];
   const invalidQuery = query === undefined || !query.trim();
@@ -77,7 +75,7 @@ const SelectAccreditedRepresentative = props => {
       setError(noSearchError);
       scrollToFirstError({ focusOnAlertRole: true });
     } else if (isReviewPage) {
-      if (selection === currentSelectedRep) {
+      if (selection === currentSelectedRep.current) {
         goToPath('/review-and-submit');
       } else {
         goToPath('/representative-contact?review=true');
@@ -111,7 +109,7 @@ const SelectAccreditedRepresentative = props => {
   };
 
   const handleSelectRepresentative = async selectedRepResult => {
-    if (selectedRepResult === currentSelectedRep) {
+    if (selectedRepResult === currentSelectedRep.current && isReviewPage) {
       goToPath('/review-and-submit');
     } else {
       const repStatus = await getRepStatus();
@@ -141,18 +139,6 @@ const SelectAccreditedRepresentative = props => {
     }
   };
 
-  // const continueError = () => {
-  //   return (
-  //     <span
-  //       className="usa-input-error-message vads-u-margin-bottom--0p5"
-  //       role="alert"
-  //     >
-  //       <span className="sr-only">Error</span>
-  //       {}
-  //     </span>
-  //   );
-  // };
-
   if (loadingPOA) {
     return <va-loading-indicator set-focus />;
   }

src/applications/representative-appoint/config/form.js

@@ -22,7 +22,6 @@ import {
   authorizeOutsideVANames,
   claimantRelationship,
   claimantPersonalInformation,
-  // confirmClaimantPersonalInformation,
   claimantContactPhoneEmail,
   claimantContactMailing,
   veteranPersonalInformation,
@@ -38,8 +37,6 @@ import {
   contactAccreditedRepresentative,
 } from '../pages';
 
-import { prefillTransformer } from '../prefill-transformer';
-
 import initialData from '../tests/fixtures/data/test-data.json';
 import ClaimantType from '../components/ClaimantType';
 import SelectAccreditedRepresentative from '../components/SelectAccreditedRepresentative';
@@ -88,7 +85,6 @@ const formConfig = {
   },
   version: 0,
   prefillEnabled: true,
-  prefillTransformer,
   v3SegmentedProgressBar: true,
   additionalRoutes: [
     {
@@ -197,13 +193,6 @@ const formConfig = {
           uiSchema: claimantPersonalInformation.uiSchema,
           schema: claimantPersonalInformation.schema,
         },
-        // confirmClaimantPersonalInformation: {
-        //   path: 'confirm-claimant-personal-information',
-        //   depends: formData => !preparerIsVeteran({ formData }),
-        //   title: 'Your Personal Information',
-        //   uiSchema: confirmClaimantPersonalInformation.uiSchema,
-        //   schema: confirmClaimantPersonalInformation.schema,
-        // },
         claimantContactMailing: {
           path: 'claimant-contact-mailing',
           depends: formData => !preparerIsVeteran({ formData }),

src/applications/representative-appoint/pages/index.js

@@ -8,7 +8,6 @@ import * as claimantType from './claimant/claimantType';
 import * as claimantContactPhoneEmail from './claimant/claimantContactPhoneEmail';
 import * as claimantRelationship from './claimant/claimantRelationship';
 import * as claimantPersonalInformation from './claimant/claimantPersonalInformation';
-import * as confirmClaimantPersonalInformation from './claimant/confirmClaimantPersonalInformation';
 import * as claimantContactMailing from './claimant/claimantContactMailing';
 import * as veteranPersonalInformation from './veteran/veteranPersonalInformation';
 import * as veteranContactPhoneEmail from './veteran/veteranContactPhoneEmail';
@@ -33,7 +32,6 @@ export {
   claimantContactPhoneEmail,
   claimantRelationship,
   claimantPersonalInformation,
-  confirmClaimantPersonalInformation,
   claimantContactMailing,
   veteranPersonalInformation,
   veteranContactPhoneEmail,

src/applications/representative-appoint/tests/components/GetFormHelp.unit.spec.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import GetFormHelp from '../../components/GetFormHelp';
+
+describe('GetFormHelp', () => {
+  it('should render', () => {
+    const { container } = render(<GetFormHelp />);
+
+    expect(container).to.exist;
+  });
+});

src/applications/representative-appoint/tests/components/SubmissionError.unit.spec.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { expect } from 'chai';
+
+import { $ } from 'platform/forms-system/src/js/utilities/ui';
+
+import SubmissionError from '../../components/SubmissionError';
+
+describe('SubmissionError', () => {
+  it('should render', async () => {
+    global.window.dataLayer = [];
+    const form = { inProgressFormId: '1234' };
+    const heading = 'We couldn’t generate your form';
+
+    const { container, rerender } = render(
+      <div>
+        <SubmissionError form={form} />
+      </div>,
+    );
+
+    expect($('va-alert[status="error"]', container)).to.exist;
+
+    const h3 = $('h3', container);
+    expect(h3.textContent).to.eq(heading);
+
+    // rerendering to test alertRef scroll & focus branch (not working?)
+    await rerender(
+      <div>
+        <SubmissionError form={form} />
+      </div>,
+    );
+
+    await waitFor(() => {
+      expect(document.activeElement).to.eq(h3);
+    });
+  });
+});