942 lines
38 KiB
TypeScript
Vendored
942 lines
38 KiB
TypeScript
Vendored
// @vitest-environment happy-dom
|
|
|
|
import { createApp, nextTick, type App } from "vue";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
const mocks = vi.hoisted(() => ({
|
|
connection: {
|
|
id: "structure-test",
|
|
name: "Dameng",
|
|
db_type: "dameng",
|
|
driver_label: "Dameng",
|
|
},
|
|
ensureConnected: vi.fn(),
|
|
executeQuery: vi.fn(),
|
|
listDataTypes: vi.fn(),
|
|
buildTableStructureChangeSql: vi.fn(),
|
|
buildMysqlAutoIncrementSql: vi.fn(),
|
|
updateEditorSettings: vi.fn(),
|
|
loadObjectDdl: vi.fn(),
|
|
invalidateObjectDdl: vi.fn(),
|
|
loadObjectMetadataFacet: vi.fn(),
|
|
invalidateObjectMetadataCache: vi.fn(),
|
|
invalidateTableMetadataCache: vi.fn(),
|
|
getTablePartitionStatus: vi.fn(),
|
|
getTableOwner: vi.fn(),
|
|
buildTableOwnerChangeSql: vi.fn(),
|
|
toast: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("vue-i18n", () => ({ useI18n: () => ({ t: (key: string) => key }) }));
|
|
|
|
vi.mock("@lucide/vue", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Icon = defineComponent({ name: "Icon", setup: () => () => h("span") });
|
|
return {
|
|
AlertTriangle: Icon,
|
|
Check: Icon,
|
|
ChevronDown: Icon,
|
|
ChevronUp: Icon,
|
|
Copy: Icon,
|
|
Database: Icon,
|
|
Info: Icon,
|
|
Keyboard: Icon,
|
|
KeyRound: Icon,
|
|
ListChevronsUpDown: Icon,
|
|
Loader2: Icon,
|
|
Maximize2: Icon,
|
|
Plus: Icon,
|
|
RefreshCw: Icon,
|
|
Save: Icon,
|
|
Search: Icon,
|
|
Settings: Icon,
|
|
SlidersHorizontal: Icon,
|
|
Trash2: Icon,
|
|
UserRound: Icon,
|
|
X: Icon,
|
|
};
|
|
});
|
|
|
|
vi.mock("@/components/ui/button", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
return {
|
|
Button: defineComponent({
|
|
name: "Button",
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("button", attrs, slots.default?.()),
|
|
}),
|
|
};
|
|
});
|
|
vi.mock("@/components/ui/input", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
return {
|
|
Input: defineComponent({
|
|
name: "Input",
|
|
inheritAttrs: false,
|
|
props: { modelValue: { type: [String, Number], default: "" } },
|
|
emits: ["update:modelValue"],
|
|
setup:
|
|
(props, { attrs, emit }) =>
|
|
() =>
|
|
h("input", {
|
|
...attrs,
|
|
value: props.modelValue,
|
|
onInput: (event: Event) => emit("update:modelValue", (event.target as HTMLInputElement).value),
|
|
}),
|
|
}),
|
|
};
|
|
});
|
|
vi.mock("@/components/ui/badge", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
return {
|
|
Badge: defineComponent({
|
|
name: "Badge",
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("span", attrs, slots.default?.()),
|
|
}),
|
|
};
|
|
});
|
|
vi.mock("@/components/ui/tabs", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Div = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("div", attrs, slots.default?.()),
|
|
});
|
|
const Button = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("button", attrs, slots.default?.()),
|
|
});
|
|
return { Tabs: Div, TabsContent: Div, TabsList: Div, TabsTrigger: Button };
|
|
});
|
|
vi.mock("@/components/ui/dropdown-menu", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Div = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("div", attrs, slots.default?.()),
|
|
});
|
|
const Button = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("button", attrs, slots.default?.()),
|
|
});
|
|
return { DropdownMenu: Div, DropdownMenuCheckboxItem: Div, DropdownMenuContent: Div, DropdownMenuItem: Button, DropdownMenuTrigger: Div };
|
|
});
|
|
vi.mock("@/components/ui/popover", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Div = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("div", attrs, slots.default?.()),
|
|
});
|
|
return { Popover: Div, PopoverContent: Div, PopoverTrigger: Div };
|
|
});
|
|
vi.mock("@/components/ui/tooltip", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Div = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("div", attrs, slots.default?.()),
|
|
});
|
|
return { Tooltip: Div, TooltipContent: Div, TooltipTrigger: Div };
|
|
});
|
|
vi.mock("@/components/ui/searchable-select", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
return {
|
|
SearchableSelect: defineComponent({
|
|
name: "SearchableSelect",
|
|
inheritAttrs: false,
|
|
props: {
|
|
modelValue: { type: String, default: "" },
|
|
options: { type: Array, default: () => [] },
|
|
allowCustom: { type: Boolean, default: false },
|
|
trimCustom: { type: Boolean, default: true },
|
|
},
|
|
emits: ["update:modelValue"],
|
|
setup:
|
|
(props, { attrs, emit }) =>
|
|
() =>
|
|
h("button", {
|
|
...attrs,
|
|
type: "button",
|
|
"data-searchable-select": "true",
|
|
"data-model-value": props.modelValue,
|
|
"data-options": JSON.stringify(props.options),
|
|
"data-allow-custom": String(props.allowCustom),
|
|
"data-trim-custom": String(props.trimCustom),
|
|
onClick: () => emit("update:modelValue", "custom_domain"),
|
|
}),
|
|
}),
|
|
};
|
|
});
|
|
vi.mock("@/components/ui/select", async () => {
|
|
const { defineComponent, h } = await import("vue");
|
|
const Div = defineComponent({
|
|
inheritAttrs: false,
|
|
setup:
|
|
(_props, { attrs, slots }) =>
|
|
() =>
|
|
h("div", attrs, slots.default?.()),
|
|
});
|
|
return { Select: Div, SelectContent: Div, SelectItem: Div, SelectTrigger: Div, SelectValue: Div };
|
|
});
|
|
|
|
vi.mock("@/stores/connectionStore", () => ({
|
|
useConnectionStore: () => ({
|
|
ensureConnected: mocks.ensureConnected,
|
|
getConfig: (connectionId: string) => (connectionId === mocks.connection.id ? mocks.connection : undefined),
|
|
}),
|
|
}));
|
|
vi.mock("@/stores/productionSafetyStore", () => ({ useProductionSafetyStore: () => ({ requestConfirmation: vi.fn() }) }));
|
|
vi.mock("@/stores/queryStore", () => ({ useQueryStore: () => ({ tableStructureRefreshVersion: () => 0 }) }));
|
|
vi.mock("@/stores/historyStore", () => ({ useHistoryStore: () => ({ add: vi.fn() }) }));
|
|
vi.mock("@/stores/settingsStore", () => ({
|
|
useSettingsStore: () => ({
|
|
editorSettings: { structureEditorDensity: "compact", sqlFormatter: {}, tableColumnTemplateFields: [] },
|
|
updateEditorSettings: mocks.updateEditorSettings,
|
|
}),
|
|
}));
|
|
vi.mock("@/composables/useTheme", () => ({ useTheme: () => ({ isDark: { value: false } }) }));
|
|
vi.mock("@/composables/useToast", () => ({ useToast: () => ({ toast: mocks.toast }) }));
|
|
vi.mock("@/lib/sql/sqlHighlighter", () => ({ createShikiSqlHighlighter: vi.fn(async () => (sql: string) => sql) }));
|
|
vi.mock("@/lib/metadata/objectDdlCache", () => ({
|
|
loadObjectDdl: mocks.loadObjectDdl,
|
|
invalidateObjectDdl: mocks.invalidateObjectDdl,
|
|
}));
|
|
vi.mock("@/lib/metadata/objectMetadataCache", () => ({ loadObjectMetadataFacet: mocks.loadObjectMetadataFacet, invalidateObjectMetadataCache: mocks.invalidateObjectMetadataCache }));
|
|
vi.mock("@/lib/metadata/tableMetadataCache", () => ({ invalidateTableMetadataCache: mocks.invalidateTableMetadataCache }));
|
|
vi.mock("@/lib/backend/api", () => ({
|
|
executeQuery: mocks.executeQuery,
|
|
listDataTypes: mocks.listDataTypes,
|
|
buildTableStructureChangeSql: mocks.buildTableStructureChangeSql,
|
|
buildMysqlAutoIncrementSql: mocks.buildMysqlAutoIncrementSql,
|
|
buildTableOwnerChangeSql: mocks.buildTableOwnerChangeSql,
|
|
getTablePartitionStatus: mocks.getTablePartitionStatus,
|
|
getTableOwner: mocks.getTableOwner,
|
|
}));
|
|
|
|
import TableStructureEditor from "@/components/structure/TableStructureEditor.vue";
|
|
|
|
const mountedApps: App[] = [];
|
|
|
|
function draft(isPrimaryKey = false, identity?: { seed: number; increment: number }) {
|
|
const isNullable = identity ? false : !isPrimaryKey;
|
|
return {
|
|
initialized: true,
|
|
activeTab: "columns" as const,
|
|
newTableName: "",
|
|
tableComment: "",
|
|
originalTableComment: "",
|
|
columns: [
|
|
{
|
|
id: "existing:id",
|
|
name: "id",
|
|
dataType: "INT",
|
|
isNullable,
|
|
defaultValue: "",
|
|
comment: "",
|
|
isPrimaryKey,
|
|
extra: identity ? { autoIncrement: true, identity: { ...identity } } : {},
|
|
original: {
|
|
name: "id",
|
|
data_type: "INT",
|
|
is_nullable: isNullable,
|
|
column_default: null,
|
|
is_primary_key: isPrimaryKey,
|
|
extra: identity ? `IDENTITY(${identity.seed}, ${identity.increment})` : null,
|
|
comment: null,
|
|
},
|
|
originalPosition: 0,
|
|
markedForDrop: false,
|
|
},
|
|
],
|
|
indexes: [],
|
|
foreignKeys: [],
|
|
triggers: [],
|
|
};
|
|
}
|
|
|
|
async function mountEditor(databaseType: "sqlserver" | "postgres" | "sqlite" | "oracle" | "oceanbase-oracle" | "iris" | "dameng" | "duckdb" | "informix", isPrimaryKey = false, options: { database?: string; dynamicTypes?: string[]; identity?: { seed: number; increment: number } } = {}) {
|
|
mocks.connection.db_type = databaseType;
|
|
mocks.connection.name = databaseType;
|
|
mocks.connection.driver_label = databaseType;
|
|
mocks.ensureConnected.mockResolvedValue(undefined);
|
|
mocks.listDataTypes.mockResolvedValue(options.dynamicTypes ?? []);
|
|
mocks.buildTableStructureChangeSql.mockResolvedValue({ statements: [], warnings: [] });
|
|
|
|
const root = document.createElement("div");
|
|
document.body.append(root);
|
|
const app = createApp(TableStructureEditor, {
|
|
connectionId: mocks.connection.id,
|
|
database: options.database ?? "test",
|
|
schema: "SYSDBA",
|
|
tableName: "users",
|
|
draft: draft(isPrimaryKey, options.identity),
|
|
});
|
|
mountedApps.push(app);
|
|
app.mount(root);
|
|
await nextTick();
|
|
await Promise.resolve();
|
|
await nextTick();
|
|
return root;
|
|
}
|
|
|
|
async function mountLoadingEditor(initialTab: "columns" | "indexes" | "foreignKeys" | "triggers" | "ddl", owner = "app_user") {
|
|
mocks.connection.db_type = "postgres";
|
|
mocks.connection.name = "postgres";
|
|
mocks.connection.driver_label = "postgres";
|
|
mocks.ensureConnected.mockResolvedValue(undefined);
|
|
mocks.listDataTypes.mockResolvedValue([]);
|
|
mocks.buildTableStructureChangeSql.mockResolvedValue({ statements: [], warnings: [] });
|
|
mocks.loadObjectDdl.mockResolvedValue({ ddl: "CREATE TABLE users (id bigint)", cacheStatus: "remote" });
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({ value: facet === "comment" ? "" : facet === "owner" ? owner : [], cacheStatus: "remote" }));
|
|
|
|
const root = document.createElement("div");
|
|
document.body.append(root);
|
|
const app = createApp(TableStructureEditor, {
|
|
connectionId: mocks.connection.id,
|
|
database: "test",
|
|
schema: "public",
|
|
tableName: "users",
|
|
initialTab,
|
|
});
|
|
mountedApps.push(app);
|
|
app.mount(root);
|
|
await nextTick();
|
|
await Promise.resolve();
|
|
await nextTick();
|
|
return root;
|
|
}
|
|
|
|
function columnCheckbox(root: HTMLElement, header: string, rowIndex = 0): HTMLInputElement {
|
|
const headerIndex = Array.from(root.querySelectorAll("thead th")).findIndex((cell) => cell.textContent?.trim() === header);
|
|
if (headerIndex < 0) throw new Error(`Missing ${header} column`);
|
|
const row = root.querySelector<HTMLElement>(`[data-column-row-index="${rowIndex}"]`);
|
|
const cell = row?.querySelectorAll("td")[headerIndex];
|
|
const checkbox = cell?.querySelector<HTMLInputElement>('input[type="checkbox"]');
|
|
if (!checkbox) throw new Error(`Missing ${header} checkbox`);
|
|
return checkbox;
|
|
}
|
|
|
|
function columnPropertyCheckbox(root: HTMLElement, title: string): HTMLInputElement {
|
|
const checkbox = root.querySelector<HTMLInputElement>(`[data-column-row-index="0"] label[title="${title}"] input[type="checkbox"]`);
|
|
if (!checkbox) throw new Error(`Missing ${title} checkbox`);
|
|
return checkbox;
|
|
}
|
|
|
|
function buttonWithText(root: HTMLElement, text: string): HTMLButtonElement {
|
|
const button = Array.from(root.querySelectorAll("button")).find((item) => item.textContent?.includes(text));
|
|
if (!button) throw new Error(`Missing ${text} button`);
|
|
return button;
|
|
}
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
mocks.loadObjectDdl.mockResolvedValue({ ddl: "CREATE TABLE users (id bigint)", cacheStatus: "remote" });
|
|
mocks.invalidateObjectDdl.mockResolvedValue(undefined);
|
|
mocks.invalidateObjectMetadataCache.mockResolvedValue(undefined);
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({ value: facet === "owner" ? "app_user" : [], cacheStatus: "remote" }));
|
|
mocks.getTableOwner.mockResolvedValue("app_user");
|
|
mocks.executeQuery.mockResolvedValue({
|
|
columns: ["user", "host", "plugin"],
|
|
rows: [
|
|
["app_user", "LOGIN", ""],
|
|
["reporting_role", "ROLE", ""],
|
|
],
|
|
});
|
|
mocks.buildTableOwnerChangeSql.mockResolvedValue({ statements: [], warnings: [] });
|
|
// TableStructureEditor probes the partition status for PostgreSQL tables
|
|
// (PR #6361); a resolved non-partitioned result keeps metadata loads on the
|
|
// original facet expectations unchanged.
|
|
mocks.getTablePartitionStatus.mockResolvedValue({ isPartitionedParent: false, isPartition: false });
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.useRealTimers();
|
|
for (const app of mountedApps.splice(0)) app.unmount();
|
|
document.body.innerHTML = "";
|
|
});
|
|
|
|
describe("TableStructureEditor primary key editing", () => {
|
|
it("allows enabling identity on an existing Dameng integer column", async () => {
|
|
const root = await mountEditor("dameng");
|
|
const identity = columnPropertyCheckbox(root, "structureEditor.identity");
|
|
const nullable = columnCheckbox(root, "structureEditor.nullable");
|
|
|
|
expect(identity.disabled).toBe(false);
|
|
expect(nullable.checked).toBe(true);
|
|
|
|
identity.checked = true;
|
|
identity.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(identity.checked).toBe(true);
|
|
expect(nullable.checked).toBe(false);
|
|
expect(Array.from(root.querySelectorAll<HTMLInputElement>('[data-column-row-index="0"] input[type="number"]')).every((input) => !input.disabled)).toBe(true);
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalled());
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [
|
|
expect.objectContaining({
|
|
isNullable: false,
|
|
extra: expect.objectContaining({ autoIncrement: true, identity: { seed: 1, increment: 1 } }),
|
|
}),
|
|
],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("allows disabling existing Dameng identity while keeping its parameters read-only", async () => {
|
|
const root = await mountEditor("dameng", false, { identity: { seed: 10, increment: 2 } });
|
|
const identity = columnPropertyCheckbox(root, "structureEditor.identity");
|
|
const identityInputs = Array.from(root.querySelectorAll<HTMLInputElement>('[data-column-row-index="0"] input[type="number"]'));
|
|
|
|
expect(identity.disabled).toBe(false);
|
|
expect(identity.checked).toBe(true);
|
|
expect(identityInputs).toHaveLength(2);
|
|
expect(identityInputs.every((input) => input.disabled)).toBe(true);
|
|
|
|
identity.checked = false;
|
|
identity.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(identity.checked).toBe(false);
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalled());
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ extra: expect.objectContaining({ autoIncrement: false, identity: undefined }) })],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("enables the primary-key checkbox for an existing Dameng column and makes it not null", async () => {
|
|
const root = await mountEditor("dameng");
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
const nullable = columnCheckbox(root, "structureEditor.nullable");
|
|
|
|
expect(primaryKey.disabled).toBe(false);
|
|
expect(nullable.checked).toBe(true);
|
|
|
|
primaryKey.checked = true;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(primaryKey.checked).toBe(true);
|
|
expect(nullable.checked).toBe(false);
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalled());
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ isPrimaryKey: true, isNullable: false })],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("enables a primary key on an existing keyless Oracle column and makes it not null", async () => {
|
|
const root = await mountEditor("oracle");
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
const nullable = columnCheckbox(root, "structureEditor.nullable");
|
|
|
|
expect(primaryKey.disabled).toBe(false);
|
|
expect(nullable.checked).toBe(true);
|
|
|
|
primaryKey.checked = true;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(primaryKey.checked).toBe(true);
|
|
expect(nullable.checked).toBe(false);
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalled());
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ isPrimaryKey: true, isNullable: false })],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("keeps all primary-key checkboxes enabled while composing a new Oracle key", async () => {
|
|
const root = await mountEditor("oracle");
|
|
buttonWithText(root, "structureEditor.addColumn").click();
|
|
await nextTick();
|
|
|
|
const firstPrimaryKey = columnCheckbox(root, "structureEditor.primaryKey", 0);
|
|
const secondPrimaryKey = columnCheckbox(root, "structureEditor.primaryKey", 1);
|
|
expect(firstPrimaryKey.disabled).toBe(false);
|
|
expect(secondPrimaryKey.disabled).toBe(false);
|
|
|
|
firstPrimaryKey.checked = true;
|
|
firstPrimaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
expect(secondPrimaryKey.disabled).toBe(false);
|
|
|
|
secondPrimaryKey.checked = true;
|
|
secondPrimaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
await vi.waitFor(() =>
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ isPrimaryKey: true }), expect.objectContaining({ isPrimaryKey: true })],
|
|
}),
|
|
),
|
|
);
|
|
});
|
|
|
|
it("keeps an existing Oracle primary key and all replacement choices disabled", async () => {
|
|
const root = await mountEditor("oracle", true);
|
|
buttonWithText(root, "structureEditor.addColumn").click();
|
|
await nextTick();
|
|
|
|
expect(columnCheckbox(root, "structureEditor.primaryKey", 0).disabled).toBe(true);
|
|
expect(columnCheckbox(root, "structureEditor.primaryKey", 1).disabled).toBe(true);
|
|
});
|
|
|
|
it.each(["oceanbase-oracle", "iris"] as const)("keeps primary-key creation disabled for existing %s tables", async (databaseType) => {
|
|
const root = await mountEditor(databaseType);
|
|
|
|
expect(columnCheckbox(root, "structureEditor.primaryKey").disabled).toBe(true);
|
|
});
|
|
|
|
it("allows an existing Dameng primary key to be cleared", async () => {
|
|
const root = await mountEditor("dameng", true);
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
|
|
expect(primaryKey.disabled).toBe(false);
|
|
expect(primaryKey.checked).toBe(true);
|
|
|
|
primaryKey.checked = false;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(primaryKey.checked).toBe(false);
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalled());
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ isPrimaryKey: false })],
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("keeps the current SQL preview visible while a newer preview is loading", async () => {
|
|
const root = await mountEditor("dameng", true);
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
const nullable = columnCheckbox(root, "structureEditor.nullable");
|
|
const firstSql = "ALTER TABLE users DROP CONSTRAINT users_pkey;";
|
|
|
|
mocks.buildTableStructureChangeSql.mockResolvedValueOnce({ statements: [firstSql], warnings: [] });
|
|
primaryKey.checked = false;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
|
|
await vi.waitFor(() => expect(root.textContent).toContain(firstSql));
|
|
|
|
let resolveLatestPreview!: (value: { statements: string[]; warnings: string[] }) => void;
|
|
mocks.buildTableStructureChangeSql.mockImplementationOnce(
|
|
() =>
|
|
new Promise((resolve) => {
|
|
resolveLatestPreview = resolve;
|
|
}),
|
|
);
|
|
nullable.checked = true;
|
|
nullable.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
expect(buttonWithText(root, "structureEditor.copySql").disabled).toBe(true);
|
|
expect(buttonWithText(root, "structureEditor.apply").disabled).toBe(true);
|
|
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenCalledTimes(2));
|
|
expect(root.textContent).toContain(firstSql);
|
|
expect(root.textContent).not.toContain("structureEditor.noChanges");
|
|
|
|
resolveLatestPreview({ statements: ["ALTER TABLE users ALTER COLUMN id DROP NOT NULL;"], warnings: [] });
|
|
await vi.waitFor(() => expect(root.textContent).toContain("ALTER TABLE users ALTER COLUMN id DROP NOT NULL;"));
|
|
expect(buttonWithText(root, "structureEditor.copySql").disabled).toBe(false);
|
|
expect(buttonWithText(root, "structureEditor.apply").disabled).toBe(false);
|
|
});
|
|
|
|
it("debounces SQL preview generation while editing a column name", async () => {
|
|
vi.useFakeTimers();
|
|
const root = await mountEditor("dameng");
|
|
const nameInput = root.querySelector<HTMLInputElement>("[data-column-name-input]");
|
|
if (!nameInput) throw new Error("Missing column name input");
|
|
|
|
nameInput.value = "user";
|
|
nameInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
await nextTick();
|
|
await vi.advanceTimersByTimeAsync(200);
|
|
|
|
nameInput.value = "user_id";
|
|
nameInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
await nextTick();
|
|
await vi.advanceTimersByTimeAsync(299);
|
|
|
|
expect(mocks.buildTableStructureChangeSql).not.toHaveBeenCalled();
|
|
|
|
await vi.advanceTimersByTimeAsync(1);
|
|
await Promise.resolve();
|
|
await nextTick();
|
|
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenCalledTimes(1);
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
columns: [expect.objectContaining({ name: "user_id" })],
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("TableStructureEditor data type options", () => {
|
|
it("keeps dynamic Dameng types first and deduplicates fallback types case-insensitively", async () => {
|
|
const root = await mountEditor("dameng", false, {
|
|
database: "dynamic-types-5275",
|
|
dynamicTypes: ["VARCHAR", "CUSTOM_DM_TYPE", "NUMBER"],
|
|
});
|
|
const picker = root.querySelector<HTMLElement>('[data-searchable-select="true"]');
|
|
if (!picker) throw new Error("Missing data type picker");
|
|
|
|
await vi.waitFor(() => expect(JSON.parse(picker.dataset.options ?? "[]").slice(0, 3)).toEqual(["VARCHAR", "CUSTOM_DM_TYPE", "NUMBER"]));
|
|
const options = JSON.parse(picker.dataset.options ?? "[]") as string[];
|
|
expect(options.filter((option) => option.toLowerCase() === "varchar")).toEqual(["VARCHAR"]);
|
|
expect(options.filter((option) => option.toLowerCase() === "number")).toEqual(["NUMBER"]);
|
|
expect(options).toContain("longvarchar");
|
|
});
|
|
|
|
it("continues to accept manually entered Dameng data types", async () => {
|
|
const root = await mountEditor("dameng", false, { database: "manual-type-5275" });
|
|
const picker = root.querySelector<HTMLButtonElement>('[data-searchable-select="true"]');
|
|
if (!picker) throw new Error("Missing data type picker");
|
|
|
|
expect(picker.dataset.allowCustom).toBe("true");
|
|
picker.click();
|
|
await vi.waitFor(() => expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(expect.objectContaining({ columns: [expect.objectContaining({ dataType: "custom_domain" })] })));
|
|
});
|
|
});
|
|
|
|
describe("TableStructureEditor action column", () => {
|
|
it("shows the field shortcut hints in the toolbar", async () => {
|
|
const root = await mountEditor("dameng");
|
|
|
|
expect(root.textContent).toContain("settings.shortcutsTab");
|
|
expect(root.textContent).toContain("Shift+Enter");
|
|
expect(root.textContent).toContain("⌘/Ctrl+D");
|
|
expect(root.querySelector("[data-field-shortcut-hints]")?.className).toContain("flex-col");
|
|
expect(root.querySelector("[data-field-shortcut-hints]")?.className).toContain("w-56");
|
|
expect(root.querySelector("[data-field-shortcut-hints]")?.className).toContain("!bg-secondary");
|
|
expect(root.querySelector("[data-field-shortcut-hints] kbd")?.className).toContain("text-primary");
|
|
});
|
|
|
|
it("adds a field below the focused input on Shift+Enter", async () => {
|
|
const root = await mountEditor("dameng");
|
|
const sourceInput = root.querySelector<HTMLInputElement>('[data-column-row-index="0"] [data-column-name-input]');
|
|
if (!sourceInput) throw new Error("Missing source column name input");
|
|
|
|
sourceInput.focus();
|
|
sourceInput.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter", shiftKey: true }));
|
|
|
|
await vi.waitFor(() => expect(root.querySelector('[data-column-row-index="1"]')).not.toBeNull());
|
|
const addedInput = root.querySelector<HTMLInputElement>('[data-column-row-index="1"] [data-column-name-input]');
|
|
expect(addedInput?.value).toBe("");
|
|
expect(document.activeElement).toBe(addedInput);
|
|
});
|
|
|
|
it("copies the field below the focused input on Mod+D", async () => {
|
|
const root = await mountEditor("dameng");
|
|
const sourceInput = root.querySelector<HTMLInputElement>('[data-column-row-index="0"] [data-column-name-input]');
|
|
if (!sourceInput) throw new Error("Missing source column name input");
|
|
|
|
sourceInput.focus();
|
|
sourceInput.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "d", ctrlKey: true }));
|
|
|
|
await vi.waitFor(() => expect(root.querySelector('[data-column-row-index="1"]')).not.toBeNull());
|
|
const copiedInput = root.querySelector<HTMLInputElement>('[data-column-row-index="1"] [data-column-name-input]');
|
|
expect(copiedInput?.value).toBe(sourceInput.value);
|
|
expect(document.activeElement).toBe(copiedInput);
|
|
});
|
|
|
|
it("widens the ordinal indicator for a two-digit primary-key row", async () => {
|
|
const root = await mountEditor("dameng");
|
|
const addColumn = buttonWithText(root, "structureEditor.addColumn");
|
|
for (let index = 0; index < 9; index += 1) {
|
|
addColumn.click();
|
|
await nextTick();
|
|
}
|
|
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey", 9);
|
|
primaryKey.checked = true;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
await nextTick();
|
|
|
|
const actionIndicator = root.querySelector<HTMLElement>('[data-column-row-index="9"] td:first-child > div > div:first-child');
|
|
expect(Number.parseFloat(actionIndicator?.style.width ?? "0")).toBeGreaterThan(28);
|
|
});
|
|
});
|
|
|
|
describe("TableStructureEditor local column order notice", () => {
|
|
it.each(["sqlserver", "postgres", "sqlite", "oracle", "dameng", "duckdb", "informix"] as const)("does not show the reorder notice when adding a %s column", async (databaseType) => {
|
|
const root = await mountEditor(databaseType);
|
|
const addColumnButton = Array.from(root.querySelectorAll("button")).find((button) => button.textContent?.includes("structureEditor.addColumn"));
|
|
if (!addColumnButton) throw new Error("Missing add column button");
|
|
|
|
addColumnButton.click();
|
|
await nextTick();
|
|
|
|
expect(mocks.toast).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("TableStructureEditor horizontal scrolling", () => {
|
|
it("shows a fixed scrollbar for overflowing columns and syncs thumb dragging", async () => {
|
|
const root = await mountEditor("postgres");
|
|
const scroller = root.querySelector<HTMLElement>(".structure-table-scroller");
|
|
if (!scroller) throw new Error("Missing structure table scroller");
|
|
Object.defineProperties(scroller, {
|
|
clientWidth: { configurable: true, value: 400 },
|
|
scrollWidth: { configurable: true, value: 1200 },
|
|
scrollLeft: { configurable: true, value: 200, writable: true },
|
|
});
|
|
|
|
scroller.dispatchEvent(new Event("scroll"));
|
|
await nextTick();
|
|
await nextTick();
|
|
|
|
const track = root.querySelector<HTMLElement>(".structure-horizontal-scrollbar");
|
|
const thumb = root.querySelector<HTMLElement>(".structure-horizontal-scrollbar__thumb");
|
|
if (!track || !thumb) throw new Error("Missing fixed horizontal scrollbar");
|
|
expect(Number.parseFloat(thumb.style.width)).toBeCloseTo(100 / 3);
|
|
expect(Number.parseFloat(thumb.style.left)).toBeCloseTo(100 / 6);
|
|
|
|
track.getBoundingClientRect = () => DOMRect.fromRect({ width: 300, height: 10 });
|
|
document.body.style.userSelect = "text";
|
|
track.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 60, isPrimary: true }));
|
|
window.dispatchEvent(new PointerEvent("pointermove", { clientX: 160, isPrimary: true }));
|
|
|
|
expect(scroller.scrollLeft).toBeCloseTo(600);
|
|
expect(document.body.style.userSelect).toBe("none");
|
|
window.dispatchEvent(new PointerEvent("pointerup", { isPrimary: true }));
|
|
expect(document.body.style.userSelect).toBe("text");
|
|
});
|
|
});
|
|
|
|
describe("TableStructureEditor metadata loading", () => {
|
|
it("opens the initial DDL tab while loading only the table owner", async () => {
|
|
await mountLoadingEditor("ddl");
|
|
|
|
await vi.waitFor(() => expect(mocks.loadObjectDdl).toHaveBeenCalledTimes(1));
|
|
await vi.waitFor(() => expect(mocks.loadObjectMetadataFacet).toHaveBeenCalledTimes(1));
|
|
expect(mocks.loadObjectMetadataFacet.mock.calls.map((call) => call[1])).toEqual(["owner"]);
|
|
});
|
|
|
|
it.each([
|
|
["columns", ["columns", "indexes", "comment", "owner"]],
|
|
["indexes", ["columns", "indexes", "comment", "owner"]],
|
|
["foreignKeys", ["columns", "indexes", "foreign-keys", "comment", "owner"]],
|
|
["triggers", ["triggers", "comment", "owner"]],
|
|
] as const)("loads only the required facets for the initial %s tab", async (initialTab, expectedFacets) => {
|
|
await mountLoadingEditor(initialTab);
|
|
|
|
await vi.waitFor(() => expect(mocks.loadObjectMetadataFacet).toHaveBeenCalledTimes(expectedFacets.length));
|
|
expect(mocks.loadObjectMetadataFacet.mock.calls.map((call) => call[1]).sort()).toEqual([...expectedFacets].sort());
|
|
expect(mocks.loadObjectDdl).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("preserves exact PostgreSQL owner names and includes an owner change in the SQL preview", async () => {
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({ value: facet === "owner" ? " app_user " : [], cacheStatus: "remote" }));
|
|
mocks.executeQuery.mockResolvedValue({
|
|
columns: ["user", "host", "plugin"],
|
|
rows: [
|
|
[" app_user ", "LOGIN", ""],
|
|
["reporting_role", "ROLE", ""],
|
|
],
|
|
});
|
|
mocks.buildTableOwnerChangeSql.mockImplementation(async (options: { owner: string; originalOwner: string }) => ({
|
|
statements: options.owner === options.originalOwner ? [] : [`ALTER TABLE "public"."users" OWNER TO "${options.owner}";`],
|
|
warnings: [],
|
|
}));
|
|
const root = await mountLoadingEditor("columns", " app_user ");
|
|
|
|
const ownerSelect = await vi.waitFor(() => {
|
|
const select = root.querySelector<HTMLButtonElement>("[data-owner-select]");
|
|
expect(select?.dataset.modelValue).toBe(" app_user ");
|
|
expect(JSON.parse(select?.dataset.options ?? "[]")).toEqual([" app_user ", "reporting_role"]);
|
|
expect(select?.dataset.allowCustom).toBe("true");
|
|
expect(select?.dataset.trimCustom).toBe("false");
|
|
return select!;
|
|
});
|
|
ownerSelect.click();
|
|
|
|
await vi.waitFor(() => expect(mocks.buildTableOwnerChangeSql).toHaveBeenLastCalledWith(expect.objectContaining({ owner: "custom_domain", originalOwner: " app_user ", schema: "public", tableName: "users" })));
|
|
});
|
|
|
|
it("loads the PostgreSQL primary index name before showing a missing-name warning", async () => {
|
|
mocks.connection.db_type = "postgres";
|
|
mocks.connection.name = "postgres";
|
|
mocks.connection.driver_label = "postgres";
|
|
mocks.ensureConnected.mockResolvedValue(undefined);
|
|
mocks.listDataTypes.mockResolvedValue([]);
|
|
const warning = "Could not determine the existing PostgreSQL primary key constraint name. Refresh the table structure and try again.";
|
|
mocks.buildTableStructureChangeSql.mockResolvedValue({ statements: [], warnings: [warning] });
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({
|
|
value:
|
|
facet === "columns"
|
|
? [
|
|
{ name: "id", data_type: "integer", is_nullable: false, column_default: null, is_primary_key: true },
|
|
{ name: "asdas", data_type: "integer", is_nullable: true, column_default: null, is_primary_key: false },
|
|
]
|
|
: facet === "comment"
|
|
? ""
|
|
: facet === "owner"
|
|
? "app_user"
|
|
: [],
|
|
cacheStatus: "remote",
|
|
}));
|
|
|
|
const root = document.createElement("div");
|
|
document.body.append(root);
|
|
const app = createApp(TableStructureEditor, {
|
|
connectionId: mocks.connection.id,
|
|
database: "test",
|
|
schema: "public",
|
|
tableName: "test",
|
|
initialTab: "columns",
|
|
});
|
|
mountedApps.push(app);
|
|
app.mount(root);
|
|
|
|
await vi.waitFor(() => expect(root.querySelector('[data-column-row-index="0"]')).not.toBeNull());
|
|
expect(mocks.loadObjectMetadataFacet.mock.calls.map((call) => call[1]).sort()).toEqual(["columns", "indexes", "comment", "owner"].sort());
|
|
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
primaryKey.checked = false;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
|
|
await vi.waitFor(() => expect(root.textContent).toContain(warning));
|
|
expect(buttonWithText(root, "structureEditor.apply").disabled).toBe(true);
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(expect.objectContaining({ indexes: [] }));
|
|
});
|
|
|
|
it("backfills the PostgreSQL primary index name for a restored columns-only draft", async () => {
|
|
mocks.connection.db_type = "postgres";
|
|
mocks.connection.name = "postgres";
|
|
mocks.connection.driver_label = "postgres";
|
|
mocks.ensureConnected.mockResolvedValue(undefined);
|
|
mocks.listDataTypes.mockResolvedValue([]);
|
|
mocks.buildTableStructureChangeSql.mockResolvedValue({ statements: [], warnings: [] });
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({
|
|
value:
|
|
facet === "indexes"
|
|
? [
|
|
{
|
|
name: "test_pk",
|
|
columns: ["id"],
|
|
is_unique: true,
|
|
is_primary: true,
|
|
},
|
|
]
|
|
: facet === "comment"
|
|
? ""
|
|
: facet === "owner"
|
|
? "app_user"
|
|
: [],
|
|
cacheStatus: "remote",
|
|
}));
|
|
|
|
const root = document.createElement("div");
|
|
document.body.append(root);
|
|
const app = createApp(TableStructureEditor, {
|
|
connectionId: mocks.connection.id,
|
|
database: "test",
|
|
schema: "public",
|
|
tableName: "test",
|
|
draft: {
|
|
...draft(true),
|
|
loadedMetadataFacets: ["columns", "comment"],
|
|
},
|
|
});
|
|
mountedApps.push(app);
|
|
app.mount(root);
|
|
|
|
await vi.waitFor(() => expect(mocks.loadObjectMetadataFacet).toHaveBeenCalledTimes(2));
|
|
expect(mocks.loadObjectMetadataFacet.mock.calls.map((call) => call[1]).sort()).toEqual(["indexes", "owner"]);
|
|
|
|
const primaryKey = columnCheckbox(root, "structureEditor.primaryKey");
|
|
primaryKey.checked = false;
|
|
primaryKey.dispatchEvent(new Event("change", { bubbles: true }));
|
|
|
|
await vi.waitFor(() =>
|
|
expect(mocks.buildTableStructureChangeSql).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({
|
|
indexes: [expect.objectContaining({ name: "test_pk", isPrimary: true, original: expect.objectContaining({ name: "test_pk", is_primary: true }) })],
|
|
}),
|
|
),
|
|
);
|
|
});
|
|
|
|
it("loads index metadata when an initialized column draft opens the indexes tab", async () => {
|
|
mocks.connection.db_type = "postgres";
|
|
mocks.connection.name = "postgres";
|
|
mocks.connection.driver_label = "postgres";
|
|
mocks.ensureConnected.mockResolvedValue(undefined);
|
|
mocks.listDataTypes.mockResolvedValue([]);
|
|
mocks.buildTableStructureChangeSql.mockResolvedValue({ statements: [], warnings: [] });
|
|
mocks.loadObjectMetadataFacet.mockImplementation(async (_request, facet: string) => ({
|
|
value:
|
|
facet === "indexes"
|
|
? [
|
|
{
|
|
name: "idx_users_id",
|
|
columns: ["id"],
|
|
is_unique: false,
|
|
is_primary: false,
|
|
},
|
|
]
|
|
: facet === "comment"
|
|
? ""
|
|
: facet === "owner"
|
|
? "app_user"
|
|
: [],
|
|
cacheStatus: "remote",
|
|
}));
|
|
|
|
const root = document.createElement("div");
|
|
document.body.append(root);
|
|
const app = createApp(TableStructureEditor, {
|
|
connectionId: mocks.connection.id,
|
|
database: "test",
|
|
schema: "public",
|
|
tableName: "users",
|
|
initialTab: "indexes",
|
|
draft: {
|
|
...draft(),
|
|
loadedMetadataFacets: ["columns", "comment"],
|
|
},
|
|
});
|
|
mountedApps.push(app);
|
|
app.mount(root);
|
|
await nextTick();
|
|
await Promise.resolve();
|
|
await nextTick();
|
|
|
|
await vi.waitFor(() => expect(mocks.loadObjectMetadataFacet).toHaveBeenCalledTimes(2));
|
|
expect(mocks.loadObjectMetadataFacet.mock.calls.map((call) => call[1]).sort()).toEqual(["indexes", "owner"]);
|
|
await vi.waitFor(() => expect(root.querySelector('[data-index-row-index="0"]')).not.toBeNull());
|
|
});
|
|
});
|