FIX: ActionButtonItem.label not working #26

Author: TimmFitschen

src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx

@@ -37,28 +37,28 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
     cleanButton
       ? {
           ...cleanButton,
-          label: "Clean",
+          label: cleanButton.label || "Clean",
           onClick: cleanButton.onClick || onClean,
         }
       : undefined,
     deleteButton
       ? {
           ...deleteButton,
-          label: "Delete",
+          label: deleteButton.label || "Delete",
           onClick: deleteButton.onClick || onDelete,
         }
       : undefined,
     uploadButton
       ? {
           ...uploadButton,
-          label: "Upload",
+          label: uploadButton.label || "Upload",
           onClick: uploadButton.onClick || onUpload,
         }
       : undefined,
     abortButton
       ? {
           ...abortButton,
-          label: "Abort",
+          label: abortButton.label || "Abort",
           onClick: abortButton.onClick || onAbort,
         }
       : undefined,

tests/Dropone.test.tsx

@@ -8,3 +8,26 @@ 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 } }, "Upload"],
+    [{ uploadButton: { label: undefined, onClick: console.log } }, "Upload"],
+    [{ uploadButton: { label: null, onClick: console.log } }, "Upload"],
+    [{ uploadButton: { label: "my label", onClick: console.log } }, "my label"],
+    [{ deleteButton: { label: null, onClick: console.log } }, "Delete"],
+    [
+      { deleteButton: { label: "my delete label", onClick: console.log } },
+      "my delete label",
+    ],
+
+    // abortButton and cleanButton need more interaction
+  ])("label %s -> %s", (config, expected) => {
+    const { container } = render(
+      <Dropzone actionButtons={{ position: "after", ...config }} />,
+    );
+    expect(
+      container.querySelector(".files-ui-buttons-container button").textContent,
+    ).toBe(expected);
+  });
+});