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

package/src/elements/common/nav-button/__tests__/BackButton.test.js

@@ -1,43 +1,52 @@
 import * as React from 'react';
-import { MemoryRouter, Router } from 'react-router-dom';
-import { mount } from 'enzyme';
+import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import { BackButton } from '..';
 
 describe('elements/common/nav-button/BackButton', () => {
-    const getWrapper = (props = {}) =>
-        mount(
-            <MemoryRouter initialEntries={['/start', '/test']}>
-                <BackButton {...props} />
-            </MemoryRouter>,
-        );
-    const getHistory = wrapper => wrapper.find(Router).prop('history');
-
-    test('should match its snapshot', () => {
-        const wrapper = getWrapper();
-        const button = wrapper.find(BackButton).first();
-
-        expect(button).toMatchSnapshot();
+    const mockOnClick = jest.fn();
+
+    beforeEach(() => {
+        mockOnClick.mockClear();
     });
 
-    test('should call history back on click if no path is defined', () => {
-        const wrapper = getWrapper();
-        const history = getHistory(wrapper);
+    test('should render back button with navigation icon and accessible text', () => {
+        render(<BackButton onClick={mockOnClick} />);
 
-        history.goBack = jest.fn();
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('bdl-BackButton');
 
-        wrapper.simulate('click');
+        expect(screen.getByText('Back')).toBeInTheDocument();
 
-        expect(history.goBack).toHaveBeenCalled();
+        const icon = button.querySelector('svg');
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveClass('icon-navigate-left');
     });
 
-    test('should call history.push on click if a path is defined', () => {
-        const wrapper = getWrapper({ to: '/new' });
-        const history = getHistory(wrapper);
+    test('should call onClick handler when clicked', async () => {
+        const user = userEvent();
+
+        render(<BackButton onClick={mockOnClick} />);
 
-        history.push = jest.fn();
+        const button = screen.getByRole('button');
+        await user.click(button);
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('should pass through additional props', () => {
+        render(<BackButton onClick={mockOnClick} data-testid="test-back-button" data-resin-target="back" />);
+
+        const button = screen.getByTestId('test-back-button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('data-resin-target', 'back');
+    });
 
-        wrapper.simulate('click');
+    test('should apply custom className alongside default class', () => {
+        render(<BackButton onClick={mockOnClick} className="custom-class" />);
 
-        expect(history.push).toHaveBeenCalledWith('/new');
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('bdl-BackButton');
+        expect(button).toHaveClass('custom-class');
     });
 });

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

@@ -6,6 +6,7 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Route } from 'react-router-dom';
 
 import BoxDrive140 from '../../../illustration/BoxDrive140';
 
@@ -45,51 +46,55 @@ const StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props)
     });
 
     return (
-        <div
-            className="bcs-StaticVersionSidebar"
-            role="tabpanel"
-            data-resin-component="preview"
-            data-resin-feature="versions"
-        >
-            <div className="bcs-StaticVersionSidebar-header">
-                <h3 className="bcs-StaticVersionSidebar-title">
-                    <>
-                        <BackButton data-resin-target="back" to={`/${parentName}`} />
-                        <FormattedMessage {...messages.versionsTitle} />
-                    </>
-                </h3>
-            </div>
-
-            <div className="bcs-StaticVersionSidebar-content-wrapper">
-                <LoadingIndicatorWrapper
-                    className="bcs-StaticVersionSidebar-content"
-                    crawlerPosition="top"
-                    isLoading={isLoading}
+        <Route>
+            {({ history }) => (
+                <div
+                    className="bcs-StaticVersionSidebar"
+                    role="tabpanel"
+                    data-resin-component="preview"
+                    data-resin-feature="versions"
                 >
-                    <VersionsMenu versions={versions} fileId="1" versionCount={3} versionLimit={3} />
-                </LoadingIndicatorWrapper>
-            </div>
+                    <div className="bcs-StaticVersionSidebar-header">
+                        <h3 className="bcs-StaticVersionSidebar-title">
+                            <>
+                                <BackButton data-resin-target="back" onClick={() => history.push(`/${parentName}`)} />
+                                <FormattedMessage {...messages.versionsTitle} />
+                            </>
+                        </h3>
+                    </div>
+
+                    <div className="bcs-StaticVersionSidebar-content-wrapper">
+                        <LoadingIndicatorWrapper
+                            className="bcs-StaticVersionSidebar-content"
+                            crawlerPosition="top"
+                            isLoading={isLoading}
+                        >
+                            <VersionsMenu versions={versions} fileId="1" versionCount={3} versionLimit={3} />
+                        </LoadingIndicatorWrapper>
+                    </div>
 
-            <div className="bcs-StaticVersionSidebar-upsell-wrapper">
-                <div className="bcs-StaticVersionSidebar-upsell">
-                    <BoxDrive140 className="bcs-StaticVersionSidebar-upsell-icon" />
-                    <p className="bcs-StaticVersionSidebar-upsell-header">
-                        <FormattedMessage {...messages.versionUpgradeLink} />
-                    </p>
-                    <p>
-                        <FormattedMessage {...messages.versionUpsell} />
-                    </p>
-                    <PrimaryButton
-                        className="bcs-StaticVersionSidebar-upsell-button"
-                        data-resin-target="versioning_error_upgrade_cta"
-                        onClick={onUpgradeClick}
-                        type="button"
-                    >
-                        <FormattedMessage {...messages.upgradeButton} />
-                    </PrimaryButton>
+                    <div className="bcs-StaticVersionSidebar-upsell-wrapper">
+                        <div className="bcs-StaticVersionSidebar-upsell">
+                            <BoxDrive140 className="bcs-StaticVersionSidebar-upsell-icon" />
+                            <p className="bcs-StaticVersionSidebar-upsell-header">
+                                <FormattedMessage {...messages.versionUpgradeLink} />
+                            </p>
+                            <p>
+                                <FormattedMessage {...messages.versionUpsell} />
+                            </p>
+                            <PrimaryButton
+                                className="bcs-StaticVersionSidebar-upsell-button"
+                                data-resin-target="versioning_error_upgrade_cta"
+                                onClick={onUpgradeClick}
+                                type="button"
+                            >
+                                <FormattedMessage {...messages.upgradeButton} />
+                            </PrimaryButton>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
+            )}
+        </Route>
     );
 };
 

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__/VersionsSidebar.test.js

@@ -1,38 +1,165 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
-import InlineError from '../../../../components/inline-error';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import messages from '../messages';
-import VersionsMenu from '../VersionsMenu';
 import VersionsSidebar from '../VersionsSidebar';
 
 jest.mock('../../../common/nav-button', () => ({
-    BackButton: () => <button type="button">Back</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/inline-error', () => ({ title, children }) => (
+    <div data-testid="inline-error">
+        <div data-testid="error-title">{title}</div>
+        <div data-testid="error-message">{children}</div>
+    </div>
+));
+
 describe('elements/content-sidebar/versions/VersionsSidebar', () => {
-    const getWrapper = (props = {}) => shallow(<VersionsSidebar parentName="activity" {...props} />);
+    const defaultProps = {
+        fileId: '123',
+        isLoading: false,
+        parentName: 'activity',
+        versionCount: 1,
+        versionLimit: 10,
+        versions: [{ id: '12345' }],
+    };
 
-    describe('render', () => {
-        test('should show the versions list if no error prop is provided', () => {
-            const wrapper = getWrapper({ versions: [{ id: '12345' }] });
+    const renderComponent = (props = {}) => {
+        return render(
+            <MemoryRouter initialEntries={['/versions']}>
+                <VersionsSidebar {...defaultProps} {...props} />
+            </MemoryRouter>,
+        );
+    };
 
-            expect(wrapper.exists(InlineError)).toBe(false);
-            expect(wrapper.exists(VersionsMenu)).toBe(true);
-            expect(wrapper).toMatchSnapshot();
-        });
+    test('should show the versions list if no error prop is provided', () => {
+        renderComponent({ versions: [{ id: '12345' }] });
 
-        test('should show an inline error if the prop is provided', () => {
-            const wrapper = getWrapper({ error: messages.versionFetchError, versions: [] });
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+        expect(screen.getByTestId('versions-menu')).toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
 
-            expect(wrapper.exists(InlineError)).toBe(true);
-            expect(wrapper).toMatchSnapshot();
+    test('should show an inline error if the prop is provided', () => {
+        renderComponent({
+            error: messages.versionFetchError,
+            versions: [],
         });
 
-        test('should show max versions text if max versions provided', () => {
-            const versions = Array.from({ length: 1000 }).map((item, index) => ({ id: index }));
-            const wrapper = getWrapper({ versions });
+        expect(screen.getByTestId('inline-error')).toBeInTheDocument();
+        expect(screen.getByTestId('error-title')).toBeInTheDocument();
+        expect(screen.getByTestId('error-message')).toBeInTheDocument();
+        expect(screen.queryByTestId('versions-menu')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('max-versions')).not.toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
+
+    test('should show max versions text if max versions provided', () => {
+        const versions = Array.from({ length: 1000 }, (_, index) => ({ id: index }));
+        renderComponent({ versions });
+
+        expect(screen.getByTestId('max-versions')).toBeInTheDocument();
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
+
+    test('should not show max versions text if few versions provided', () => {
+        renderComponent({ versions: [{ id: '1' }, { id: '2' }] });
 
-            expect(wrapper.exists('[data-testid="max-versions"]')).toBe(true);
+        expect(screen.queryByTestId('max-versions')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+    });
+
+    test('should show empty state when no versions and not loading', () => {
+        renderComponent({
+            versions: [],
+            isLoading: false,
         });
+
+        expect(screen.getByText('No prior versions are available for this file.')).toBeInTheDocument();
+        expect(screen.queryByTestId('versions-menu')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('max-versions')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
+
+    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-Versions-content');
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
+
+    test('should pass correct props to VersionsMenu', () => {
+        renderComponent();
+
+        const versionsMenu = screen.getByTestId('versions-menu');
+        expect(versionsMenu).toHaveTextContent('Versions: 1, FileId: 123, Count: 1, Limit: 10');
+        expect(screen.queryByTestId('inline-error')).not.toBeInTheDocument();
+        expect(screen.getByText('Version History')).toBeInTheDocument();
+        expect(screen.getByTestId('back-button')).toBeInTheDocument();
+    });
+
+    test('should navigate to parent name when back button is clicked', async () => {
+        let currentLocation;
+
+        const TestWrapper = ({ children }) => (
+            <MemoryRouter initialEntries={['/versions']}>
+                <Route
+                    path="*"
+                    render={({ location }) => {
+                        currentLocation = location;
+                        return children;
+                    }}
+                />
+            </MemoryRouter>
+        );
+
+        render(
+            <TestWrapper>
+                <VersionsSidebar {...defaultProps} parentName="activity" />
+            </TestWrapper>,
+        );
+
+        expect(currentLocation.pathname).toBe('/versions');
+
+        const backButton = screen.getByTestId('back-button');
+        const user = userEvent();
+        await user.click(backButton);
+
+        expect(currentLocation.pathname).toBe('/activity');
     });
 });