sqlite-hub 1.1.1 → 1.2.0

package/tests/documents-view.test.js

@@ -0,0 +1,132 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let documentsViewModulePromise = null;
+
+function loadDocumentsViewModule() {
+  if (!documentsViewModulePromise) {
+    documentsViewModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/views/documents.js")).href
+    );
+  }
+
+  return documentsViewModulePromise;
+}
+
+function buildDocumentsState() {
+  return {
+    connections: {
+      active: { id: "db-one", label: "Database One" },
+    },
+    documents: {
+      items: [],
+      selectedId: null,
+      selected: null,
+      searchQuery: "",
+      draftFilename: "",
+      draftContent: "",
+      dirty: false,
+      documentsVisible: true,
+      editorVisible: true,
+      previewVisible: true,
+      loading: false,
+      detailLoading: false,
+      saving: false,
+      deleting: false,
+      error: null,
+      saveError: null,
+    },
+  };
+}
+
+function buildSelectedDocumentsState(overrides = {}) {
+  const state = buildDocumentsState();
+  state.documents.items = [
+    {
+      contentLength: 11,
+      filename: "notes.md",
+      id: "doc-one",
+      title: "Notes",
+      updatedAt: "2026-06-21T10:00:00.000Z",
+    },
+  ];
+  state.documents.selectedId = "doc-one";
+  state.documents.selected = state.documents.items[0];
+  state.documents.draftFilename = "notes.md";
+  state.documents.draftContent = "# Notes";
+  Object.assign(state.documents, overrides);
+
+  return state;
+}
+
+test("documents view uses a new document dropdown for blank and markdown import", async () => {
+  const { renderDocumentsView } = await loadDocumentsViewModule();
+  const { main } = renderDocumentsView(buildDocumentsState());
+
+  assert.match(main, /data-dropdown-button/);
+  assert.match(main, /New Document/);
+  assert.match(main, /Blank Page/);
+  assert.match(main, /data-action="create-document"/);
+  assert.match(main, /Import \.md/);
+  assert.match(main, /data-action="import-document-markdown"/);
+  assert.match(main, /data-bind="document-import-file"/);
+  assert.doesNotMatch(main, /data-form="new-document"/);
+});
+
+test("documents panes keep both headers visible and move pane toggles into headers", async () => {
+  const { renderDocumentsView } = await loadDocumentsViewModule();
+  const { main } = renderDocumentsView(
+    buildSelectedDocumentsState({
+      editorVisible: false,
+      previewVisible: true,
+    }),
+  );
+
+  assert.match(main, /documents-workspace--editor-collapsed/);
+  assert.match(main, /documents-pane--editor documents-pane--collapsed/);
+  assert.match(main, /data-pane="editor"/);
+  assert.match(main, /Show Editor/);
+  assert.match(main, /data-pane="preview"/);
+  assert.match(main, /Hide Preview/);
+  assert.doesNotMatch(main, />Editor<\/span>/);
+  assert.doesNotMatch(main, />Preview<\/span>/);
+});
+
+test("documents subnavi can be hidden while the show documents button stays available", async () => {
+  const { renderDocumentsView } = await loadDocumentsViewModule();
+  const { main } = renderDocumentsView(
+    buildSelectedDocumentsState({
+      documentsVisible: false,
+    }),
+  );
+
+  assert.doesNotMatch(main, /documents-view__sidebar/);
+  assert.match(main, /data-action="toggle-documents-panel"/);
+  assert.match(main, /Show Documents/);
+  assert.match(main, /aria-pressed="true"/);
+});
+
+test("selected document actions render in one titlebar without a save button", async () => {
+  const { renderDocumentsView } = await loadDocumentsViewModule();
+  const { main } = renderDocumentsView(buildSelectedDocumentsState());
+  const orderedFragments = [
+    'data-action="toggle-documents-panel"',
+    'data-bind="document-field"',
+    "New Document",
+    "Insert",
+    "Export .md",
+    "Delete",
+  ];
+  const indexes = orderedFragments.map(fragment => main.indexOf(fragment));
+
+  indexes.forEach(index => assert.notEqual(index, -1));
+
+  for (let index = 1; index < indexes.length; index += 1) {
+    assert.ok(indexes[index - 1] < indexes[index]);
+  }
+
+  assert.doesNotMatch(main, /documents-toolbar/);
+  assert.doesNotMatch(main, /data-action="save-document"/);
+});

