vultr/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-05-06 06:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: merge responsive navigation shell checks

Browse Source
This commit is contained in:
Peter Steinberger
2026-04-17 18:40:03 +01:00
parent 628e6cd446
commit c2e4b47d7b
1 changed files with 69 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
ui/src/ui/navigation.browser.test.ts
View File

@@ -157,10 +157,12 @@ describe("control UI routing", () => {
expect(app.querySelector(".dreams__lobster")).not.toBeNull();
});
it("renders the refreshed desktop navigation shell and collapsed state", async () => {
it("renders responsive navigation shell, drawer, and collapsed states", async () => {
const app = mountApp("/chat");
await app.updateComplete;
expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
expect(app.querySelector(".topnav-shell")).not.toBeNull();
expect(app.querySelector(".topnav-shell__content")).not.toBeNull();
expect(app.querySelector(".topnav-shell__actions")).not.toBeNull();
@@ -181,6 +183,72 @@ describe("control UI routing", () => {
const shell = app.querySelector<HTMLElement>(".shell");
expect(shell?.style.getPropertyValue("--shell-nav-width")).toBe("");
const split = app.querySelector(".chat-split-container");
expect(split).not.toBeNull();
if (split) {
expect(getComputedStyle(split).position).not.toBe("fixed");
split.classList.add("chat-split-container--open");
await app.updateComplete;
expect(split.classList.contains("chat-split-container--open")).toBe(true);
}
const chatMain = app.querySelector(".chat-main");
expect(chatMain).not.toBeNull();
if (chatMain) {
expect(getComputedStyle(chatMain).display).not.toBe("none");
}
const topShell = app.querySelector<HTMLElement>(".topnav-shell");
const content = app.querySelector<HTMLElement>(".topnav-shell__content");
expect(topShell).not.toBeNull();
expect(content).not.toBeNull();
if (!topShell || !content) {
return;
}
expect(topShell.classList.contains("topnav-shell")).toBe(true);
expect(content.classList.contains("topnav-shell__content")).toBe(true);
expect(topShell.querySelector(".topbar-nav-toggle")).not.toBeNull();
expect(topShell.children[1]).toBe(content);
expect(topShell.querySelector(".topnav-shell__actions")).not.toBeNull();
const toggle = app.querySelector<HTMLElement>(".topbar-nav-toggle");
const actions = app.querySelector<HTMLElement>(".topnav-shell__actions");
expect(toggle).not.toBeNull();
expect(actions).not.toBeNull();
if (!toggle || !actions || !shell) {
return;
}
expect(toggle.classList.contains("topbar-nav-toggle")).toBe(true);
expect(actions.classList.contains("topnav-shell__actions")).toBe(true);
expect(topShell.firstElementChild).toBe(toggle);
expect(topShell.querySelector(".topbar-nav-toggle")).toBe(toggle);
expect(actions.querySelector(".topbar-search")).not.toBeNull();
expect(toggle.getAttribute("aria-label")).toBeTruthy();
const nav = app.querySelector<HTMLElement>(".shell-nav");
expect(nav).not.toBeNull();
if (!nav) {
return;
}
expect(shell.classList.contains("shell--nav-drawer-open")).toBe(false);
toggle.click();
await app.updateComplete;
expect(shell.classList.contains("shell--nav-drawer-open")).toBe(true);
expect(nav.classList.contains("shell-nav")).toBe(true);
expect(toggle.getAttribute("aria-expanded")).toBe("true");
const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/channels"]');
expect(link).not.toBeNull();
link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
await app.updateComplete;
expect(app.tab).toBe("channels");
expect(shell.classList.contains("shell--nav-drawer-open")).toBe(false);
app.applySettings({ ...app.settings, navCollapsed: true });
await app.updateComplete;
@@ -222,94 +290,6 @@ describe("control UI routing", () => {
expect(window.location.search).toBe("?session=agent%3Amain%3Asubagent%3Atask-123");
});
it("keeps chat and nav usable on narrow viewports", async () => {
const app = mountApp("/chat");
await app.updateComplete;
expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
const split = app.querySelector(".chat-split-container");
expect(split).not.toBeNull();
if (split) {
expect(getComputedStyle(split).position).not.toBe("fixed");
}
const chatMain = app.querySelector(".chat-main");
expect(chatMain).not.toBeNull();
if (chatMain) {
expect(getComputedStyle(chatMain).display).not.toBe("none");
}
if (split) {
split.classList.add("chat-split-container--open");
await app.updateComplete;
expect(split.classList.contains("chat-split-container--open")).toBe(true);
}
if (chatMain) {
expect(chatMain).not.toBeNull();
}
});
it("keeps the narrow top navigation and drawer usable", async () => {
const app = mountApp("/chat");
await app.updateComplete;
expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
const shell = app.querySelector<HTMLElement>(".topnav-shell");
const content = app.querySelector<HTMLElement>(".topnav-shell__content");
expect(shell).not.toBeNull();
expect(content).not.toBeNull();
if (!shell || !content) {
return;
}
expect(shell.classList.contains("topnav-shell")).toBe(true);
expect(content.classList.contains("topnav-shell__content")).toBe(true);
expect(shell.querySelector(".topbar-nav-toggle")).not.toBeNull();
expect(shell.children[1]).toBe(content);
expect(shell.querySelector(".topnav-shell__actions")).not.toBeNull();
const toggle = app.querySelector<HTMLElement>(".topbar-nav-toggle");
const actions = app.querySelector<HTMLElement>(".topnav-shell__actions");
expect(toggle).not.toBeNull();
expect(actions).not.toBeNull();
if (!toggle || !actions) {
return;
}
expect(toggle.classList.contains("topbar-nav-toggle")).toBe(true);
expect(actions.classList.contains("topnav-shell__actions")).toBe(true);
expect(shell.firstElementChild).toBe(toggle);
expect(shell.querySelector(".topbar-nav-toggle")).toBe(toggle);
expect(actions.querySelector(".topbar-search")).not.toBeNull();
expect(toggle.getAttribute("aria-label")).toBeTruthy();
const nav = app.querySelector<HTMLElement>(".shell-nav");
const appShell = app.querySelector<HTMLElement>(".shell");
expect(appShell).not.toBeNull();
expect(nav).not.toBeNull();
if (!appShell || !nav) {
return;
}
expect(appShell.classList.contains("shell--nav-drawer-open")).toBe(false);
toggle.click();
await app.updateComplete;
expect(appShell.classList.contains("shell--nav-drawer-open")).toBe(true);
expect(nav.classList.contains("shell-nav")).toBe(true);
expect(toggle.getAttribute("aria-expanded")).toBe("true");
const link = app.querySelector<HTMLAnchorElement>('a.nav-item[href="/channels"]');
expect(link).not.toBeNull();
link?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
await app.updateComplete;
expect(app.tab).toBe("channels");
expect(appShell.classList.contains("shell--nav-drawer-open")).toBe(false);
});
it("auto-scrolls chat history to the latest message", async () => {
vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
queueMicrotask(() => callback(performance.now()));