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

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');
     });
 });

package/src/test-utils/testing-library.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, type RenderOptions } from '@testing-library/react';
+import userEventInit from '@testing-library/user-event';
 
 // Data Providers
 import { TooltipProvider } from '@box/blueprint-web';
@@ -26,5 +27,7 @@ const renderConnected = (element, options: RenderConnectedOptions = {}) =>
         ...options,
     });
 
+const createUserEvent = () => userEventInit.setup(); // factory function to create isolated userEvent instances
+
 export * from '@testing-library/react';
-export { renderConnected as render };
+export { renderConnected as render, createUserEvent as userEvent };

package/es/elements/common/types/SidebarNavigation.flow.js

@@ -1,14 +0,0 @@
-export const ViewType = Object.freeze({
-  BOXAI: 'boxai',
-  SKILLS: 'skills',
-  ACTIVITY: 'activity',
-  DETAILS: 'details',
-  METADATA: 'metadata',
-  DOCGEN: 'docgen'
-});
-export const FeedEntryType = Object.freeze({
-  ANNOTATIONS: 'annotations',
-  COMMENTS: 'comments',
-  TASKS: 'tasks'
-});
-//# sourceMappingURL=SidebarNavigation.flow.js.map

package/es/elements/common/types/SidebarNavigation.flow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidebarNavigation.flow.js","names":["ViewType","Object","freeze","BOXAI","SKILLS","ACTIVITY","DETAILS","METADATA","DOCGEN","FeedEntryType","ANNOTATIONS","COMMENTS","TASKS"],"sources":["../../../../src/elements/common/types/SidebarNavigation.flow.js"],"sourcesContent":["/* @flow */\n\nexport const ViewType = Object.freeze({\n    BOXAI: 'boxai',\n    SKILLS: 'skills',\n    ACTIVITY: 'activity',\n    DETAILS: 'details',\n    METADATA: 'metadata',\n    DOCGEN: 'docgen',\n});\n\nexport const FeedEntryType = Object.freeze({\n    ANNOTATIONS: 'annotations',\n    COMMENTS: 'comments',\n    TASKS: 'tasks',\n});\n\nexport type ViewTypeValues = $Values<typeof ViewType>;\nexport type FeedEntryTypeValues = $Values<typeof FeedEntryType>;\n\ntype VersionSidebarView = {\n    sidebar: 'activity' | 'details',\n    versionId: string,\n};\n\nexport type ActivityAnnotationsSidebarView = {\n    sidebar: 'activity',\n    activeFeedEntryType: 'annotations',\n    fileVersionId: string,\n    activeFeedEntryId: string,\n};\ntype ActivityCommentsSidebarView = {\n    sidebar: 'activity',\n    activeFeedEntryType: 'comments' | 'tasks',\n    activeFeedEntryId: string,\n};\n\nexport type SidebarNavigation =\n    | {|\n          sidebar: ViewTypeValues,\n      |}\n    | VersionSidebarView\n    | ActivityCommentsSidebarView\n    | ActivityAnnotationsSidebarView;\n\nexport type InternalSidebarNavigation = SidebarNavigation & {\n    open: boolean,\n};\n\nexport type SidebarNavigationHandler = (sidebar: SidebarNavigation, replace?: boolean) => void;\n\nexport type InternalSidebarNavigationHandler = (sidebar: InternalSidebarNavigation, replace?: boolean) => void;\n"],"mappings":"AAEA,OAAO,MAAMA,QAAQ,GAAGC,MAAM,CAACC,MAAM,CAAC;EAClCC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE,UAAU;EACpBC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,OAAO,MAAMC,aAAa,GAAGR,MAAM,CAACC,MAAM,CAAC;EACvCQ,WAAW,EAAE,aAAa;EAC1BC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACX,CAAC,CAAC","ignoreList":[]}

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

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`elements/common/nav-button/BackButton should match its snapshot 1`] = `
-<BackButton>
-  <Route>
-    <PlainButton
-      className="bdl-BackButton"
-      onClick={[Function]}
-      type="button"
-    >
-      <button
-        className="btn-plain bdl-BackButton"
-        onClick={[Function]}
-        type="button"
-      >
-        <IconNavigateLeft
-          height={24}
-          width={24}
-        >
-          <AccessibleSVG
-            className="icon-navigate-left "
-            focusable="false"
-            height={24}
-            viewBox="0 0 48 48"
-            width={24}
-          >
-            <svg
-              aria-hidden="true"
-              className="icon-navigate-left "
-              focusable="false"
-              height={24}
-              role="presentation"
-              viewBox="0 0 48 48"
-              width={24}
-            >
-              <path
-                d="M30.8,33.2L21.7,24l9.2-9.2L28,12L16,24l12,12L30.8,33.2z"
-                fill="#494949"
-                stroke="#DCDCDC"
-                strokeMiterlimit="10"
-              />
-              <path
-                d="M0,0h48v48H0V0z"
-                display="none"
-                fill="none"
-              />
-            </svg>
-          </AccessibleSVG>
-        </IconNavigateLeft>
-        <span
-          className="accessibility-hidden"
-        >
-          <FormattedMessage
-            defaultMessage="Back"
-            id="be.back"
-          >
-            <div />
-          </FormattedMessage>
-        </span>
-      </button>
-    </PlainButton>
-  </Route>
-</BackButton>
-`;

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

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`elements/content-sidebar/versions/VersionsList render should match its snapshot 1`] = `
-<ul
-  className="bcs-VersionsList"
-/>
-`;
-
-exports[`elements/content-sidebar/versions/VersionsList render should match its snapshot 2`] = `
-<ul
-  className="bcs-VersionsList"
->
-  <li
-    className="bcs-VersionsList-item"
-    key="12345"
-  >
-    <Route
-      render={[Function]}
-    />
-  </li>
-</ul>
-`;
-
-exports[`elements/content-sidebar/versions/VersionsList render should match its snapshot 3`] = `
-<ul
-  className="bcs-VersionsList"
->
-  <li
-    className="bcs-VersionsList-item"
-    key="12345"
-  >
-    <Route
-      render={[Function]}
-    />
-  </li>
-  <li
-    className="bcs-VersionsList-item"
-    key="45678"
-  >
-    <Route
-      render={[Function]}
-    />
-  </li>
-</ul>
-`;