package/tests/dropdown-button.test.js

@@ -0,0 +1,101 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let dropdownButtonModulePromise = null;
+
+function loadDropdownButtonModule() {
+  if (!dropdownButtonModulePromise) {
+    dropdownButtonModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/components/dropdownButton.js")).href
+    );
+  }
+
+  return dropdownButtonModulePromise;
+}
+
+test("dropdown button renders reusable action items", async () => {
+  const { renderDropdownButton } = await loadDropdownButtonModule();
+  const markup = renderDropdownButton({
+    icon: "add_box",
+    label: "Insert",
+    title: "Insert content",
+    items: [
+      {
+        action: "open-document-insert-table-modal",
+        dataAttributes: { sourceView: "documents" },
+        icon: "table_chart",
+        label: "Insert Table",
+      },
+      {
+        action: "open-document-insert-note-modal",
+        icon: "note_add",
+        label: "Insert Note",
+      },
+    ],
+  });
+
+  assert.match(markup, /data-dropdown-button/);
+  assert.match(markup, /dropdown-button__toggle/);
+  assert.match(markup, /dropdown-button__panel/);
+  assert.match(markup, /data-action="open-document-insert-table-modal"/);
+  assert.match(markup, /data-source-view="documents"/);
+  assert.match(markup, /Insert Note/);
+});
+
+test("dropdown button renders disabled as a real disabled button", async () => {
+  const { renderDropdownButton } = await loadDropdownButtonModule();
+  const markup = renderDropdownButton({
+    disabled: true,
+    label: "Insert",
+    items: [{ action: "noop", label: "Noop" }],
+  });
+
+  assert.doesNotMatch(markup, /<details/);
+  assert.match(markup, /disabled/);
+  assert.match(markup, /aria-disabled="true"/);
+});
+
+test("dropdown button supports local action attributes", async () => {
+  const { renderDropdownButton } = await loadDropdownButtonModule();
+  const markup = renderDropdownButton({
+    label: "Format",
+    items: [
+      {
+        action: "fit",
+        actionAttribute: "data-structure-graph-action",
+        label: "Fit Graph",
+      },
+    ],
+  });
+
+  assert.match(markup, /data-structure-graph-action="fit"/);
+  assert.doesNotMatch(markup, /data-action="fit"/);
+});
+
+test("workspace open dropdown renders navigation and SQL editor actions", async () => {
+  const { renderWorkspaceOpenDropdown } = await import(
+    pathToFileURL(path.resolve(__dirname, "../frontend/js/components/workspaceOpenDropdown.js")).href
+  );
+  const markup = renderWorkspaceOpenDropdown({
+    tableName: "companies",
+    destinations: [
+      {
+        icon: "account_tree",
+        key: "structure",
+        label: "Structure",
+        target: tableName => `/structure/${encodeURIComponent(tableName)}`,
+      },
+      {
+        key: "sql-editor",
+      },
+    ],
+  });
+
+  assert.match(markup, /data-dropdown-button/);
+  assert.match(markup, /data-action="navigate"/);
+  assert.match(markup, /data-to="\/structure\/companies"/);
+  assert.match(markup, /data-action="open-table-in-sql-editor"/);
+  assert.match(markup, /data-table-name="companies"/);
+});

package/tests/email-preview.test.js

