diff --git a/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx index ff71abc209311f5c7a2b2621ecb6c776a9b1982e..31839707a31778a6667b237b6cec53d0f45c806a 100644 --- a/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx +++ b/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx @@ -79,8 +79,15 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = ( (actionButtonProps: ActionButtonItem, index: number) => { - const { children, label, resetStyles, className, style, onClick } = - actionButtonProps; + const { + disabled, + children, + label, + resetStyles, + className, + style, + onClick, + } = actionButtonProps; return ( <MaterialButton key={index} diff --git a/tests/Dropone.test.tsx b/tests/Dropone.test.tsx index 7b8c72aebe2c439296880fdd0c10baff8c2e4111..e0e2143763aa9642477c76822d5ed49b5d14d9e2 100644 --- a/tests/Dropone.test.tsx +++ b/tests/Dropone.test.tsx @@ -8,3 +8,27 @@ test("Validate label text must be 'Drop yor files here...'", () => { render(<Dropzone> Drop yor files here...</Dropzone>); expect(screen.getByText("Drop yor files here...")).toBeInTheDocument(); }); + +describe("Dropzone actionButtons", () => { + test.each([ + [{ uploadButton: { onClick: console.log } }, false], + [{ uploadButton: { onClick: console.log, disabled: false } }, false], + [{ uploadButton: { onClick: console.log, disabled: true } }, true], + [{ deleteButton: { onClick: console.log } }, false], + [{ deleteButton: { onClick: console.log, disabled: false } }, false], + [{ deleteButton: { onClick: console.log, disabled: true } }, true], + + // abortButton and cleanButton need more interaction + ])("disabled %s -> %s", (config, expected) => { + const { container } = render( + <Dropzone actionButtons={{ position: "after", ...config }} />, + ); + expect( + ( + container.querySelector( + ".files-ui-buttons-container button", + ) as HTMLInputElement + ).disabled, + ).toBe(expected); + }); +});