@scality/data-browser-library 1.1.5 → 1.1.7

package/dist/components/__tests__/DeleteObjectButton.test.js

@@ -1,12 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { useDeleteObjects, useGetBucketVersioning } from "../../hooks/index.js";
+import { useDeleteFolder } from "../../hooks/useDeleteFolder.js";
 import { createTestWrapper } from "../../test/testUtils.js";
+import { useInvalidateQueries } from "../providers/DataBrowserProvider.js";
 import { DeleteObjectButton } from "../objects/DeleteObjectButton.js";
 jest.mock('../../hooks');
+jest.mock('../../hooks/useDeleteFolder');
+jest.mock('../providers/DataBrowserProvider', ()=>({
+        ...jest.requireActual('../providers/DataBrowserProvider'),
+        useInvalidateQueries: jest.fn()
+    }));
 const mockUseDeleteObjects = jest.mocked(useDeleteObjects);
 const mockUseGetBucketVersioning = jest.mocked(useGetBucketVersioning);
+const mockUseDeleteFolder = jest.mocked(useDeleteFolder);
+const mockUseInvalidateQueries = jest.mocked(useInvalidateQueries);
 const mockDeleteObjects = jest.fn();
+const mockDeleteFolder = jest.fn();
+const mockInvalidateQueries = jest.fn();
 const createMockObjects = (count, withVersions = false)=>Array.from({
         length: count
     }, (_, i)=>({
@@ -27,6 +38,10 @@ const createMockFolders = (count)=>Array.from({
             type: 'folder',
             LastModified: void 0
         }));
+const checkConfirmationCheckbox = ()=>{
+    const checkbox = screen.getByLabelText('Confirm the deletion');
+    fireEvent.click(checkbox);
+};
 const renderDeleteObjectButton = (props = {})=>{
     const defaultProps = {
         objects: createMockObjects(2),
@@ -49,13 +64,20 @@ const mockHookDefaults = (versioningEnabled = false)=>{
         error: null
     });
     mockUseDeleteObjects.mockReturnValue({
-        mutate: mockDeleteObjects,
+        mutateAsync: mockDeleteObjects,
         isPending: false
     });
+    mockUseDeleteFolder.mockReturnValue({
+        mutateAsync: mockDeleteFolder,
+        isPending: false
+    });
+    mockUseInvalidateQueries.mockReturnValue(mockInvalidateQueries);
 };
 describe('DeleteObjectButton', ()=>{
     beforeEach(()=>{
         jest.clearAllMocks();
+        mockDeleteObjects.mockResolvedValue({});
+        mockDeleteFolder.mockResolvedValue(void 0);
         mockHookDefaults();
     });
     it('renders delete button with correct label and icon', ()=>{
@@ -171,7 +193,7 @@ describe('DeleteObjectButton', ()=>{
         fireEvent.click(cancelButton);
         expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
     });
-    it('calls delete mutation with correct parameters when deletion is confirmed', ()=>{
+    it('calls delete mutation with correct parameters when deletion is confirmed', async ()=>{
         const objects = createMockObjects(2);
         renderDeleteObjectButton({
             objects,
@@ -183,7 +205,10 @@ describe('DeleteObjectButton', ()=>{
         fireEvent.click(deleteButton);
         const confirmButton = document.getElementById('object-delete-delete-button');
         expect(confirmButton).toBeInTheDocument();
-        fireEvent.click(confirmButton);
+        checkConfirmationCheckbox();
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
         expect(mockDeleteObjects).toHaveBeenCalledWith({
             Bucket: 'my-bucket',
             Delete: {
@@ -196,12 +221,9 @@ describe('DeleteObjectButton', ()=>{
                     }
                 ]
             }
-        }, expect.objectContaining({
-            onSuccess: expect.any(Function),
-            onError: expect.any(Function)
-        }));
+        });
     });
-    it('includes version IDs in delete request when objects have versions', ()=>{
+    it('includes version IDs in delete request when objects have versions', async ()=>{
         const objects = createMockObjects(1, true);
         renderDeleteObjectButton({
             objects
@@ -210,8 +232,11 @@ describe('DeleteObjectButton', ()=>{
             name: /delete/i
         });
         fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
         const confirmButton = document.getElementById('object-delete-delete-button');
-        fireEvent.click(confirmButton);
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
         expect(mockDeleteObjects).toHaveBeenCalledWith(expect.objectContaining({
             Delete: {
                 Objects: [
@@ -221,34 +246,77 @@ describe('DeleteObjectButton', ()=>{
                     }
                 ]
             }
-        }), expect.any(Object));
+        }));
     });
-    it('handles mixed objects and folders in delete request', ()=>{
+    it('deletes objects first then attempts folder deletion', async ()=>{
+        const callOrder = [];
+        mockDeleteObjects.mockImplementation(async ()=>{
+            callOrder.push('deleteObjects');
+            return {};
+        });
+        mockDeleteFolder.mockImplementation(async ()=>{
+            callOrder.push('deleteFolder');
+        });
         const mixedObjects = [
             ...createMockObjects(1),
             ...createMockFolders(1)
         ];
         renderDeleteObjectButton({
-            objects: mixedObjects
+            objects: mixedObjects,
+            bucketName: 'my-bucket'
         });
         const deleteButton = screen.getByRole('button', {
             name: /delete/i
         });
         fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
         const confirmButton = document.getElementById('object-delete-delete-button');
-        fireEvent.click(confirmButton);
-        expect(mockDeleteObjects).toHaveBeenCalledWith(expect.objectContaining({
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        expect(mockDeleteObjects).toHaveBeenCalledWith({
+            Bucket: 'my-bucket',
             Delete: {
                 Objects: [
                     {
                         Key: 'file1.txt'
-                    },
-                    {
-                        Key: 'folder1/'
                     }
                 ]
             }
-        }), expect.any(Object));
+        });
+        expect(mockDeleteFolder).toHaveBeenCalledWith({
+            Bucket: 'my-bucket',
+            FolderKey: 'folder1/'
+        });
+        expect(callOrder).toEqual([
+            'deleteObjects',
+            'deleteFolder'
+        ]);
+    });
+    it('only calls deleteFolder for folder-only selection', async ()=>{
+        const folders = createMockFolders(2);
+        renderDeleteObjectButton({
+            objects: folders,
+            bucketName: 'my-bucket'
+        });
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        expect(mockDeleteFolder).toHaveBeenCalledWith({
+            Bucket: 'my-bucket',
+            FolderKey: 'folder1/'
+        });
+        expect(mockDeleteFolder).toHaveBeenCalledWith({
+            Bucket: 'my-bucket',
+            FolderKey: 'folder2/'
+        });
+        expect(mockDeleteObjects).not.toHaveBeenCalled();
     });
     it('shows success toast and closes modal when deletion succeeds', async ()=>{
         renderDeleteObjectButton();
@@ -257,29 +325,184 @@ describe('DeleteObjectButton', ()=>{
         });
         fireEvent.click(deleteButton);
         expect(screen.getByText('Confirmation')).toBeInTheDocument();
+        checkConfirmationCheckbox();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        await waitFor(()=>{
+            expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
+        });
+    });
+    it('shows error when S3 returns Errors in delete response', async ()=>{
+        mockDeleteObjects.mockResolvedValueOnce({
+            Errors: [
+                {
+                    Key: 'file1.txt',
+                    Code: 'AccessDenied',
+                    Message: 'Access Denied because object protected by object lock.'
+                }
+            ]
+        });
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        await waitFor(()=>{
+            expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
+        });
+    });
+    it('shows error toast when deletion fails', async ()=>{
+        mockDeleteObjects.mockRejectedValueOnce(new Error('Access Denied'));
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        await waitFor(()=>{
+            expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
+        });
+    });
+    it('shows error toast when folder deletion fails but still deletes objects', async ()=>{
+        const mixedObjects = [
+            ...createMockObjects(1),
+            ...createMockFolders(1)
+        ];
+        mockDeleteFolder.mockRejectedValueOnce(new Error('Cannot delete folder: The folder is not empty'));
+        renderDeleteObjectButton({
+            objects: mixedObjects
+        });
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
         const confirmButton = document.getElementById('object-delete-delete-button');
-        fireEvent.click(confirmButton);
         await act(async ()=>{
-            const successCallback = mockDeleteObjects.mock.calls[0][1].onSuccess;
-            successCallback();
+            fireEvent.click(confirmButton);
         });
+        expect(mockDeleteObjects).toHaveBeenCalled();
         await waitFor(()=>{
             expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
         });
     });
-    it('handles non-Error objects in error callback', async ()=>{
+    it('shows folder not empty error message', async ()=>{
+        const folders = createMockFolders(1);
+        mockDeleteFolder.mockRejectedValueOnce(new Error('Cannot delete folder: The folder is not empty'));
+        renderDeleteObjectButton({
+            objects: folders
+        });
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        await act(async ()=>{
+            fireEvent.click(confirmButton);
+        });
+        await waitFor(()=>{
+            expect(screen.queryByText('Confirmation')).not.toBeInTheDocument();
+        });
+    });
+    it('invalidates queries after successful deletion', async ()=>{
         renderDeleteObjectButton();
         const deleteButton = screen.getByRole('button', {
             name: /delete/i
         });
         fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
         const confirmButton = document.getElementById('object-delete-delete-button');
-        fireEvent.click(confirmButton);
         await act(async ()=>{
-            const errorCallback = mockDeleteObjects.mock.calls[0][1].onError;
-            errorCallback('string error');
+            fireEvent.click(confirmButton);
+        });
+        await waitFor(()=>{
+            expect(mockInvalidateQueries).toHaveBeenCalledWith({
+                queryKey: [
+                    'ListObjects'
+                ]
+            });
+            expect(mockInvalidateQueries).toHaveBeenCalledWith({
+                queryKey: [
+                    'ListObjectVersions'
+                ]
+            });
+            expect(mockInvalidateQueries).toHaveBeenCalledWith({
+                queryKey: [
+                    'SearchObjects'
+                ]
+            });
+            expect(mockInvalidateQueries).toHaveBeenCalledWith({
+                queryKey: [
+                    'SearchObjectsVersions'
+                ]
+            });
+        });
+    });
+    it('disables delete button until confirmation checkbox is checked for non-versioned bucket', ()=>{
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        expect(confirmButton).toBeDisabled();
+        checkConfirmationCheckbox();
+        expect(confirmButton).not.toBeDisabled();
+    });
+    it('does not show confirmation checkbox for versioned bucket without specific versions', ()=>{
+        mockHookDefaults(true);
+        renderDeleteObjectButton({
+            objects: createMockObjects(2, false)
         });
-        expect(mockDeleteObjects.mock.calls[0][1].onError).toBeDefined();
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        expect(screen.queryByLabelText('Confirm the deletion')).not.toBeInTheDocument();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        expect(confirmButton).not.toBeDisabled();
+    });
+    it('shows confirmation checkbox for versioned bucket with specific versions', ()=>{
+        mockHookDefaults(true);
+        renderDeleteObjectButton({
+            objects: createMockObjects(2, true)
+        });
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        expect(screen.getByLabelText('Confirm the deletion')).toBeInTheDocument();
+        const confirmButton = document.getElementById('object-delete-delete-button');
+        expect(confirmButton).toBeDisabled();
+        checkConfirmationCheckbox();
+        expect(confirmButton).not.toBeDisabled();
+    });
+    it('resets checkbox state on cancel', ()=>{
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        checkConfirmationCheckbox();
+        expect(screen.getByLabelText('Confirm the deletion')).toBeChecked();
+        const cancelButton = screen.getByRole('button', {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        fireEvent.click(deleteButton);
+        expect(screen.getByLabelText('Confirm the deletion')).not.toBeChecked();
     });
     it('updates objects when props change', ()=>{
         const { rerender } = renderDeleteObjectButton({

package/dist/components/__tests__/ObjectList.test.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, renderHook, screen, waitFor, within } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
 import { DataBrowserUICustomizationProvider } from "../../contexts/DataBrowserUICustomizationContext.js";
@@ -226,24 +226,26 @@ describe('ObjectList', ()=>{
         });
     });
     describe('Version Management', ()=>{
-        it('renders List Versions toggle', async ()=>{
+        it('disables List Versions toggle when bucket has no object versions', async ()=>{
+            renderObjectList({
+                bucketName: 'empty-bucket'
+            });
+            await waitFor(()=>{
+                expect(screen.getByLabelText(/show object versions/i)).toBeDisabled();
+            });
+        });
+        it('enables List Versions toggle when bucket has object versions', async ()=>{
             renderObjectList();
             await waitFor(()=>{
-                expect(screen.getByText('List Versions')).toBeInTheDocument();
+                expect(screen.getByLabelText(/show object versions/i)).toBeEnabled();
             });
-            const toggleLabel = screen.getByText(/list versions/i);
-            const toggle = toggleLabel.closest('label')?.querySelector('input[type="checkbox"]');
-            expect(toggle).toBeInTheDocument();
-            expect(toggle).not.toBeChecked();
         });
-        it('shows Version ID column when toggle is enabled', async ()=>{
+        it('shows Version ID column when List Versions is toggled on', async ()=>{
             renderObjectList();
             await waitFor(()=>{
-                expect(screen.getByText('List Versions')).toBeInTheDocument();
+                expect(screen.getByLabelText(/show object versions/i)).toBeEnabled();
             });
-            const toggleLabel = screen.getByText(/list versions/i);
-            const toggle = toggleLabel.closest('label')?.querySelector('input[type="checkbox"]');
-            fireEvent.click(toggle);
+            fireEvent.click(screen.getByLabelText(/show object versions/i));
             await waitFor(()=>{
                 expect(screen.getByText('Version ID')).toBeInTheDocument();
             });
@@ -274,11 +276,9 @@ describe('ObjectList', ()=>{
         it('clears selections when toggling versions', async ()=>{
             renderObjectList();
             await waitFor(()=>{
-                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+                expect(screen.getByLabelText(/show object versions/i)).toBeEnabled();
             });
-            const toggleLabel = screen.getByText(/list versions/i);
-            const toggle = toggleLabel.closest('label')?.querySelector('input[type="checkbox"]');
-            fireEvent.click(toggle);
+            fireEvent.click(screen.getByLabelText(/show object versions/i));
             await waitFor(()=>{
                 expect(screen.getByText('Version ID')).toBeInTheDocument();
             });
@@ -300,14 +300,56 @@ describe('ObjectList', ()=>{
                 type: 'object'
             }));
             onObjectSelect.mockClear();
-            const toggleLabel = screen.getByText(/list versions/i);
-            const toggle = toggleLabel.closest('label')?.querySelector('input[type="checkbox"]');
-            fireEvent.click(toggle);
+            fireEvent.click(screen.getByLabelText(/show object versions/i));
             await waitFor(()=>{
                 expect(screen.getByText('Version ID')).toBeInTheDocument();
             });
             expect(onObjectSelect).toHaveBeenCalledWith(null);
         });
+        it('exits version view when switching to a bucket without versions', async ()=>{
+            const Wrapper = createTestWrapper();
+            const customization = {
+                extraObjectListColumns: [],
+                extraObjectListActions: []
+            };
+            const { rerender } = render(/*#__PURE__*/ jsx(MemoryRouter, {
+                children: /*#__PURE__*/ jsx(Wrapper, {
+                    children: /*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+                        config: customization,
+                        children: /*#__PURE__*/ jsx(ObjectList, {
+                            bucketName: "test-bucket",
+                            prefix: "",
+                            onObjectSelect: jest.fn(),
+                            onPrefixChange: jest.fn()
+                        })
+                    })
+                })
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText(/show object versions/i)).toBeEnabled();
+            });
+            fireEvent.click(screen.getByLabelText(/show object versions/i));
+            await waitFor(()=>{
+                expect(screen.getByText('Version ID')).toBeInTheDocument();
+            });
+            rerender(/*#__PURE__*/ jsx(MemoryRouter, {
+                children: /*#__PURE__*/ jsx(Wrapper, {
+                    children: /*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+                        config: customization,
+                        children: /*#__PURE__*/ jsx(ObjectList, {
+                            bucketName: "empty-bucket",
+                            prefix: "",
+                            onObjectSelect: jest.fn(),
+                            onPrefixChange: jest.fn()
+                        })
+                    })
+                })
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText(/show object versions/i)).toBeDisabled();
+            });
+            expect(screen.queryByText('Version ID')).not.toBeInTheDocument();
+        });
     });
     describe('Search Features', ()=>{
         it('renders SearchInput when metadata-search feature is disabled', async ()=>{
@@ -450,9 +492,10 @@ describe('ObjectList', ()=>{
             await waitFor(()=>{
                 expect(screen.getByText('file1.txt')).toBeInTheDocument();
             });
-            const checkboxes = screen.getAllByRole('checkbox');
-            expect(checkboxes.length).toBeGreaterThan(0);
-            const firstCheckbox = checkboxes[0];
+            const grid = within(screen.getByRole('grid'));
+            const rowCheckboxes = grid.getAllByRole('checkbox');
+            expect(rowCheckboxes.length).toBeGreaterThan(0);
+            const firstCheckbox = rowCheckboxes[0];
             expect(firstCheckbox).not.toBeChecked();
             fireEvent.click(firstCheckbox);
             expect(firstCheckbox).toBeChecked();

package/dist/components/__tests__/UploadButton.test.js

@@ -3,11 +3,31 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user_event from "@testing-library/user-event";
 import { createTestWrapper } from "../../test/testUtils.js";
 import { UploadButton } from "../objects/UploadButton.js";
+const mockMutateAsync = jest.fn();
+jest.mock('../../hooks', ()=>({
+        ...jest.requireActual('../../hooks'),
+        useUploadObjects: ()=>({
+                mutate: jest.fn(),
+                mutateAsync: mockMutateAsync,
+                reset: jest.fn(),
+                isPending: false,
+                isIdle: true,
+                isError: false,
+                isSuccess: false,
+                status: 'idle',
+                data: void 0,
+                error: null
+            })
+    }));
 describe('UploadButton - Core Functionality', ()=>{
     const defaultProps = {
         bucket: 'test-bucket',
         prefix: 'test-prefix'
     };
+    beforeEach(()=>{
+        mockMutateAsync.mockClear();
+        mockMutateAsync.mockResolvedValue({});
+    });
     const renderUploadButton = (props = {})=>{
         const Wrapper = createTestWrapper();
         return render(/*#__PURE__*/ jsx(Wrapper, {
@@ -141,4 +161,64 @@ describe('UploadButton - Core Functionality', ()=>{
             expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
         });
     });
+    const addFileAndUpload = async ()=>{
+        const fileInput = screen.getByRole('presentation').querySelector('input[type="file"]');
+        const testFile = new File([
+            'test content'
+        ], 'test.txt', {
+            type: 'text/plain'
+        });
+        await user_event.upload(fileInput, testFile);
+        await waitFor(()=>expect(screen.getByText('test.txt')).toBeInTheDocument());
+        const uploadButtons = screen.getAllByRole('button', {
+            name: 'Upload'
+        });
+        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector('svg'));
+        fireEvent.click(modalUploadButton);
+    };
+    it('constructs correct key when prefix has trailing slash', async ()=>{
+        renderUploadButton({
+            prefix: 'documents/'
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'documents/test.txt'
+            }));
+        });
+    });
+    it('constructs correct key when prefix has no trailing slash', async ()=>{
+        renderUploadButton({
+            prefix: 'documents'
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'documents/test.txt'
+            }));
+        });
+    });
+    it('constructs correct key when prefix is empty', async ()=>{
+        renderUploadButton({
+            prefix: ''
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'test.txt'
+            }));
+        });
+    });
 });