Files
gridline/src/lib/types.test.ts
T
adrianbonpin 1f081a66e0 feat: Schema Visualizer, docs update & competitor comparison
* chore: add @xyflow/react, dagre, @types/dagre (Task 1)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship types (Task 2)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship Rust models (Task 3)

* feat: add cardinality color/label helpers and legend data (Task 4)

* feat: add schema_graph command skeleton with validation (Task 5)

* feat: add PostgreSQL schema graph query builder + cardinality inference (Task 6)

* feat: implement get_schema_graph for PostgreSQL + SQLite (Task 7)

* feat: add getSchemaGraph IPC wrapper (Task 8)

* feat: un-stub Schema Visualizer nav + add view branch placeholder (Task 9)

* feat: add SchemaVisualizerNode custom React Flow table card (Task 10)

* feat: add SchemaVisualizerPage with React Flow canvas (Task 11)

* feat: wire SchemaVisualizerPage + error handling + style polish (Tasks 12-14)

* perf: replace information_schema with pg_catalog for schema graph query (500x+ faster on remote PG)

* fix: add DB selector, ghost-style dropdowns, dark controls, minimap styling, attribution

* fix: always show schema selector, move attribution to top-left

* fix: SelectDropdown close on outside click works in React Flow (capture phase)

* style: remove border from attribution badge

* style: restore bg on attribution, no border

* fix: lower attribution z-index so dropdowns render above

* fix: ensure toolbar + dropdowns stack above canvas attribution

* feat: crow's foot markers on edges + collapsible legend

* fix: restore missing tableCount state (was overwritten by legendOpen)

* fix: move crow's foot marker defs inside ReactFlow SVG, remove duplicate external SVGs

* fix: inject crow's foot SVG markers into ReactFlow SVG via DOM ref

* fix: use hidden SVG before ReactFlow for crow's foot markers, remove DOM injection

* feat: custom CrowsFootEdge component with inline crow's foot markers

* feat: custom CrowsFootEdge with zero-or-one/zero-or-many notation + nullability-based cardinality

* fix: strip markers, use clean text labels only on edges

* fix: add SVG marker defs directly inside ReactFlow + url() references for crow's foot

* fix: use custom CrowsFootEdge with BaseEdge + inline SVG symbols (no marker defs needed)

* debug: add red/green circles at edge endpoints to verify custom edge renders

* fix: remove stale duplicate edge data, use clean data.startMarker/endMarker

* fix: use getSmoothStepPath offset points for correct tangent angle at endpoints

* fix: thicker strokeWidth, position at handle coords, use path tangents

* fix: use straight-line angle (not curve tangent) for marker rotation

* fix: compute marker positions directly with raw math, no SVG transforms

* fix: fixed-orientation symbols — | always vertical, crow's foot fans toward node

* fix: dead simple — | vertical line, ← or → horizontal crow's foot based on edge direction

* fix: increase marker gap to 12px so symbols aren't hidden behind handle dots

* fix: correct offset direction (away from card into gap), G=4

* fix: remove duplicate G offset inside Mark (was canceling out the call-site offset)

* fix: crow's foot back to fork shape — three lines converging to a tip

* fix: flip crow's foot direction

* fix: wider crow's foot spread (4→6)

* feat: add crow's foot symbols to relationship legend

* style: cleaner legend — horizontal edge with endpoint symbols + label

* feat: handles on both sides, edge builder picks closest side based on dagre layout

* fix: compute actual handle distances to pick shortest path

* revert: PK always left, FK always right — one handle per column only

* fix: lock edge marker direction via origRight, TB layout for horizontal spread, truncate long types

* fix: semi-transparent minimap mask, border stroke for viewport visibility

* feat: click edge to highlight (amber glow), all others dim to 15% opacity

* feat: legend highlights matching cardinality row when edge is clicked

* fix: crow's foot symbols now read color from edge style (amber when highlighted)

