updates login info component (#34049)

src/applications/login/containers/MhvAccess.jsx

@@ -6,18 +6,18 @@ export default function MhvAccess() {
     <section className="container row login vads-u-padding--3">
       <div className="columns small-12 vads-u-padding--0">
         <h1 id="signin-signup-modal-title">
-          Get temporary access to My HealtheVet
+          Access the My HealtheVet sign-in option
         </h1>
         <p className="vads-u-measure--5">
-          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.
         </p>
       </div>
+      <h2>Sign in</h2>
       <div className="vads-u-margin-y--2">
         <va-button
           onClick={() => login({ policy: 'mhv' })}
-          text="Sign in with My HealtheVet"
+          text="My HealtheVet"
           data-testid="accessMhvBtn"
         />
       </div>

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(<MhvAccess />);
-    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(<MhvAccess />);
     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(<MhvAccess />);
+    const signInHeading = screen.getByText(/sign in/i);
+    expect(signInHeading).to.exist;
     const accessButton = screen.getByTestId('accessMhvBtn');
     expect(accessButton).to.exist;
     fireEvent.click(accessButton);

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');
+  });
+});

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 () => (
-  <div className="row">
-    <div className="columns print-full-width sign-in-wrapper">
-      <div className="help-info">
-        <h2 className="vads-u-margin-top--0">Having trouble signing in?</h2>
-        <p>
-          Get answers to common{' '}
-          <a href="/resources/signing-in-to-vagov/">
-            questions about signing in
-          </a>{' '}
-          and{' '}
-          <a href="/resources/verifying-your-identity-on-vagov/">
-            verifying your identity
-          </a>
-          .
-        </p>
-        <p>
-          <SubmitSignInForm startSentence /> We're here 24/7.
-        </p>
+export default () => {
+  const { useToggleValue, TOGGLE_NAMES } = useFeatureToggle();
+  const mhvButtonDeprecated = useToggleValue(
+    TOGGLE_NAMES.mhvCredentialButtonDisabled,
+  );
+  return (
+    <div className="row">
+      <div className="columns print-full-width sign-in-wrapper">
+        <div className="help-info">
+          <h2 className="vads-u-margin-top--0">Having trouble signing in?</h2>
+          {mhvButtonDeprecated ? (
+            <div>
+              <p>Get help with questions about:</p>
+              <div>
+                <div role="list" className="vads-u-padding-bottom--3">
+                  <li>
+                    <a href="/resources/signing-in-to-vagov/">signing in</a>
+                  </li>
+                  <li>
+                    <a href="/resources/verifying-your-identity-on-vagov/">
+                      verifying your identity
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/resources/verifying-your-identity-on-vagov/">
+                      deleting your account
+                    </a>
+                  </li>
+                </div>
+              </div>
+              <va-link
+                text="The My HealtheVet sign-in option is no loner available"
+                label="The My HealtheVet sign-in option is no longer available"
+                href="/"
+                className="vads-u-margin-top--3"
+              />
+            </div>
+          ) : (
+            <p>
+              Get answers to common{' '}
+              <a href="/resources/signing-in-to-vagov/">
+                questions about signing in
+              </a>{' '}
+              and{' '}
+              <a href="/resources/verifying-your-identity-on-vagov/">
+                verifying your identity
+              </a>
+              .
+            </p>
+          )}
+          <p>
+            <SubmitSignInForm startSentence /> We're here 24/7.
+          </p>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

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(<LoginInfo />);
-    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(<LoginInfo />, {
+      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(<LoginInfo />);
 
-    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(<LoginInfo />, {
+      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);
   });
 });