VYE-456 Update breadcrumbs to v3 component (#30706)

department-of-veterans-affairs · Jul 15, 2024 · 8725a6b · 8725a6b
1 parent df7e9b6
commit 8725a6b
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 53 deletions.
diff --git a/src/applications/verify-your-enrollment/components/EnrollmentVerificationBreadcrumbs.jsx b/src/applications/verify-your-enrollment/components/EnrollmentVerificationBreadcrumbs.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import {
   BASE_URL,
   BENEFITS_PROFILE_URL_SEGMENT,
@@ -9,43 +10,50 @@ import {
 
 export default function EnrollmentVerificationBreadcrumbs() {
   const breadcrumbs = [
-    <a href="/" key="home">
-      Home
-    </a>,
-    <a href="/education/" key="education-and-training">
-      Education and training
-    </a>,
-    <a
-      href="/education/verify-school-enrollment/"
-      key="verify-school-enrollment"
-    >
-      Verify your school enrollment for GI Bill benefits
-    </a>,
-    <a href={BASE_URL} key="enrollment-verification-page">
-      Montgomery GI Bill enrollment verification
-    </a>,
+    {
+      href: '/',
+      label: 'Home',
+    },
+    {
+      href: '/education/',
+      label: 'Education and training',
+    },
+    {
+      href: '/education/verify-school-enrollment/',
+      label: 'Verify your school enrollment for GI Bill benefits',
+    },
+    {
+      href: BASE_URL,
+      label: 'Montgomery GI Bill enrollment verification',
+    },
   ];
 
   // Get the last non-empty segment of the URL.
   const page = window.location.href
     .split('/')
     .reverse()
     .find(s => !!s.trim() && !s.startsWith('?'));
-
   if ([BENEFITS_PROFILE_URL_SEGMENT].includes(page)) {
-    breadcrumbs.push(
-      <a href={BENEFITS_PROFILE_URL} key="BenefitsProfilePage">
-        Your Montgomery GI Bill benefits information
-      </a>,
-    );
+    breadcrumbs.push({
+      href: BENEFITS_PROFILE_URL,
+      label: 'Your Montgomery GI Bill benefits information',
+    });
   }
 
   if ([VERIFICATION_REVIEW_URL_SEGMENT].includes(page)) {
-    breadcrumbs.push(
-      <a href={VERIFICATION_PROFILE_URL} key="VerificationReviewPage">
-        Verify your enrollment
-      </a>,
-    );
+    breadcrumbs.push({
+      href: VERIFICATION_PROFILE_URL,
+      label: 'Verify your enrollment',
+    });
   }
-  return <va-breadcrumbs uswds="false">{breadcrumbs}</va-breadcrumbs>;
+  return (
+    <div className="bread-crumbs-container">
+      <VaBreadcrumbs
+        uswds
+        breadcrumbList={breadcrumbs}
+        label="Breadcrumb"
+        wrapping
+      />
+    </div>
+  );
 }
diff --git a/src/applications/verify-your-enrollment/sass/verify-your-enrollment.scss b/src/applications/verify-your-enrollment/sass/verify-your-enrollment.scss
@@ -100,4 +100,12 @@
             margin: 0;
     }
 }
+}
+.bread-crumbs-container{
+    va-breadcrumbs{
+        margin-left: 20px;
+        @media (max-width: $small-screen){
+            margin-left: 0;
+        }
+    }
 }
