@jskit-ai/http-web 0.1.1

package/test/useCrudAddEdit.test.js

@@ -0,0 +1,415 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { reactive } from "vue";
+import {
+  normalizeCrudFormFields,
+  createCrudFormModel,
+  buildCrudFormPayload,
+  applyCrudPayloadToForm,
+  resolveCrudRouteBoundFieldValues,
+  applyCrudRouteBoundFieldValues,
+  resolveCrudFieldErrors
+} from "../src/client/composables/crud/crudSchemaFormHelpers.js";
+
+test("normalizeCrudFormFields trims keys, removes invalid entries, and deduplicates", () => {
+  const fields = normalizeCrudFormFields([
+    { key: " name ", type: "string" },
+    { key: "name", type: "string" },
+    { key: "", type: "string" },
+    null,
+    { key: "active", type: "boolean" }
+  ]);
+
+  assert.deepEqual(fields.map((field) => field.key), ["name", "active"]);
+});
+
+test("createCrudFormModel resolves defaults and supports explicit initial values", () => {
+  const model = createCrudFormModel([
+    { key: "name", type: "string" },
+    { key: "active", type: "boolean" },
+    { key: "reviewed", type: "boolean", nullable: true },
+    { key: "role", type: "string", initialValue: "member" }
+  ]);
+
+  assert.deepEqual(model, {
+    name: "",
+    active: false,
+    reviewed: null,
+    role: "member"
+  });
+});
+
+test("createCrudFormModel preserves explicit boolean defaults for nullable fields", () => {
+  const model = createCrudFormModel([
+    { key: "reviewed", type: "boolean", nullable: true, initialValue: false },
+    { key: "approved", type: "boolean", nullable: true, defaultValue: true }
+  ]);
+
+  assert.deepEqual(model, {
+    reviewed: false,
+    approved: true
+  });
+});
+
+test("createCrudFormModel initializes nullable lookup fields as null", () => {
+  const model = createCrudFormModel([
+    {
+      key: "serviceId",
+      type: "string",
+      nullable: true,
+      component: "lookup",
+      relation: { kind: "lookup", namespace: "services" }
+    }
+  ]);
+
+  assert.deepEqual(model, {
+    serviceId: null
+  });
+});
+
+test("buildCrudFormPayload normalizes booleans and numbers while skipping empty numeric values", () => {
+  const payload = buildCrudFormPayload(
+    [
+      { key: "name", type: "string" },
+      { key: "active", type: "boolean" },
+      { key: "age", type: "integer" },
+      { key: "score", type: "number" }
+    ],
+    {
+      name: "Ada",
+      active: 1,
+      age: "42",
+      score: ""
+    }
+  );
+
+  assert.deepEqual(payload, {
+    name: "Ada",
+    active: true,
+    age: 42
+  });
+});
+
+test("buildCrudFormPayload and applyCrudPayloadToForm round-trip date-time fields", () => {
+  const fields = [
+    { key: "scheduledAt", type: "string", format: "date-time" }
+  ];
+  const payload = buildCrudFormPayload(fields, {
+    scheduledAt: "2024-01-02T03:04"
+  });
+
+  assert.match(payload.scheduledAt, /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.000Z$/);
+
+  const form = reactive({
+    scheduledAt: ""
+  });
+  applyCrudPayloadToForm(fields, form, payload);
+
+  assert.equal(form.scheduledAt, "2024-01-02T03:04");
+});
+
+test("date-time form values honor strict temporal precision without losing fractional tails", () => {
+  const noFraction = buildCrudFormPayload(
+    [{ key: "scheduledAt", type: "string", format: "date-time", temporalPrecision: 0 }],
+    { scheduledAt: "2024-01-02T03:04" }
+  );
+  assert.match(noFraction.scheduledAt, /T\d{2}:\d{2}:00Z$/u);
+  assert.doesNotMatch(noFraction.scheduledAt, /\.000Z$/u);
+
+  const microseconds = buildCrudFormPayload(
+    [{ key: "scheduledAt", type: "string", format: "date-time", temporalPrecision: 6 }],
+    { scheduledAt: "2024-01-02T03:04:05.123456" }
+  );
+  assert.match(microseconds.scheduledAt, /T\d{2}:\d{2}:05\.123456Z$/u);
+
+  const form = reactive({ scheduledAt: "" });
+  applyCrudPayloadToForm(
+    [{ key: "scheduledAt", type: "string", format: "date-time", temporalPrecision: 6 }],
+    form,
+    { scheduledAt: "2024-01-02T03:04:05.123456Z" }
+  );
+  assert.match(form.scheduledAt, /T\d{2}:\d{2}:05\.123456$/u);
+});
+
+test("applyCrudPayloadToForm normalizes date values for HTML date inputs", () => {
+  const fields = [
+    { key: "publishedOn", type: "string", format: "date" },
+    { key: "reviewedOn", type: "string", format: "date" },
+    { key: "archivedOn", type: "string", format: "date" },
+    { key: "invalidOn", type: "string", format: "date" }
+  ];
+  const form = reactive({
+    publishedOn: "",
+    reviewedOn: "",
+    archivedOn: "",
+    invalidOn: ""
+  });
+
+  applyCrudPayloadToForm(fields, form, {
+    publishedOn: "2026-08-10",
+    reviewedOn: "2026-08-11T00:00:00.000Z",
+    archivedOn: new Date("2026-08-12T00:00:00.000Z"),
+    invalidOn: "not-a-date"
+  });
+
+  assert.deepEqual(form, {
+    publishedOn: "2026-08-10",
+    reviewedOn: "2026-08-11",
+    archivedOn: "2026-08-12",
+    invalidOn: "not-a-date"
+  });
+});
+
+test("buildCrudFormPayload preserves strict time precision", () => {
+  const fields = [
+    { key: "fromTime", type: "string", format: "time" },
+    { key: "toTime", type: "string", format: "time" }
+  ];
+
+  const payload = buildCrudFormPayload(fields, {
+    fromTime: "06:13 PM",
+    toTime: "18:45:00"
+  });
+
+  assert.deepEqual(payload, {
+    fromTime: "18:13",
+    toTime: "18:45:00"
+  });
+});
+
+test("buildCrudFormPayload serializes cleared nullable typed fields as null", () => {
+  const payload = buildCrudFormPayload(
+    [
+      { key: "reviewed", type: "boolean", nullable: true },
+      { key: "serviceId", type: "integer", nullable: true },
+      {
+        key: "selectedServiceId",
+        type: "string",
+        nullable: true,
+        component: "lookup",
+        relation: { kind: "lookup", namespace: "services" }
+      },
+      { key: "fromDate", type: "string", format: "date", nullable: true },
+      { key: "scheduledAt", type: "string", format: "date-time", nullable: true },
+      { key: "fromTime", type: "string", format: "time", nullable: true }
+    ],
+    {
+      reviewed: null,
+      serviceId: null,
+      selectedServiceId: "",
+      fromDate: "",
+      scheduledAt: "",
+      fromTime: ""
+    }
+  );
+
+  assert.deepEqual(payload, {
+    reviewed: null,
+    serviceId: null,
+    selectedServiceId: null,
+    fromDate: null,
+    scheduledAt: null,
+    fromTime: null
+  });
+});
+
+test("buildCrudFormPayload preserves nullable booleans while keeping non-nullable booleans binary", () => {
+  const fields = [
+    { key: "active", type: "boolean" },
+    { key: "reviewed", type: "boolean", nullable: true },
+    { key: "approved", type: "boolean", nullable: true }
+  ];
+
+  assert.deepEqual(
+    buildCrudFormPayload(fields, {
+      active: null,
+      reviewed: null,
+      approved: true
+    }),
+    {
+      active: false,
+      reviewed: null,
+      approved: true
+    }
+  );
+
+  assert.deepEqual(
+    buildCrudFormPayload(fields, {
+      active: 1,
+      reviewed: 0,
+      approved: false
+    }),
+    {
+      active: true,
+      reviewed: false,
+      approved: false
+    }
+  );
+});
+
+test("applyCrudPayloadToForm preserves strict time values for form inputs", () => {
+  const fields = [
+    { key: "fromTime", type: "string", format: "time" },
+    { key: "toTime", type: "string", format: "time" }
+  ];
+  const form = reactive({
+    fromTime: "",
+    toTime: ""
+  });
+
+  applyCrudPayloadToForm(fields, form, {
+    fromTime: "18:13:00",
+    toTime: "06:45 PM"
+  });
+
+  assert.deepEqual(form, {
+    fromTime: "18:13:00",
+    toTime: "18:45"
+  });
+});
+
+test("strict temporal form values round-trip seconds and fractions", () => {
+  const fields = [
+    { key: "fromTime", type: "string", format: "time", temporalPrecision: 6 },
+    { key: "scheduledAt", type: "string", format: "date-time", temporalPrecision: 3 }
+  ];
+  const form = reactive({
+    fromTime: "",
+    scheduledAt: ""
+  });
+
+  applyCrudPayloadToForm(fields, form, {
+    fromTime: "18:13:14.123456",
+    scheduledAt: "2026-08-13T07:08:09.123Z"
+  });
+
+  assert.equal(form.fromTime, "18:13:14.123456");
+  assert.match(form.scheduledAt, /^2026-08-13T\d{2}:\d{2}:09\.123$/u);
+  assert.deepEqual(buildCrudFormPayload(fields, form), {
+    fromTime: "18:13:14.123456",
+    scheduledAt: "2026-08-13T07:08:09.123Z"
+  });
+});
+
+test("applyCrudPayloadToForm maps payload values into reactive form model", () => {
+  const form = reactive({
+    name: "",
+    active: false,
+    reviewed: null,
+    age: ""
+  });
+  applyCrudPayloadToForm(
+    [
+      { key: "name", type: "string" },
+      { key: "active", type: "boolean" },
+      { key: "reviewed", type: "boolean", nullable: true },
+      { key: "age", type: "integer" }
+    ],
+    form,
+    {
+      name: "Grace",
+      active: 1,
+      reviewed: null,
+      age: 33
+    }
+  );
+
+  assert.deepEqual(form, {
+    name: "Grace",
+    active: true,
+    reviewed: null,
+    age: "33"
+  });
+});
+
+test("applyCrudPayloadToForm preserves nullable boolean payload values", () => {
+  const fields = [
+    { key: "active", type: "boolean" },
+    { key: "reviewed", type: "boolean", nullable: true },
+    { key: "approved", type: "boolean", nullable: true }
+  ];
+  const form = reactive({
+    active: false,
+    reviewed: null,
+    approved: null
+  });
+
+  applyCrudPayloadToForm(fields, form, {
+    active: null,
+    reviewed: null,
+    approved: true
+  });
+
+  assert.deepEqual(form, {
+    active: false,
+    reviewed: null,
+    approved: true
+  });
+});
+
+test("applyCrudPayloadToForm preserves null lookup payload values", () => {
+  const fields = [
+    {
+      key: "serviceId",
+      type: "string",
+      nullable: true,
+      component: "lookup",
+      relation: { kind: "lookup", namespace: "services" }
+    }
+  ];
+  const form = reactive({
+    serviceId: "existing"
+  });
+
+  applyCrudPayloadToForm(fields, form, {
+    serviceId: null
+  });
+  assert.equal(form.serviceId, null);
+
+  applyCrudPayloadToForm(fields, form, {
+    serviceId: 42
+  });
+  assert.equal(form.serviceId, "42");
+});
+
+test("resolveCrudRouteBoundFieldValues maps route params for route-bound form fields", () => {
+  const values = resolveCrudRouteBoundFieldValues(
+    [
+      { key: "contactId", routeParamKey: "contactId" },
+      { key: "name" }
+    ],
+    {
+      contactId: " 2971 "
+    }
+  );
+
+  assert.deepEqual(values, {
+    contactId: "2971"
+  });
+});
+
+test("applyCrudRouteBoundFieldValues enforces route-bound field values onto target payload", () => {
+  const payload = {
+    name: "Address one",
+    contactId: "123"
+  };
+  applyCrudRouteBoundFieldValues(
+    [
+      { key: "contactId", routeParamKey: "contactId" }
+    ],
+    payload,
+    {
+      contactId: "2971"
+    }
+  );
+
+  assert.deepEqual(payload, {
+    name: "Address one",
+    contactId: "2971"
+  });
+});
+
+test("resolveCrudFieldErrors returns Vuetify-compatible error arrays", () => {
+  assert.deepEqual(resolveCrudFieldErrors({ name: "Name is required." }, "name"), ["Name is required."]);
+  assert.deepEqual(resolveCrudFieldErrors({ name: "Name is required." }, "email"), []);
+});

