box-ui-elements 23.4.0-beta.30 → 23.4.0-beta.32

package/src/elements/content-sidebar/__tests__/SidebarNav.test.js

@@ -1,22 +1,11 @@
 import * as React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { mount } from 'enzyme';
-import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
 import { usePromptFocus } from '@box/box-ai-content-answers';
-import AdditionalTabPlaceholder from '../additional-tabs/AdditionalTabPlaceholder';
-import AdditionalTabs from '../additional-tabs';
-import AdditionalTabsLoading from '../additional-tabs/AdditionalTabsLoading';
+
 import FeatureProvider from '../../common/feature-checking/FeatureProvider';
-import DocGenIcon from '../../../icon/fill/DocGenIcon';
-import IconChatRound from '../../../icons/general/IconChatRound';
-import IconDocInfo from '../../../icons/general/IconDocInfo';
-import IconMagicWand from '../../../icons/general/IconMagicWand';
-import IconMetadataThick from '../../../icons/general/IconMetadataThick';
 import SidebarNav from '../SidebarNav';
-import SidebarNavButton from '../SidebarNavButton';
-import SidebarNavSignButton from '../SidebarNavSignButton';
-import { render, screen } from '../../../test-utils/testing-library';
+
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 
 jest.mock('@box/box-ai-content-answers');
 