diff --git a/...ns/verify-your-enrollment/tests/components/EnrollmentVerificationBreadcrumbs.unit.spec.js b/...ns/verify-your-enrollment/tests/components/EnrollmentVerificationBreadcrumbs.unit.spec.js
@@ -3,11 +3,23 @@ import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import EnrollmentVerificationBreadcrumbs from '../../components/EnrollmentVerificationBreadcrumbs';
 import {
+  BASE_URL,
   BENEFITS_PROFILE_URL,
   BENEFITS_PROFILE_URL_SEGMENT,
+  VERIFICATION_PROFILE_URL,
+  VERIFICATION_REVIEW_URL_SEGMENT,
 } from '../../constants/index';
 
 describe('<EnrollmentVerificationBreadcrumbs>', () => {
+  const defaultUrls = [
+    { href: '/', label: 'Home' },
+    { href: '/education/', label: 'Education and training' },
+    {
+      href: '/education/verify-school-enrollment/',
+      label: 'Verify your school enrollment for GI Bill benefits',
+    },
+    { href: BASE_URL, label: 'Montgomery GI Bill enrollment verification' },
+  ];
   it('renders breadcrumbs correctly', () => {
     // Mock window location
     delete window.location;
@@ -18,39 +30,27 @@ describe('<EnrollmentVerificationBreadcrumbs>', () => {
     const wrapper = shallow(<EnrollmentVerificationBreadcrumbs />);
 
     // Expect the component to have a 'va-breadcrumbs' element
-    expect(wrapper.find('va-breadcrumbs').length).to.equal(1);
-
-    // Check if the breadcrumbs are rendered
-    const breadcrumbs = wrapper.find('va-breadcrumbs').children();
-    expect(breadcrumbs.length).to.equal(5); // Expect 4 breadcrumb links when on BENEFITS_PROFILE_URL_SEGMENT
+    expect(wrapper.find('[label="Breadcrumb"]').length).to.equal(1);
+    wrapper.unmount();
 
-    // Check for specific breadcrumb links
-    expect(breadcrumbs.at(0).props().href).to.equal('/');
-    expect(breadcrumbs.at(1).props().href).to.equal('/education/');
-    expect(breadcrumbs.at(2).props().href).to.equal(
-      '/education/verify-school-enrollment/',
-    );
-    expect(breadcrumbs.at(3).props().href).to.equal(
-      '/education/verify-school-enrollment/mgib-enrollments/',
-    );
+    // Restore the original window.location
+    delete window.location;
+    window.location = location;
+  });
+  it('should renders default breadcrumbs', () => {
+    window.location.href = `${BASE_URL}/`;
 
-    // Check the breadcrumb texts
-    expect(breadcrumbs.at(0).text()).to.equal('Home');
-    expect(breadcrumbs.at(1).text()).to.equal('Education and training');
-    expect(breadcrumbs.at(2).text()).to.equal(
-      'Verify your school enrollment for GI Bill benefits',
-    );
-    expect(breadcrumbs.at(3).text()).to.equal(
-      'Montgomery GI Bill enrollment verification',
-    );
+    const wrapper = shallow(<EnrollmentVerificationBreadcrumbs />);
+    const breadcrumbs = wrapper
+      .find('[label="Breadcrumb"]')
+      .prop('breadcrumbList');
 
+    expect(breadcrumbs).to.deep.equal(defaultUrls);
     wrapper.unmount();
-
-    // Restore the original window.location
     delete window.location;
     window.location = location;
   });
-  it('does not include "Your Benefits profile" breadcrumb for other pages', () => {
+  it('should not include "Your Benefits profile" breadcrumb for other pages', () => {
     global.window = Object.create(window);
     Object.defineProperty(window, 'location', {
       value: {
@@ -66,4 +66,50 @@ describe('<EnrollmentVerificationBreadcrumbs>', () => {
     ).to.equal(false);
     wrapper.unmount();
   });
+  it('should renders breadcrumbs with benefits profile', () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: '',
+      },
+      writable: true,
+    });
+    window.location.href = `${BASE_URL}/${BENEFITS_PROFILE_URL_SEGMENT}/`;
+
+    const wrapper = shallow(<EnrollmentVerificationBreadcrumbs />);
+    const breadcrumbs = wrapper
+      .find('[label="Breadcrumb"]')
+      .prop('breadcrumbList');
+
+    expect(breadcrumbs).to.deep.equal([
+      ...defaultUrls,
+      {
+        href: BENEFITS_PROFILE_URL,
+        label: 'Your Montgomery GI Bill benefits information',
+      },
+    ]);
+    wrapper.unmount();
+  });
+
+  it('renders breadcrumbs with verification review', () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: '',
+      },
+      writable: true,
+    });
+    window.location.href = `${BASE_URL}/${VERIFICATION_REVIEW_URL_SEGMENT}`;
+
+    const wrapper = shallow(<EnrollmentVerificationBreadcrumbs />);
+    const breadcrumbs = wrapper
+      .find('[label="Breadcrumb"]')
+      .prop('breadcrumbList');
+
+    expect(breadcrumbs).to.deep.equal([
+      ...defaultUrls,
+      { href: VERIFICATION_PROFILE_URL, label: 'Verify your enrollment' },
+    ]);
+    wrapper.unmount();
+  });
 });