* fix: highlighted edge gets zIndex 1000 to render on top

* fix: folder empty message now checks unfiltered store, shows filter hint when connections exist but filtered out

* feat: flat SVG DB icons from simple-icons (PostgreSQL, MySQL, SQLite, Redis) replacing emoji

* chore: add *.db, *.sqlite, *.sqlite3 to .gitignore

* docs: update README with 3-way competitor comparison + current roadmap; update AGENTS.md schema visualizer status
2026-07-29 22:36:59 +08:00

431 lines
12 KiB
TypeScript

import { describe, it, expect } from "vitest";
import type {
Connection,
ConnectionInput,
ActiveView,
TableInfo,
ColumnInfo,
QueryResult,
ChangeItem,
ChangeItemType,
ChangeStatus,
DbViewerTab,
ConnectionTestResult,
SchemaGraph,
TableNode,
GraphColumn,
Relationship,
} from "./types";
describe("ActiveView", () => {
it("includes db-viewer", () => {
const view: ActiveView = "db-viewer";
expect(view).toBe("db-viewer");
});
});
describe("Connection", () => {
it("accepts new SSH/SSL fields", () => {
const conn: Connection = {
id: "c1",
name: "Test",
db_type: "postgresql",
host: "localhost",
port: 5432,
username: "admin",
folder_id: null,
keychain_ref: null,
tag_ids: [],
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
// new SSH/SSL fields
database: "mydb",
ssh_host: "bastion.example.com",
ssh_port: 22,
ssh_user: "tunnel",
ssh_auth_method: "key",
ssh_private_key_path: "/home/user/.ssh/id_rsa",
ssl_mode: "require",
ssl_ca_path: "/etc/ssl/certs/ca.pem",
ssl_cert_path: "/etc/ssl/certs/client.crt",
ssl_key_path: "/etc/ssl/certs/client.key",
};
expect(conn.ssh_host).toBe("bastion.example.com");
expect(conn.database).toBe("mydb");
expect(conn.ssl_mode).toBe("require");
});
it("does not include sensitive SSH/SSL fields (password/ssh_passphrase)", () => {
// TypeScript compile check: these should not be assignable
const conn: Connection = {
id: "c2",
name: "Minimal",
db_type: "postgresql",
host: "localhost",
port: null,
username: null,
folder_id: null,
keychain_ref: null,
tag_ids: [],
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
};
// @ts-expect-error - password must NOT exist on Connection
conn.password;
// @ts-expect-error - ssh_passphrase must NOT exist on Connection
conn.ssh_passphrase;
expect(conn.host).toBe("localhost");
});
it("accepts SSH fields as optional (minimal connection)", () => {
const conn: Connection = {
id: "c3",
name: "Minimal",
db_type: "postgresql",
host: "localhost",
port: null,
username: null,
folder_id: null,
keychain_ref: null,
tag_ids: [],
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
};
expect(conn.ssh_host).toBeUndefined();
expect(conn.database).toBeUndefined();
});
});
describe("ConnectionInput", () => {
it("accepts all SSH/SSL fields", () => {
const input: ConnectionInput = {
name: "Test",
db_type: "postgresql",
host: "localhost",
port: 5432,
ssh_host: "bastion.example.com",
ssh_port: 22,
ssh_user: "tunnel",
ssh_auth_method: "key",
ssh_private_key_path: "/home/user/.ssh/id_rsa",
ssh_passphrase: "s3cret",
ssl_mode: "verify-full",
ssl_ca_path: "/etc/ssl/certs/ca.pem",
ssl_cert_path: "/etc/ssl/certs/client.crt",
ssl_key_path: "/etc/ssl/certs/client.key",
password: "dbpass",
database: "mydb",
};
expect(input.ssh_auth_method).toBe("key");
expect(input.ssl_mode).toBe("verify-full");
expect(input.ssh_passphrase).toBe("s3cret");
expect(input.database).toBe("mydb");
});
it("accepts password auth method", () => {
const input: ConnectionInput = {
name: "PW SSH",
db_type: "postgresql",
host: "db.example.com",
port: 5432,
ssh_host: "gateway.example.com",
ssh_port: 2222,
ssh_user: "proxy",
ssh_auth_method: "password",
};
expect(input.ssh_auth_method).toBe("password");
});
it("allows all SSH/SSL fields to be omitted", () => {
const input: ConnectionInput = {
name: "Simple",
db_type: "sqlite",
host: "localhost",
port: null,
};
expect(input.ssh_host).toBeUndefined();
expect(input.ssl_mode).toBeUndefined();
});
});
describe("TableInfo", () => {
it("has the correct shape", () => {
const table: TableInfo = {
name: "users",
schema: "public",
table_type: "TABLE",
};
expect(table.name).toBe("users");
expect(table.schema).toBe("public");
expect(table.table_type).toBe("TABLE");
});
it("accepts view type", () => {
const table: TableInfo = { name: "v1", schema: "public", table_type: "VIEW" };
expect(table.table_type).toBe("VIEW");
});
});
describe("ColumnInfo", () => {
it("has the correct shape", () => {
const col: ColumnInfo = {
name: "id",
data_type: "integer",
is_nullable: false,
is_pk: true,
is_fk: false,
fk_ref: null,
default_value: null,
};
expect(col.name).toBe("id");
expect(col.is_pk).toBe(true);
});
it("supports foreign key references", () => {
const col: ColumnInfo = {
name: "user_id",
data_type: "integer",
is_nullable: true,
is_pk: false,
is_fk: true,
fk_ref: ["users", "id"],
default_value: null,
};
expect(col.fk_ref?.[0]).toBe("users");
});
});
describe("QueryResult", () => {
it("is well-typed with columns and rows", () => {
const result: QueryResult = {
columns: [{name:"id",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null},{name:"name",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null},{name:"email",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null}],
rows: [
[1, "Alice"],
[2, "Bob"],
],
total_rows: 2, page: 1, page_size: 50,
execution_time_ms: 12.5,
};
expect(result.columns.length).toBe(3);
expect(result.total_rows).toBe(2);
expect(result.execution_time_ms).toBe(12.5);
});
it("allows error state", () => {
const result: QueryResult = {
columns: [],
rows: [],
total_rows: 0, page: 1, page_size: 50,
error: "Syntax error near FROM",
};
expect(result.error).toBe("Syntax error near FROM");
});
it("can have null execution_time", () => {
const result: QueryResult = {
columns: [{name:"id",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null}],
rows: [],
total_rows: 0, page: 1, page_size: 50,
execution_time_ms: null,
};
expect(result.execution_time_ms).toBeNull();
});
});
describe("ChangeItem", () => {
it("has a discriminated type", () => {
const createItem: ChangeItem = {
type: "create_table",
sql: "CREATE TABLE users (id INT)",
status: "pending",
id: "ch1",
description: "Create users table",
};
expect(createItem.type).toBe("create_table");
expect(createItem.status).toBe("pending");
const dropItem: ChangeItem = {
type: "drop_table",
sql: "DROP TABLE users",
status: "applied",
id: "ch2",
};
expect(dropItem.type).toBe("drop_table");
expect(dropItem.status).toBe("applied");
});
it("accepts error status with error message", () => {
const item: ChangeItem = {
type: "alter_table",
sql: "ALTER TABLE users ADD COLUMN age INT",
status: "error",
error: "Column already exists",
id: "ch3",
};
expect(item.status).toBe("error");
expect(item.error).toBe("Column already exists");
});
it("accepts all ChangeItemType values", () => {
const types: ChangeItemType[] = [
"create_table",
"alter_table",
"drop_table",
"insert",
"update",
"delete",
"create_index",
"drop_index",
];
const item: ChangeItem = {
type: types[0],
sql: "test",
status: "pending",
id: "ch4",
};
expect(types).toContain(item.type);
});
});
describe("ChangeStatus", () => {
it("accepts all status values", () => {
const statuses: ChangeStatus[] = ["pending", "applied", "error"];
expect(statuses).toHaveLength(3);
});
});
describe("DbViewerTab", () => {
it("can be created with required fields", () => {
const tab: DbViewerTab = {
id: "tab1",
connection_id: "c1",
title: "Query 1",
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
};
expect(tab.title).toBe("Query 1");
expect(tab.query).toBeUndefined();
expect(tab.result).toBeUndefined();
expect(tab.changes).toBeUndefined();
});
it("can include query and result", () => {
const tab: DbViewerTab = {
id: "tab2",
connection_id: "c1",
title: "SELECT * FROM users",
query: "SELECT * FROM users",
result: {
columns: [{name:"id",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null},{name:"name",data_type:"text",is_pk:false,is_fk:false,is_nullable:false,default_value:null,fk_ref:null}],
rows: [],
total_rows: 0, page: 1, page_size: 50,
},
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
};
expect(tab.query).toBe("SELECT * FROM users");
expect(tab.result?.total_rows).toBe(0);
});
it("can include changes array", () => {
const tab: DbViewerTab = {
id: "tab3",
connection_id: "c1",
title: "Migration",
changes: [
{ type: "create_table", sql: "CREATE TABLE t (id INT)", status: "pending", id: "ch1" },
],
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
};
expect(tab.changes).toHaveLength(1);
expect(tab.changes![0].type).toBe("create_table");
});
});
describe("ConnectionTestResult", () => {
it("can represent a successful test", () => {
const result: ConnectionTestResult = {
ok: true,
server_version: "16.2",
latency_ms: 5,
};
expect(result.ok).toBe(true);
expect(result.server_version).toBe("16.2");
});
it("can represent a failed test with error", () => {
const result: ConnectionTestResult = {
ok: false,
error: "Connection refused",
};
expect(result.ok).toBe(false);
expect(result.error).toBe("Connection refused");
});
});
describe("Schema graph types", () => {
it("GraphColumn has correct shape", () => {
const col: GraphColumn = {
name: "user_id",
data_type: "integer",
is_pk: false,
is_fk: true,
is_unique: false,
fk_ref: ["public", "users", "id"],
};
expect(col.name).toBe("user_id");
expect(col.is_fk).toBe(true);
expect(col.fk_ref).toEqual(["public", "users", "id"]);
});
it("TableNode has correct shape", () => {
const node: TableNode = {
name: "orders",
schema: "public",
table_type: "TABLE",
columns: [
{ name: "id", data_type: "integer", is_pk: true, is_fk: false, is_unique: true, fk_ref: null },
{ name: "user_id", data_type: "integer", is_pk: false, is_fk: true, is_unique: false, fk_ref: ["public", "users", "id"] },
],
};
expect(node.name).toBe("orders");
expect(node.columns).toHaveLength(2);
});
it("Relationship has correct shape", () => {
const rel: Relationship = {
source_schema: "public",
source_table: "orders",
source_column: "user_id",
target_schema: "public",
target_table: "users",
target_column: "id",
cardinality: "1:N",
};
expect(rel.cardinality).toBe("1:N");
});
it("SchemaGraph has correct shape", () => {
const graph: SchemaGraph = {
tables: [
{ name: "users", schema: "public", table_type: "TABLE", columns: [] },
],
relationships: [],
};
expect(graph.tables).toHaveLength(1);
expect(graph.relationships).toHaveLength(0);
});
it("fk_ref can be null for non-FK columns", () => {
const col: GraphColumn = {
name: "name",
data_type: "text",
is_pk: false,
is_fk: false,
is_unique: false,
fk_ref: null,
};
expect(col.fk_ref).toBeNull();
});
});