@@ -0,0 +1,89 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+async function loadEmailPreviewModule() {
+  return import(pathToFileURL(path.resolve(__dirname, "../frontend/js/utils/emailPreview.js")).href);
+}
+
+async function loadDataViewModule() {
+  return import(pathToFileURL(path.resolve(__dirname, "../frontend/js/views/data.js")).href);
+}
+
+async function loadRowEditorPanelModule() {
+  return import(pathToFileURL(path.resolve(__dirname, "../frontend/js/components/rowEditorPanel.js")).href);
+}
+
+test("email preview detects simple email values only", async () => {
+  const { detectEmailValue } = await loadEmailPreviewModule();
+
+  assert.deepEqual(detectEmailValue("oli@example.com"), {
+    type: "email",
+    value: "oli@example.com",
+    localPart: "oli",
+    domain: "example.com",
+  });
+  assert.equal(detectEmailValue("https://example.com"), null);
+  assert.equal(detectEmailValue("not an email"), null);
+  assert.equal(detectEmailValue(null), null);
+});
+
+test("data table renders an email icon for email cells", async () => {
+  const { renderDataView } = await loadDataViewModule();
+  const rendered = renderDataView({
+    connections: {
+      active: { readOnly: false },
+    },
+    dataBrowser: {
+      error: null,
+      loading: false,
+      page: 1,
+      pageSize: 50,
+      selectedRowIndex: null,
+      selectedTable: "contacts",
+      tableSearchQuery: "",
+      tables: [{ name: "contacts", columnCount: 2 }],
+      tablesVisible: true,
+      table: {
+        name: "contacts",
+        columns: ["id", "email"],
+        columnMeta: [
+          { name: "id", visible: true, primaryKeyPosition: 1, affinity: "INTEGER" },
+          { name: "email", visible: true, affinity: "TEXT" },
+        ],
+        foreignKeys: [],
+        rows: [{ id: 1, email: "oli@example.com" }],
+        rowCount: 1,
+        page: 1,
+        pageCount: 1,
+        offset: 0,
+        limit: 50,
+      },
+    },
+  }).main;
+
+  assert.match(rendered, /alternate_email/);
+  assert.match(rendered, /oli@example\.com/);
+});
+
+test("row editor renders an email badge for email fields", async () => {
+  const { renderRowEditorPanel } = await loadRowEditorPanelModule();
+  const rendered = renderRowEditorPanel({
+    title: "contacts",
+    closeAction: "close",
+    formName: "save-data-row",
+    editableFields: [
+      {
+        name: "email",
+        label: "email",
+        badges: [{ label: "TEXT", tone: "type" }],
+        value: "oli@example.com",
+        rawValue: "oli@example.com",
+      },
+    ],
+  });
+
+  assert.match(rendered, /EMAIL/);
+  assert.match(rendered, /data-row-editor-email-field/);
+});

package/tests/markdown-documents.test.js

@@ -60,6 +60,30 @@ test("markdown preview escapes raw html content", async () => {
   assert.match(html, /<script>/);
 });
 
+test("markdown preview keeps JSON code block quotes readable", async () => {
+  const { renderMarkdownPreview } = await loadMarkdownModule();
+  const previousMarked = globalThis.marked;
+  let parsedSource = "";
+
+  globalThis.marked = {
+    parse: source => {
+      parsedSource = source;
+      return `<pre><code>${source}</code></pre>`;
+    },
+  };
+
+  try {
+    const html = renderMarkdownPreview(['<img src=x onerror="alert(1)">', '', '```json', '{"id":"abc"}', '```'].join("\n"));
+
+    assert.match(parsedSource, /&lt;img/);
+    assert.match(parsedSource, /"id":"abc"/);
+    assert.doesNotMatch(parsedSource, /&quot;id&quot;/);
+    assert.match(html, /"id":"abc"/);
+  } finally {
+    globalThis.marked = previousMarked;
+  }
+});
+
 test("markdown preview strips executable link targets from rendered markdown", async () => {
   const { renderMarkdownPreview } = await loadMarkdownModule();
   const previousMarked = globalThis.marked;

package/tests/query-editor.test.js

@@ -0,0 +1,28 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let queryEditorModulePromise = null;
+
+function loadQueryEditorModule() {
+  if (!queryEditorModulePromise) {
+    queryEditorModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/components/queryEditor.js")).href
+    );
+  }
+
+  return queryEditorModulePromise;
+}
+
+test("query editor groups editor actions in a reusable dropdown", async () => {
+  const { renderQueryEditor } = await loadQueryEditorModule();
+  const markup = renderQueryEditor({ query: "select * from companies;" });
+
+  assert.match(markup, /data-dropdown-button/);
+  assert.match(markup, /Editor actions/);
+  assert.match(markup, /data-action="format-current-query"/);
+  assert.match(markup, /data-action="clear-query"/);
+  assert.match(markup, /data-action="copy-current-query"/);
+  assert.match(markup, /Copy to Clipboard/);
+});

package/tests/query-history-detail.test.js

@@ -0,0 +1,37 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let queryHistoryDetailModulePromise = null;
+
+function loadQueryHistoryDetailModule() {
+  if (!queryHistoryDetailModulePromise) {
+    queryHistoryDetailModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/components/queryHistoryDetail.js")).href
+    );
+  }
+
+  return queryHistoryDetailModulePromise;
+}
+
+test("query history detail delete button renders a trash icon", async () => {
+  const { renderQueryHistoryDetail } = await loadQueryHistoryDetailModule();
+  const html = renderQueryHistoryDetail({
+    item: {
+      id: 42,
+      displayTitle: "Recent Query",
+      rawSql: "select * from companies;",
+      queryType: "select",
+      isSaved: false,
+      isDestructive: false,
+      executionCount: 1,
+      createdAt: "2026-06-21T10:00:00.000Z",
+      updatedAt: "2026-06-21T10:00:00.000Z",
+    },
+    runs: [],
+  });
+
+  assert.match(html, /data-action="open-delete-query-history-modal"/);
+  assert.match(html, /<span class="material-symbols-outlined text-sm">delete<\/span>Delete/);
+});

