Clément Fiere
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it } from "vitest";
|
|
import { ModelFallbackSettingsShell } from "./model-fallback-settings-shell";
|
|
|
|
afterEach(cleanup);
|
|
|
|
function renderShell({ autoFallback = false, fallbackModel = "", isDirty = false } = {}) {
|
|
return render(
|
|
<ModelFallbackSettingsShell
|
|
autoFallback={autoFallback}
|
|
fallbackModel={fallbackModel}
|
|
isDirty={isDirty}
|
|
automaticOption={<span>Automatic option</span>}
|
|
explicitOption={<span>Explicit option</span>}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
describe("ModelFallbackSettingsShell", () => {
|
|
it("starts collapsed with a state summary", () => {
|
|
renderShell({ fallbackModel: "gpt-5", isDirty: true });
|
|
|
|
expect(
|
|
screen.getByTestId("profile-fallback-settings-trigger").getAttribute("aria-expanded"),
|
|
).toBe("false");
|
|
expect(screen.getByTestId("profile-fallback-settings-summary").textContent).toContain(
|
|
"Explicit fallback: gpt-5",
|
|
);
|
|
expect(
|
|
screen
|
|
.getByTestId("profile-fallback-settings")
|
|
.firstElementChild?.getAttribute("data-settings-dirty"),
|
|
).toBe("true");
|
|
expect(screen.queryByTestId("profile-fallback-settings-grid")).toBeNull();
|
|
});
|
|
|
|
it("reveals both fallback options in the responsive grid", () => {
|
|
renderShell({ autoFallback: true });
|
|
|
|
fireEvent.click(screen.getByTestId("profile-fallback-settings-trigger"));
|
|
|
|
expect(
|
|
screen.getByTestId("profile-fallback-settings-trigger").getAttribute("aria-expanded"),
|
|
).toBe("true");
|
|
expect(screen.getByTestId("profile-fallback-settings-grid").className).toContain(
|
|
"md:grid-cols-2",
|
|
);
|
|
expect(screen.getByTestId("profile-auto-fallback-option").textContent).toContain(
|
|
"Automatic option",
|
|
);
|
|
expect(screen.getByTestId("profile-explicit-fallback-option").textContent).toContain(
|
|
"Explicit option",
|
|
);
|
|
});
|
|
});
|