package/test/useCrudDeleteAction.test.js

@@ -0,0 +1,139 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import { createSSRApp, h, nextTick, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createMemoryHistory, createRouter } from "vue-router";
+import {
+  requireCrudDeleteOperation,
+  useCrudDeleteAction
+} from "../src/client/composables/useCrudDeleteAction.js";
+
+const deleteResource = Object.freeze({
+  namespace: "notes",
+  operations: Object.freeze({
+    delete: Object.freeze({
+      method: "DELETE"
+    })
+  })
+});
+
+function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/notes", component: { render: () => h("div") } },
+      { path: "/notes/:noteId", component: { render: () => h("div") } }
+    ]
+  });
+}
+
+function createScreen() {
+  return Object.freeze({
+    view: Object.freeze({
+      recordId: ref("42"),
+      record: ref({ id: "42", title: "Keep it simple" }),
+      isLoading: ref(false),
+      isNotFound: ref(false),
+      resolveParams(template = "") {
+        return String(template || "").replace(":noteId", "42");
+      }
+    }),
+    listLocation: ref({ path: "/notes" })
+  });
+}
+
+async function renderDeleteAction({ client, queryClient = new QueryClient() } = {}) {
+  const router = createTestRouter();
+  await router.push("/notes/42");
+  await router.isReady();
+
+  let deleteAction = null;
+  const app = createSSRApp({
+    setup() {
+      deleteAction = useCrudDeleteAction({
+        screen: createScreen(),
+        resource: deleteResource,
+        resourceNamespace: "notes",
+        apiUrlTemplate: "/notes/:noteId",
+        client
+      });
+      return () => h("div");
+    }
+  });
+  app.use(router);
+  app.use(VueQueryPlugin, { queryClient });
+  await renderToString(app);
+
+  return { deleteAction, queryClient, router };
+}
+
+test("useCrudDeleteAction confirms one DELETE, invalidates CRUD state, and returns to the list", async () => {
+  const requests = [];
+  const invalidations = [];
+  let finishRequest = null;
+  const queryClient = new QueryClient();
+  queryClient.invalidateQueries = async function invalidateQueries(options = {}) {
+    invalidations.push(options);
+  };
+  const pendingRequest = new Promise((resolve) => {
+    finishRequest = resolve;
+  });
+  const client = {
+    async request(path, options = {}) {
+      requests.push({ path, options });
+      return pendingRequest;
+    }
+  };
+  const { deleteAction, router } = await renderDeleteAction({ client, queryClient });
+
+  assert.equal(deleteAction.canDelete, true);
+  assert.equal(deleteAction.request(), true);
+  assert.equal(deleteAction.isOpen, true);
+
+  const confirmation = deleteAction.confirm();
+  await nextTick();
+  assert.equal(deleteAction.isDeleting, true);
+  assert.equal(requests.length, 1);
+  assert.match(requests[0].path, /\/notes\/42$/);
+  assert.equal(requests[0].options.method, "DELETE");
+  assert.equal(Object.hasOwn(requests[0].options, "body"), false);
+
+  finishRequest(null);
+  await confirmation;
+
+  assert.equal(deleteAction.isDeleting, false);
+  assert.equal(deleteAction.isOpen, false);
+  assert.equal(router.currentRoute.value.path, "/notes");
+  assert.deepEqual(invalidations, [
+    { queryKey: ["ui-generator", "notes"] }
+  ]);
+});
+
+test("useCrudDeleteAction keeps the record dialog open with useful error feedback", async () => {
+  const client = {
+    async request() {
+      throw new Error("Delete service unavailable.");
+    }
+  };
+  const { deleteAction, router } = await renderDeleteAction({ client });
+
+  deleteAction.request();
+  await deleteAction.confirm();
+
+  assert.equal(deleteAction.isOpen, true);
+  assert.equal(deleteAction.isDeleting, false);
+  assert.equal(deleteAction.error, "Delete service unavailable.");
+  assert.equal(router.currentRoute.value.path, "/notes/42");
+});
+
+test("useCrudDeleteAction rejects resources without the canonical DELETE operation", () => {
+  assert.throws(
+    () => requireCrudDeleteOperation({ operations: {} }),
+    /requires resource\.operations\.delete/
+  );
+  assert.throws(
+    () => requireCrudDeleteOperation({ operations: { delete: { method: "POST" } } }),
+    /method to be DELETE/
+  );
+});

