File size: 3,185 Bytes
3dd591f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import DialogComposer from "@/components/DialogComposer";
import type { ModelInfo } from "@/lib/api";
const models: ModelInfo[] = [
{
id: "chatterbox-en",
label: "Chatterbox (English)",
description: "",
languages: [{ code: "en", label: "English" }],
paralinguistic_tags: [],
supports_voice_clone: true,
params: [
{ name: "temperature", label: "Temperature", type: "float", default: 0.8, min: 0.1, max: 1.5, step: 0.05, group: "basic" },
],
},
{
id: "chatterbox-mtl",
label: "Chatterbox Multilingual",
description: "",
languages: [
{ code: "en", label: "English" },
{ code: "fr", label: "French" },
],
paralinguistic_tags: [],
supports_voice_clone: true,
params: [
{ name: "exaggeration", label: "Exaggeration", type: "float", default: 0.5, min: 0, max: 2, step: 0.05, group: "basic" },
],
},
];
describe("DialogComposer", () => {
it("starts with two speaker slots A and B", () => {
render(
<DialogComposer
models={models}
engineId="chatterbox-en"
onEngineChange={() => {}}
onSubmit={() => {}}
loadingModel={false}
busy={false}
/>,
);
expect(screen.getByLabelText(/speaker a voice/i)).toBeInTheDocument();
expect(screen.getByLabelText(/speaker b voice/i)).toBeInTheDocument();
expect(screen.queryByLabelText(/speaker c voice/i)).toBeNull();
});
it("adds speaker C when + add speaker is clicked", () => {
render(
<DialogComposer
models={models}
engineId="chatterbox-en"
onEngineChange={() => {}}
onSubmit={() => {}}
loadingModel={false}
busy={false}
/>,
);
fireEvent.click(screen.getByRole("button", { name: /add speaker/i }));
expect(screen.getByLabelText(/speaker c voice/i)).toBeInTheDocument();
});
it("does not allow more than 4 speakers", () => {
render(
<DialogComposer
models={models}
engineId="chatterbox-en"
onEngineChange={() => {}}
onSubmit={() => {}}
loadingModel={false}
busy={false}
/>,
);
fireEvent.click(screen.getByRole("button", { name: /add speaker/i })); // C
fireEvent.click(screen.getByRole("button", { name: /add speaker/i })); // D
expect(screen.queryByRole("button", { name: /add speaker/i })).toBeNull();
});
it("renders the language picker only when mtl engine is active", () => {
const { rerender } = render(
<DialogComposer
models={models}
engineId="chatterbox-en"
onEngineChange={() => {}}
onSubmit={() => {}}
loadingModel={false}
busy={false}
/>,
);
expect(screen.queryByLabelText(/^language$/i)).toBeNull();
rerender(
<DialogComposer
models={models}
engineId="chatterbox-mtl"
onEngineChange={() => {}}
onSubmit={() => {}}
loadingModel={false}
busy={false}
/>,
);
expect(screen.getByLabelText(/^language$/i)).toBeInTheDocument();
});
});
|