fix(ui): repair router_settings tests broken by full antd mock

The antd mocks in RouterSettingsForm.test.tsx and index.test.tsx
replaced the entire antd module with only Select, so the Switch and
Button used by nested components failed to render. Use importOriginal
to preserve the rest of antd and override only Select.

Also fix the TagFilteringToggle click assertion — antd's Switch fires
onChange with (checked, event), so toHaveBeenCalledWith(true) was
always going to miss. Assert the checked arg directly instead of
coupling to antd's call signature.
This commit is contained in:
Ryan Crabbe 2026-04-16 14:04:33 -07:00
parent 72be35f9b8
commit 260679679f
No known key found for this signature in database
3 changed files with 46 additions and 36 deletions

View File

@ -4,25 +4,30 @@ import userEvent from "@testing-library/user-event";
import RouterSettingsForm from "./RouterSettingsForm";
import type { RouterSettingsFormValue } from "./RouterSettingsForm";
// Use the same antd mock as RoutingStrategySelector to keep things consistent
vi.mock("antd", () => ({
Select: Object.assign(
({ value, onChange, children }: any) => (
<select
data-testid="strategy-select"
value={value ?? ""}
onChange={(e) => onChange(e.target.value)}
>
{children}
</select>
),
{
Option: ({ value, children }: any) => (
<option value={value}>{children}</option>
// Override antd Select (complex to drive in JSDOM) while preserving the rest
// of antd (Switch, Button, etc.) so nested components render normally.
vi.mock("antd", async (importOriginal) => {
const actual = await importOriginal<typeof import("antd")>();
return {
...actual,
Select: Object.assign(
({ value, onChange, children }: any) => (
<select
data-testid="strategy-select"
value={value ?? ""}
onChange={(e) => onChange(e.target.value)}
>
{children}
</select>
),
}
),
}));
{
Option: ({ value, children }: any) => (
<option value={value}>{children}</option>
),
}
),
};
});
const defaultValue: RouterSettingsFormValue = {
routerSettings: {},

View File

@ -90,6 +90,7 @@ describe("TagFilteringToggle", () => {
await user.click(screen.getByRole("switch"));
expect(onToggle).toHaveBeenCalledWith(true);
expect(onToggle).toHaveBeenCalledTimes(1);
expect(onToggle.mock.calls[0][0]).toBe(true);
});
});

View File

@ -3,24 +3,28 @@ import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils"
import userEvent from "@testing-library/user-event";
import RouterSettings from "./index";
vi.mock("antd", () => ({
Select: Object.assign(
({ value, onChange, children }: any) => (
<select
data-testid="strategy-select"
value={value ?? ""}
onChange={(e) => onChange(e.target.value)}
>
{children}
</select>
),
{
Option: ({ value, children }: any) => (
<option value={value}>{children}</option>
vi.mock("antd", async (importOriginal) => {
const actual = await importOriginal<typeof import("antd")>();
return {
...actual,
Select: Object.assign(
({ value, onChange, children }: any) => (
<select
data-testid="strategy-select"
value={value ?? ""}
onChange={(e) => onChange(e.target.value)}
>
{children}
</select>
),
}
),
}));
{
Option: ({ value, children }: any) => (
<option value={value}>{children}</option>
),
}
),
};
});
vi.mock("@/components/networking", () => ({
getCallbacksCall: vi.fn(),