From b6a0bf8899807c0498f7d2a31e5b81ca48a60bb1 Mon Sep 17 00:00:00 2001 From: Caitlin <78328496+CaitHawk@users.noreply.github.com> Date: Mon, 13 Jan 2025 14:22:14 -0800 Subject: [PATCH] updates login info component (#34049) --- .../login/containers/MhvAccess.jsx | 10 +-- .../tests/containers/MhvAccess.unit.spec.js | 10 ++- .../tests/mhv-access-page.cypress.spec.js | 33 ++++++++ .../authentication/components/LoginInfo.jsx | 78 ++++++++++++++----- .../components/LoginInfo.unit.spec.js | 38 +++++---- 5 files changed, 124 insertions(+), 45 deletions(-) create mode 100644 src/applications/login/tests/mhv-access-page.cypress.spec.js diff --git a/src/applications/login/containers/MhvAccess.jsx b/src/applications/login/containers/MhvAccess.jsx index ef7c7b8db2d9..3155b5377177 100644 --- a/src/applications/login/containers/MhvAccess.jsx +++ b/src/applications/login/containers/MhvAccess.jsx @@ -6,18 +6,18 @@ export default function MhvAccess() {

- Get temporary access to My HealtheVet + Access the My HealtheVet sign-in option

- Some groups are approved to access the My HealtheVet sign-in option - until they create a new modern account. This sign-in process may - change in the future. + Get temporary access to the My HealtheVet sign-in option. This sign-in + process may change in the future.

+

Sign in

login({ policy: 'mhv' })} - text="Sign in with My HealtheVet" + text="My HealtheVet" data-testid="accessMhvBtn" />
diff --git a/src/applications/login/tests/containers/MhvAccess.unit.spec.js b/src/applications/login/tests/containers/MhvAccess.unit.spec.js index ba0dbaa1d43f..07aa069706fe 100644 --- a/src/applications/login/tests/containers/MhvAccess.unit.spec.js +++ b/src/applications/login/tests/containers/MhvAccess.unit.spec.js @@ -7,22 +7,24 @@ import MhvAccess from '../../containers/MhvAccess'; describe('MhvAccess', () => { it('renders main title', () => { const screen = renderInReduxProvider(); - const mainTitle = screen.getByRole('heading', { - name: /get temporary access to my healthevet/i, - }); + const mainTitle = screen.getByText( + /access the my healthevet sign-in option/i, + ); expect(mainTitle).to.exist; }); it('renders information paragraph', () => { const screen = renderInReduxProvider(); const description = screen.getByText( - /Some groups are approved to access the My HealtheVet sign-in option/i, + /get temporary access to the my healthevet sign-in option/i, ); expect(description).to.exist; }); it('renders button', () => { const screen = renderInReduxProvider(); + const signInHeading = screen.getByText(/sign in/i); + expect(signInHeading).to.exist; const accessButton = screen.getByTestId('accessMhvBtn'); expect(accessButton).to.exist; fireEvent.click(accessButton); diff --git a/src/applications/login/tests/mhv-access-page.cypress.spec.js b/src/applications/login/tests/mhv-access-page.cypress.spec.js new file mode 100644 index 000000000000..ad50826821fb --- /dev/null +++ b/src/applications/login/tests/mhv-access-page.cypress.spec.js @@ -0,0 +1,33 @@ +describe('My HealtheVet Access Page', () => { + beforeEach(() => { + cy.visit('/sign-in/mhv'); + }); + + it('displays the page title and description', () => { + cy.injectAxeThenAxeCheck(); + cy.get('#signin-signup-modal-title') + .should('exist') + .and('contain', 'Access the My HealtheVet sign-in option'); + cy.get('p.vads-u-measure--5') + .should('exist') + .and( + 'contain', + 'Get temporary access to the My HealtheVet sign-in option. This sign-in process may change in the future.', + ); + }); + + it('displays a sign-in button and respond to clicks', () => { + cy.injectAxeThenAxeCheck(); + cy.get('va-button[text="My HealtheVet"]').should('exist'); + cy.get('[data-testid="accessMhvBtn"]').click(); + }); + + it('should display the "Having trouble signing in?" section', () => { + cy.injectAxeThenAxeCheck(); + cy.contains('h2', 'Having trouble signing in?').should('exist'); + cy.contains( + 'p', + 'Contact the administrator who gave you access to this page.', + ).should('exist'); + }); +}); diff --git a/src/platform/user/authentication/components/LoginInfo.jsx b/src/platform/user/authentication/components/LoginInfo.jsx index f10d23149f46..a28d15c1173b 100644 --- a/src/platform/user/authentication/components/LoginInfo.jsx +++ b/src/platform/user/authentication/components/LoginInfo.jsx @@ -1,26 +1,62 @@ import React from 'react'; +import { useFeatureToggle } from '~/platform/utilities/feature-toggles/useFeatureToggle'; import SubmitSignInForm from 'platform/static-data/SubmitSignInForm'; -export default () => ( -
-
-
-

Having trouble signing in?

-

- Get answers to common{' '} - - questions about signing in - {' '} - and{' '} - - verifying your identity - - . -

-

- We're here 24/7. -

+export default () => { + const { useToggleValue, TOGGLE_NAMES } = useFeatureToggle(); + const mhvButtonDeprecated = useToggleValue( + TOGGLE_NAMES.mhvCredentialButtonDisabled, + ); + return ( +
+
+
+

Having trouble signing in?

+ {mhvButtonDeprecated ? ( +
+

Get help with questions about:

+ + +
+ ) : ( +

+ Get answers to common{' '} + + questions about signing in + {' '} + and{' '} + + verifying your identity + + . +

+ )} +

+ We're here 24/7. +

+
-
-); + ); +}; diff --git a/src/platform/user/tests/authentication/components/LoginInfo.unit.spec.js b/src/platform/user/tests/authentication/components/LoginInfo.unit.spec.js index 800576a63014..c610a2fbb32b 100644 --- a/src/platform/user/tests/authentication/components/LoginInfo.unit.spec.js +++ b/src/platform/user/tests/authentication/components/LoginInfo.unit.spec.js @@ -1,25 +1,33 @@ import React from 'react'; -import { shallow } from 'enzyme'; import { expect } from 'chai'; +import { renderInReduxProvider } from 'platform/testing/unit/react-testing-library-helpers'; import LoginInfo from 'platform/user/authentication/components/LoginInfo'; describe('LoginInfo', () => { - it('renders SubmitSignInForm component', () => { - const wrapper = shallow(); - expect(wrapper.find('SubmitSignInForm').exists()).to.be.true; - expect(wrapper.find('SubmitSignInForm').prop('startSentence')).to.be.true; - wrapper.unmount(); + it('renders 4 links when toggle is off', () => { + const { container } = renderInReduxProvider(, { + initialState: { + featureToggles: { + // eslint-disable-next-line camelcase + mhv_credential_button_disabled: false, + }, + }, + }); + const links = container.querySelectorAll('a'); + expect(links.length).to.eql(4); }); - it('anchor tags send users to appropriate place', () => { - const wrapper = shallow(); - const signInTag = wrapper.find('a').at(0); - const verifyIdentityTag = wrapper.find('a').at(1); + it('renders 5 links when toggle is on', () => { + const { container } = renderInReduxProvider(, { + initialState: { + featureToggles: { + // eslint-disable-next-line camelcase + mhv_credential_button_disabled: true, + }, + }, + }); - expect(signInTag.prop('href')).to.eql('/resources/signing-in-to-vagov/'); - expect(verifyIdentityTag.prop('href')).to.eql( - '/resources/verifying-your-identity-on-vagov/', - ); - wrapper.unmount(); + const links = container.querySelectorAll('a'); + expect(links.length).to.eq(5); }); });