File size: 4,523 Bytes
246d201 |
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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ModelSelector } from "#/components/shared/modals/settings/model-selector";
import { I18nKey } from "#/i18n/declaration";
// Mock react-i18next
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: { [key: string]: string } = {
LLM$PROVIDER: "LLM Provider",
LLM$MODEL: "LLM Model",
LLM$SELECT_PROVIDER_PLACEHOLDER: "Select a provider",
LLM$SELECT_MODEL_PLACEHOLDER: "Select a model",
};
return translations[key] || key;
},
}),
}));
describe("ModelSelector", () => {
const models = {
openai: {
separator: "/",
models: ["gpt-4o", "gpt-4o-mini"],
},
azure: {
separator: "/",
models: ["ada", "gpt-35-turbo"],
},
vertex_ai: {
separator: "/",
models: ["chat-bison", "chat-bison-32k"],
},
cohere: {
separator: ".",
models: ["command-r-v1:0"],
},
};
it("should display the provider selector", async () => {
const user = userEvent.setup();
render(<ModelSelector models={models} />);
const selector = screen.getByLabelText("LLM Provider");
expect(selector).toBeInTheDocument();
await user.click(selector);
expect(screen.getByText("OpenAI")).toBeInTheDocument();
expect(screen.getByText("Azure")).toBeInTheDocument();
expect(screen.getByText("VertexAI")).toBeInTheDocument();
expect(screen.getByText("cohere")).toBeInTheDocument();
});
it("should disable the model selector if the provider is not selected", async () => {
const user = userEvent.setup();
render(<ModelSelector models={models} />);
const modelSelector = screen.getByLabelText("LLM Model");
expect(modelSelector).toBeDisabled();
const providerSelector = screen.getByLabelText("LLM Provider");
await user.click(providerSelector);
const vertexAI = screen.getByText("VertexAI");
await user.click(vertexAI);
expect(modelSelector).not.toBeDisabled();
});
it("should display the model selector", async () => {
const user = userEvent.setup();
render(<ModelSelector models={models} />);
const providerSelector = screen.getByLabelText("LLM Provider");
await user.click(providerSelector);
const azureProvider = screen.getByText("Azure");
await user.click(azureProvider);
const modelSelector = screen.getByLabelText("LLM Model");
await user.click(modelSelector);
expect(screen.getByText("ada")).toBeInTheDocument();
expect(screen.getByText("gpt-35-turbo")).toBeInTheDocument();
await user.click(providerSelector);
const vertexProvider = screen.getByText("VertexAI");
await user.click(vertexProvider);
await user.click(modelSelector);
// Test fails when expecting these values to be present.
// My hypothesis is that it has something to do with NextUI's
// list virtualization
// expect(screen.getByText("chat-bison")).toBeInTheDocument();
// expect(screen.getByText("chat-bison-32k")).toBeInTheDocument();
});
it("should call onModelChange when the model is changed", async () => {
const user = userEvent.setup();
render(<ModelSelector models={models} />);
const providerSelector = screen.getByLabelText("LLM Provider");
const modelSelector = screen.getByLabelText("LLM Model");
await user.click(providerSelector);
await user.click(screen.getByText("Azure"));
await user.click(modelSelector);
await user.click(screen.getByText("ada"));
await user.click(modelSelector);
await user.click(screen.getByText("gpt-35-turbo"));
await user.click(providerSelector);
await user.click(screen.getByText("cohere"));
await user.click(modelSelector);
// Test fails when expecting this values to be present.
// My hypothesis is that it has something to do with NextUI's
// list virtualization
// await user.click(screen.getByText("command-r-v1:0"));
});
it("should have a default value if passed", async () => {
render(<ModelSelector models={models} currentModel="azure/ada" />);
expect(screen.getByLabelText("LLM Provider")).toHaveValue("Azure");
expect(screen.getByLabelText("LLM Model")).toHaveValue("ada");
});
});
|