box-ui-elements 23.4.0-beta.16 → 23.4.0-beta.18

package/src/elements/content-sidebar/versions/VersionsSidebar.js

@@ -6,6 +6,7 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Route } from 'react-router-dom';
 import type { MessageDescriptor } from 'react-intl';
 import InlineError from '../../../components/inline-error';
 import messages from './messages';
@@ -36,47 +37,55 @@ const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Pr
     const showError = !!error;
 
     return (
-        <SidebarContent
-            className="bcs-Versions"
-            data-resin-component="preview"
-            data-resin-feature="versions"
-            title={
-                <>
-                    <BackButton data-resin-target="back" to={`/${parentName}`} />
-                    <FormattedMessage {...messages.versionsTitle} />
-                </>
-            }
-        >
-            <LoadingIndicatorWrapper className="bcs-Versions-content" crawlerPosition="top" isLoading={isLoading}>
-                {showError && (
-                    <InlineError title={<FormattedMessage {...messages.versionServerError} />}>
-                        <FormattedMessage {...error} />
-                    </InlineError>
-                )}
+        <Route>
+            {({ history }) => (
+                <SidebarContent
+                    className="bcs-Versions"
+                    data-resin-component="preview"
+                    data-resin-feature="versions"
+                    title={
+                        <>
+                            <BackButton data-resin-target="back" onClick={() => history.push(`/${parentName}`)} />
+                            <FormattedMessage {...messages.versionsTitle} />
+                        </>
+                    }
+                >
+                    <LoadingIndicatorWrapper
+                        className="bcs-Versions-content"
+                        crawlerPosition="top"
+                        isLoading={isLoading}
+                    >
+                        {showError && (
+                            <InlineError title={<FormattedMessage {...messages.versionServerError} />}>
+                                <FormattedMessage {...error} />
+                            </InlineError>
+                        )}
 
-                {showEmpty && (
-                    <div className="bcs-Versions-empty">
-                        <FormattedMessage {...messages.versionsEmpty} />
-                    </div>
-                )}
+                        {showEmpty && (
+                            <div className="bcs-Versions-empty">
+                                <FormattedMessage {...messages.versionsEmpty} />
+                            </div>
+                        )}
 
-                {showVersions && (
-                    <div className="bcs-Versions-menu" data-testid="bcs-Versions-menu">
-                        <VersionsMenu versions={versions} {...rest} />
-                    </div>
-                )}
-                {showLimit && (
-                    <div className="bcs-Versions-maxEntries" data-testid="max-versions">
-                        <FormattedMessage
-                            {...messages.versionMaxEntries}
-                            values={{
-                                maxVersions: MAX_VERSIONS,
-                            }}
-                        />
-                    </div>
-                )}
-            </LoadingIndicatorWrapper>
-        </SidebarContent>
+                        {showVersions && (
+                            <div className="bcs-Versions-menu" data-testid="bcs-Versions-menu">
+                                <VersionsMenu versions={versions} {...rest} />
+                            </div>
+                        )}
+                        {showLimit && (
+                            <div className="bcs-Versions-maxEntries" data-testid="max-versions">
+                                <FormattedMessage
+                                    {...messages.versionMaxEntries}
+                                    values={{
+                                        maxVersions: MAX_VERSIONS,
+                                    }}
+                                />
+                            </div>
+                        )}
+                    </LoadingIndicatorWrapper>
+                </SidebarContent>
+            )}
+        </Route>
     );
 };
 

