box-ui-elements 16.0.0-beta.8 → 16.0.0

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

@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ActivitySidebarFilter from '../ActivitySidebarFilter';
+import type { FeedItemStatus } from '../../../common/types/feed';
+
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl'),
+    FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <span>{defaultMessage}</span>,
+}));
+
+const onFeedItemStatusClick = jest.fn();
+
+const Wrapper = ({ children }: { children?: React.ReactNode }) => {
+    return <IntlProvider locale="en">{children}</IntlProvider>;
+};
+
+const renderWithWrapper = (feedItemStatus?: FeedItemStatus) =>
+    render(<ActivitySidebarFilter feedItemStatus={feedItemStatus} onFeedItemStatusClick={onFeedItemStatusClick} />, {
+        wrapper: Wrapper,
+    });
+
+describe('elements/content-sidebar/ActivitySidebarFilter', () => {
+    test.each`
+        feedItemStatus | option
+        ${undefined}   | ${'All Comments'}
+        ${'open'}      | ${'Unresolved Comments'}
+    `(
+        'should render "$option" as the selected status when feedItemStatus prop is equal to $feedItemStatus',
+        ({ feedItemStatus, option }) => {
+            renderWithWrapper(feedItemStatus);
+            expect(screen.getByText(option)).toBeVisible();
+        },
+    );
+
+    test.each`
+        expected     | option                   | initialOption            | initialStatus
+        ${undefined} | ${'All Comments'}        | ${'Unresolved Comments'} | ${'open'}
+        ${'open'}    | ${'Unresolved Comments'} | ${'All Comments'}        | ${undefined}
+    `(
+        'onFeedItemStatusClick should be called with $expected when clicked on $option',
+        async ({ initialOption, option, initialStatus, expected }) => {
+            renderWithWrapper(initialStatus);
+
+            const dropdownBtn = screen.getByText(initialOption);
+
+            fireEvent.click(dropdownBtn);
+            fireEvent.click(await screen.findByText(option));
+
+            expect(onFeedItemStatusClick).toBeCalledWith(expected);
+        },
+    );
+});

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

@@ -8,6 +8,7 @@ import { DetailsSidebarComponent as DetailsSidebar } from '../DetailsSidebar';
 jest.mock('../SidebarFileProperties', () => 'SidebarFileProperties');
 jest.mock('../SidebarAccessStats', () => 'SidebarAccessStats');
 jest.mock('../SidebarClassification', () => 'SidebarClassification');