@@ -24,88 +13,52 @@ describe('elements/content-sidebar/SidebarNav', () => {
     const focusBoxAISidebarPromptMock = jest.fn();
 
     beforeEach(() => {
+        jest.clearAllMocks();
         usePromptFocus.mockReturnValue({
             focusPrompt: focusBoxAISidebarPromptMock,
         });
     });
 
-    const getWrapper = (props = {}, active = '', features = {}) =>
-        mount(
-            <MemoryRouter initialEntries={[`/${active}`]}>
+    const renderSidebarNav = ({ path = '/', props = {}, features = {} } = {}) => {
+        return render(
+            <MemoryRouter initialEntries={[path]}>
                 <FeatureProvider features={features}>
                     <SidebarNav {...props} />
                 </FeatureProvider>
             </MemoryRouter>,
-        )
-            .find('SidebarNav')
-            .at(1);
-
-    const getSidebarNav = ({ path = '/', props, features }) => (
-        <MemoryRouter initialEntries={[path]}>
-            <FeatureProvider features={features}>
-                <SidebarNav {...props} />
-            </FeatureProvider>
-        </MemoryRouter>
-    );
-
-    test('should render skills tab', () => {
-        const props = {
-            hasSkills: true,
+        );
+    };
+
+    describe('individual tab rendering', () => {
+        const TABS_CONFIG = {
+            skills: { testId: 'sidebarskills', propName: 'hasSkills' },
+            details: { testId: 'sidebardetails', propName: 'hasDetails' },
+            activity: { testId: 'sidebaractivity', propName: 'hasActivity' },
+            metadata: { testId: 'sidebarmetadata', propName: 'hasMetadata' },
+            boxai: { testId: 'sidebarboxai', propName: 'hasBoxAI' },
+            docgen: { testId: 'sidebardocgen', propName: 'hasDocGen' },
         };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(0);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(1);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(0);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(0);
-    });
 
-    test('should render details tab', () => {
-        const props = {
-            hasDetails: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(0);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(0);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(0);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(1);
-        expect(wrapper.find(IconChatRound)).toHaveLength(0);
-    });
+        const tabNames = Object.keys(TABS_CONFIG);
 
-    test('should render activity tab', () => {
-        const props = {
-            hasActivity: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(0);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(0);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(0);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(1);
-    });
+        test.each(tabNames)('should render %s tab', tabName => {
+            const { testId, propName } = TABS_CONFIG[tabName];
 
-    test('should render metadata tab', () => {
-        const props = {
-            hasMetadata: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(0);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(0);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(1);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(0);
-    });
+            renderSidebarNav({
+                props: {
+                    [propName]: true,
+                },
+            });
 
-    test('should render box ai tab', () => {
-        const props = {
-            hasBoxAI: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(1);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(0);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(0);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(0);
+            expect(screen.getByTestId(testId)).toBeInTheDocument();
+
+            tabNames
+                .filter(name => name !== tabName)
+                .forEach(otherTabName => {
+                    const otherTab = TABS_CONFIG[otherTabName];
+                    expect(screen.queryByTestId(otherTab.testId)).not.toBeInTheDocument();
+                });
+        });
     });
 
     describe('should render box ai tab with correct disabled state and tooltip', () => {
@@ -116,16 +69,16 @@ describe('elements/content-sidebar/SidebarNav', () => {
         `(
             'given feature boxai.sidebar.showOnlyNavButton = true and boxai.sidebar.disabledTooltip = $disabledTooltip, should render box ai tab with disabled state and tooltip = $expectedTooltip',
             async ({ disabledTooltip, expectedTooltip }) => {
-                render(
-                    getSidebarNav({
-                        features: { boxai: { sidebar: { disabledTooltip, showOnlyNavButton: true } } },
-                        props: { hasBoxAI: true },
-                    }),
-                );
+                const user = userEvent();
+
+                renderSidebarNav({
+                    features: { boxai: { sidebar: { disabledTooltip, showOnlyNavButton: true } } },
+                    props: { hasBoxAI: true },
+                });
 
                 const button = screen.getByTestId('sidebarboxai');
 
-                await userEvent.hover(button);
+                await user.hover(button);
 
                 expect(button).toHaveAttribute('aria-disabled', 'true');
                 expect(screen.getByText(expectedTooltip)).toBeInTheDocument();
@@ -133,16 +86,16 @@ describe('elements/content-sidebar/SidebarNav', () => {
         );
 
         test('given feature boxai.sidebar.showOnlyNavButton = false, should render box ai tab with default tooltip', async () => {
-            render(
-                getSidebarNav({
-                    features: { boxai: { sidebar: { showOnlyNavButton: false } } },
-                    props: { hasBoxAI: true },
-                }),
-            );
+            const user = userEvent();
+
+            renderSidebarNav({
+                features: { boxai: { sidebar: { showOnlyNavButton: false } } },
+                props: { hasBoxAI: true },
+            });
 
             const button = screen.getByTestId('sidebarboxai');
 
-            await userEvent.hover(button);
+            await user.hover(button);
 
             expect(button).not.toHaveAttribute('aria-disabled');
             expect(screen.getByText('Box AI')).toBeInTheDocument();
@@ -150,22 +103,22 @@ describe('elements/content-sidebar/SidebarNav', () => {
     });
 
     test('should call focusBoxAISidebarPrompt when clicked on Box AI Tab', async () => {
-        render(
-            getSidebarNav({
-                features: {
-                    boxai: {
-                        sidebar: {
-                            showOnlyNavButton: false,
-                        },
+        const user = userEvent();
+
+        renderSidebarNav({
+            features: {
+                boxai: {
+                    sidebar: {
+                        showOnlyNavButton: false,
                     },
                 },
-                props: { hasBoxAI: true },
-            }),
-        );
+            },
+            props: { hasBoxAI: true },
+        });
 
         const button = screen.getByTestId('sidebarboxai');
 
-        await userEvent.click(button);
+        await user.click(button);
 
         expect(usePromptFocus).toHaveBeenCalledTimes(1);
         expect(usePromptFocus).toHaveBeenCalledWith('.be.bcs');
@@ -175,53 +128,52 @@ describe('elements/content-sidebar/SidebarNav', () => {
     });
 
     test('should have multiple tabs', () => {
-        const props = {
-            hasActivity: true,
-            hasBoxAI: true,
-            hasMetadata: true,
-            hasSkills: true,
-        };
-        const wrapper = getWrapper(props, 'activity');
-        expect(wrapper.find(IconMagicWand)).toHaveLength(1);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(1);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(1);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(1);
-        expect(wrapper.find(SidebarNavButton)).toHaveLength(4);
+        renderSidebarNav({
+            path: '/activity',
+            props: {
+                hasActivity: true,
+                hasBoxAI: true,
+                hasMetadata: true,
+                hasSkills: true,
+            },
+        });
+
+        expect(screen.getByTestId('sidebaractivity')).toBeInTheDocument();
+        expect(screen.getByTestId('sidebarboxai')).toBeInTheDocument();
+        expect(screen.getByTestId('sidebarmetadata')).toBeInTheDocument();
+        expect(screen.getByTestId('sidebarskills')).toBeInTheDocument();
+
+        expect(screen.queryByTestId('sidebardetails')).not.toBeInTheDocument();
+
+        const navButtons = screen.getAllByRole('tab');
+        expect(navButtons).toHaveLength(4);
     });
 
     test('should render the additional tabs loading state', () => {
-        const props = {
-            additionalTabs: [],
-            hasAdditionalTabs: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(AdditionalTabs)).toHaveLength(1);
-        expect(wrapper.find(AdditionalTabsLoading)).toHaveLength(1);
-        expect(wrapper.find(AdditionalTabPlaceholder)).toHaveLength(5);
+        renderSidebarNav({
+            props: {
+                additionalTabs: [],
+                hasAdditionalTabs: true,
+            },
+        });
+
+        expect(screen.getByTestId('additional-tabs-overflow')).toBeInTheDocument();
+
+        const placeholders = screen.getAllByTestId('additionaltabplaceholder');
+        expect(placeholders).toHaveLength(5);
     });
 
     test('should render the Box Sign entry point if its feature is enabled', () => {
-        const props = {
-            signSidebarProps: {
-                enabled: true,
-                onClick: () => {},
+        renderSidebarNav({
+            props: {
+                signSidebarProps: {
+                    enabled: true,
+                    onClick: () => {},
+                },
             },
-        };
-        const wrapper = getWrapper(props);
+        });
 
-        expect(wrapper.exists(SidebarNavSignButton)).toBe(true);
-    });
-    test('should render docgen tab', () => {
-        const props = {
-            hasDocGen: true,
-        };
-        const wrapper = getWrapper(props);
-        expect(wrapper.find(IconMagicWand)).toHaveLength(0);
-        expect(wrapper.find(IconMetadataThick)).toHaveLength(0);
-        expect(wrapper.find(IconDocInfo)).toHaveLength(0);
-        expect(wrapper.find(IconChatRound)).toHaveLength(0);
-        expect(wrapper.find(BoxAiLogo)).toHaveLength(0);
-        expect(wrapper.find(DocGenIcon)).toHaveLength(1);
+        const boxSignSection = screen.getByRole('button', { name: /sign/i });
+        expect(boxSignSection).toBeInTheDocument();
     });
 });

package/src/elements/content-sidebar/__tests__/SidebarNavTablist.test.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createMemoryHistory } from 'history';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 import SidebarNavTablist from '../SidebarNavTablist';
 import {
     SIDEBAR_VIEW_SKILLS,
@@ -9,59 +10,205 @@ import {
     KEYS,
 } from '../../../constants';
 
-jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    withRouter: Component => Component,
-}));
+const MockTabComponent = React.forwardRef(
+    (
+        {
+            sidebarView,
+            elementId,
+            internalSidebarNavigation,
+            internalSidebarNavigationHandler,
+            isOpen,
+            onNavigate,
+            routerDisabled,
+            ...otherProps
+        },
+        ref,
+    ) => (
+        <button ref={ref} data-testid={`tab-${sidebarView}`} {...otherProps}>
+            {sidebarView}
+        </button>
+    ),
+);
 
 describe('elements/content-sidebar/SidebarNavTablist', () => {
-    test('should correctly render children', () => {
-        const MockChildren = () => <div />;
+    const viewList = [SIDEBAR_VIEW_ACTIVITY, SIDEBAR_VIEW_DETAILS, SIDEBAR_VIEW_SKILLS, SIDEBAR_VIEW_METADATA];
+    let testHistory;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
 
-        const wrapper = shallow(
-            <SidebarNavTablist>
-                <MockChildren />
-            </SidebarNavTablist>,
+    const renderSidebarNavTablist = ({
+        path = '/',
+        props = {},
+        children = [<MockTabComponent key="test" sidebarView="test" />],
+    } = {}) => {
+        let historyRef;
+
+        const HistoryCapture = () => {
+            const history = useHistory();
+            historyRef = history;
+            return null;
+        };
+
+        const result = render(
+            <MemoryRouter initialEntries={[path]}>
+                <HistoryCapture />
+                <SidebarNavTablist {...props}>{children}</SidebarNavTablist>
+            </MemoryRouter>,
         );
 
-        expect(wrapper.type()).toEqual('div');
-        expect(wrapper.hasClass('bcs-SidebarNav-main')).toBe(true);
-        expect(wrapper.exists(MockChildren)).toBe(true);
-    });
+        testHistory = historyRef;
+        return result;
+    };
 
-    describe('handleKeyDown', () => {
-        const viewList = [SIDEBAR_VIEW_ACTIVITY, SIDEBAR_VIEW_DETAILS, SIDEBAR_VIEW_SKILLS, SIDEBAR_VIEW_METADATA];
+    test('should correctly render children', () => {
+        renderSidebarNavTablist({
+            props: { routerDisabled: false },
+            children: [<MockTabComponent key="test" sidebarView="test" />],
+        });
 
+        expect(screen.getByRole('tablist')).toBeInTheDocument();
+        expect(screen.getByTestId('tab-test')).toBeInTheDocument();
+    });
+
+    describe('handleKeyDown with router', () => {
         test.each`
-            key                | route
-            ${KEYS.arrowUp}    | ${SIDEBAR_VIEW_ACTIVITY}
-            ${KEYS.arrowDown}  | ${SIDEBAR_VIEW_SKILLS}
-            ${KEYS.arrowRight} | ${SIDEBAR_VIEW_DETAILS}
-        `('should navigate to right sidebar panels when a user presses different arrow keys', ({ key, route }) => {
-            const history = createMemoryHistory({
-                initialEntries: [`/${SIDEBAR_VIEW_DETAILS}`],
+            key               | expectedPath
+            ${KEYS.arrowUp}   | ${`/${SIDEBAR_VIEW_ACTIVITY}`}
+            ${KEYS.arrowDown} | ${`/${SIDEBAR_VIEW_SKILLS}`}
+        `('should navigate to $expectedPath when user presses $key', async ({ key, expectedPath }) => {
+            const user = userEvent();
+            const children = viewList.map(view => <MockTabComponent sidebarView={view} key={view} />);
+
+            renderSidebarNavTablist({
+                path: `/${SIDEBAR_VIEW_DETAILS}`,
+                props: { routerDisabled: false },
+                children,
             });
 
-            const wrapper = shallow(
-                <SidebarNavTablist history={history}>
-                    {viewList.map(view => {
-                        return <div sidebarView={view} key={view} />;
-                    })}
-                </SidebarNavTablist>,
-            );
-
-            const event = {
-                key,
-                preventDefault: jest.fn(),
-                stopPropagation: jest.fn(),
+            const tablist = screen.getByRole('tablist');
+
+            await user.click(tablist);
+            await user.keyboard(`{${key}}`);
+
+            expect(testHistory.location.pathname).toBe(expectedPath);
+        });
+
+        test('should not navigate when user presses arrow right', async () => {
+            const user = userEvent();
+            const children = viewList.map(view => <MockTabComponent sidebarView={view} key={view} />);
+
+            renderSidebarNavTablist({
+                path: `/${SIDEBAR_VIEW_DETAILS}`,
+                props: { routerDisabled: false },
+                children,
+            });
+
+            const tablist = screen.getByRole('tablist');
+
+            await user.click(tablist);
+            await user.keyboard(`{${KEYS.arrowRight}}`);
+
+            expect(testHistory.location.pathname).toBe(`/${SIDEBAR_VIEW_DETAILS}`);
+        });
+    });
+
+    describe('handleKeyDown with routerDisabled', () => {
+        test.each`
+            key               | expectedView
+            ${KEYS.arrowUp}   | ${SIDEBAR_VIEW_ACTIVITY}
+            ${KEYS.arrowDown} | ${SIDEBAR_VIEW_SKILLS}
+        `(
+            'should use internal navigation when routerDisabled=true and user presses $key',
+            async ({ key, expectedView }) => {
+                const user = userEvent();
+                const mockInternalSidebarNavigationHandler = jest.fn();
+                const internalSidebarNavigation = {
+                    sidebar: SIDEBAR_VIEW_DETAILS,
+                };
+
+                const children = viewList.map(view => <MockTabComponent sidebarView={view} key={view} />);
+
+                renderSidebarNavTablist({
+                    props: {
+                        routerDisabled: true,
+                        internalSidebarNavigation,
+                        internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+                    },
+                    children,
+                });
+
+                const tablist = screen.getByRole('tablist');
+
+                await user.click(tablist);
+                await user.keyboard(`{${key}}`);
+
+                expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+                    sidebar: expectedView,
+                });
+            },
+        );
+
+        test.each`
+            currentView              | key               | expectedView
+            ${SIDEBAR_VIEW_ACTIVITY} | ${KEYS.arrowUp}   | ${SIDEBAR_VIEW_METADATA}
+            ${SIDEBAR_VIEW_METADATA} | ${KEYS.arrowDown} | ${SIDEBAR_VIEW_ACTIVITY}
+        `(
+            'should wrap around when navigating beyond tabs range: from $currentView with $key goes to $expectedView',
+            async ({ currentView, key, expectedView }) => {
+                const user = userEvent();
+                const mockInternalSidebarNavigationHandler = jest.fn();
+                const internalSidebarNavigation = {
+                    sidebar: currentView,
+                };
+
+                const children = viewList.map(view => <MockTabComponent sidebarView={view} key={view} />);
+
+                renderSidebarNavTablist({
+                    props: {
+                        routerDisabled: true,
+                        internalSidebarNavigation,
+                        internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+                    },
+                    children,
+                });
+
+                const tablist = screen.getByRole('tablist');
+
+                await user.click(tablist);
+                await user.keyboard(`{${key}}`);
+
+                expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+                    sidebar: expectedView,
+                });
+            },
+        );
+
+        test('should not call internal navigation handler when user presses arrow right', async () => {
+            const user = userEvent();
+            const mockInternalSidebarNavigationHandler = jest.fn();
+            const internalSidebarNavigation = {
+                sidebar: SIDEBAR_VIEW_DETAILS,
             };
-            wrapper.props().onKeyDown(event);
 
-            if (key === KEYS.arrowUp || key === KEYS.arrowDown) {
-                expect(event.preventDefault).toBeCalled();
-                expect(event.stopPropagation).toBeCalled();
-            }
-            expect(history.location.pathname).toBe(`/${route}`);
+            const children = viewList.map(view => <MockTabComponent sidebarView={view} key={view} />);
+
+            renderSidebarNavTablist({
+                props: {
+                    routerDisabled: true,
+                    internalSidebarNavigation,
+                    internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+                },
+                children,
+            });
+
+            const tablist = screen.getByRole('tablist');
+
+            await user.click(tablist);
+            await user.keyboard(`{${KEYS.arrowRight}}`);
+
+            expect(mockInternalSidebarNavigationHandler).not.toHaveBeenCalled();
         });
     });
 });