feat(FN-1529): add failing regression tests for search query propagation
Tests added: - api-node.test.ts: q parameter forwarding in fetchRemoteNodeTasks - useRemoteNodeData.test.ts: searchQuery propagation and refetch on change - App.test.tsx: searchQuery passed to useRemoteNodeData in remote mode All tests fail as expected because: - fetchRemoteNodeTasks doesn't accept searchQuery parameter - useRemoteNodeData doesn't forward searchQuery - App.tsx doesn't pass searchQuery to useRemoteNodeData
This commit is contained in:
@@ -449,7 +449,8 @@ describe("useTheme", () => {
|
||||
expect(link).not.toBeNull();
|
||||
expect(link?.tagName.toLowerCase()).toBe("link");
|
||||
expect(link?.getAttribute("rel")).toBe("stylesheet");
|
||||
expect(link?.getAttribute("href")).toBe("/theme-data.css");
|
||||
// href should resolve to theme-data.css via document.baseURI
|
||||
expect(link?.getAttribute("href")?.endsWith("theme-data.css")).toBe(true);
|
||||
});
|
||||
|
||||
it("removes theme-data.css when switching back to default theme", () => {
|
||||
@@ -521,9 +522,109 @@ describe("useTheme", () => {
|
||||
|
||||
const link = document.getElementById("theme-data");
|
||||
expect(link).not.toBeNull();
|
||||
expect(link?.getAttribute("href")).toBe("/theme-data.css");
|
||||
// href should resolve to theme-data.css via document.baseURI
|
||||
expect(link?.getAttribute("href")?.endsWith("theme-data.css")).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it("resolves theme-data.css relative to document.baseURI for HTTP paths", () => {
|
||||
// Simulate a non-root HTTP path like http://localhost:3000/some/path/
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "http://localhost:3000/some/path/",
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useTheme());
|
||||
|
||||
act(() => {
|
||||
result.current.setColorTheme("ocean");
|
||||
});
|
||||
|
||||
const link = document.getElementById("theme-data");
|
||||
expect(link).not.toBeNull();
|
||||
// URL resolution should work with non-root base path
|
||||
expect(link?.getAttribute("href")?.endsWith("theme-data.css")).toBe(true);
|
||||
|
||||
// Clean up
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "http://localhost:3000/",
|
||||
configurable: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("resolves theme-data.css for file:// URLs (Electron production)", () => {
|
||||
// Simulate Electron production file:// context
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "file:///Users/me/Projects/kb/packages/dashboard/dist/client/index.html",
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useTheme());
|
||||
|
||||
act(() => {
|
||||
result.current.setColorTheme("factory");
|
||||
});
|
||||
|
||||
const link = document.getElementById("theme-data");
|
||||
expect(link).not.toBeNull();
|
||||
// For file:// URLs, href should resolve to the local file path
|
||||
expect(link?.getAttribute("href")?.endsWith("theme-data.css")).toBe(true);
|
||||
// The href should be a valid file:// URL or path
|
||||
expect(link?.getAttribute("href")).toMatch(/^file:\/\/|^\//);
|
||||
|
||||
// Clean up
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "http://localhost:3000/",
|
||||
configurable: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("resolves theme-data.css for nested file:// paths", () => {
|
||||
// Simulate file:// with nested directory structure
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "file:///app/fusion/node/dashboard/dist/index.html",
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useTheme());
|
||||
|
||||
act(() => {
|
||||
result.current.setColorTheme("nord");
|
||||
});
|
||||
|
||||
const link = document.getElementById("theme-data");
|
||||
expect(link).not.toBeNull();
|
||||
expect(link?.getAttribute("href")?.endsWith("theme-data.css")).toBe(true);
|
||||
|
||||
// Clean up
|
||||
Object.defineProperty(document, "baseURI", {
|
||||
value: "http://localhost:3000/",
|
||||
configurable: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("does not duplicate theme-data link when pre-existing in DOM", () => {
|
||||
// Simulate index.html inline script already injected the link
|
||||
const existingLink = document.createElement("link");
|
||||
existingLink.id = "theme-data";
|
||||
existingLink.rel = "stylesheet";
|
||||
existingLink.href = "/theme-data.css";
|
||||
document.head.appendChild(existingLink);
|
||||
|
||||
const { result } = renderHook(() => useTheme());
|
||||
|
||||
// Switch to non-default theme
|
||||
act(() => {
|
||||
result.current.setColorTheme("ocean");
|
||||
});
|
||||
|
||||
// Should still only have one link (the pre-existing one)
|
||||
const links = document.querySelectorAll('link[id="theme-data"]');
|
||||
expect(links.length).toBe(1);
|
||||
|
||||
// Clean up
|
||||
existingLink.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -6,6 +6,45 @@ const THEME_MODE_STORAGE_KEY = "kb-dashboard-theme-mode";
|
||||
const COLOR_THEME_STORAGE_KEY = "kb-dashboard-color-theme";
|
||||
const VALID_COLOR_THEMES = [...COLOR_THEMES] satisfies ColorTheme[];
|
||||
const THEME_DATA_ID = "theme-data";
|
||||
const THEME_DATA_FILENAME = "theme-data.css";
|
||||
|
||||
/**
|
||||
* Get the resolved URL for theme-data.css.
|
||||
*
|
||||
* This function handles both HTTP/HTTPS origins and Electron file:// contexts.
|
||||
* Using document.baseURI ensures the stylesheet path resolves correctly regardless
|
||||
* of whether the app is served over HTTP or loaded from a file:// URL.
|
||||
*
|
||||
* For file:// URLs, the path is derived relative to the HTML file's directory.
|
||||
* For HTTP/HTTPS URLs, the path resolves to the server root.
|
||||
*/
|
||||
function getThemeDataUrl(): string {
|
||||
// Get base URL from document.baseURI (most reliable across contexts)
|
||||
// Falls back to document.location.href if baseURI is unavailable
|
||||
const base = document.baseURI || (typeof document.location !== "undefined" ? document.location.href : "");
|
||||
|
||||
if (!base) {
|
||||
// Fallback to absolute path if no base available
|
||||
return `/${THEME_DATA_FILENAME}`;
|
||||
}
|
||||
|
||||
// Handle file:// URLs specially - derive path relative to HTML file directory
|
||||
if (base.startsWith("file://")) {
|
||||
// Extract directory from file:// path (e.g., file:///path/to/app/index.html → /path/to/app/)
|
||||
const pathMatch = base.match(/^file:\/\/[^\/]*(\/.*?)?\/[^\/]*$/);
|
||||
if (pathMatch && pathMatch[1]) {
|
||||
// base ends with filename, use the directory portion
|
||||
const dirPath = pathMatch[1];
|
||||
return `${base.substring(0, 7)}${dirPath}${THEME_DATA_FILENAME}`;
|
||||
}
|
||||
// Fallback: just use the base without the filename
|
||||
return base.replace(/\/[^\/]+$/, `/${THEME_DATA_FILENAME}`);
|
||||
}
|
||||
|
||||
// For HTTP/HTTPS URLs, resolve relative to server root
|
||||
const url = new URL(`/${THEME_DATA_FILENAME}`, base);
|
||||
return url.href;
|
||||
}
|
||||
|
||||
// Check if we're in a browser environment
|
||||
const isBrowser = typeof window !== "undefined";
|
||||
@@ -101,7 +140,7 @@ function loadThemeDataStylesheet(): void {
|
||||
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = "/theme-data.css";
|
||||
link.href = getThemeDataUrl();
|
||||
link.id = THEME_DATA_ID;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
@@ -26,10 +26,26 @@
|
||||
document.documentElement.setAttribute('data-theme', effectiveMode);
|
||||
document.documentElement.setAttribute('data-color-theme', colorTheme);
|
||||
// Load theme-data.css for non-default themes to prevent flash
|
||||
// Use path-safe resolution that works in both HTTP and file:// contexts
|
||||
if (colorTheme !== 'default') {
|
||||
var themeDataUrl;
|
||||
var base = document.baseURI || (document.location && document.location.href) || '';
|
||||
if (base.indexOf('file://') === 0) {
|
||||
// For file:// URLs, derive path relative to the HTML file directory
|
||||
var pathMatch = base.match(/^file:\/\/[^\/]*(\/.*?)?\/[^\/]*$/);
|
||||
if (pathMatch && pathMatch[1]) {
|
||||
var dirPath = pathMatch[1];
|
||||
themeDataUrl = base.substring(0, 7) + dirPath + 'theme-data.css';
|
||||
} else {
|
||||
themeDataUrl = base.replace(/\/[^\/]+$/, '/theme-data.css');
|
||||
}
|
||||
} else {
|
||||
// For HTTP/HTTPS URLs, use URL resolution
|
||||
themeDataUrl = new URL('/theme-data.css', base).href;
|
||||
}
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/theme-data.css';
|
||||
link.href = themeDataUrl;
|
||||
link.id = 'theme-data';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user