From ec7ed8b93d0b6892827263d35373896a8cf291b6 Mon Sep 17 00:00:00 2001
From: Marcos Kolodny <marcoskolodny@gmail.com>
Date: Wed, 4 Sep 2024 12:15:09 +0200
Subject: [PATCH] feat(NavigationBreadcrumbs): allow executing onNavigate when
 pressing a link (#1233)

---
 src/__tests__/navigation-breadcrumbs-test.tsx | 33 +++++++++++++++++++
 src/navigation-breadcrumbs.tsx                |  4 ++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/navigation-breadcrumbs-test.tsx

diff --git a/src/__tests__/navigation-breadcrumbs-test.tsx b/src/__tests__/navigation-breadcrumbs-test.tsx
new file mode 100644
index 0000000000..19345c49a3
--- /dev/null
+++ b/src/__tests__/navigation-breadcrumbs-test.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import NavigationBreadcrumbs from '../navigation-breadcrumbs';
+import userEvent from '@testing-library/user-event';
+
+test('Breadcrumbs onNavigate is called when pressing a link', async () => {
+    const navigateSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <NavigationBreadcrumbs
+                title="Title"
+                breadcrumbs={[
+                    {title: 'breadcrumb 1', url: '#', onNavigate: () => navigateSpy('breadcrumb 1')},
+                    {title: 'breadcrumb 2', url: '#', onNavigate: () => navigateSpy('breadcrumb 2')},
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    const firstLink = await screen.findByRole('link', {name: 'breadcrumb 1'});
+    const secondLink = await screen.findByRole('link', {name: 'breadcrumb 2'});
+
+    await userEvent.click(firstLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 1');
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(secondLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 2');
+    expect(navigateSpy).toHaveBeenCalledTimes(2);
+});
diff --git a/src/navigation-breadcrumbs.tsx b/src/navigation-breadcrumbs.tsx
index c4c8587412..e22f572a3b 100644
--- a/src/navigation-breadcrumbs.tsx
+++ b/src/navigation-breadcrumbs.tsx
@@ -21,6 +21,7 @@ export type NavigationBreadcrumbsProps = {
     breadcrumbs: ReadonlyArray<{
         readonly title: string;
         readonly url: string;
+        onNavigate?: () => void;
     }>;
     children?: void;
     dataAttributes?: DataAttributes;
@@ -37,7 +38,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
     return (
         <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
             <ol className={styles.list}>
-                {breadcrumbs.map(({title, url}, index) => (
+                {breadcrumbs.map(({title, url, onNavigate}, index) => (
                     <li key={index} className={styles.listItem}>
                         <Text1 regular>
                             <TextLink
@@ -48,6 +49,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
                                         : vars.colors.textPrimary,
                                 }}
                                 className={styles.link}
+                                onNavigate={onNavigate}
                             >
                                 {title}
                             </TextLink>