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 index ec6baff1a4d8..ee15ea8445ef 100644 --- 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 ', () => { context('when the component renders', () => { - it('should render `va-alert` with status of `continue`', () => { - const { container } = render(); - 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(); - const selector = container.querySelector('.vads-c-action-link--green'); + it('should render `va-alert-sign-in` with status of `verifyIdMe`', () => { + const { container } = renderInReduxProvider( + , + { + 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( - , + it('should render ID.me button', () => { + const { container } = renderInReduxProvider( + , + { + 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 index 8d647f102053..128dc23500cd 100644 --- 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 ', () => { 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 ', () => { , ); 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 index d3582cbe716e..ca5e038453cd 100644 --- 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 index bbf9717cb536..7d1d55b95bdb 100644 --- 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 ( ', () => { it('renders', async () => { const recordEvent = sinon.spy(); const props = { ...defaultProps, recordEvent }; - const { getByRole, getByTestId } = render( + const { getByTestId, container } = render( , , ); 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 index 57b9e93182ef..bc80d9d515fc 100644 --- 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('', () => { it('renders', async () => { const recordEvent = sinon.spy(); const props = { recordEvent }; - const { getByTestId } = render(); + const { getByTestId } = renderInReduxProvider( + , + { + 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 index 1640fd50a71d..ca5907a692fc 100644 --- a/src/applications/personalization/dashboard/components/Dashboard.jsx +++ b/src/applications/personalization/dashboard/components/Dashboard.jsx @@ -151,6 +151,7 @@ const LOA1Content = ({ diff --git a/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx b/src/applications/personalization/profile/components/direct-deposit/DirectDeposit.jsx index 64a404925405..018d86027bd2 100644 --- 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 ( - + ); } diff --git a/src/applications/personalization/profile/components/direct-deposit/alerts/VerifyIdentity.jsx b/src/applications/personalization/profile/components/direct-deposit/alerts/VerifyIdentity.jsx index 4ac36b4572a3..acc7f8c7f117 100644 --- 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 ; +export default function VerifyIdentity({ dataTestId }) { + return ( +
+ +
+ ); } diff --git a/src/applications/personalization/profile/tests/components/account-security/AccountSecurityContent.unit.spec.jsx b/src/applications/personalization/profile/tests/components/account-security/AccountSecurityContent.unit.spec.jsx index bffa0d3c3246..fd94f40481c2 100644 --- a/src/applications/personalization/profile/tests/components/account-security/AccountSecurityContent.unit.spec.jsx +++ b/src/applications/personalization/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( , { 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/src/applications/personalization/profile/tests/components/direct-deposit/VerifyIdentity.unit.spec.jsx b/src/applications/personalization/profile/tests/components/direct-deposit/VerifyIdentity.unit.spec.jsx index 08a59e16b4ba..a251bdb72645 100644 --- a/src/applications/personalization/profile/tests/components/direct-deposit/VerifyIdentity.unit.spec.jsx +++ b/src/applications/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( - , - { 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(, { + 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(, { - initialState, + it('renders the correct verify alert for Login.gov', async () => { + const { container } = renderInReduxProvider(, { + 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(, { + 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 index 99d8a6761fa4..1494cba6c849 100644 --- a/src/platform/user/authorization/components/IdentityNotVerified.jsx +++ b/src/platform/user/authorization/components/IdentityNotVerified.jsx @@ -11,9 +11,9 @@ export const HowToVerifyLink = () => (

); -const IdentityNotVerified = () => { +const IdentityNotVerified = ({ dataTestId }) => { return ( -
+
);