box-ui-elements 23.4.0-beta.21 → 23.4.0-beta.23

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

@@ -1,23 +1,87 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 import { SidebarToggleComponent as SidebarToggle } from '../SidebarToggle';
 
 describe('elements/content-sidebar/SidebarToggle', () => {
     const historyMock = { replace: jest.fn() };
-    const getWrapper = (props = {}) => shallow(<SidebarToggle history={historyMock} {...props} />);
+    
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle history={historyMock} {...props} />);
+    };
 
     test.each`
-        isOpen   | location
+        isOpen   | expectedState
         ${true}  | ${{ state: { open: false } }}
         ${false} | ${{ state: { open: true } }}
-    `('should render and handle clicks correctly when isOpen is $isOpen', ({ isOpen, location }) => {
-        const event = { preventDefault: jest.fn() };
-        const wrapper = getWrapper({ isOpen });
+    `('should render and handle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedState }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+        
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        
+        await user.click(toggleButton);
+        
+        expect(historyMock.replace).toHaveBeenCalledWith(expectedState);
+    });
+});
 
-        wrapper.simulate('click', event);
+describe('elements/content-sidebar/SidebarToggle - Router Disabled', () => {
+    const mockInternalSidebarNavigationHandler = jest.fn();
+    const defaultProps = {
+        routerDisabled: true,
+        internalSidebarNavigation: { sidebar: 'activity' },
+        internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+    };
 
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(historyMock.replace).toHaveBeenCalledWith(location);
-        expect(wrapper).toMatchSnapshot();
+    beforeEach(() => {
+        jest.clearAllMocks();
     });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle {...defaultProps} {...props} />);
+    };
+
+    test.each`
+        isOpen   | expectedNavigation
+        ${true}  | ${{ sidebar: 'activity', open: false }}
+        ${false} | ${{ sidebar: 'activity', open: true }}
+    `('should handle toggle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedNavigation }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith(expectedNavigation, true);
+    });
+
+    test('should handle complex navigation state correctly', async () => {
+        const user = userEvent();
+        const complexNavigation = {
+            sidebar: 'activity',
+            versionId: '123',
+            activeFeedEntryType: 'comments',
+            activeFeedEntryId: '456',
+        };
+        
+        renderSidebarToggle({
+            isOpen: true,
+            internalSidebarNavigation: complexNavigation,
+        });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+            ...complexNavigation,
+            open: false,
+        }, true);
+    });
+
 });

package/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -344,6 +344,19 @@ export const SwitchEditingTemplateInstances: StoryObj<typeof MetadataSidebarRede
         fileId: '416047501580',
         metadataSidebarProps: defaultMetadataSidebarProps,
     },
+    parameters: {
+        msw: {
+            handlers: [
+                ...defaultMockHandlers,
+                http.get(`/2.0/files/416047501580`, () => {
+                    return HttpResponse.json(mockFileRequest.response);
+                }),
+                http.get(`/2.0/files/416047501580/metadata`, () => {
+                    return HttpResponse.json(mockMetadataInstances.response);
+                }),
+            ],
+        },
+    },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         // open and edit a new template
@@ -543,7 +556,7 @@ export const SuggestionForNewlyCreatedTemplateInstance: StoryObj<typeof Metadata
         const autofillButton = await canvas.findByRole('button', { name: 'Autofill' });
         userEvent.click(autofillButton);
 
-        const suggestion = await canvas.findByText('4/1/2024');
+        const suggestion = await canvas.findByText('4/1/2024', {}, { timeout: 5000 });
         expect(suggestion).toBeInTheDocument();
     },
 };

package/src/features/header-flyout/HeaderFlyout.js

@@ -20,6 +20,8 @@ type Props = FlyoutProps & {
     header?: React.Element<any>,
     /** Optional function to get the scrollRef in parent components */
     scrollRefFn?: any => any,
+    /** Are OverlayHeader actions enabled */
+    isOverlayHeaderActionEnabled?: boolean,
 };
 
 class HeaderFlyout extends React.Component<Props> {
@@ -30,7 +32,16 @@ class HeaderFlyout extends React.Component<Props> {
     };
 
     render() {
-        const { header, footer, flyoutButton, children, scrollRefFn, className, ...rest } = this.props;
+        const {
+            header,
+            footer,
+            flyoutButton,
+            children,
+            scrollRefFn,
+            className,
+            isOverlayHeaderActionEnabled = false,
+            ...rest
+        } = this.props;
 
         return (
             <Flyout
@@ -42,7 +53,9 @@ class HeaderFlyout extends React.Component<Props> {
             >
                 {flyoutButton}
                 <Overlay className="header-flyout-overlay">
-                    <OverlayHeader>{header && <h4 className="header-flyout-title">{header}</h4>}</OverlayHeader>
+                    <OverlayHeader isOverlayHeaderActionEnabled={isOverlayHeaderActionEnabled}>
+                        {header && <h4 className="header-flyout-title">{header}</h4>}
+                    </OverlayHeader>
                     <div className="header-flyout-list-container">
                         <div
                             className={classNames('flyout-list-container-body', {

package/src/features/header-flyout/__tests__/__snapshots__/HeaderFlyout.test.js.snap

@@ -21,7 +21,9 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader>
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    >
       <h4
         className="header-flyout-title"
       >
@@ -78,7 +80,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >
@@ -123,7 +127,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >

package/src/features/header-flyout/styles/HeaderFlyout.scss

@@ -121,6 +121,8 @@
         }
 
         .header-flyout-overlay {
+            animation: none;
+
             .header-flyout-title {
                 padding-bottom: 0;
             }

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

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`elements/content-sidebar/SidebarToggle should render and handle clicks correctly when isOpen is false 1`] = `
-<SidebarToggleButton
-  data-resin-target="sidebartoggle"
-  data-testid="sidebartoggle"
-  isOpen={false}
-  onClick={[Function]}
-/>
-`;
-
-exports[`elements/content-sidebar/SidebarToggle should render and handle clicks correctly when isOpen is true 1`] = `
-<SidebarToggleButton
-  data-resin-target="sidebartoggle"
-  data-testid="sidebartoggle"
-  isOpen={true}
-  onClick={[Function]}
-/>
-`;