test(frontend): add TestBed-based tests for HuggingFaceAudioUploadComponent

Add meaningful tests: reject non-audio files, successful upload sets
formControl value, and concurrent upload guard prevents race conditions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ELin2025

frontend/src/app/workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component.spec.ts

@@ -17,10 +17,74 @@
  * under the License.
  */
 
+import { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
+import { FormControl } from "@angular/forms";
+import { FieldTypeConfig } from "@ngx-formly/core";
 import { HuggingFaceAudioUploadComponent } from "./hugging-face-audio-upload.component";
 
-describe("HuggingFaceAudioUploadComponent (unit)", () => {
+describe("HuggingFaceAudioUploadComponent", () => {
+  let component: HuggingFaceAudioUploadComponent;
+  let httpTestingController: HttpTestingController;
+  let formControl: FormControl;
+
+  function makeFileEvent(file: File | null): Event {
+    const input = document.createElement("input");
+    if (file) {
+      Object.defineProperty(input, "files", { value: [file] });
+    }
+    return { target: input } as unknown as Event;
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HuggingFaceAudioUploadComponent, HttpClientTestingModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(HuggingFaceAudioUploadComponent);
+    component = fixture.componentInstance;
+    formControl = new FormControl("");
+    component.field = { formControl } as FieldTypeConfig;
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
   it("should be defined", () => {
-    expect(HuggingFaceAudioUploadComponent).toBeDefined();
+    expect(component).toBeDefined();
+  });
+
+  it("should reject a non-audio file", async () => {
+    const file = new File(["data"], "doc.pdf", { type: "application/pdf" });
+    await component.onFileSelected(makeFileEvent(file));
+
+    expect(component.errorMessage).toBe("Choose an audio file.");
+    expect(formControl.value).toBe("");
+  });
+
+  it("should upload an audio file and set formControl value", async () => {
+    const file = new File(["audio-data"], "clip.wav", { type: "audio/wav" });
+    const uploadPromise = component.onFileSelected(makeFileEvent(file));
+
+    const req = httpTestingController.expectOne(
+      r => r.method === "POST" && r.url.includes("/huggingface/upload-audio")
+    );
+    req.flush({ path: "/tmp/clip.wav", fileName: "clip.wav" });
+    await uploadPromise;
+
+    expect(formControl.value).toBe("/tmp/clip.wav");
+    expect(component.fileName).toBe("clip.wav");
+    expect(component.isUploading).toBe(false);
+  });
+
+  it("should guard against concurrent uploads", async () => {
+    component.isUploading = true;
+    const file = new File(["audio-data"], "clip.wav", { type: "audio/wav" });
+    await component.onFileSelected(makeFileEvent(file));
+
+    httpTestingController.expectNone(r => r.url.includes("/huggingface/upload-audio"));
+    expect(formControl.value).toBe("");
   });
 });