WIP test(file-uploader): add unit tests

tests/FileUploader.test.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import {
-    FileUploaderButton,
-    FileUploader,
-    FileUploaderDropContainer,
-    FileUploaderItem,
-    FileUploaderSkeleton,
-  } from "carbon-components-svelte";
-  import type { FileUploaderProps } from "carbon-components-svelte/FileUploader/FileUploader.svelte";
-
-  let fileUploader: FileUploader;
-  let files: FileUploaderProps["files"] = [];
-
-  $: {
-    // @ts-expect-error
-    files[0] = null;
-  }
-
-  $: fileUploader?.clearFiles();
-</script>
-
-<FileUploaderButton
-  kind="tertiary"
-  size="xl"
-  labelText="Add files"
-  on:change={(e) => {
-    console.log(e.detail); // File[]
-  }}
-/>
-
-<FileUploader
-  kind="danger-ghost"
-  size="lg"
-  bind:this={fileUploader}
-  multiple
-  labelTitle="Upload files"
-  buttonLabel="Add files"
-  labelDescription="Only JPEG files are accepted."
-  accept={[".jpg", ".jpeg"]}
-  status="complete"
-  bind:files
-  on:add={(e) => {
-    console.log(e.detail); // File[]
-  }}
-  on:remove={(e) => {
-    console.log(e.detail); // File[]
-  }}
-  on:change={(e) => {
-    console.log(e.detail); // File[]
-  }}
-/>
-
-<FileUploaderItem name="README.md" status="uploading" />
-
-<FileUploaderItem name="README.md" status="complete" />
-
-<FileUploaderItem invalid name="README.md" status="edit" />
-
-<FileUploaderDropContainer
-  labelText="Drag and drop files here or click to upload"
-  multiple
-/>
-
-<FileUploaderSkeleton />

tests/FileUploader/FileUploader.test.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { FileUploader } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let status: ComponentProps<FileUploader>["status"] = "uploading";
+  export let disabled = false;
+  export let accept: ComponentProps<FileUploader>["accept"] = [];
+  export let multiple = false;
+  export let labelTitle = "Test Upload";
+  export let labelDescription = "Test Description";
+  export let buttonLabel = "Add File";
+  export let iconDescription = "Test icon";
+  export let name = "test-upload";
+  export let kind: ComponentProps<FileUploader>["kind"] = "primary";
+  export let size: ComponentProps<FileUploader>["size"] = "small";
+</script>
+
+<FileUploader
+  data-testid="file-uploader"
+  {status}
+  {disabled}
+  {accept}
+  {multiple}
+  {labelTitle}
+  {labelDescription}
+  {buttonLabel}
+  {iconDescription}
+  {name}
+  {kind}
+  {size}
+  on:add={(e) => {
+    console.log("add", e.detail);
+  }}
+  on:remove={(e) => {
+    console.log("remove", e.detail);
+  }}
+  on:change={(e) => {
+    console.log("change", e.detail);
+  }}
+/>

tests/FileUploader/FileUploader.test.ts

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/svelte";
+import FileUploaderTest from "./FileUploader.test.svelte";
+
+describe("FileUploader", () => {
+  it("renders with default props", () => {
+    render(FileUploaderTest);
+    const uploader = screen.getByTestId("file-uploader");
+    expect(uploader).toBeInTheDocument();
+    expect(uploader).toHaveClass("bx--form-item");
+  });
+
+  it("renders with custom labels", () => {
+    render(FileUploaderTest, {
+      labelTitle: "Custom Title",
+      labelDescription: "Custom Description",
+      buttonLabel: "Custom Button",
+    });
+
+    expect(screen.getByText("Custom Title")).toBeInTheDocument();
+    expect(screen.getByText("Custom Description")).toBeInTheDocument();
+    expect(screen.getByText("Custom Button")).toBeInTheDocument();
+  });
+
+  it("renders with disabled state", () => {
+    render(FileUploaderTest, { disabled: true });
+    const button = screen.getByLabelText("Add File");
+    expect(button).toHaveAttribute("disabled");
+  });
+});