Files
openclaw/ui/vitest.config.ts
T
Vyctor H. Brzezowski 32ced3053d fix(ui): scope the Control UI cursor convention to app-like display modes (#121258)
* fix(ui): scope the Control UI cursor convention to app-like display modes

The app-chrome cursor convention from #103357/#103411 was applied
unconditionally, so an ordinary browser tab lost the pointer hand on
buttons, menus, tabs, rails, selects and accordion summaries — the only
hover affordance a page owns. The convention is correct for the installed
window the manifest declares ("display": "standalone"), not for every
window the same bundle is served into.

base.css now owns one policy token, --cursor-action, selected by display
mode: pointer by default, the desktop arrow under standalone, minimal-ui
and window-controls-overlay. A low-specificity rule maps generic
actionable controls onto that token, restoring the affordance on the
surfaces #103411 stripped bare, while every component rule that owns a
semantic cursor (not-allowed, disabled, grab, resize, zoom-in, text,
wait) keeps winning without !important.

The 92 cursor: pointer declarations that had drifted back into ui/src
since July now consume the token instead of hardcoding the hand, so they
stop contradicting the policy in an installed window. Real hyperlinks
keep the pointer in every mode. The pre-boot mount fallback repeats the
policy locally because it must render when the bundle fails to load.

Closes #121242

* test(ui): run the cursor policy browser test in the node-driven project

ui/vitest.config.ts routes Playwright-from-Node .browser.test.ts files to the
unit-node project; without registering the new cursor policy test there, the
in-browser chromium project tried to import it and failed on node:fs/playwright.

* fix(ui): keep the desktop arrow in the native app hosts

The macOS dashboard embeds the Control UI in a plain web view, which
reports `display-mode: browser`, so the display-mode-only policy would
have handed it the browser-tab pointer. It already announces itself with
`openclaw-native-macos`/`-nav`/`-web-chrome` on `<html>`, the same markers
`ui/src/styles/layout.css` matches on, so the policy reads those too.
2026-08-09 22:23:00 -03:00

220 lines
7.3 KiB
TypeScript

// Control UI config module wires vitest behavior.
import { spawnSync } from "node:child_process";
import { existsSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { playwright } from "@vitest/browser-playwright";
import { chromium } from "playwright";
import { defineConfig, defineProject } from "vitest/config";
import {
jsdomOptimizedDeps,
resolveDefaultVitestPool,
} from "../test/vitest/vitest.shared.config.ts";
import { uiIsolatedTestFiles } from "../test/vitest/vitest.ui-isolated-paths.mjs";
import { controlUiLocaleModulesPlugin } from "./config/control-ui-locales.ts";
const here = path.dirname(fileURLToPath(import.meta.url));
const repoRoot = path.resolve(here, "..");
const workspaceSourceAliases = [
{
find: "@openclaw/gateway-client/browser",
replacement: path.resolve(repoRoot, "packages/gateway-client/src/browser.ts"),
},
{
find: /^@openclaw\/gateway-protocol\/(.+)$/u,
replacement: path.resolve(repoRoot, "packages/gateway-protocol/src/$1.ts"),
},
{
find: /^@openclaw\/(gateway-protocol|retry)$/u,
replacement: path.resolve(repoRoot, "packages/$1/src/index.ts"),
},
{
find: "../logging/redact.js",
replacement: path.resolve(here, "src/lib/browser-redact.ts"),
},
{
find: "openclaw/plugin-sdk/test-fixtures",
replacement: path.resolve(repoRoot, "src/plugin-sdk/test-fixtures.ts"),
},
{
find: /^@openclaw\/model-catalog-core\/(.+)$/u,
replacement: path.resolve(repoRoot, "packages/model-catalog-core/src/$1.ts"),
},
{
find: "@openclaw/model-catalog-core",
replacement: path.resolve(repoRoot, "packages/model-catalog-core/src/index.ts"),
},
{
find: /^@openclaw\/normalization-core\/(.+)$/u,
replacement: path.resolve(repoRoot, "packages/normalization-core/src/$1"),
},
{
find: "@openclaw/normalization-core",
replacement: path.resolve(repoRoot, "packages/normalization-core/src/index.ts"),
},
{
find: /^@openclaw\/media-core\/(.+)$/u,
replacement: path.resolve(repoRoot, "packages/media-core/src/$1"),
},
{
find: "@openclaw/media-core",
replacement: path.resolve(repoRoot, "packages/media-core/src/index.ts"),
},
{
find: "@openclaw/session-url-contract/parse",
replacement: path.resolve(repoRoot, "packages/session-url-contract/src/parse.ts"),
},
{
find: "@openclaw/session-url-contract",
replacement: path.resolve(repoRoot, "packages/session-url-contract/src/index.ts"),
},
{
find: "@openclaw/workboard-contract",
replacement: path.resolve(repoRoot, "packages/workboard-contract/src/index.ts"),
},
{
find: /^@openclaw\/net-policy\/(.+)$/u,
replacement: path.resolve(repoRoot, "packages/net-policy/src/$1"),
},
{
find: "@openclaw/net-policy",
replacement: path.resolve(repoRoot, "packages/net-policy/src/index.ts"),
},
];
const sharedUiTestConfig = {
isolate: false,
pool: resolveDefaultVitestPool(),
// Real-Chromium layout tests exceed Vitest's 5s default on 4vcpu CI runners;
// without this the checks-ui lane flakes on cold hover/interaction tests.
testTimeout: 60_000,
hookTimeout: 60_000,
} as const;
const nodeDrivenBrowserLayoutTests = [
"src/ui/chat/sidebar-session-picker.browser.test.ts",
"src/pages/chat/chat-responsive.browser.test.ts",
"src/components/form-controls.browser.test.ts",
"src/pages/sessions/view.browser.test.ts",
"src/styles/cursor-policy.browser.test.ts",
] as const;
const mockRegistryUnitTests = [
...uiIsolatedTestFiles.map((testFile) => testFile.slice("ui/".length)),
"src/components/mcp-app-view.test.ts",
"src/pages/chat/chat-page.test.ts",
] as const;
const chromiumExecutableOverrideEnvKey = "PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH";
const systemChromiumExecutableCandidates = [
"/snap/bin/chromium",
"/usr/bin/chromium-browser",
"/usr/bin/chromium",
"/usr/bin/google-chrome",
"/usr/bin/google-chrome-stable",
] as const;
function canRunChromiumExecutable(executablePath: string): boolean {
const result = spawnSync(executablePath, ["--version"], { stdio: "ignore" });
return result.status === 0;
}
function resolveChromiumLaunchOptions(): { executablePath: string } | undefined {
const override = process.env[chromiumExecutableOverrideEnvKey]?.trim();
if (override && existsSync(override) && canRunChromiumExecutable(override)) {
return { executablePath: override };
}
const defaultExecutablePath = chromium.executablePath();
if (existsSync(defaultExecutablePath) && canRunChromiumExecutable(defaultExecutablePath)) {
return undefined;
}
const systemExecutablePath = systemChromiumExecutableCandidates.find(
(candidate) => existsSync(candidate) && canRunChromiumExecutable(candidate),
);
return systemExecutablePath ? { executablePath: systemExecutablePath } : undefined;
}
const chromiumLaunchOptions = resolveChromiumLaunchOptions();
export default defineConfig({
resolve: {
alias: workspaceSourceAliases,
},
test: {
...sharedUiTestConfig,
projects: [
defineProject({
plugins: [controlUiLocaleModulesPlugin()],
resolve: {
alias: workspaceSourceAliases,
},
test: {
...sharedUiTestConfig,
deps: jsdomOptimizedDeps,
name: "unit",
include: ["src/**/*.test.ts"],
exclude: [
"src/**/*.browser.test.ts",
"src/**/*.e2e.test.ts",
"src/**/*.node.test.ts",
...mockRegistryUnitTests,
],
environment: "jsdom",
setupFiles: ["./src/test-helpers/lit-warnings.setup.ts"],
},
}),
defineProject({
plugins: [controlUiLocaleModulesPlugin()],
resolve: {
alias: workspaceSourceAliases,
},
test: {
...sharedUiTestConfig,
// Reuse the canonical singleton-sensitive list so the package and
// root runners isolate the same tests without slowing the main suite.
isolate: true,
deps: jsdomOptimizedDeps,
name: "unit-mock-registry",
include: [...mockRegistryUnitTests],
environment: "jsdom",
setupFiles: ["./src/test-helpers/lit-warnings.setup.ts"],
},
}),
defineProject({
plugins: [controlUiLocaleModulesPlugin()],
resolve: {
alias: workspaceSourceAliases,
},
test: {
...sharedUiTestConfig,
deps: jsdomOptimizedDeps,
name: "unit-node",
include: ["src/**/*.node.test.ts", ...nodeDrivenBrowserLayoutTests],
environment: "jsdom",
setupFiles: ["./src/test-helpers/lit-warnings.setup.ts"],
},
}),
defineProject({
plugins: [controlUiLocaleModulesPlugin()],
resolve: {
alias: workspaceSourceAliases,
},
test: {
...sharedUiTestConfig,
name: "browser",
include: ["src/**/*.browser.test.ts"],
exclude: [...nodeDrivenBrowserLayoutTests],
setupFiles: ["./src/test-helpers/lit-warnings.setup.ts"],
browser: {
enabled: true,
provider: playwright(
chromiumLaunchOptions ? { launchOptions: chromiumLaunchOptions } : {},
),
instances: [{ browser: "chromium", name: "chromium" }],
headless: true,
ui: false,
},
},
}),
],
},
});