+jest.mock('../SidebarContentInsights', () => 'SidebarContentInsights');
 
 const file = {
     id: 'foo',
@@ -122,6 +123,24 @@ describe('elements/content-sidebar/DetailsSidebar', () => {
             expect(wrapper).toMatchSnapshot();
         });
 
+        test('should render DetailsSidebar with content insights', () => {
+            const wrapper = getWrapper(
+                {
+                    contentInsights: {},
+                    fetchContentInsights: jest.fn(),
+                    hasContentInsights: true,
+                    onContentInsightsClick: jest.fn(),
+                },
+                { disableLifecycleMethods: true },
+            );
+            wrapper.setState({ file });
+
+            expect(wrapper.find('SidebarContentInsights').props()).toMatchObject({
+                contentInsights: {},
+                onContentInsightsClick: expect.any(Function),
+            });
+        });
+
         test('should render DetailsSidebar with versions', () => {
             const wrapper = getWrapper(
                 {
@@ -169,6 +188,20 @@ describe('elements/content-sidebar/DetailsSidebar', () => {
             expect(instance.fetchFile).toHaveBeenCalled();
             expect(instance.fetchAccessStats).toHaveBeenCalled();
         });
+
+        test('should fetch the content insights', () => {
+            const fetchContentInsights = jest.fn();
+
+            wrapper.setProps({
+                fetchContentInsights,
+                hasClassification: true,
+                hasContentInsights: true,
+            });
+            instance.componentDidMount();
+            expect(instance.fetchFile).toHaveBeenCalled();
+            expect(instance.fetchAccessStats).not.toBeCalled();
+            expect(fetchContentInsights).toBeCalled();
+        });
     });
 
     describe('fetchAccessStatsSuccessCallback()', () => {
@@ -444,6 +477,7 @@ describe('elements/content-sidebar/DetailsSidebar', () => {
             wrapper = getWrapper({
                 file,
                 hasAccessStats: false,
+                hasContentInsights: false,
                 hasClassification: false,
                 refreshIdentity: false,
             });
@@ -458,6 +492,17 @@ describe('elements/content-sidebar/DetailsSidebar', () => {
 
             expect(instance.fetchAccessStats).toHaveBeenCalled();
         });
+
+        test('should fetch the content insights data if the content insights visibility changed', () => {
+            const fetchContentInsights = jest.fn();
+
+            wrapper.setProps({
+                fetchContentInsights,
+                hasContentInsights: true,
+            });
+
+            expect(fetchContentInsights).toBeCalled();
+        });
     });
 
     describe('refresh', () => {

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import LocalStore from '../../../utils/LocalStore';
 import {
     SIDEBAR_FORCE_KEY,
     SIDEBAR_FORCE_VALUE_CLOSED,
     SIDEBAR_FORCE_VALUE_OPEN,
     SidebarComponent as Sidebar,
 } from '../Sidebar';
+import LocalStore from '../../../utils/LocalStore';
 
 jest.mock('../../common/async-load', () => () => 'LoadableComponent');
 jest.mock('../../../utils/LocalStore');

package/src/elements/content-sidebar/__tests__/SidebarContentInsights.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { render, fireEvent } from '@testing-library/react';
+
+import contentInsightsMessages from '../../../features/content-insights/messages';
+// @ts-ignore Module is written in Flow
+import localize from '../../../../test/support/i18n';
+// @ts-ignore Module is written in Flow
+import messages from '../../common/messages';
+import SidebarContentInsights from '../SidebarContentInsights';
+
+jest.unmock('react-intl');
+
+describe('elements/content-sidebar/SidebarContentInsights', () => {
+    const getWrapper = (props = {}) =>
+        render(
+            <SidebarContentInsights
+                contentInsights={{ graphData: [], isLoading: true, previousPeriodCount: 0, totalCount: 0 }}
+                onContentInsightsClick={jest.fn()}
+                {...props}
+            />,
+            {
+                wrapper: ({ children }: { children?: React.ReactNode }) => (
+                    <IntlProvider locale="en-US">{children}</IntlProvider>
+                ),
+            },
+        );
+
+    describe('render()', () => {
+        test('should render correctly', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.getByText(localize(messages.sidebarContentInsights.id))).toBeVisible();
+            expect(wrapper.queryByTestId('ContentAnalyticsErrorState-image')).toBe(null);
+        });
+
+        test('should call click handler when ContentInsightsSummary button is clicked', () => {
+            const onContentInsightsClick = jest.fn();
+            const wrapper = getWrapper({
+                contentInsights: { graphData: [], isLoading: false, previousPeriodCount: 0, totalCount: 0 },
+                onContentInsightsClick,
+            });
+
+            fireEvent.click(wrapper.getByText(localize(contentInsightsMessages.openContentInsightsButton.id)));
+
+            expect(onContentInsightsClick).toBeCalledTimes(1);
+        });
+
+        test('should render error state', () => {
+            const contentInsights = { error: new Error() };
+            const wrapper = getWrapper({ contentInsights });
+
+            expect(wrapper.getByTestId('ContentAnalyticsErrorState-image')).toBeVisible();
+        });
+    });
+});

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme/build';
 import { MemoryRouter } from 'react-router-dom';
 
+import { FEED_ITEM_TYPE_ANNOTATION, FEED_ITEM_TYPE_COMMENT, FEED_ITEM_TYPE_TASK } from '../../../constants';
 import { SidebarPanelsComponent as SidebarPanels } from '../SidebarPanels';
 
 // mock lazy imports
@@ -70,7 +71,7 @@ describe('elements/content-sidebar/SidebarPanels', () => {
             test('should render with tasks deeplink', () => {
                 const wrapper = getWrapper({ path: '/activity/tasks/12345' });
                 expect(wrapper.find('ActivitySidebar').props()).toMatchObject({
-                    activeFeedEntryType: 'task',
+                    activeFeedEntryType: FEED_ITEM_TYPE_TASK,
                     activeFeedEntryId: '12345',
                 });
             });
@@ -78,7 +79,7 @@ describe('elements/content-sidebar/SidebarPanels', () => {
             test('should render with comments deeplink', () => {
                 const wrapper = getWrapper({ path: '/activity/comments/12345' });
                 expect(wrapper.find('ActivitySidebar').props()).toMatchObject({
-                    activeFeedEntryType: 'comment',
+                    activeFeedEntryType: FEED_ITEM_TYPE_COMMENT,
                     activeFeedEntryId: '12345',
                 });
             });
@@ -93,7 +94,7 @@ describe('elements/content-sidebar/SidebarPanels', () => {
             test('should render with annotations deeplink', () => {
                 const wrapper = getWrapper({ path: '/activity/annotations/12345/67890' });
                 expect(wrapper.find('ActivitySidebar').props()).toMatchObject({
-                    activeFeedEntryType: 'annotation',
+                    activeFeedEntryType: FEED_ITEM_TYPE_ANNOTATION,
                     activeFeedEntryId: '67890',
                 });
             });

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

@@ -3,22 +3,24 @@
 exports[`elements/content-sidebar/ActivitySidebar render() should render the activity feed sidebar 1`] = `
 <SidebarContent
   actions={
-    <withRouter(AddTaskButton)
-      isDisabled={false}
-      onTaskModalClose={[Function]}
-      taskFormProps={
-        Object {
-          "approverSelectorContacts": undefined,
-          "approvers": Array [],
-          "completionRule": "ALL_ASSIGNEES",
-          "createTask": [Function],
-          "getApproverWithQuery": [Function],
-          "getAvatarUrl": [Function],
-          "id": "",
-          "message": "",
+    <React.Fragment>
+      <withRouter(AddTaskButton)
+        isDisabled={false}
+        onTaskModalClose={[Function]}
+        taskFormProps={
+          Object {
+            "approverSelectorContacts": undefined,
+            "approvers": Array [],
+            "completionRule": "ALL_ASSIGNEES",
+            "createTask": [Function],
+            "getApproverWithQuery": [Function],
+            "getAvatarUrl": [Function],
+            "id": "",
+            "message": "",
+          }
         }
-      }
-    />
+      />
+    </React.Fragment>
   }
   className="bcs-activity"
   elementId=""
@@ -31,6 +33,12 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
   }
 >
   <ActivityFeed
+    currentUser={
+      Object {
+        "id": "123",
+        "name": "foo bar",
+      }
+    }
     file={
       Object {
         "file_version": Object {
@@ -42,14 +50,20 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
     getApproverWithQuery={[Function]}
     getAvatarUrl={[Function]}
     getMentionWithQuery={[Function]}
+    hasReplies={false}
     isDisabled={false}
     onAnnotationDelete={[Function]}
     onAnnotationEdit={[Function]}
     onAnnotationSelect={[Function]}
+    onAnnotationStatusChange={[Function]}
     onAppActivityDelete={[Function]}
     onCommentCreate={[Function]}
     onCommentDelete={[Function]}
     onCommentUpdate={[Function]}
+    onReplyCreate={[Function]}
+    onReplyDelete={[Function]}
+    onReplyUpdate={[Function]}
+    onShowReplies={[Function]}
     onTaskAssignmentUpdate={[Function]}
     onTaskCreate={[Function]}
     onTaskDelete={[Function]}

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

@@ -62,6 +62,7 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render a
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }