feat(metadata-view): bulk custom actions

Refactor to use RTL

Author: jpan-box

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,