Restored mobile scroll behavior in AgentDetailView with a CSS fix and added a regression test to guard against future breakage. Fusion-Task-Id: FN-4231
50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { render, waitFor } from "@testing-library/react";
|
|
import "@testing-library/jest-dom";
|
|
import { loadAllAppCss } from "../../test/cssFixture";
|
|
import { setupAgentDetailMocks } from "./AgentDetailView.test-helpers";
|
|
import { AgentDetailView } from "../AgentDetailView";
|
|
|
|
describe("AgentDetailView mobile scroll regression (FN-4231)", () => {
|
|
beforeEach(() => {
|
|
setupAgentDetailMocks();
|
|
document.head.querySelector("style[data-testid='fn-4231-css']")?.remove();
|
|
const style = document.createElement("style");
|
|
style.setAttribute("data-testid", "fn-4231-css");
|
|
style.textContent = loadAllAppCss();
|
|
document.head.appendChild(style);
|
|
|
|
Object.defineProperty(window, "matchMedia", {
|
|
configurable: true,
|
|
writable: true,
|
|
value: vi.fn().mockImplementation((query: string) => ({
|
|
matches: query.includes("max-width: 768px"),
|
|
media: query,
|
|
onchange: null,
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
});
|
|
});
|
|
|
|
it("keeps AgentDetailView tab body as the mobile scroll owner (FN-4231)", async () => {
|
|
render(<AgentDetailView agentId="agent-001" onClose={vi.fn()} addToast={vi.fn()} />);
|
|
|
|
await waitFor(() => {
|
|
expect(document.querySelector(".agent-detail-content")).toBeTruthy();
|
|
});
|
|
|
|
const contentEl = document.querySelector(".agent-detail-content") as HTMLElement;
|
|
const tabsEl = document.querySelector(".agent-detail-tabs") as HTMLElement;
|
|
const footerEl = document.querySelector(".agent-detail-footer") as HTMLElement;
|
|
|
|
expect(window.getComputedStyle(contentEl).minHeight).toBe("0px");
|
|
expect(window.getComputedStyle(contentEl).overflowY).toBe("auto");
|
|
expect(window.getComputedStyle(tabsEl).flexShrink).toBe("0");
|
|
expect(window.getComputedStyle(footerEl).flexShrink).toBe("0");
|
|
});
|
|
});
|