package/test/useCrudListBulkActions.test.js

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { nextTick } from "vue";
+
+test("useCrudListBulkActions manages selection and executes action context", async () => {
+  const { defineCrudListBulkActions } = await import("@jskit-ai/http-web/client/bulkActions");
+  const { useCrudListBulkActions } = await import("@jskit-ai/http-web/client/composables/useCrudListBulkActions");
+  const calls = [];
+  const actions = defineCrudListBulkActions([
+    {
+      key: "archive",
+      label: "Archive",
+      async run(context) {
+        calls.push(context);
+        context.clearSelection();
+      }
+    }
+  ]);
+  const runtime = useCrudListBulkActions(actions, {
+    resolveRecordId: (record) => record.id,
+    resolveContext: () => ({
+      reload: "reload-token"
+    })
+  });
+
+  assert.equal(runtime.hasActions.value, true);
+  assert.equal(runtime.hasSelection.value, false);
+
+  runtime.setRecordSelected({ id: "10", label: "A" }, 0, true);
+  runtime.setRecordSelected({ id: "11", label: "B" }, 1, true);
+  await nextTick();
+
+  assert.deepEqual(runtime.selectedIds.value, ["10", "11"]);
+  assert.equal(runtime.selectedCount.value, 2);
+  assert.equal(runtime.allVisibleSelected([{ id: "10" }, { id: "11" }]), true);
+  assert.equal(runtime.someVisibleSelected([{ id: "10" }, { id: "12" }]), true);
+
+  await runtime.execute("archive");
+
+  assert.equal(calls.length, 1);
+  assert.deepEqual(calls[0].selectedIds, ["10", "11"]);
+  assert.deepEqual(calls[0].ids, ["10", "11"]);
+  assert.equal(calls[0].reload, "reload-token");
+  assert.equal(runtime.selectedCount.value, 0);
+});
+
+test("defineCrudListBulkActions skips malformed and duplicate actions", async () => {
+  const { defineCrudListBulkActions } = await import("@jskit-ai/http-web/client/bulkActions");
+
+  const actions = defineCrudListBulkActions([
+    null,
+    { key: "archive", label: "Archive" },
+    { key: "archive", label: "Archive again" },
+    { key: "missing-label" },
+    { label: "Generated key" }
+  ]);
+
+  assert.deepEqual(
+    actions.map((action) => [action.key, action.label, action.color, action.variant]),
+    [
+      ["archive", "Archive", "primary", "tonal"],
+      ["action-5", "Generated key", "primary", "tonal"]
+    ]
+  );
+});