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 (
-