@scality/data-browser-library 1.0.0-preview.2

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

@@ -0,0 +1,302 @@
+import { jsx } from "react/jsx-runtime";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { DeleteObjectButton } from "../objects/DeleteObjectButton.js";
+import { useDeleteObjects, useGetBucketVersioning } from "../../hooks/index.js";
+jest.mock("../../hooks");
+const mockUseDeleteObjects = jest.mocked(useDeleteObjects);
+const mockUseGetBucketVersioning = jest.mocked(useGetBucketVersioning);
+const mockDeleteObjects = jest.fn();
+const createMockObjects = (count, withVersions = false)=>Array.from({
+        length: count
+    }, (_, i)=>({
+            Key: `file${i + 1}.txt`,
+            displayName: `file${i + 1}.txt`,
+            Size: 1024 * (i + 1),
+            LastModified: new Date(`2023-01-${i + 1}T10:00:00Z`),
+            type: "object",
+            ...withVersions && {
+                VersionId: `version-${i + 1}`
+            }
+        }));
+const createMockFolders = (count)=>Array.from({
+        length: count
+    }, (_, i)=>({
+            Key: `folder${i + 1}/`,
+            displayName: `folder${i + 1}/`,
+            type: "folder",
+            LastModified: void 0
+        }));
+const renderDeleteObjectButton = (props = {})=>{
+    const defaultProps = {
+        objects: createMockObjects(2),
+        bucketName: "test-bucket",
+        ...props
+    };
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx(DeleteObjectButton, {
+            ...defaultProps
+        })
+    }));
+};
+const mockHookDefaults = (versioningEnabled = false)=>{
+    mockUseGetBucketVersioning.mockReturnValue({
+        data: {
+            Status: versioningEnabled ? "Enabled" : "Suspended"
+        },
+        isLoading: false,
+        error: null
+    });
+    mockUseDeleteObjects.mockReturnValue({
+        mutate: mockDeleteObjects,
+        isPending: false
+    });
+};
+describe("DeleteObjectButton", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockHookDefaults();
+    });
+    it("renders delete button with correct label and icon", ()=>{
+        renderDeleteObjectButton();
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute("id", "object-list-delete-button");
+    });
+    it("disables button when no objects are selected", ()=>{
+        renderDeleteObjectButton({
+            objects: []
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        expect(button).toBeDisabled();
+    });
+    it("enables button when objects are selected", ()=>{
+        renderDeleteObjectButton();
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        expect(button).not.toBeDisabled();
+    });
+    it("opens confirmation modal when delete button is clicked", ()=>{
+        renderDeleteObjectButton();
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText("Confirmation")).toBeInTheDocument();
+        expect(screen.getByText(/do you want to.*delete/i)).toBeInTheDocument();
+    });
+    it("shows correct confirmation message for objects without versioning", ()=>{
+        renderDeleteObjectButton({
+            objects: createMockObjects(2)
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText((content, _)=>content.includes("2") && content.includes("object"))).toBeInTheDocument();
+    });
+    it("shows correct confirmation message for mixed objects and folders", ()=>{
+        const mixedObjects = [
+            ...createMockObjects(1),
+            ...createMockFolders(1)
+        ];
+        renderDeleteObjectButton({
+            objects: mixedObjects
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/do you want to/i)).toBeInTheDocument();
+        expect(screen.getByText(/delete the selected/i)).toBeInTheDocument();
+    });
+    it("shows permanently delete message for versioned objects with specific versions", ()=>{
+        mockHookDefaults(true);
+        renderDeleteObjectButton({
+            objects: createMockObjects(2, true)
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText("The selected versions will be permanently deleted.")).toBeInTheDocument();
+        expect(screen.getByText(/do you want to/i)).toBeInTheDocument();
+        expect(screen.getByText(/object versions/i)).toBeInTheDocument();
+    });
+    it("displays total size of selected objects", ()=>{
+        const objects = createMockObjects(2);
+        renderDeleteObjectButton({
+            objects
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/total.*3.*kb/i)).toBeInTheDocument();
+    });
+    it("shows info banner with deletion message", ()=>{
+        renderDeleteObjectButton();
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/the selected objects will be permanently deleted/i)).toBeInTheDocument();
+    });
+    it("shows different info message for versioned buckets without specific versions", ()=>{
+        mockHookDefaults(true);
+        renderDeleteObjectButton({
+            objects: createMockObjects(2, false)
+        });
+        const button = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText(/delete markers will be added to the objects/i)).toBeInTheDocument();
+    });
+    it("closes modal when cancel button is clicked", ()=>{
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        expect(screen.queryByText("Confirmation")).not.toBeInTheDocument();
+    });
+    it("calls delete mutation with correct parameters when deletion is confirmed", ()=>{
+        const objects = createMockObjects(2);
+        renderDeleteObjectButton({
+            objects,
+            bucketName: "my-bucket"
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = document.getElementById("object-delete-delete-button");
+        expect(confirmButton).toBeInTheDocument();
+        fireEvent.click(confirmButton);
+        expect(mockDeleteObjects).toHaveBeenCalledWith({
+            Bucket: "my-bucket",
+            Delete: {
+                Objects: [
+                    {
+                        Key: "file1.txt"
+                    },
+                    {
+                        Key: "file2.txt"
+                    }
+                ]
+            }
+        }, expect.objectContaining({
+            onSuccess: expect.any(Function),
+            onError: expect.any(Function)
+        }));
+    });
+    it("includes version IDs in delete request when objects have versions", ()=>{
+        const objects = createMockObjects(1, true);
+        renderDeleteObjectButton({
+            objects
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = document.getElementById("object-delete-delete-button");
+        fireEvent.click(confirmButton);
+        expect(mockDeleteObjects).toHaveBeenCalledWith(expect.objectContaining({
+            Delete: {
+                Objects: [
+                    {
+                        Key: "file1.txt",
+                        VersionId: "version-1"
+                    }
+                ]
+            }
+        }), expect.any(Object));
+    });
+    it("handles mixed objects and folders in delete request", ()=>{
+        const mixedObjects = [
+            ...createMockObjects(1),
+            ...createMockFolders(1)
+        ];
+        renderDeleteObjectButton({
+            objects: mixedObjects
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = document.getElementById("object-delete-delete-button");
+        fireEvent.click(confirmButton);
+        expect(mockDeleteObjects).toHaveBeenCalledWith(expect.objectContaining({
+            Delete: {
+                Objects: [
+                    {
+                        Key: "file1.txt"
+                    },
+                    {
+                        Key: "folder1/"
+                    }
+                ]
+            }
+        }), expect.any(Object));
+    });
+    it("shows success toast and closes modal when deletion succeeds", async ()=>{
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        expect(screen.getByText("Confirmation")).toBeInTheDocument();
+        const confirmButton = document.getElementById("object-delete-delete-button");
+        fireEvent.click(confirmButton);
+        await act(async ()=>{
+            const successCallback = mockDeleteObjects.mock.calls[0][1].onSuccess;
+            successCallback();
+        });
+        await waitFor(()=>{
+            expect(screen.queryByText("Confirmation")).not.toBeInTheDocument();
+        });
+    });
+    it("handles non-Error objects in error callback", async ()=>{
+        renderDeleteObjectButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete/i
+        });
+        fireEvent.click(deleteButton);
+        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");
+        });
+        expect(mockDeleteObjects.mock.calls[0][1].onError).toBeDefined();
+    });
+    it("updates objects when props change", ()=>{
+        const { rerender } = renderDeleteObjectButton({
+            objects: createMockObjects(1)
+        });
+        expect(screen.getByRole("button", {
+            name: /delete/i
+        })).not.toBeDisabled();
+        const Wrapper = createTestWrapper();
+        rerender(/*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(DeleteObjectButton, {
+                objects: [],
+                bucketName: "test-bucket"
+            })
+        }));
+        expect(screen.getByRole("button", {
+            name: /delete/i
+        })).toBeDisabled();
+    });
+});

package/dist/components/__tests__/MetadataSearch.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,201 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { createQueryWrapper } from "../../test/testUtils.js";
+import { MetadataSearch } from "../search/MetadataSearch.js";
+const renderMetadataSearch = (props = {}, initialEntries = [
+    "/bucket/test-bucket"
+])=>{
+    const QueryWrapper = createQueryWrapper();
+    return render(/*#__PURE__*/ jsx(QueryWrapper, {
+        children: /*#__PURE__*/ jsx(MemoryRouter, {
+            initialEntries: initialEntries,
+            children: /*#__PURE__*/ jsx(MetadataSearch, {
+                isError: false,
+                ...props
+            })
+        })
+    }));
+};
+describe("MetadataSearch", ()=>{
+    const getInput = ()=>screen.getByPlaceholderText(/Metadata Search/i);
+    it("renders search input with placeholder", ()=>{
+        renderMetadataSearch();
+        expect(getInput()).toBeInTheDocument();
+        expect(screen.getByPlaceholderText(/Metadata Search/i)).toBeInTheDocument();
+    });
+    it("renders search button", ()=>{
+        renderMetadataSearch();
+        expect(screen.getByRole("button", {
+            name: /execute metadata search/i
+        })).toBeInTheDocument();
+    });
+    it("search button is disabled when input is empty", ()=>{
+        renderMetadataSearch();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        expect(searchButton).toBeDisabled();
+    });
+    it("search button is enabled when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        await user_event.type(input, "test query");
+        expect(searchButton).toBeEnabled();
+    });
+    it("shows search icon by default", ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchIcon = input.parentElement?.querySelector('[aria-label*="Search"]');
+        expect(searchIcon).toBeInTheDocument();
+    });
+    it("shows check icon when metadata search is active", ()=>{
+        renderMetadataSearch({}, [
+            "/bucket/test-bucket?metadatasearch=test"
+        ]);
+        const input = getInput();
+        const checkIcon = input.parentElement?.querySelector('[aria-label*="Check"]');
+        expect(checkIcon).toBeInTheDocument();
+    });
+    it("shows error icon when error prop is true", ()=>{
+        renderMetadataSearch({
+            isError: true
+        });
+        const input = getInput();
+        const errorIcon = input.parentElement?.querySelector('[aria-label*="Close"]');
+        expect(errorIcon).toBeInTheDocument();
+    });
+    it("populates input with existing search query from URL", ()=>{
+        renderMetadataSearch({}, [
+            "/bucket/test-bucket?metadatasearch=existing+query"
+        ]);
+        const input = getInput();
+        expect(input).toHaveValue("existing query");
+    });
+    it("shows reset button when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test query");
+        expect(screen.getByRole("button", {
+            name: /clear search input/i
+        })).toBeInTheDocument();
+    });
+    it("clears input when reset button is clicked", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test query");
+        const resetButton = screen.getByRole("button", {
+            name: /clear search input/i
+        });
+        fireEvent.click(resetButton);
+        expect(input).toHaveValue("");
+    });
+    it("shows hints when input is clicked and empty", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+    });
+    it("does not show hints when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test");
+        fireEvent.click(input);
+        expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+    });
+    it("hides hints when clicking outside", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        fireEvent.mouseDown(document.body);
+        await waitFor(()=>{
+            expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+        });
+    });
+    it("displays search hint examples", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText('files with extension ".pdf"')).toBeInTheDocument();
+            expect(screen.getByText("files bigger than 1MB")).toBeInTheDocument();
+            expect(screen.getByText("files tagged with color blue")).toBeInTheDocument();
+        });
+    });
+    it("applies hint to input when hint is clicked", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        const pdfHint = screen.getByText('files with extension ".pdf"');
+        fireEvent.click(pdfHint);
+        expect(input).toHaveValue("key like /pdf$/");
+        expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+    });
+    it("focuses input after hint is selected", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        const hint = screen.getByText("files bigger than 1MB");
+        fireEvent.click(hint);
+        expect(input).toHaveFocus();
+    });
+    it("submits search when form is submitted", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        await user_event.type(input, "content-type=application/pdf");
+        fireEvent.click(searchButton);
+        expect(input).toHaveValue("content-type=application/pdf");
+    });
+    it("submits search when Enter key is pressed", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "key like /test$/");
+        fireEvent.submit(input.closest("form"));
+        expect(input).toHaveValue("key like /test$/");
+    });
+    it("is hidden when prefix points to a file", ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/file.txt"
+        ]);
+        const form = container.querySelector("form");
+        expect(form).toHaveStyle({
+            visibility: "hidden"
+        });
+    });
+    it("is hidden when prefix is a folder", ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/"
+        ]);
+        const form = container.querySelector("form");
+        expect(form).toHaveStyle({
+            visibility: "hidden"
+        });
+    });
+    it("prevents search submission when prefix points to a file", async ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/file.txt"
+        ]);
+        const input = getInput();
+        const searchButton = container.querySelector('button[type="submit"]');
+        await user_event.type(input, "test query");
+        expect(searchButton).toBeDisabled();
+    });
+});

package/dist/components/__tests__/ObjectList.test.d.ts

@@ -0,0 +1 @@
+export {};