package/src/elements/content-sidebar/versions/__tests__/__snapshots__/VersionsSidebar.test.js.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`elements/content-sidebar/versions/VersionsSidebar render should show an inline error if the prop is provided 1`] = `
-<SidebarContent
-  className="bcs-Versions"
-  data-resin-component="preview"
-  data-resin-feature="versions"
-  elementId=""
-  sidebarView=""
-  title={
-    <React.Fragment>
-      <BackButton
-        data-resin-target="back"
-        to="/activity"
-      />
-      <FormattedMessage
-        defaultMessage="Version History"
-        id="be.sidebarVersions.title"
-      />
-    </React.Fragment>
-  }
->
-  <LoadingIndicatorWrapper
-    className="bcs-Versions-content"
-    crawlerPosition="top"
-  >
-    <InlineError
-      title={
-        <FormattedMessage
-          defaultMessage="Server Error"
-          id="be.sidebarVersions.serverError"
-        />
-      }
-    >
-      <FormattedMessage
-        defaultMessage="File versions could not be retrieved."
-        id="be.sidebarVersions.fetchError"
-      />
-    </InlineError>
-    <div
-      className="bcs-Versions-empty"
-    >
-      <FormattedMessage
-        defaultMessage="No prior versions are available for this file."
-        id="be.sidebarVersions.empty"
-      />
-    </div>
-  </LoadingIndicatorWrapper>
-</SidebarContent>
-`;
-
-exports[`elements/content-sidebar/versions/VersionsSidebar render should show the versions list if no error prop is provided 1`] = `
-<SidebarContent
-  className="bcs-Versions"
-  data-resin-component="preview"
-  data-resin-feature="versions"
-  elementId=""
-  sidebarView=""
-  title={
-    <React.Fragment>
-      <BackButton
-        data-resin-target="back"
-        to="/activity"
-      />
-      <FormattedMessage
-        defaultMessage="Version History"
-        id="be.sidebarVersions.title"
-      />
-    </React.Fragment>
-  }
->
-  <LoadingIndicatorWrapper
-    className="bcs-Versions-content"
-    crawlerPosition="top"
-  >
-    <div
-      className="bcs-Versions-menu"
-      data-testid="bcs-Versions-menu"
-    >
-      <Component
-        versions={
-          [
-            {
-              "id": "12345",
-            },
-          ]
-        }
-      />
-    </div>
-  </LoadingIndicatorWrapper>
-</SidebarContent>
-`;