package/tests/query-history-header.test.js

@@ -0,0 +1,30 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let queryHistoryHeaderModulePromise = null;
+
+function loadQueryHistoryHeaderModule() {
+  if (!queryHistoryHeaderModulePromise) {
+    queryHistoryHeaderModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/components/queryHistoryHeader.js")).href
+    );
+  }
+
+  return queryHistoryHeaderModulePromise;
+}
+
+test("query history search renders a magnifier icon", async () => {
+  const { renderQueryHistorySearch } = await loadQueryHistoryHeaderModule();
+  const markup = renderQueryHistorySearch({
+    bind: "charts-history-search",
+    value: "revenue",
+  });
+
+  assert.match(markup, /query-history-search/);
+  assert.match(markup, /query-history-search__icon/);
+  assert.match(markup, />search<\/span>/);
+  assert.match(markup, /data-bind="charts-history-search"/);
+  assert.match(markup, /value="revenue"/);
+});

package/tests/risky-sql.test.js

@@ -0,0 +1,30 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+async function loadModule() {
+  return import(pathToFileURL(path.resolve(__dirname, "../frontend/js/utils/riskySql.js")).href);
+}
+
+test("risky SQL detector ignores selects and detects schema changes", async () => {
+  const { detectRiskySqlOperations } = await loadModule();
+
+  assert.deepEqual(detectRiskySqlOperations("SELECT * FROM companies"), []);
+  assert.equal(detectRiskySqlOperations("  ALTER TABLE companies ADD COLUMN ticker TEXT")[0].type, "schema_change");
+});
+
+test("risky SQL detector handles comments, case, multiple statements, and drop table names", async () => {
+  const { detectRiskySqlOperations } = await loadModule();
+  const operations = detectRiskySqlOperations(`
+    -- DROP TABLE ignored;
+    select 1;
+    /* comment */ drop table if exists "users";
+    create index idx_users_name on users(name);
+  `);
+
+  assert.equal(operations.length, 2);
+  assert.equal(operations[0].type, "drop_table");
+  assert.equal(operations[0].tableName, "users");
+  assert.equal(operations[1].type, "migration");
+});

package/tests/row-editor-null-values.test.js

@@ -82,6 +82,59 @@ test("row editor renders visible NULL and empty-string states", async () => {
   assert.doesNotMatch(html, /name="field:nullable_text"[\s\S]*?disabled/);
 });
 
