diff --git a/src/applications/mhv-secure-messaging/components/shared/SmBreadcrumbs.jsx b/src/applications/mhv-secure-messaging/components/shared/SmBreadcrumbs.jsx
index 15afd97b4fa0..e14ec0ea3adc 100644
--- 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 && (
-
+ ))}
);
};
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
index 3b628e7976ab..03e256955a0c 100644
--- 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(, {
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/src/applications/mhv-secure-messaging/tests/e2e/secure-messaging-landing-page-load.cypress.spec.js b/src/applications/mhv-secure-messaging/tests/e2e/secure-messaging-landing-page-load.cypress.spec.js
index a8572dd6e629..65a24f6c9cca 100644
--- a/src/applications/mhv-secure-messaging/tests/e2e/secure-messaging-landing-page-load.cypress.spec.js
+++ b/src/applications/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
index d03fb2b2c07f..0b5269063100 100644
--- 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,