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

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

@@ -0,0 +1,147 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { CreateFolderButton } from "../objects/CreateFolderButton.js";
+describe("CreateFolderButton", ()=>{
+    const defaultProps = {
+        bucket: "test-bucket",
+        prefix: "test-prefix"
+    };
+    const renderCreateFolderButton = (props = {})=>{
+        const Wrapper = createTestWrapper();
+        return render(/*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(CreateFolderButton, {
+                ...defaultProps,
+                ...props
+            })
+        }));
+    };
+    it("renders button with default label", ()=>{
+        renderCreateFolderButton();
+        expect(screen.getByRole("button", {
+            name: /folder/i
+        })).toBeInTheDocument();
+    });
+    it("renders button with custom label", ()=>{
+        renderCreateFolderButton({
+            label: "Add New Folder"
+        });
+        expect(screen.getByRole("button", {
+            name: /add new folder/i
+        })).toBeInTheDocument();
+    });
+    it("opens modal when button is clicked", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>{
+            expect(screen.getByText("Create a folder")).toBeInTheDocument();
+        });
+    });
+    it("closes modal when cancel button is clicked", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        fireEvent.click(screen.getByRole("button", {
+            name: /cancel/i
+        }));
+        await waitFor(()=>{
+            expect(screen.queryByText("Create a folder")).not.toBeInTheDocument();
+        });
+    });
+    it("disables save button when folder name is empty", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        expect(screen.getByRole("button", {
+            name: /save/i
+        })).toBeDisabled();
+    });
+    it("enables save button when valid folder name is entered", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        await user_event.type(screen.getByRole("textbox"), "valid-folder");
+        expect(screen.getByRole("button", {
+            name: /save/i
+        })).toBeEnabled();
+    });
+    it("disables save button and shows error when folder name starts with slash", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        await user_event.type(screen.getByRole("textbox"), "/invalid-folder");
+        expect(screen.getByRole("button", {
+            name: /save/i
+        })).toBeDisabled();
+    });
+    it("triggers mutation when save is clicked with valid folder name", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        await user_event.type(screen.getByRole("textbox"), "test-folder");
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        expect(saveButton).toBeEnabled();
+        fireEvent.click(saveButton);
+        expect(screen.getByText("Create a folder")).toBeInTheDocument();
+    });
+    it("clears folder name when modal is closed", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        await user_event.type(screen.getByRole("textbox"), "test-folder");
+        fireEvent.click(screen.getByRole("button", {
+            name: /cancel/i
+        }));
+        await waitFor(()=>{
+            expect(screen.queryByText("Create a folder")).not.toBeInTheDocument();
+        });
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        expect(screen.getByRole("textbox")).toHaveValue("");
+    });
+    it("shows info message about folder creation", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        expect(screen.getByText("Creating a folder")).toBeInTheDocument();
+        expect(screen.getByText(/ensure the folder name does not begin with a slash/i)).toBeInTheDocument();
+    });
+    it("handles folder name validation correctly", async ()=>{
+        renderCreateFolderButton();
+        fireEvent.click(screen.getByRole("button", {
+            name: /folder/i
+        }));
+        await waitFor(()=>screen.getByText("Create a folder"));
+        const input = screen.getByRole("textbox");
+        const saveButton = screen.getByRole("button", {
+            name: /save/i
+        });
+        expect(saveButton).toBeDisabled();
+        await user_event.type(input, "valid-folder");
+        expect(saveButton).toBeEnabled();
+        await user_event.clear(input);
+        await user_event.type(input, "/invalid");
+        expect(saveButton).toBeDisabled();
+    });
+});

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

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

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

@@ -0,0 +1,272 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { DeleteBucketButton } from "../buckets/DeleteBucketButton.js";
+import { useIsBucketEmpty } from "../../hooks/useIsBucketEmpty.js";
+import { useDeleteBucket } from "../../hooks/bucketOperations.js";
+jest.mock("../../hooks/useIsBucketEmpty");
+jest.mock("../../hooks/bucketOperations");
+const mockUseIsBucketEmpty = jest.mocked(useIsBucketEmpty);
+const mockUseDeleteBucket = jest.mocked(useDeleteBucket);
+const renderDeleteBucketButton = (props = {})=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx(DeleteBucketButton, {
+            bucketName: "test-bucket",
+            ...props
+        })
+    }));
+};
+const mockDeleteBucket = jest.fn();
+const mockHookDefaults = ()=>{
+    mockUseIsBucketEmpty.mockReturnValue({
+        isEmpty: true,
+        isLoading: false,
+        error: null
+    });
+    mockUseDeleteBucket.mockReturnValue({
+        mutate: mockDeleteBucket,
+        status: "idle"
+    });
+};
+describe("DeleteBucketButton", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockHookDefaults();
+    });
+    it("renders delete button with correct label", ()=>{
+        renderDeleteBucketButton();
+        expect(screen.getByRole("button", {
+            name: /delete bucket/i
+        })).toBeInTheDocument();
+    });
+    it("enables button when bucket is empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: true,
+            isLoading: false,
+            error: null
+        });
+        renderDeleteBucketButton();
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        expect(button).not.toBeDisabled();
+    });
+    it("disables button when bucket is not empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: false,
+            isLoading: false,
+            error: null
+        });
+        renderDeleteBucketButton();
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        expect(button).toBeDisabled();
+    });
+    it("disables button when checking if bucket is empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: null,
+            isLoading: true,
+            error: null
+        });
+        renderDeleteBucketButton();
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        expect(button).toBeDisabled();
+    });
+    it("disables button when disabled prop is true", ()=>{
+        renderDeleteBucketButton({
+            disabled: true
+        });
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        expect(button).toBeDisabled();
+    });
+    it("shows tooltip when bucket is not empty", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: false,
+            isLoading: false,
+            error: null
+        });
+        renderDeleteBucketButton();
+        expect(screen.getByRole("button", {
+            name: /delete bucket/i
+        })).toBeInTheDocument();
+    });
+    it("shows checking tooltip when loading", ()=>{
+        mockUseIsBucketEmpty.mockReturnValue({
+            isEmpty: null,
+            isLoading: true,
+            error: null
+        });
+        renderDeleteBucketButton();
+        expect(screen.getByRole("button", {
+            name: /delete bucket/i
+        })).toBeInTheDocument();
+    });
+    it("opens confirmation modal when button is clicked", ()=>{
+        renderDeleteBucketButton();
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByText("Confirmation")).toBeInTheDocument();
+        expect(screen.getByText(/are you sure you want to delete bucket: test-bucket/i)).toBeInTheDocument();
+    });
+    it("shows cancel and delete buttons in modal", ()=>{
+        renderDeleteBucketButton();
+        const button = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(button);
+        expect(screen.getByRole("button", {
+            name: /cancel/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole("button", {
+            name: /^delete$/i
+        })).toBeInTheDocument();
+    });
+    it("closes modal when cancel is clicked", ()=>{
+        renderDeleteBucketButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/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 when delete is confirmed", ()=>{
+        renderDeleteBucketButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        fireEvent.click(confirmButton);
+        expect(mockDeleteBucket).toHaveBeenCalledWith({
+            Bucket: "test-bucket"
+        }, expect.objectContaining({
+            onSuccess: expect.any(Function),
+            onError: expect.any(Function)
+        }));
+    });
+    it("calls onDeleteSuccess callback when delete succeeds", ()=>{
+        const onDeleteSuccess = jest.fn();
+        renderDeleteBucketButton({
+            onDeleteSuccess
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        fireEvent.click(confirmButton);
+        const successCallback = mockDeleteBucket.mock.calls[0][1].onSuccess;
+        successCallback();
+        expect(onDeleteSuccess).toHaveBeenCalledWith("test-bucket");
+    });
+    it("calls onDeleteError callback when delete fails", ()=>{
+        const onDeleteError = jest.fn();
+        const testError = new Error("Delete failed");
+        renderDeleteBucketButton({
+            onDeleteError
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        fireEvent.click(confirmButton);
+        const errorCallback = mockDeleteBucket.mock.calls[0][1].onError;
+        errorCallback(testError);
+        expect(onDeleteError).toHaveBeenCalledWith(testError);
+    });
+    it("handles non-Error objects in onError callback", ()=>{
+        const onDeleteError = jest.fn();
+        renderDeleteBucketButton({
+            onDeleteError
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        fireEvent.click(confirmButton);
+        const errorCallback = mockDeleteBucket.mock.calls[0][1].onError;
+        errorCallback("string error");
+        expect(onDeleteError).toHaveBeenCalledWith(new Error("Delete failed"));
+    });
+    it("closes modal when delete succeeds", async ()=>{
+        renderDeleteBucketButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        expect(screen.getByText("Confirmation")).toBeInTheDocument();
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        fireEvent.click(confirmButton);
+        const successCallback = mockDeleteBucket.mock.calls[0][1].onSuccess;
+        successCallback();
+        await waitFor(()=>{
+            expect(screen.queryByText("Confirmation")).not.toBeInTheDocument();
+        });
+    });
+    it("shows loading state in delete button when deletion is pending", ()=>{
+        mockUseDeleteBucket.mockReturnValue({
+            mutate: mockDeleteBucket,
+            status: "pending"
+        });
+        renderDeleteBucketButton();
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        const confirmButton = screen.getByRole("button", {
+            name: /^delete$/i
+        });
+        expect(confirmButton).toBeDisabled();
+    });
+    it("works without optional callbacks", ()=>{
+        expect(()=>{
+            renderDeleteBucketButton();
+            const deleteButton = screen.getByRole("button", {
+                name: /delete bucket/i
+            });
+            fireEvent.click(deleteButton);
+            const confirmButton = screen.getByRole("button", {
+                name: /^delete$/i
+            });
+            fireEvent.click(confirmButton);
+            const successCallback = mockDeleteBucket.mock.calls[0][1].onSuccess;
+            const errorCallback = mockDeleteBucket.mock.calls[0][1].onError;
+            successCallback();
+            errorCallback(new Error("test"));
+        }).not.toThrow();
+    });
+    it("displays correct bucket name in confirmation message", ()=>{
+        renderDeleteBucketButton({
+            bucketName: "my-special-bucket"
+        });
+        const deleteButton = screen.getByRole("button", {
+            name: /delete bucket/i
+        });
+        fireEvent.click(deleteButton);
+        expect(screen.getByText(/are you sure you want to delete bucket: my-special-bucket/i)).toBeInTheDocument();
+    });
+});

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

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