+test("row editor delete button renders a trash icon", async () => {
+  const { renderRowEditorPanel } = await loadFrontendModule(
+    "../frontend/js/components/rowEditorPanel.js"
+  );
+  const html = renderRowEditorPanel({
+    title: "Values",
+    closeAction: "close",
+    formName: "save-data-row",
+    deleteAction: "delete-data-row",
+    deleteEnabled: true,
+    deleteRowIndex: 0,
+    editableFields: [
+      {
+        name: "title",
+        label: "title",
+        value: "Acme",
+      },
+    ],
+  });
+
+  assert.match(html, /class="delete-button"[^>]*data-action="delete-data-row"/);
+  assert.match(html, /<span class="material-symbols-outlined text-sm">delete<\/span>\s*Delete Row/);
+});
+
+test("row editor JSON actions render as an export dropdown", async () => {
+  const { renderRowEditorPanel } = await loadFrontendModule(
+    "../frontend/js/components/rowEditorPanel.js"
+  );
+  const html = renderRowEditorPanel({
+    title: "Values",
+    closeAction: "close",
+    formName: "save-data-row",
+    jsonActionsEnabled: true,
+    editableFields: [
+      {
+        name: "title",
+        label: "title",
+        value: "Acme",
+      },
+    ],
+  });
+
+  assert.match(html, /data-dropdown-button/);
+  assert.match(html, /Export/);
+  assert.match(html, /data-action="copy-row-editor-json"/);
+  assert.match(html, /Copy to clipboard/);
+  assert.match(html, /data-action="export-row-editor-json"/);
+  assert.match(html, /JSON file/);
+  assert.match(html, /data-action="insert-row-editor-json-into-document"/);
+  assert.match(html, /Markdown document/);
+  assert.doesNotMatch(html, /Copy as JSON|Export as JSON/);
+});
+
 test("data updates can change NULL to empty string and empty string to NULL", () => {
   const db = new Database(":memory:");
 

package/tests/settings-view.test.js

@@ -100,6 +100,7 @@ test("settings view scopes API token controls to the active database", async ()
   assert.match(rendered.main, /name="name"/);
   assert.match(rendered.main, /type="submit"/);
   assert.match(rendered.main, /data-action="open-delete-api-token-modal"/);
+  assert.match(rendered.main, /<span class="material-symbols-outlined text-sm">delete<\/span>\s*Delete/);
   assert.match(rendered.main, /bg-surface-container-lowest/);
   assert.doesNotMatch(rendered.main, /sqlite-hub --port:PORT/);
   assert.doesNotMatch(rendered.main, /Open Github/);

package/tests/structure-view.test.js

@@ -0,0 +1,60 @@
+const assert = require("node:assert/strict");
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+const test = require("node:test");
+
+let structureViewModulePromise = null;
+
+function loadStructureViewModule() {
+  if (!structureViewModulePromise) {
+    structureViewModulePromise = import(
+      pathToFileURL(path.resolve(__dirname, "../frontend/js/views/structure.js")).href
+    );
+  }
+
+  return structureViewModulePromise;
+}
+
+function buildStructureState() {
+  return {
+    structure: {
+      data: {
+        grouped: {
+          tables: [{ name: "companies", type: "table" }],
+          views: [],
+          indexes: [],
+          triggers: [],
+        },
+        graph: {
+          relationshipCount: 0,
+          tables: [{ name: "companies", type: "table", columns: [], foreignKeys: [] }],
+        },
+      },
+      detail: null,
+      detailLoading: false,
+      error: null,
+      loading: false,
+      selectedName: "companies",
+      tableSearchQuery: "",
+      tablesVisible: true,
+    },
+  };
+}
+
+test("structure toolbar groups graph format actions in a dropdown", async () => {
+  const { renderStructureView } = await loadStructureViewModule();
+  const { main } = renderStructureView(buildStructureState());
+
+  assert.match(main, /data-dropdown-button/);
+  assert.match(main, /Open companies/);
+  assert.match(main, /data-to="\/data\/companies"/);
+  assert.match(main, /data-to="\/table-designer\/companies"/);
+  assert.match(main, /data-action="open-table-in-sql-editor"/);
+  assert.match(main, /Format graph/);
+  assert.match(main, /Fit Graph/);
+  assert.match(main, /data-structure-graph-action="fit"/);
+  assert.match(main, /Recalculate Layout/);
+  assert.match(main, /data-structure-graph-action="relayout"/);
+  assert.match(main, /Clear Selection/);
+  assert.match(main, /data-structure-graph-action="clear"/);
+});