package/src/elements/content-sidebar/versions/__tests__/StaticVersionSidebar.test.js

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render, screen, userEvent } from '../../../../test-utils/testing-library';
+import StaticVersionSidebar from '../StaticVersionSidebar';
+
+jest.mock('../../../common/nav-button', () => ({
+    BackButton: ({ onClick, 'data-resin-target': dataResinTarget }) => (
+        <button type="button" onClick={onClick} data-resin-target={dataResinTarget} data-testid="back-button">
+            Back
+        </button>
+    ),
+}));
+
+jest.mock('../VersionsMenu', () => ({ versions, fileId, versionCount, versionLimit }) => (
+    <div data-testid="versions-menu">
+        Versions: {versions.length}, FileId: {fileId}, Count: {versionCount}, Limit: {versionLimit}
+    </div>
+));
+
+jest.mock('../../../../components/loading-indicator', () => ({
+    LoadingIndicatorWrapper: ({ children, isLoading, className, crawlerPosition }) => (
+        <div
+            className={className}
+            data-testid="loading-wrapper"
+            data-loading={isLoading}
+            data-crawler-position={crawlerPosition}
+        >
+            {children}
+        </div>
+    ),
+}));
+
+jest.mock(
+    '../../../../components/primary-button',
+    () =>
+        ({ children, onClick, className, 'data-resin-target': dataResinTarget, type }) => (
+            <button
+                className={className}
+                onClick={onClick}
+                data-resin-target={dataResinTarget}
+                type={type}
+                data-testid="upgrade-button"
+            >
+                {children}
+            </button>
+        ),
+);
+
+jest.mock('../../../../illustration/BoxDrive140', () => ({ className }) => (
+    <div className={className} data-testid="box-drive-icon" />
+));
+
+describe('elements/content-sidebar/versions/StaticVersionSidebar', () => {
+    const defaultProps = {
+        isLoading: false,
+        onUpgradeClick: jest.fn(),
+        parentName: 'activity',
+    };
+    const renderComponent = (props = {}) => {
+        return render(
+            <MemoryRouter initialEntries={['/versions']}>
+                <StaticVersionSidebar {...defaultProps} {...props} />
+            </MemoryRouter>,
+        );
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('should render with all main sections', () => {
+        renderComponent();
+
+        expect(screen.getByRole('tabpanel')).toBeInTheDocument();
+        expect(screen.getByRole('tabpanel')).toHaveClass('bcs-StaticVersionSidebar');
+        expect(screen.getByRole('tabpanel')).toHaveAttribute('data-resin-component', 'preview');
+        expect(screen.getByRole('tabpanel')).toHaveAttribute('data-resin-feature', 'versions');
+
+        expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+
+        expect(screen.getByTestId('loading-wrapper')).toBeInTheDocument();
+        expect(screen.getByTestId('versions-menu')).toBeInTheDocument();
+
+        const boxDriveIcon = screen.getByTestId('box-drive-icon');
+        expect(boxDriveIcon).toBeInTheDocument();
+        expect(boxDriveIcon).toHaveClass('bcs-StaticVersionSidebar-upsell-icon');
+        expect(screen.getByTestId('upgrade-button')).toBeInTheDocument();
+        expect(screen.getByText('Upgrade Now')).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Sorry, version history is not available with your current account plan. To access versioning, select from one of our paid plans.',
+            ),
+        ).toBeInTheDocument();
+    });
+
+    test('should pass correct props to BackButton', () => {
+        renderComponent({ parentName: 'details' });
+
+        const backButton = screen.getByTestId('back-button');
+        expect(backButton).toHaveAttribute('data-resin-target', 'back');
+    });
+
+    test('should navigate when BackButton is clicked', async () => {
+        let currentLocation;
+
+        const TestWrapper = ({ children }) => (
+            <MemoryRouter initialEntries={['/versions']}>
+                <Route
+                    path="*"
+                    render={({ location }) => {
+                        currentLocation = location;
+                        return children;
+                    }}
+                />
+            </MemoryRouter>
+        );
+
+        render(
+            <TestWrapper>
+                <StaticVersionSidebar {...defaultProps} parentName="details" />
+            </TestWrapper>,
+        );
+
+        expect(currentLocation.pathname).toBe('/versions');
+
+        const backButton = screen.getByTestId('back-button');
+        const user = userEvent();
+        await user.click(backButton);
+
+        expect(currentLocation.pathname).toBe('/details');
+    });
+
+    test('should pass loading state to LoadingIndicatorWrapper', () => {
+        renderComponent({ isLoading: true });
+
+        const loadingWrapper = screen.getByTestId('loading-wrapper');
+        expect(loadingWrapper).toHaveAttribute('data-loading', 'true');
+        expect(loadingWrapper).toHaveAttribute('data-crawler-position', 'top');
+        expect(loadingWrapper).toHaveClass('bcs-StaticVersionSidebar-content');
+    });
+
+    test('should render VersionsMenu with correct props', () => {
+        renderComponent();
+
+        const versionsMenu = screen.getByTestId('versions-menu');
+        expect(versionsMenu).toHaveTextContent('Versions: 3, FileId: 1, Count: 3, Limit: 3');
+    });
+
+    test('should call onUpgradeClick when upgrade button is clicked', async () => {
+        const mockOnUpgradeClick = jest.fn();
+        const user = userEvent();
+        renderComponent({ onUpgradeClick: mockOnUpgradeClick });
+
+        const upgradeButton = screen.getByTestId('upgrade-button');
+        await user.click(upgradeButton);
+
+        expect(mockOnUpgradeClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('should render upgrade button with correct attributes', () => {
+        renderComponent();
+
+        const upgradeButton = screen.getByTestId('upgrade-button');
+        expect(upgradeButton).toHaveClass('bcs-StaticVersionSidebar-upsell-button');
+        expect(upgradeButton).toHaveAttribute('data-resin-target', 'versioning_error_upgrade_cta');
+        expect(upgradeButton).toHaveAttribute('type', 'button');
+        expect(upgradeButton).toHaveTextContent('Upgrade');
+    });
+});

package/src/elements/content-sidebar/versions/__tests__/VersionsList.test.js

@@ -1,23 +1,148 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render, screen } from '../../../../test-utils/testing-library';
 import VersionsList from '../VersionsList';
 
+jest.mock('../VersionsItem', () => {
+    const MockVersionsItem = jest.fn(({ isCurrent, isSelected, version, fileId, versionCount, versionLimit }) => (
+        <div data-testid={`versions-item-${version.id}`}>
+            <span>Version {version.id}</span>
+            {isCurrent && <span>Current</span>}
+            {isSelected && <span>Selected</span>}
+            {fileId && <span>FileID: {fileId}</span>}
+            {versionCount && <span>VersionCount: {versionCount}</span>}
+            {versionLimit && <span>VersionLimit: {versionLimit}</span>}
+        </div>
+    ));
+    return MockVersionsItem;
+});
+
 describe('elements/content-sidebar/versions/VersionsList', () => {
-    const getWrapper = (props = {}) => shallow(<VersionsList {...props} />);
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderComponent = (props = {}, routePath = '/activity/versions/12345') => {
+        if (props.routerDisabled) {
+            return render(<VersionsList {...props} />);
+        }
+
+        return render(
+            <MemoryRouter initialEntries={[routePath]}>
+                <Route path="/:sidebar(activity|details)/versions/:versionId?">
+                    <VersionsList {...props} />
+                </Route>
+            </MemoryRouter>,
+        );
+    };
 
     describe('render', () => {
-        test.each`
-            versions
-            ${[]}
-            ${[{ id: '12345' }]}
-            ${[{ id: '12345' }, { id: '45678' }]}
-        `('should match its snapshot', ({ versions }) => {
-            const match = {
-                params: { versionId: '12345' },
-                path: '/versions/:versionId',
+        test('should render empty list when no versions provided', () => {
+            renderComponent({ versions: [] });
+            const list = screen.getByRole('list');
+            const listItems = screen.queryAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(0);
+        });
+
+        test('should render single version item', () => {
+            const versions = [{ id: '12345' }];
+            renderComponent({ versions });
+            const list = screen.getByRole('list');
+            const listItems = screen.getAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(1);
+            expect(screen.getByText('Version 12345')).toBeInTheDocument();
+        });
+
+        test('should render multiple version items', () => {
+            const versions = [{ id: '12345' }, { id: '45678' }];
+            renderComponent({ versions });
+            const list = screen.getByRole('list');
+            const listItems = screen.getAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(2);
+            expect(screen.getByText('Version 12345')).toBeInTheDocument();
+            expect(screen.getByText('Version 45678')).toBeInTheDocument();
+        });
+
+        test('should pass correct isCurrent prop based on currentId', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            const currentId = '12345';
+            renderComponent({ versions, currentId, routerDisabled: true });
+
+            // Version 12345 should be marked as current
+            const version12345Container = screen.getByTestId('versions-item-12345');
+            expect(version12345Container).toBeInTheDocument();
+            expect(screen.getByText('Current')).toBeInTheDocument();
+
+            // Only one "Current" text should exist
+            expect(screen.getAllByText('Current')).toHaveLength(1);
+        });
+
+        test('should use router selection when routerDisabled is false', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            renderComponent({ versions, routerDisabled: false }, '/activity/versions/12345');
+
+            // Version 12345 should be marked as selected based on route
+            const version12345Container = screen.getByTestId('versions-item-12345');
+            expect(version12345Container).toBeInTheDocument();
+            expect(version12345Container).toHaveTextContent('Selected');
+            expect(screen.getAllByText('Selected')).toHaveLength(1);
+        });
+
+        test('should use internalSidebarNavigation selection when routerDisabled is true', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            const internalSidebarNavigation = { versionId: '67890', open: true };
+
+            renderComponent({
+                versions,
+                routerDisabled: true,
+                internalSidebarNavigation,
+            });
+
+            // Version 67890 should be marked as selected based on internal navigation
+            const version67890Container = screen.getByTestId('versions-item-67890');
+            expect(version67890Container).toBeInTheDocument();
+            expect(version67890Container).toHaveTextContent('Selected');
+            expect(screen.getAllByText('Selected')).toHaveLength(1);
+        });
+
+        test('should handle no selection when internalSidebarNavigation is not provided', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+
+            renderComponent({ versions, routerDisabled: true });
+
+            // No version should be selected
+            expect(screen.queryByText('Selected')).not.toBeInTheDocument();
+        });
+
+        test('should render items with correct version IDs', () => {
+            const versions = [{ id: 'version-abc' }, { id: 'version-xyz' }];
+
+            renderComponent({ versions, routerDisabled: true });
+
+            expect(screen.getByText('Version version-abc')).toBeInTheDocument();
+            expect(screen.getByText('Version version-xyz')).toBeInTheDocument();
+        });
+
+        test('should pass down other props to VersionsItem', () => {
+            const versions = [{ id: '12345' }];
+            const props = {
+                versions,
+                fileId: 'f_123',
+                versionCount: 10,
+                versionLimit: 100,
+                routerDisabled: true,
             };
-            const wrapper = getWrapper({ match, versions });
-            expect(wrapper).toMatchSnapshot();
+            renderComponent(props);
+
+            expect(screen.getByText('FileID: f_123')).toBeInTheDocument();
+            expect(screen.getByText('VersionCount: 10')).toBeInTheDocument();
+            expect(screen.getByText('VersionLimit: 100')).toBeInTheDocument();
         });
     });
 });

