Mhv 58403 landing page breadcrumb style (#29944)

* replaced landing page custom SM breadcrumb with VADS version * updated unit test * add: breadcrumb assertions * updated unit test to wait for testId value * testing option for custom attribute with hardcoded string * update crumb spec --------- Co-authored-by: fazilqa <fazil.mammadov@bylight.com> Co-authored-by: Alex Morgun <oleksii.morgun@va.gov>
department-of-veterans-affairs · May 24, 2024 · 81abf32 · 81abf32
1 parent ecb8172
commit 81abf32
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 17 deletions.
diff --git a/src/applications/mhv-secure-messaging/components/shared/SmBreadcrumbs.jsx b/src/applications/mhv-secure-messaging/components/shared/SmBreadcrumbs.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useHistory, useLocation } from 'react-router-dom';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { setBreadcrumbs } from '../../actions/breadcrumbs';
 import * as Constants from '../../util/constants';
 import { retrieveFolder } from '../../actions/folders';
@@ -133,19 +134,38 @@ const SmBreadcrumbs = () => {
         !crumbs?.label ? 'breadcrumbs--hidden' : ''
       }`}
     >
-      {crumbs && (
-        <nav aria-label="Breadcrumb">
-          <ul className={breadcrumbSize()}>
-            <li className="sm-breadcrumb-list-item">
-              {!crumbs.path ? (
-                <a href="/my-health">{crumbs.label}</a>
-              ) : (
+      {crumbs &&
+        (!crumbs.path ? (
+          <VaBreadcrumbs
+            breadcrumbList={[
+              {
+                href: '/',
+                label: 'VA.gov',
+              },
+              {
+                href: '/my-health',
+                label: crumbs.label,
+              },
+              {
+                href: '/my-health/secure-messages',
+                label: 'Messages',
+              },
+            ]}
+            label="Breadcrumb"
+            home-veterans-affairs
+            className="vads-u-margin-y--neg1 small-screen:vads-u-margin-y--2"
+            dataTestid="sm-breadcrumb"
+            smCrumbLabel={crumbs.label}
+          />
+        ) : (
+          <nav aria-label="Breadcrumb">
+            <ul className={breadcrumbSize()}>
+              <li className="sm-breadcrumb-list-item">
                 <Link to={crumbs.path?.toLowerCase()}>{crumbs.label}</Link>
-              )}
-            </li>
-          </ul>
-        </nav>
-      )}
+              </li>
+            </ul>
+          </nav>
+        ))}
     </div>
   );
 };

diff --git a/src/applications/mhv-secure-messaging/tests/components/breadcrumbs.unit.spec.jsx b/src/applications/mhv-secure-messaging/tests/components/breadcrumbs.unit.spec.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { renderWithStoreAndRouter } from '@department-of-veterans-affairs/platform-testing/react-testing-library-helpers';
 import { expect } from 'chai';
+import { waitFor } from '@testing-library/dom';
 import SmBreadcrumbs from '../../components/shared/SmBreadcrumbs';
 import messageResponse from '../fixtures/message-response.json';
 import { inbox } from '../fixtures/folder-inbox-response.json';
@@ -16,16 +17,18 @@ describe('Breadcrumbs', () => {
     },
   };
 
-  it('renders with "Back to My HealtheVet" on Landing Page', async () => {
+  it('renders breadcrumb that includes "My HealtheVet" on Landing Page', async () => {
     const screen = renderWithStoreAndRouter(<SmBreadcrumbs />, {
       initialState,
       reducers: reducer,
       path: `/`,
     });
-    const breadcrumb = await screen.findByText('Back to My HealtheVet home', {
-      exact: true,
+    await waitFor(() => {
+      expect(screen.getByTestId('sm-breadcrumb')).to.have.attribute(
+        'sm-crumb-label',
+        'My HealtheVet',
+      );
     });
-    expect(breadcrumb);
   });
 
   it('finds parent breadcrumb that displays the label "Back to messages"', async () => {

diff --git a/...cations/mhv-secure-messaging/tests/e2e/secure-messaging-landing-page-load.cypress.spec.js b/...cations/mhv-secure-messaging/tests/e2e/secure-messaging-landing-page-load.cypress.spec.js
@@ -48,6 +48,31 @@ describe('SM main page', () => {
     cy.get(Locators.LINKS.GO_TO_INBOX).click({ force: true });
     cy.location('pathname').should('contain', 'inbox');
   });
+
+  it('verify breadcrumbs', () => {
+    cy.get('[data-testid="sm-breadcrumb"]')
+      .shadow()
+      .find('a')
+      .should('have.length', 3);
+
+    cy.get('[data-testid="sm-breadcrumb"]').within(() => {
+      cy.get('a')
+        .eq(0)
+        .should('have.attr', 'href', '/');
+    });
+
+    cy.get('[data-testid="sm-breadcrumb"]').within(() => {
+      cy.get('a')
+        .eq(1)
+        .should('have.attr', 'href', '/my-health');
+    });
+
+    cy.get('[data-testid="sm-breadcrumb"]').within(() => {
+      cy.get('a')
+        .eq(2)
+        .should('have.attr', 'href', '#content');
+    });
+  });
 });
 
 describe('SM main page without API calls', () => {

diff --git a/src/applications/mhv-secure-messaging/util/constants.js b/src/applications/mhv-secure-messaging/util/constants.js
@@ -216,7 +216,7 @@ export const Prompts = {
 };
 
 export const Breadcrumbs = {
-  MYHEALTH: { path: Paths.MYHEALTH, label: 'Back to My HealtheVet home' },
+  MYHEALTH: { path: Paths.MYHEALTH, label: 'My HealtheVet' },
   MESSAGES: { path: '/', label: 'Back to messages' },
   COMPOSE: {
     path: Paths.COMPOSE,