From 40cf27e18fc1060cb6ce97fe6cd8a9c073a9aded Mon Sep 17 00:00:00 2001
From: Sofiya Pavlenko <sofiushko@yandex-team.ru>
Date: Thu, 7 Nov 2024 16:38:46 +0300
Subject: [PATCH] fix(Toc): correctly display content of no items.length and
 add event forward

---
 src/components/Toc/Toc.tsx                |  7 +++++--
 src/components/Toc/TocItem/TocItem.tsx    | 23 ++++++++++++++---------
 src/components/Toc/__tests__/Toc.test.tsx | 22 ++++++++++++++++------
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index a29575dbe1..30e9b65dab 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -15,10 +15,11 @@ export interface TocProps extends QAProps {
     items: TocItemType[];
     value?: string;
     onUpdate?: (value: string) => void;
+    onItemClick?: (event: React.MouseEvent) => void;
 }
 
 export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, ref) {
-    const {value: activeValue, items, className, onUpdate, qa} = props;
+    const {value: activeValue, items, className, onUpdate, onItemClick, qa} = props;
 
     return (
         <nav className={b(null, className)} ref={ref} data-qa={qa}>
@@ -31,8 +32,9 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                             href={href}
                             active={activeValue === value}
                             onClick={onUpdate}
+                            onItemClick={onItemClick}
                         />
-                        {childrenItems?.length && (
+                        {childrenItems && childrenItems.length > 0 && (
                             <ul className={b('subsections')}>
                                 {childrenItems?.map(
                                     ({
@@ -51,6 +53,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                                                 childItem={true}
                                                 active={activeValue === childrenValue}
                                                 onClick={onUpdate}
+                                                onItemClick={onItemClick}
                                             />
                                         </li>
                                     ),
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index d67c0cf3df..a330e6d388 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -14,18 +14,23 @@ export interface TocItemProps extends TocItemType {
     childItem?: boolean;
     active?: boolean;
     onClick?: (value: string) => void;
+    onItemClick?: (event: React.MouseEvent) => void;
 }
 
 export const TocItem = (props: TocItemProps) => {
-    const {active = false, childItem = false, content, href, value, onClick} = props;
-
-    const handleClick = React.useCallback(() => {
-        if (value === undefined || !onClick) {
-            return;
-        }
-
-        onClick(value);
-    }, [onClick, value]);
+    const {active = false, childItem = false, content, href, value, onClick, onItemClick} = props;
+
+    const handleClick = React.useCallback(
+        (event: React.MouseEvent) => {
+            onItemClick?.(event);
+            if (value === undefined || !onClick) {
+                return;
+            }
+
+            onClick(value);
+        },
+        [onClick, onItemClick, value],
+    );
 
     const {onKeyDown} = useActionHandlers(handleClick);
 
diff --git a/src/components/Toc/__tests__/Toc.test.tsx b/src/components/Toc/__tests__/Toc.test.tsx
index 5daa2f66a8..21dd0d8d16 100644
--- a/src/components/Toc/__tests__/Toc.test.tsx
+++ b/src/components/Toc/__tests__/Toc.test.tsx
@@ -52,13 +52,22 @@ describe('Toc', () => {
         const nextValue = defaultItems[0].value;
         const nextTitle = defaultItems[0].content;
         const onUpdateFn = jest.fn();
+        const onItemClickFn = jest.fn();
         const user = userEvent.setup();
 
-        render(<Toc value={defaultValue} items={defaultItems} onUpdate={onUpdateFn} />);
+        render(
+            <Toc
+                value={defaultValue}
+                items={defaultItems}
+                onUpdate={onUpdateFn}
+                onItemClick={onItemClickFn}
+            />,
+        );
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(nextValue);
+        expect(onItemClickFn).toHaveBeenCalledWith(expect.objectContaining({}));
     });
 
     test('calls onUpdate with correct item with link', async () => {
@@ -71,13 +80,14 @@ describe('Toc', () => {
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(nextValue);
     });
 
     test('accessible for keyboard', async () => {
         const firstTitle = defaultItems[0].content;
         const secondValue = defaultItems[1].value;
         const onUpdateFn = jest.fn();
+
         const user = userEvent.setup();
 
         render(<Toc value={defaultValue} items={defaultItems} onUpdate={onUpdateFn} />);
@@ -86,7 +96,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue);
     });
 
     test('accessible for keyboard with links', async () => {
@@ -101,7 +111,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue);
     });
 
     test('add className', () => {
@@ -148,6 +158,6 @@ describe('Toc', () => {
 
         const currentItem = screen.getByRole('listitem', {current: true});
 
-        expect(currentItem.textContent).toContain(content);
+        expect(currentItem.textContent).toBe(content);
     });
 });