feat(metadata-view): bulk custom actions

Refactor to use RTL

Author: jpan-box

src/elements/common/sub-header/SubHeaderRight.tsx

@@ -71,6 +71,7 @@ const SubHeaderRight = ({
     const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;
     const isMetadataView: boolean = view === VIEW_METADATA;
     const hasSelectedItems: boolean = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));
+
     return (
         <div className="be-sub-header-right">
             {!isMetadataView && (

src/elements/common/sub-header/__tests__/SubHeaderRight.test.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { render, screen } from '../../../../test-utils/testing-library';
+import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import SubHeaderRight, { SubHeaderRightProps } from '../SubHeaderRight';
-import { VIEW_FOLDER, VIEW_MODE_GRID } from '../../../../constants';
+import { VIEW_FOLDER, VIEW_METADATA, VIEW_MODE_GRID } from '../../../../constants';
+import { FeatureProvider } from '../../feature-checking';
 
 describe('elements/common/sub-header/SubHeaderRight', () => {
     const defaultProps = {
@@ -21,8 +22,12 @@ describe('elements/common/sub-header/SubHeaderRight', () => {
         viewMode: VIEW_MODE_GRID,
     };
 
-    const renderComponent = (props: Partial<SubHeaderRightProps> = {}) =>
-        render(<SubHeaderRight {...defaultProps} {...props} />);
+    const renderComponent = (props: Partial<SubHeaderRightProps> = {}, features = {}) =>
+        render(
+            <FeatureProvider features={features}>
+                <SubHeaderRight {...defaultProps} {...props} />
+            </FeatureProvider>,
+        );
 
     test('should render GridViewSlider when there are items and viewMode is grid', () => {
         renderComponent({
@@ -82,4 +87,95 @@ describe('elements/common/sub-header/SubHeaderRight', () => {
         renderComponent(defaultProps);
         expect(screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
     });
+
+    describe('metadataViewV2', () => {
+        const metadataViewV2Props = {
+            ...defaultProps,
+            selectedItemIds: 'all' as const,
+            bulkItemActions: [
+                {
+                    label: 'Download',
+                    onClick: jest.fn(),
+                },
+            ],
+            view: VIEW_METADATA,
+            onMetadataSidePanelToggle: jest.fn(),
+        };
+
+        test.each([
+            {
+                selectedItemIds: 'all' as const,
+            },
+            {
+                selectedItemIds: new Set(['1', '2']),
+            },
+        ])('should render bulkItemActionMenu when selectedItemIds is $selectedItemIds', async ({ selectedItemIds }) => {
+            const features = {
+                contentExplorer: {
+                    metadataViewV2: true, // enable the feature flag
+                },
+            };
+
+            renderComponent(
+                {
+                    ...metadataViewV2Props,
+                    selectedItemIds,
+                },
+                features,
+            );
+
+            expect(screen.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
+        });
+
+        test('should call onClick when a bulk item action is clicked', async () => {
+            const mockOnClick = jest.fn();
+            const user = userEvent();
+            const features = {
+                contentExplorer: {
+                    metadataViewV2: true, // enable the feature flag
+                },
+            };
+
+            renderComponent(
+                {
+                    ...metadataViewV2Props,
+                    bulkItemActions: [
+                        {
+                            label: 'Download',
+                            onClick: mockOnClick,
+                        },
+                    ],
+                },
+                features,
+            );
+
+            const ellipsisButton = screen.getByRole('button', { name: 'Bulk actions' });
+
+            await user.click(ellipsisButton);
+
+            const downloadAction = screen.getByRole('menuitem', { name: 'Download' });
+            await user.click(downloadAction);
+
+            const expectedOnClickArgument = 'all';
+            expect(mockOnClick).toHaveBeenCalledWith(expectedOnClickArgument);
+        });
+
+        test('should not render metadata button when metadataViewV2 feature is disabled', async () => {
+            const features = {
+                contentExplorer: {
+                    metadataViewV2: false, // Disable the feature flag
+                },
+            };
+
+            renderComponent(
+                {
+                    ...metadataViewV2Props,
+                },
+                features,
+            );
+
+            expect(screen.queryByRole('button', { name: 'Bulk actions' })).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', { name: 'Metadata' })).not.toBeInTheDocument();
+        });
+    });
 });

src/elements/content-explorer/__tests__/ContentExplorer.test.tsx

@@ -505,6 +505,58 @@ describe('elements/content-explorer/ContentExplorer', () => {
 
                 expect(screen.getByRole('button', { name: 'Metadata' })).toBeInTheDocument();
             });
+
+            test('should call onClick when bulk item action is clicked', async () => {
+                const mockOnClick = jest.fn();
+                const metadataViewV2WithBulkItemActions = {
+                    ...metadataViewV2ElementProps,
+                    bulkItemActions: [
+                        {
+                            label: 'Download',
+                            onClick: mockOnClick,
+                        },
+                    ],
+                };
+
+                renderComponent(metadataViewV2WithBulkItemActions);
+
+                await waitFor(() => {
+                    expect(screen.getByTestId('content-explorer')).toBeInTheDocument();
+                });
+
+                await waitFor(() => {
+                    expect(screen.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
+                });
+
+                const firstRow = screen.getByRole('row', { name: /Child 2/i });
+                const checkbox = within(firstRow).getByRole('checkbox');
+                await userEvent.click(checkbox);
+
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
+                });
+
+                const ellipsisButton = screen.getByRole('button', { name: 'Bulk actions' });
+                await userEvent.click(ellipsisButton);
+
+                await waitFor(() => {
+                    expect(screen.getByRole('menuitem', { name: 'Download' })).toBeInTheDocument();
+                });
+
+                const downloadAction = screen.getByRole('menuitem', { name: 'Download' });
+                await userEvent.click(downloadAction);
+
+                const expectedOnClickArgument = new Set(['1188890835']);
+                await waitFor(() => {
+                    expect(mockOnClick).toHaveBeenCalled();
+
+                    // Array conversion from sets to avoid set comparison issues in Jest
+                    const argsForFirstMockCall = mockOnClick.mock.calls[0];
+                    const firstArgToMockOnClick = argsForFirstMockCall[0];
+
+                    expect(Array.from(firstArgToMockOnClick)).toEqual(Array.from(expectedOnClickArgument));
+                });
+            });
         });
     });
 

src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -205,23 +205,6 @@ export const sidePanelOpenWithSingleItemSelected: Story = {
     },
 };
 
-export const metadataViewV2WithBulkItemActionMenuShowsEllipsis: Story = {
-    args: metadataViewV2WithBulkItemActions,
-    play: async ({ canvas }) => {
-        await waitFor(() => {
-            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
-        });
-
-        const firstRow = canvas.getByRole('row', { name: /Child 2/i });
-        const checkbox = within(firstRow).getByRole('checkbox');
-        userEvent.click(checkbox);
-
-        await waitFor(() => {
-            expect(canvas.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
-        });
-    },
-};
-
 export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {
     args: metadataViewV2WithBulkItemActions,
     play: async ({ canvas }) => {
@@ -247,37 +230,6 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {
     },
 };
 
-export const metadataViewV2WithBulkItemActionMenuCallsOnClick: Story = {
-    args: metadataViewV2WithBulkItemActions,
-    play: async ({ canvas, args }) => {
-        await waitFor(() => {
-            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
-        });
-
-        const firstRow = canvas.getByRole('row', { name: /Child 2/i });
-        const checkbox = within(firstRow).getByRole('checkbox');
-        userEvent.click(checkbox);
-
-        await waitFor(() => {
-            expect(canvas.getByRole('button', { name: 'Bulk actions' })).toBeInTheDocument();
-        });
-
-        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });
-
-        userEvent.click(ellipsisButton);
-
-        await waitFor(() => {
-            expect(screen.getByRole('menuitem', { name: 'Download' })).toBeInTheDocument();
-        });
-        const downloadAction = screen.getByRole('menuitem', { name: 'Download' });
-        userEvent.click(downloadAction);
-
-        await waitFor(() => {
-            expect(args.bulkItemActions[0].onClick).toHaveBeenCalled();
-        });
-    },
-};
-
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,