updates tests for ezr, mhv-landing-page, profile/dashboard, profile/d…

…irect-deposit
department-of-veterans-affairs · Jan 17, 2025 · 05e232c · 05e232c
1 parent f819f7d
commit 05e232c
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 113 deletions.
diff --git a/src/applications/ezr/tests/unit/components/FormAlerts/IdentityVerificationAlert.unit.spec.js b/src/applications/ezr/tests/unit/components/FormAlerts/IdentityVerificationAlert.unit.spec.js
@@ -1,34 +1,37 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { expect } from 'chai';
-import sinon from 'sinon';
+import { renderInReduxProvider } from '@department-of-veterans-affairs/platform-testing/react-testing-library-helpers';
 import IdentityVerificationAlert from '../../../../components/FormAlerts/IdentityVerificationAlert';
 
 describe('ezr <IdentityVerificationAlert>', () => {
   context('when the component renders', () => {
-    it('should render `va-alert` with status of `continue`', () => {
-      const { container } = render(<IdentityVerificationAlert />);
-      const selector = container.querySelector('va-alert');
-      expect(selector).to.exist;
-      expect(selector).to.have.attr('status', 'continue');
-    });
-
-    it('should render `verify` button', () => {
-      const { container } = render(<IdentityVerificationAlert />);
-      const selector = container.querySelector('.vads-c-action-link--green');
+    it('should render `va-alert-sign-in` with status of `verifyIdMe`', () => {
+      const { container } = renderInReduxProvider(
+        <IdentityVerificationAlert />,
+        {
+          initialState: {
+            user: { profile: { signIn: { serviceName: 'idme ' } } },
+          },
+        },
+      );
+      const selector = container.querySelector('va-alert-sign-in');
       expect(selector).to.exist;
+      expect(selector).to.have.attr('variant', 'verifyIdMe');
     });
-  });
 
-  context('when the `verify` button is clicked', () => {
-    it('should trigger the `onVerify` function', () => {
-      const verifySpy = sinon.spy();
-      const { container } = render(
-        <IdentityVerificationAlert onVerify={verifySpy} />,
+    it('should render ID.me button', () => {
+      const { container } = renderInReduxProvider(
+        <IdentityVerificationAlert />,
+        {
+          initialState: {
+            user: { profile: { signIn: { serviceName: 'idme ' } } },
+          },
+        },
       );
-      const selector = container.querySelector('.vads-c-action-link--green');
+      const selector = container.querySelector('.idme-verify-button');
       fireEvent.click(selector);
-      expect(verifySpy.called).to.be.true;
+      expect(selector).to.exist;
     });
   });
 });
diff --git a/src/applications/ezr/tests/unit/components/IntroductionPage/SaveInProgressInfo.unit.spec.js b/src/applications/ezr/tests/unit/components/IntroductionPage/SaveInProgressInfo.unit.spec.js
@@ -65,7 +65,7 @@ describe('ezr <SaveInProgressInfo>', () => {
 
   describe('when the component renders', () => {
     context('when the user is not logged in', () => {
-      it('should render `va-alert` with `sign in` button', () => {
+      it('should render `va-alert-sign-in` with `sign in` button', () => {
         const { props, mockStore } = getData({
           showLoader: false,
           loggedIn: false,
@@ -77,7 +77,7 @@ describe('ezr <SaveInProgressInfo>', () => {
           </Provider>,
         );
         const selectors = {
-          alert: container.querySelector('[data-testid="ezr-login-alert"]'),
+          alert: container.querySelector('va-alert-sign-in'),
           button: container.querySelector('va-button'),
         };
         expect(selectors.alert).to.exist;

diff --git a/src/applications/ezr/tests/unit/containers/IntroductionPage.unit.spec.js b/src/applications/ezr/tests/unit/containers/IntroductionPage.unit.spec.js
@@ -8,7 +8,12 @@ import content from '../../../locales/en/content.json';
 import IntroductionPage from '../../../containers/IntroductionPage';
 
 describe('ezr IntroductionPage', () => {
-  const getData = ({ showLoader, loggedIn = false, userLOA = null }) => ({
+  const getData = ({
+    showLoader,
+    loggedIn = false,
+    userLOA = null,
+    serviceName = null,
+  }) => ({
     props: {
       route: {
         formConfig,
@@ -39,6 +44,7 @@ describe('ezr IntroductionPage', () => {
             loa: { current: userLOA },
             savedForms: [],
             prefillsAvailable: [],
+            signIn: { serviceName },
           },
         },
         scheduledDowntime: {
@@ -67,7 +73,9 @@ describe('ezr IntroductionPage', () => {
       );
       const selectors = {
         title: container.querySelector('[data-testid="form-title"]'),
-        sipInfo: container.querySelector('[data-testid="ezr-login-alert"]'),
+        sipInfo: container.querySelector(
+          'va-alert-sign-in[variant="signInOptional"]',
+        ),
         ombInfo: container.querySelector('va-omb-info'),
       };
       expect(selectors.title).to.exist;
@@ -103,6 +111,7 @@ describe('ezr IntroductionPage', () => {
       showLoader: false,
       loggedIn: true,
       userLOA: 1,
+      serviceName: 'idme',
     });
 
     it('should render the page content, identity alert & omb info', () => {
@@ -113,7 +122,9 @@ describe('ezr IntroductionPage', () => {
       );
       const selectors = {
         title: container.querySelector('[data-testid="form-title"]'),
-        sipInfo: container.querySelector('[data-testid="ezr-identity-alert"]'),
+        sipInfo: container.querySelector(
+          'va-alert-sign-in[variant="verifyIdMe"]',
+        ),
         ombInfo: container.querySelector('va-omb-info'),
       };
       expect(selectors.title).to.exist;

diff --git a/src/applications/mhv-landing-page/components/alerts/AlertNotVerified.jsx b/src/applications/mhv-landing-page/components/alerts/AlertNotVerified.jsx
@@ -26,6 +26,7 @@ const AlertNotVerified = ({ cspId, recordEvent }) => {
 
   return (
     <IdentityNotVerified
+      dataTestId="verify-identity-alert-headline"
       headline={headline}
       showHelpContent={false}
       showVerifyIdenityHelpInfo

diff --git a/src/applications/mhv-landing-page/tests/components/alerts/AlertMhvBasicAccount.unit.spec.jsx b/src/applications/mhv-landing-page/tests/components/alerts/AlertMhvBasicAccount.unit.spec.jsx
@@ -15,16 +15,15 @@ describe('<AlertMhvBasicAccount />', () => {
   it('renders', async () => {
     const recordEvent = sinon.spy();
     const props = { ...defaultProps, recordEvent };
-    const { getByRole, getByTestId } = render(
+    const { getByTestId, container } = render(
       <Provider store={mockStore()}>
         <AlertMhvBasicAccount {...props} />,
       </Provider>,
     );
     getByTestId(defaultProps.testId);
 
-    getByRole('heading', { name: defaultProps.headline });
-    expect(getByRole('button', { name: /Verify with ID.me/ })).to.exist;
-    expect(getByRole('button', { name: /Verify with Login.gov/ })).to.exist;
+    expect(container.querySelector('.idme-verify-button')).to.exist;
+    expect(container.querySelector('.logingov-verify-button')).to.exist;
     await waitFor(() => {
       expect(recordEvent.calledOnce).to.be.true;
       expect(recordEvent.calledTwice).to.be.false;

diff --git a/src/applications/mhv-landing-page/tests/components/alerts/AlertNotVerified.unit.spec.jsx b/src/applications/mhv-landing-page/tests/components/alerts/AlertNotVerified.unit.spec.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderInReduxProvider } from '@department-of-veterans-affairs/platform-testing/react-testing-library-helpers';
 import sinon from 'sinon';
 import { expect } from 'chai';
 
@@ -9,7 +10,14 @@ describe('<AlertNotVerified />', () => {
   it('renders', async () => {
     const recordEvent = sinon.spy();
     const props = { recordEvent };
-    const { getByTestId } = render(<AlertNotVerified {...props} />);
+    const { getByTestId } = renderInReduxProvider(
+      <AlertNotVerified {...props} />,
+      {
+        initialState: {
+          user: { profile: { signIn: { serviceName: 'idme' } } },
+        },
+      },
+    );
     getByTestId('verify-identity-alert-headline');
     await waitFor(() => {
       expect(recordEvent.calledOnce).to.be.true;

diff --git a/src/applications/personalization/dashboard/components/Dashboard.jsx b/src/applications/personalization/dashboard/components/Dashboard.jsx
@@ -151,6 +151,7 @@ const LOA1Content = ({
           <IdentityNotVerified
             headline="Verify your identity to access more VA.gov tools and features"
             signInService={signInService}
+            dataTestId="verify-identity-alert-headline"
           />
         </div>
       </div>

diff --git a/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx b/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx
@@ -145,7 +145,10 @@ export const DirectDeposit = () => {
   if (!isIdentityVerified) {
     return (
       <Wrapper>
-        <VerifyIdentity useOAuth={useOAuth} />
+        <VerifyIdentity
+          useOAuth={useOAuth}
+          dataTestId="direct-deposit-mfa-message"
+        />
       </Wrapper>
     );
   }

diff --git a/src/applications/personalization/profile/components/direct-deposit/alerts/VerifyIdentity.jsx b/src/applications/personalization/profile/components/direct-deposit/alerts/VerifyIdentity.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import VerifyAlert from '~/platform/user/authentication/components/VerifyAlert';
 
-export default function VerifyIdentity() {
-  return <VerifyAlert headingLevel={2} />;
+export default function VerifyIdentity({ dataTestId }) {
+  return (
+    <div data-testid={dataTestId}>
+      <VerifyAlert headingLevel={2} />
+    </div>
+  );
 }
diff --git a/...nalization/profile/tests/components/account-security/AccountSecurityContent.unit.spec.jsx b/...nalization/profile/tests/components/account-security/AccountSecurityContent.unit.spec.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
 import { cleanup } from '@testing-library/react';
-import { within } from '@testing-library/dom';
 import { CSP_IDS } from '~/platform/user/authentication/constants';
 import { Toggler } from '~/platform/utilities/feature-toggles';
 import AccountSecurityContent from '../../../components/account-security/AccountSecurityContent';
@@ -124,7 +123,7 @@ describe('AccountSecurityContent component', () => {
   });
 
   it('renders regular identity not verified alert when user is not verified and id.me', () => {
-    const { getByText, container } = renderWithProfileReducersAndRouter(
+    const { container } = renderWithProfileReducersAndRouter(
       <AccountSecurityContent />,
       {
         initialState: {
@@ -144,15 +143,8 @@ describe('AccountSecurityContent component', () => {
       },
     );
 
-    expect(
-      getByText('Verify your identity to access your complete profile'),
-      'heading for alert exists when user is not verified',
-    ).to.exist;
-
-    const alert = container.querySelector('va-alert');
-    expect(
-      within(alert).getByRole('link', { name: 'Verify your identity' }),
-      'verify identity link exists when user is not verified',
-    ).to.exist;
+    const alert = container.querySelector('va-alert-sign-in');
+    expect(alert.getAttribute('variant')).to.eql('verifyIdMe');
+    expect(container.querySelector('.idme-verify-button')).to.exist;
   });
 });
diff --git a/...ions/personalization/profile/tests/components/direct-deposit/VerifyIdentity.unit.spec.jsx b/...ions/personalization/profile/tests/components/direct-deposit/VerifyIdentity.unit.spec.jsx
@@ -1,91 +1,52 @@
 import React from 'react';
-import { cleanup, waitFor } from '@testing-library/react';
+import { cleanup } from '@testing-library/react';
 import { expect } from 'chai';
-import { mockCrypto } from 'platform/utilities/oauth/mockCrypto';
 import { renderInReduxProvider } from '~/platform/testing/unit/react-testing-library-helpers';
 import VerifyIdentity from '../../../components/direct-deposit/alerts/VerifyIdentity';
 
-const oldCrypto = global.window.crypto;
-
-const initialState = {
+const generateStore = serviceName => ({
   featureToggles: {
     profileShowCredentialRetirementMessaging: true,
   },
   user: {
-    profile: {
-      signIn: {
-        service: 'idme',
-      },
-    },
+    profile: { signIn: { serviceName } },
   },
-};
+});
 
 describe('authenticated experience -- profile -- direct deposit', () => {
   describe('VerifyIdentity', () => {
-    beforeEach(() => {
-      global.window.crypto = mockCrypto;
-      window.location = new URL('https://dev.va.gov/');
-    });
-
     afterEach(() => {
-      global.window.crypto = oldCrypto;
       cleanup();
     });
 
-    it('renders the proper URLs for VerifyIdentity (SAML)', async () => {
-      const screen = renderInReduxProvider(
-        <VerifyIdentity useOAuth={false} />,
-        { initialState },
-      );
-      const loginGovAnchor = await screen.findByTestId('logingov');
-      const idmeAnchor = await screen.findByTestId('idme');
+    it('renders the correct verify alert for ID.me', async () => {
+      const { container } = renderInReduxProvider(<VerifyIdentity />, {
+        initialState: generateStore('idme'),
+      });
 
-      await waitFor(() =>
-        expect(loginGovAnchor.href).to.include(`logingov_signup_verified`),
-      );
-      await waitFor(() =>
-        expect(idmeAnchor.href).to.include('idme_signup_verified'),
-      );
-      screen.unmount();
+      const signInAlert = container.querySelector('va-alert-sign-in');
+      expect(signInAlert).to.exist;
+      expect(signInAlert.getAttribute('variant')).to.eql('verifyIdMe');
     });
 
-    it('renders the proper URLs for VerifyIdentity (OAuth)', async () => {
-      const screen = renderInReduxProvider(<VerifyIdentity useOAuth />, {
-        initialState,
+    it('renders the correct verify alert for Login.gov', async () => {
+      const { container } = renderInReduxProvider(<VerifyIdentity />, {
+        initialState: generateStore('logingov'),
       });
-      const loginGovAnchor = await screen.findByTestId('logingov');
-      const idmeAnchor = await screen.findByTestId('idme');
 
-      await waitFor(() =>
-        expect(loginGovAnchor.href).to.include(`type=logingov`),
-      );
-      await waitFor(() => expect(loginGovAnchor.href).to.include(`acr=min`));
-      await waitFor(() =>
-        expect(loginGovAnchor.href).to.include(`client_id=vaweb`),
-      );
-      await waitFor(() => expect(loginGovAnchor.href).to.include('/authorize'));
-      await waitFor(() =>
-        expect(loginGovAnchor.href).to.include('response_type=code'),
-      );
-      await waitFor(() =>
-        expect(loginGovAnchor.href).to.include('code_challenge='),
-      );
-      await waitFor(() => expect(loginGovAnchor.href).to.include('state='));
+      const signInAlert = container.querySelector('va-alert-sign-in');
+      expect(signInAlert).to.exist;
+      expect(signInAlert.getAttribute('variant')).to.eql('verifyLoginGov');
+    });
+
+    it('renders the correct verify alert for ID.me', async () => {
+      const { container } = renderInReduxProvider(<VerifyIdentity />, {
+        initialState: generateStore('mhv'),
+      });
 
-      await waitFor(() => expect(idmeAnchor.href).to.include(`type=idme`));
-      await waitFor(() => expect(idmeAnchor.href).to.include(`acr=min`));
-      await waitFor(() =>
-        expect(idmeAnchor.href).to.include(`client_id=vaweb`),
-      );
-      await waitFor(() => expect(idmeAnchor.href).to.include('/authorize'));
-      await waitFor(() =>
-        expect(idmeAnchor.href).to.include('response_type=code'),
-      );
-      await waitFor(() =>
-        expect(idmeAnchor.href).to.include('code_challenge='),
-      );
-      await waitFor(() => expect(idmeAnchor.href).to.include('state='));
-      screen.unmount();
+      const signInAlert = container.querySelector('va-alert-sign-in');
+      expect(signInAlert).to.exist;
+      expect(signInAlert.getAttribute('variant')).to.eql('signInEither');
     });
   });
 });
diff --git a/src/platform/user/authorization/components/IdentityNotVerified.jsx b/src/platform/user/authorization/components/IdentityNotVerified.jsx
@@ -11,9 +11,9 @@ export const HowToVerifyLink = () => (
   </p>
 );
 
-const IdentityNotVerified = () => {
+const IdentityNotVerified = ({ dataTestId }) => {
   return (
-    <div className="vads-u-margin-y--2">
+    <div className="vads-u-margin-y--2" data-testId={dataTestId}>
       <VerifyAlert headingLevel={2} />
     </div>
   );