package/src/elements/content-sidebar/versions/__tests__/VersionsMenu.test.js

@@ -1,10 +1,35 @@
 import * as React from 'react';
-import { IntlProvider } from 'react-intl';
-import messages from '../messages';
-import VersionsGroup from '../VersionsGroup';
+import { render, screen } from '../../../../test-utils/testing-library';
 import VersionsMenu from '../VersionsMenu';
 
-jest.unmock('react-intl');
+jest.mock('../VersionsGroup', () => {
+    const MockVersionsGroup = jest.fn(
+        ({
+            heading,
+            versions,
+            fileId,
+            versionCount,
+            versionLimit,
+            currentId,
+            routerDisabled,
+            internalSidebarNavigation,
+        }) => (
+            <div>
+                <h1>{heading}</h1>
+                <span>{versions.length} versions</span>
+                {fileId && <span data-testid="fileId">{fileId}</span>}
+                {versionCount !== undefined && <span data-testid="versionCount">{versionCount}</span>}
+                {versionLimit !== undefined && <span data-testid="versionLimit">{versionLimit}</span>}
+                {currentId && <span data-testid="currentId">{currentId}</span>}
+                {routerDisabled !== undefined && <span data-testid="routerDisabled">{String(routerDisabled)}</span>}
+                {internalSidebarNavigation && (
+                    <span data-testid="internalSidebarNavigation">{JSON.stringify(internalSidebarNavigation)}</span>
+                )}
+            </div>
+        ),
+    );
+    return MockVersionsGroup;
+});
 
 describe('elements/content-sidebar/versions/VersionsMenu', () => {
     const defaultDate = '2019-06-20T20:00:00.000Z';
@@ -17,15 +42,11 @@ describe('elements/content-sidebar/versions/VersionsMenu', () => {
         modified_by: { name: 'Test User', id: '098765' },
     };
     const getVersion = (overrides = {}) => ({ ...defaultVersion, ...overrides });
-    const getWrapper = (props = {}) =>
-        shallow(<VersionsMenu {...props} />, {
-            wrappingComponent: wrapperProps => <IntlProvider locale="en" messages={messages} {...wrapperProps} />,
-        })
-            .shallow() // <Memo .../>
-            .dive(); // <ul .../>
+    const renderComponent = (props = {}) => render(<VersionsMenu {...props} />);
     const GlobalDate = Date;
 
     beforeEach(() => {
+        jest.clearAllMocks();
         global.Date = jest.fn(date => new GlobalDate(date || defaultDate));
         global.Date.now = () => defaultDateMs;
     });
@@ -48,20 +69,51 @@ describe('elements/content-sidebar/versions/VersionsMenu', () => {
                 getVersion({ created_at: '2019-02-01T20:00:00.000Z', id: '2' }),
                 getVersion({ created_at: '2018-05-01T20:00:00.000Z', id: '1' }),
             ];
-            const wrapper = getWrapper({ versions });
-            const groups = wrapper.find(VersionsGroup);
+            renderComponent({ versions });
+            const headings = [
+                'Today',
+                'Yesterday',
+                'Tuesday',
+                'Monday',
+                'Last Week',
+                'This Month',
+                'May',
+                'February',
+                '2018',
+            ];
+            const versionCounts = [2, 1, 1, 1, 1, 1, 1, 1, 1];
+
+            expect(screen.getAllByRole('heading', { level: 1 })).toHaveLength(9);
+
+            headings.forEach((heading, index) => {
+                const headingElement = screen.getByText(heading);
+                const groupContainer = headingElement.parentElement;
+
+                expect(groupContainer).toHaveTextContent(`${versionCounts[index]} versions`);
+            });
+        });
+
+        test('should pass down other props to VersionsGroup', () => {
+            const versions = [getVersion({ id: '10' })];
+            const props = {
+                versions,
+                fileId: 'f_123',
+                versionCount: 10,
+                versionLimit: 100,
+                currentId: '10',
+                routerDisabled: false,
+                internalSidebarNavigation: { open: false, sidebar: 'activity' },
+            };
+            renderComponent(props);
 
-            expect(groups.length).toBe(9);
-            expect(groups.at(0).prop('versions').length).toBe(2); // Multiple versions collapse into a group
-            expect(groups.at(0).prop('heading')).toBe('Today');
-            expect(groups.at(1).prop('heading')).toBe('Yesterday');
-            expect(groups.at(2).prop('heading')).toBe('Tuesday');
-            expect(groups.at(3).prop('heading')).toBe('Monday');
-            expect(groups.at(4).prop('heading')).toBe('Last Week');
-            expect(groups.at(5).prop('heading')).toBe('This Month');
-            expect(groups.at(6).prop('heading')).toBe('May');
-            expect(groups.at(7).prop('heading')).toBe('February');
-            expect(groups.at(8).prop('heading')).toBe('2018');
+            expect(screen.getByTestId('fileId')).toHaveTextContent('f_123');
+            expect(screen.getByTestId('versionCount')).toHaveTextContent('10');
+            expect(screen.getByTestId('versionLimit')).toHaveTextContent('100');
+            expect(screen.getByTestId('currentId')).toHaveTextContent('10');
+            expect(screen.getByTestId('routerDisabled')).toHaveTextContent('false');
+            expect(screen.getByTestId('internalSidebarNavigation')).toHaveTextContent(
+                JSON.stringify(props.internalSidebarNavigation),
+            );
         });
     });
 });