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

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

@@ -0,0 +1,415 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { createTestWrapper, mockOffsetSize } from "../../test/testUtils.js";
+import { BucketList } from "../buckets/BucketList.js";
+const renderBucketList = (props = {})=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(BucketList, {
+                buckets: [],
+                ...props
+            })
+        })
+    }));
+};
+const mockBuckets = [
+    {
+        Name: "test-bucket-1",
+        CreationDate: new Date("2024-01-15T10:30:00Z")
+    },
+    {
+        Name: "test-bucket-2",
+        CreationDate: new Date("2024-01-16T14:45:00Z")
+    },
+    {
+        Name: "test-bucket-3",
+        CreationDate: new Date("2024-01-17T09:15:00Z")
+    }
+];
+describe("BucketList", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockOffsetSize(800, 600);
+    });
+    it("shows a table with proper headers", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        expect(screen.getByRole("grid")).toBeInTheDocument();
+        expect(screen.getByText("Bucket Name")).toBeInTheDocument();
+        expect(screen.getByText("Storage Location")).toBeInTheDocument();
+        expect(screen.getByText("Created on")).toBeInTheDocument();
+    });
+    it("displays buckets with their names as clickable links", ()=>{
+        const onNavigateToBucket = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onNavigateToBucket
+        });
+        expect(screen.getByText("test-bucket-1")).toBeInTheDocument();
+        expect(screen.getByText("test-bucket-2")).toBeInTheDocument();
+        expect(screen.getByText("test-bucket-3")).toBeInTheDocument();
+        fireEvent.click(screen.getByText("test-bucket-1"));
+        expect(onNavigateToBucket).toHaveBeenCalledWith("test-bucket-1");
+    });
+    it("displays creation dates in formatted format", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        const gridElement = screen.getByRole("grid");
+        expect(gridElement).toHaveTextContent("2024");
+        const dateElements = screen.getAllByText(/2024/);
+        expect(dateElements.length).toBeGreaterThanOrEqual(3);
+    });
+    it("shows storage location when renderBucketLocation is provided", ()=>{
+        const renderBucketLocation = jest.fn((bucketName)=>/*#__PURE__*/ jsxs("span", {
+                children: [
+                    "Location for ",
+                    bucketName
+                ]
+            }));
+        renderBucketList({
+            buckets: mockBuckets,
+            renderBucketLocation
+        });
+        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-1");
+        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-2");
+        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-3");
+    });
+    it("shows dash for storage location when renderBucketLocation is not provided", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        const dashes = screen.getAllByText("-");
+        expect(dashes.length).toBeGreaterThan(0);
+    });
+    it("handles bucket selection when onBucketSelect is provided", ()=>{
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onBucketSelect
+        });
+        const rows = screen.getAllByRole("row");
+        fireEvent.click(rows[1]);
+        expect(onBucketSelect).toHaveBeenCalledWith("test-bucket-3");
+    });
+    it("shows selected bucket when selectedBucketName is provided", ()=>{
+        renderBucketList({
+            buckets: mockBuckets,
+            selectedBucketName: "test-bucket-2"
+        });
+        const selectedRow = screen.getByRole("row", {
+            name: /test-bucket-2/
+        });
+        expect(selectedRow).toHaveAttribute("aria-selected", "true");
+    });
+    it("handles create bucket button click", ()=>{
+        const onCreateBucket = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onCreateBucket
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create bucket/i
+        });
+        expect(createButton).toBeInTheDocument();
+        fireEvent.click(createButton);
+        expect(onCreateBucket).toHaveBeenCalled();
+    });
+    it("shows search functionality", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        const searchInput = screen.getByRole("searchbox");
+        expect(searchInput).toBeInTheDocument();
+        expect(searchInput).toHaveAttribute("placeholder", "Example: Search");
+    });
+    it("handles empty buckets list", ()=>{
+        renderBucketList({
+            buckets: []
+        });
+        expect(screen.getByRole("grid")).toBeInTheDocument();
+        expect(screen.getByText("Bucket Name")).toBeInTheDocument();
+    });
+    it("handles buckets without names gracefully", ()=>{
+        const bucketsWithMissingNames = [
+            {
+                Name: void 0,
+                CreationDate: new Date()
+            },
+            {
+                Name: "",
+                CreationDate: new Date()
+            },
+            {
+                Name: "valid-bucket",
+                CreationDate: new Date()
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithMissingNames
+        });
+        expect(screen.getByText("valid-bucket")).toBeInTheDocument();
+        const dashes = screen.getAllByText("-");
+        expect(dashes.length).toBeGreaterThan(0);
+    });
+    it("handles buckets without creation dates", ()=>{
+        const bucketsWithoutDates = [
+            {
+                Name: "bucket-1",
+                CreationDate: void 0
+            },
+            {
+                Name: "bucket-2"
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithoutDates
+        });
+        expect(screen.getByText("bucket-1")).toBeInTheDocument();
+        expect(screen.getByText("bucket-2")).toBeInTheDocument();
+    });
+    it("works when no callbacks are provided", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        expect(()=>{
+            fireEvent.click(screen.getByText("test-bucket-1"));
+            const createButton = screen.getByRole("button", {
+                name: /create bucket/i
+            });
+            fireEvent.click(createButton);
+        }).not.toThrow();
+    });
+    it("handles different bucket statuses", ()=>{
+        expect(()=>{
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "loading"
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "error"
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "success"
+            });
+        }).not.toThrow();
+    });
+    it("prevents event propagation when clicking bucket name link", ()=>{
+        const onNavigateToBucket = jest.fn();
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onNavigateToBucket,
+            onBucketSelect
+        });
+        fireEvent.click(screen.getByText("test-bucket-1"));
+        expect(onNavigateToBucket).toHaveBeenCalledWith("test-bucket-1");
+        expect(onBucketSelect).not.toHaveBeenCalled();
+    });
+    it("does not select already selected bucket", ()=>{
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            selectedBucketName: "test-bucket-1",
+            onBucketSelect
+        });
+        const bucketName = screen.getByText("test-bucket-1");
+        fireEvent.click(bucketName.closest('[role="row"]') || bucketName);
+        expect(onBucketSelect).not.toHaveBeenCalled();
+    });
+    describe("additionalColumns support", ()=>{
+        it("renders additional columns when additionalColumns prop is provided", ()=>{
+            const additionalColumns = [
+                {
+                    Header: "Metrics",
+                    accessor: "metrics",
+                    id: "metrics",
+                    Cell: ()=>/*#__PURE__*/ jsx("span", {
+                            children: "Metrics Data"
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns
+            });
+            expect(screen.getByText("Metrics")).toBeInTheDocument();
+            expect(screen.getAllByText("Metrics Data")).toHaveLength(3);
+        });
+        it("renders multiple additional columns in correct order", ()=>{
+            const additionalColumns = [
+                {
+                    Header: "Column A",
+                    accessor: "columnA",
+                    id: "columnA",
+                    Cell: ()=>/*#__PURE__*/ jsx("span", {
+                            children: "A"
+                        })
+                },
+                {
+                    Header: "Column B",
+                    accessor: "columnB",
+                    id: "columnB",
+                    Cell: ()=>/*#__PURE__*/ jsx("span", {
+                            children: "B"
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns
+            });
+            const headers = screen.getAllByRole("columnheader");
+            const headerTexts = headers.map((h)=>h.textContent);
+            expect(headerTexts).toContain("Bucket Name");
+            expect(headerTexts).toContain("Storage Location");
+            expect(headerTexts).toContain("Column A");
+            expect(headerTexts).toContain("Column B");
+            expect(headerTexts).toContain("Created on");
+            const bucketNameIndex = headerTexts.indexOf("Bucket Name");
+            const storageLocationIndex = headerTexts.indexOf("Storage Location");
+            const columnAIndex = headerTexts.indexOf("Column A");
+            const columnBIndex = headerTexts.indexOf("Column B");
+            const createdOnIndex = headerTexts.indexOf("Created on");
+            expect(bucketNameIndex).toBeLessThan(storageLocationIndex);
+            expect(storageLocationIndex).toBeLessThan(columnAIndex);
+            expect(columnAIndex).toBeLessThan(columnBIndex);
+            expect(columnBIndex).toBeLessThan(createdOnIndex);
+        });
+        it("works without additional columns (backward compatibility)", ()=>{
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            const headers = screen.getAllByRole("columnheader");
+            const headerTexts = headers.map((h)=>h.textContent);
+            expect(headerTexts).toContain("Bucket Name");
+            expect(headerTexts).toContain("Storage Location");
+            expect(headerTexts).toContain("Created on");
+            expect(headerTexts).toHaveLength(3);
+        });
+    });
+    describe("transformBucketData support", ()=>{
+        it("transforms bucket data when transformBucketData is provided", ()=>{
+            const transformBucketData = jest.fn((bucket)=>({
+                    ...bucket,
+                    metrics: {
+                        value: 100
+                    }
+                }));
+            const additionalColumns = [
+                {
+                    Header: "Metrics",
+                    accessor: "metrics",
+                    id: "metrics",
+                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
+                            children: [
+                                "Value: ",
+                                value.value
+                            ]
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns,
+                transformBucketData
+            });
+            expect(transformBucketData).toHaveBeenCalledTimes(3);
+            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[0]);
+            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[1]);
+            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[2]);
+        });
+        it("renders transformed data in additional columns", ()=>{
+            const transformBucketData = (bucket)=>({
+                    ...bucket,
+                    metrics: {
+                        value: "test-bucket-1" === bucket.Name ? 50 : 100
+                    }
+                });
+            const additionalColumns = [
+                {
+                    Header: "Metrics",
+                    accessor: "metrics",
+                    id: "metrics",
+                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
+                            children: [
+                                "Metric: ",
+                                value.value
+                            ]
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns,
+                transformBucketData
+            });
+            expect(screen.getByText("Metric: 50")).toBeInTheDocument();
+            expect(screen.getAllByText("Metric: 100")).toHaveLength(2);
+        });
+        it("works without transformBucketData (uses default behavior)", ()=>{
+            const additionalColumns = [
+                {
+                    Header: "Test Column",
+                    accessor: "Name",
+                    id: "testColumn",
+                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
+                            children: [
+                                "Name: ",
+                                value
+                            ]
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns
+            });
+            expect(screen.getByText("Name: test-bucket-1")).toBeInTheDocument();
+            expect(screen.getByText("Name: test-bucket-2")).toBeInTheDocument();
+            expect(screen.getByText("Name: test-bucket-3")).toBeInTheDocument();
+        });
+    });
+    describe("generic type support", ()=>{
+        it("maintains type safety with extended bucket types", ()=>{
+            const transformBucketData = (bucket)=>({
+                    ...bucket,
+                    customField: `Custom ${bucket.Name}`,
+                    numericField: 42
+                });
+            const additionalColumns = [
+                {
+                    Header: "Custom",
+                    accessor: "customField",
+                    id: "custom",
+                    Cell: ({ value })=>/*#__PURE__*/ jsx("span", {
+                            children: value
+                        })
+                },
+                {
+                    Header: "Number",
+                    accessor: "numericField",
+                    id: "numeric",
+                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
+                            children: [
+                                "Num: ",
+                                value
+                            ]
+                        })
+                }
+            ];
+            renderBucketList({
+                buckets: mockBuckets,
+                additionalColumns,
+                transformBucketData
+            });
+            expect(screen.getByText("Custom test-bucket-1")).toBeInTheDocument();
+            expect(screen.getAllByText("Num: 42")).toHaveLength(3);
+        });
+    });
+});

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

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