79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
import { strict as assert } from "node:assert";
|
|
import { readFileSync } from "node:fs";
|
|
import test from "node:test";
|
|
import {
|
|
buildEditorFontThemeRules,
|
|
buildSqlCompletionThemeRules,
|
|
EDITOR_FONT_FAMILY_CSS_VAR,
|
|
EDITOR_FONT_SIZE_CSS_VAR,
|
|
} from "../../apps/desktop/src/lib/editorThemes.ts";
|
|
|
|
test("sql completion theme styles the autocomplete popup", () => {
|
|
const rules = buildSqlCompletionThemeRules();
|
|
|
|
assert.deepEqual(rules[".cm-tooltip.cm-tooltip-autocomplete"], {
|
|
background: "var(--popover)",
|
|
border: "1px solid color-mix(in oklch, var(--border) 82%, var(--foreground) 18%)",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 8px 18px rgb(0 0 0 / 0.14)",
|
|
color: "var(--popover-foreground)",
|
|
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, var(--font-mono, monospace))`,
|
|
maxWidth: "min(520px, calc(100vw - 24px))",
|
|
minWidth: "min(280px, calc(100vw - 24px))",
|
|
overflow: "hidden",
|
|
padding: "4px 0",
|
|
});
|
|
assert.deepEqual(rules[".cm-completionIcon"], {
|
|
alignItems: "center",
|
|
display: "inline-flex",
|
|
flex: "0 0 15px",
|
|
height: "15px",
|
|
justifyContent: "center",
|
|
marginRight: "0.65em",
|
|
opacity: "1",
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
width: "15px",
|
|
});
|
|
assert.equal(rules[".cm-completionIcon:before"]?.backgroundColor, "currentColor");
|
|
assert.equal(rules[".cm-completionIcon:before"]?.content, "''");
|
|
assert.equal(rules[".cm-completionIcon:before"]?.WebkitMaskSize, "14px 14px");
|
|
assert.equal(rules[".cm-completionIcon:after"]?.display, "none");
|
|
assert.equal(rules[".cm-completionIcon-table"]?.color, "color-mix(in oklch, var(--primary) 92%, var(--popover-foreground))");
|
|
assert.equal(rules[".cm-completionIcon-column"]?.color, "color-mix(in oklch, var(--blue-500, #3b82f6) 92%, var(--popover-foreground))");
|
|
assert.equal(rules[".cm-completionIcon-keyword"]?.color, "color-mix(in oklch, var(--orange-500, #f97316) 92%, var(--popover-foreground))");
|
|
assert.equal(rules[".cm-completionIcon-keyword"]?.["--dbx-completion-icon-mask"]?.includes("m16%2018%206-6-6-6"), true);
|
|
assert.equal(rules[".cm-completionIcon-snippet"]?.color, "color-mix(in oklch, var(--emerald-500, #10b981) 92%, var(--popover-foreground))");
|
|
assert.deepEqual(rules[".cm-completionLabel"], {
|
|
color: "inherit",
|
|
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, var(--font-mono, monospace))`,
|
|
fontSize: `clamp(12px, var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px), 14px)`,
|
|
fontWeight: "520",
|
|
letterSpacing: "0",
|
|
});
|
|
assert.equal(rules[".cm-completionMatchedText"]?.color, "oklch(0.62 0.19 255)");
|
|
assert.equal(
|
|
rules[".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]"]?.background,
|
|
"color-mix(in oklch, var(--primary) 14%, var(--popover)) !important",
|
|
);
|
|
});
|
|
|
|
test("query editor portals CodeMirror tooltips outside clipped editor panes", () => {
|
|
const source = readFileSync("apps/desktop/src/components/editor/QueryEditor.vue", "utf8");
|
|
|
|
assert.match(source, /tooltips/);
|
|
assert.match(source, /tooltips\(\{\s*parent:\s*document\.body\s*\}\)/s);
|
|
});
|
|
|
|
test("editor font theme reads size and family from CSS variables", () => {
|
|
const rules = buildEditorFontThemeRules({ fixedHeight: true, scrollable: true });
|
|
|
|
assert.equal(rules["&"]?.height, "100%");
|
|
assert.equal(rules["&"]?.fontSize, `var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px)`);
|
|
assert.deepEqual(rules[".cm-content"], {
|
|
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, monospace)`,
|
|
});
|
|
assert.equal(rules[".cm-gutters"]?.fontSize, `var(${EDITOR_FONT_SIZE_CSS_VAR}, 13px)`);
|
|
assert.deepEqual(rules[".cm-scroller"], { overflow: "auto" });
|
|
});
|