feat(router): optional router in SIdebarToggle

Author: rafalmaksymiuk

src/elements/content-sidebar/SidebarToggle.js

@@ -8,23 +8,46 @@ import * as React from 'react';
 import { withRouter, type RouterHistory } from 'react-router-dom';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {
-    history: RouterHistory,
+    history?: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen?: boolean,
+    routerDisabled?: boolean,
 };
 
-const SidebarToggle = ({ history, isOpen }: Props) => {
+const SidebarToggle = ({ 
+    history, 
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
+    isOpen,
+    routerDisabled = false,
+}: Props) => {
+    const handleToggleClick = event => {
+        event.preventDefault();
+        
+        if (routerDisabled) {
+            // Use internal navigation handler when router is disabled
+            if (internalSidebarNavigationHandler && internalSidebarNavigation) {
+                internalSidebarNavigationHandler({
+                    ...internalSidebarNavigation,
+                    open: !isOpen,
+                }, true); // Always use replace for toggle
+            }
+        } else if (history) {
+            history.replace({ state: { open: !isOpen } });
+        }
+    };
+
     return (
         <SidebarToggleButton
             data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
             data-testid="sidebartoggle"
             // $FlowFixMe
             isOpen={isOpen}
-            onClick={event => {
-                event.preventDefault();
-                history.replace({ state: { open: !isOpen } });
-            }}
+            onClick={handleToggleClick}
         />
     );
 };

src/elements/content-sidebar/__tests__/SidebarToggle.test.js

@@ -1,23 +1,87 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 import { SidebarToggleComponent as SidebarToggle } from '../SidebarToggle';
 
 describe('elements/content-sidebar/SidebarToggle', () => {
     const historyMock = { replace: jest.fn() };
-    const getWrapper = (props = {}) => shallow(<SidebarToggle history={historyMock} {...props} />);
+    
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle history={historyMock} {...props} />);
+    };
 
     test.each`
-        isOpen   | location
+        isOpen   | expectedState
         ${true}  | ${{ state: { open: false } }}
         ${false} | ${{ state: { open: true } }}
-    `('should render and handle clicks correctly when isOpen is $isOpen', ({ isOpen, location }) => {
-        const event = { preventDefault: jest.fn() };
-        const wrapper = getWrapper({ isOpen });
+    `('should render and handle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedState }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+        
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        
+        await user.click(toggleButton);
+        
+        expect(historyMock.replace).toHaveBeenCalledWith(expectedState);
+    });
+});
 
-        wrapper.simulate('click', event);
+describe('elements/content-sidebar/SidebarToggle - Router Disabled', () => {
+    const mockInternalSidebarNavigationHandler = jest.fn();
+    const defaultProps = {
+        routerDisabled: true,
+        internalSidebarNavigation: { sidebar: 'activity' },
+        internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+    };
 
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(historyMock.replace).toHaveBeenCalledWith(location);
-        expect(wrapper).toMatchSnapshot();
+    beforeEach(() => {
+        jest.clearAllMocks();
     });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle {...defaultProps} {...props} />);
+    };
+
+    test.each`
+        isOpen   | expectedNavigation
+        ${true}  | ${{ sidebar: 'activity', open: false }}
+        ${false} | ${{ sidebar: 'activity', open: true }}
+    `('should handle toggle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedNavigation }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith(expectedNavigation, true);
+    });
+
+    test('should handle complex navigation state correctly', async () => {
+        const user = userEvent();
+        const complexNavigation = {
+            sidebar: 'activity',
+            versionId: '123',
+            activeFeedEntryType: 'comments',
+            activeFeedEntryId: '456',
+        };
+        
+        renderSidebarToggle({
+            isOpen: true,
+            internalSidebarNavigation: complexNavigation,
+        });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+            ...complexNavigation,
+            open: false,
+        }, true);
+    });
+
 });