From 8725a6b53c0831928a896d03db898083111006c7 Mon Sep 17 00:00:00 2001 From: wafimohamed <158514667+wafimohamed@users.noreply.github.com> Date: Mon, 15 Jul 2024 12:13:55 -0400 Subject: [PATCH] VYE-456 Update breadcrumbs to v3 component (#30706) --- .../EnrollmentVerificationBreadcrumbs.jsx | 62 +++++++----- .../sass/verify-your-enrollment.scss | 8 ++ ...llmentVerificationBreadcrumbs.unit.spec.js | 98 ++++++++++++++----- 3 files changed, 115 insertions(+), 53 deletions(-) diff --git a/src/applications/verify-your-enrollment/components/EnrollmentVerificationBreadcrumbs.jsx b/src/applications/verify-your-enrollment/components/EnrollmentVerificationBreadcrumbs.jsx index 3f4fb4e09f39..49736c5009c9 100644 --- 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,21 +10,22 @@ import { export default function EnrollmentVerificationBreadcrumbs() { const breadcrumbs = [ - - Home - , - - Education and training - , - - Verify your school enrollment for GI Bill benefits - , - - Montgomery GI Bill enrollment verification - , + { + 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. @@ -31,21 +33,27 @@ export default function EnrollmentVerificationBreadcrumbs() { .split('/') .reverse() .find(s => !!s.trim() && !s.startsWith('?')); - if ([BENEFITS_PROFILE_URL_SEGMENT].includes(page)) { - breadcrumbs.push( - - Your Montgomery GI Bill benefits information - , - ); + breadcrumbs.push({ + href: BENEFITS_PROFILE_URL, + label: 'Your Montgomery GI Bill benefits information', + }); } if ([VERIFICATION_REVIEW_URL_SEGMENT].includes(page)) { - breadcrumbs.push( - - Verify your enrollment - , - ); + breadcrumbs.push({ + href: VERIFICATION_PROFILE_URL, + label: 'Verify your enrollment', + }); } - return {breadcrumbs}; + return ( +
+ +
+ ); } diff --git a/src/applications/verify-your-enrollment/sass/verify-your-enrollment.scss b/src/applications/verify-your-enrollment/sass/verify-your-enrollment.scss index c0e1f1c79a2d..a371bcdf8333 100644 --- 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; + } + } } \ No newline at end of file diff --git a/src/applications/verify-your-enrollment/tests/components/EnrollmentVerificationBreadcrumbs.unit.spec.js b/src/applications/verify-your-enrollment/tests/components/EnrollmentVerificationBreadcrumbs.unit.spec.js index e303696fad40..0136ade26b97 100644 --- a/src/applications/verify-your-enrollment/tests/components/EnrollmentVerificationBreadcrumbs.unit.spec.js +++ b/src/applications/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('', () => { + 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('', () => { const wrapper = shallow(); // 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(); + 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('', () => { ).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(); + 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(); + const breadcrumbs = wrapper + .find('[label="Breadcrumb"]') + .prop('breadcrumbList'); + + expect(breadcrumbs).to.deep.equal([ + ...defaultUrls, + { href: VERIFICATION_PROFILE_URL, label: 'Verify your enrollment' }, + ]); + wrapper.unmount(); + }); });