d68fe3e9f8
Keep agent detail tabs usable without page-wide horizontal scrolling at tablet widths. - Make the agent detail tabs row horizontally scrollable with hidden scrollbars and touch momentum. - Prevent tab labels from wrapping so the tab strip can overflow within its own container. - Add a regression test covering tablet-width tab overflow styles. Files changed: .../dashboard/app/components/AgentDetailView.css | 8 +++++ .../AgentDetailView.mobile-scroll.test.tsx | 34 +++++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-6209 Fusion-Task-Lineage: 7646bea2-b63a-460f-813b-cf9808680d46
82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { render, waitFor } from "@testing-library/react";
|
|
import "@testing-library/jest-dom";
|
|
import { loadAllAppCss, loadAllAppCssBaseOnly } 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");
|
|
});
|
|
|
|
it("tabs are horizontally scrollable at tablet widths (FN-6209)", async () => {
|
|
Object.defineProperty(window, "matchMedia", {
|
|
configurable: true,
|
|
writable: true,
|
|
value: vi.fn().mockImplementation((query: string) => ({
|
|
matches: false,
|
|
media: query,
|
|
onchange: null,
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
});
|
|
|
|
const style = document.head.querySelector("style[data-testid='fn-4231-css']") as HTMLStyleElement;
|
|
style.textContent = loadAllAppCssBaseOnly();
|
|
|
|
render(<AgentDetailView agentId="agent-001" onClose={vi.fn()} addToast={vi.fn()} />);
|
|
|
|
await waitFor(() => {
|
|
expect(document.querySelector(".agent-detail-tabs")).toBeTruthy();
|
|
});
|
|
|
|
const tabsEl = document.querySelector(".agent-detail-tabs") as HTMLElement;
|
|
const tabEl = document.querySelector(".agent-detail-tab") as HTMLElement;
|
|
|
|
expect(window.getComputedStyle(tabsEl).overflowX).toBe("auto");
|
|
expect(window.getComputedStyle(tabEl).whiteSpace).toBe("nowrap");
|
|
});
|
|
});
|