@jskit-ai/users-web 0.1.81 → 0.1.83

package/test/requestTransportOptions.test.js

@@ -1,11 +1,18 @@
 import assert from "node:assert/strict";
 import test from "node:test";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import { createSSRApp, h } from "vue";
+import { renderToString } from "vue/server-renderer";
 
 import {
   buildEndpointReadRequestOptions,
-  buildEndpointWriteRequestOptions
+  buildEndpointWriteRequestOptions,
+  useEndpointResource
 } from "../src/client/composables/runtime/useEndpointResource.js";
 import { buildListRequestOptions } from "../src/client/composables/runtime/useListCore.js";
+import {
+  resolveOperationRealtimeOptions
+} from "../src/client/composables/useRealtimeQueryInvalidation.js";
 
 test("endpoint read request options include transport only when provided", () => {
   assert.deepEqual(
@@ -140,3 +147,105 @@ test("list request options preserve explicit limit values", () => {
     }
   );
 });
+
+test("operation realtime options use fallback events unless explicitly overridden", () => {
+  const fallbackRealtime = {
+    events: ["contacts.record.changed"]
+  };
+
+  assert.deepEqual(
+    resolveOperationRealtimeOptions({
+      fallbackRealtime
+    }),
+    {
+      events: ["contacts.record.changed"]
+    }
+  );
+
+  assert.deepEqual(
+    resolveOperationRealtimeOptions({
+      realtime: {
+        enabled: false
+      },
+      fallbackRealtime
+    }),
+    {
+      events: ["contacts.record.changed"],
+      enabled: false
+    }
+  );
+
+  assert.deepEqual(
+    resolveOperationRealtimeOptions({
+      realtime: {
+        event: "contacts.custom.changed"
+      },
+      fallbackRealtime
+    }),
+    {
+      event: "contacts.custom.changed"
+    }
+  );
+
+  assert.equal(
+    resolveOperationRealtimeOptions({
+      realtime: false,
+      fallbackRealtime
+    }),
+    null
+  );
+});
+
+test("endpoint resources invalidate their query key from configured realtime events", async () => {
+  const queryClient = new QueryClient();
+  const invalidations = [];
+  const socketHandlers = new Map();
+  const socket = {
+    on(eventName, handler) {
+      socketHandlers.set(eventName, handler);
+    },
+    off(eventName, handler) {
+      if (socketHandlers.get(eventName) === handler) {
+        socketHandlers.delete(eventName);
+      }
+    }
+  };
+  queryClient.invalidateQueries = async (options = {}) => {
+    invalidations.push(options);
+  };
+  const app = createSSRApp({
+    setup() {
+      useEndpointResource({
+        queryKey: ["today-workout-detail", "/api/today/workouts/2026-05-06"],
+        path: "/api/today/workouts/2026-05-06",
+        client: {
+          async request() {
+            return {};
+          }
+        },
+        realtime: {
+          event: "workout_set_logs.record.changed"
+        }
+      });
+      return () => h("div");
+    }
+  });
+  app.use(VueQueryPlugin, {
+    queryClient
+  });
+  app.provide("jskit.realtime.runtime.client.socket", socket);
+  await renderToString(app);
+
+  const handler = socketHandlers.get("workout_set_logs.record.changed");
+  assert.equal(typeof handler, "function");
+  handler({
+    entityId: "42"
+  });
+  await new Promise((resolve) => setImmediate(resolve));
+
+  assert.deepEqual(invalidations, [
+    {
+      queryKey: ["today-workout-detail", "/api/today/workouts/2026-05-06"]
+    }
+  ]);
+});

package/test/resourceLoadStateHelpers.test.js

@@ -1,7 +1,10 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { ref } from "vue";
-import { hasResolvedQueryData } from "../src/client/composables/support/resourceLoadStateHelpers.js";
+import {
+  hasResolvedQueryData,
+  mergeQueryMeta
+} from "../src/client/composables/support/resourceLoadStateHelpers.js";
 
 test("hasResolvedQueryData returns true when the query succeeded", () => {
   const query = {
@@ -37,3 +40,34 @@ test("hasResolvedQueryData returns false when query and payload are unresolved",
     data: ref(null)
   }), false);
 });
+
+test("mergeQueryMeta preserves caller metadata while adding JSKIT refresh policy", () => {
+  assert.deepEqual(
+    mergeQueryMeta(
+      {
+        staleTime: 1000,
+        meta: {
+          owner: "contacts",
+          jskit: {
+            feature: "list"
+          }
+        }
+      },
+      {
+        jskit: {
+          refreshOnPull: true
+        }
+      }
+    ),
+    {
+      staleTime: 1000,
+      meta: {
+        owner: "contacts",
+        jskit: {
+          feature: "list",
+          refreshOnPull: true
+        }
+      }
+    }
+  );
+});

package/test/settingsPlacementContract.test.js

@@ -3,6 +3,7 @@ import path from "node:path";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
+import { assertGeneratedUiSourceContract } from "@jskit-ai/kernel/shared/support/generatedUiContract";
 import descriptor from "../package.descriptor.mjs";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
@@ -110,12 +111,72 @@ test("users-web package-owned account settings host is fully placement-backed",
     "utf8"
   );
 
+  assertGeneratedUiSourceContract(source, {
+    forbidCardShell: true,
+    sourceName: "AccountSettingsClientElement.vue",
+    requiredPatterns: [
+      {
+        id: "account-settings-header",
+        pattern: /settings-panel__header/,
+        message: "Account settings host needs a direct settings panel header."
+      },
+      {
+        id: "account-settings-sections",
+        pattern: /useAccountSettingsSections/,
+        message: "Account settings host must remain placement-backed."
+      }
+    ]
+  });
   assert.match(source, /useAccountSettingsSections/);
+  assert.match(source, /settings-panel__header/);
+  assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle/);
   assert.doesNotMatch(source, /AccountSettingsProfileSection/);
   assert.doesNotMatch(source, /AccountSettingsPreferencesSection/);
   assert.doesNotMatch(source, /AccountSettingsNotificationsSection/);
 });
 
+test("users-web profile form element uses a direct panel instead of card scaffolding", async () => {
+  const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "ProfileClientElement.vue"), "utf8");
+
+  assertGeneratedUiSourceContract(source, {
+    forbidCardShell: true,
+    sourceName: "ProfileClientElement.vue",
+    requiredPatterns: [
+      {
+        id: "profile-panel-body",
+        pattern: /profile-client-panel__body/,
+        message: "Profile editor needs a direct panel body."
+      }
+    ]
+  });
+  assert.match(source, /profile-client-panel__body/);
+  assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle|v-card-text|v-card-item/);
+});
+
+test("users-web account settings section templates use direct settings panels", async () => {
+  for (const relativePath of [
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsProfileSection.vue"),
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsPreferencesSection.vue"),
+    path.join("templates", "src", "components", "account", "settings", "AccountSettingsNotificationsSection.vue")
+  ]) {
+    const source = await readFile(path.join(PACKAGE_DIR, relativePath), "utf8");
+
+    assertGeneratedUiSourceContract(source, {
+      forbidCardShell: true,
+      sourceName: relativePath,
+      requiredPatterns: [
+        {
+          id: "account-settings-section",
+          pattern: /account-settings-section/,
+          message: "Account settings sections need the direct section panel primitive."
+        }
+      ]
+    });
+    assert.match(source, /account-settings-section/);
+    assert.doesNotMatch(source, /<v-card\b|v-card-title|v-card-subtitle/);
+  }
+});
+
 test("users-web descriptor metadata advertises home cog outlet and standard home settings placements", () => {
   assert.deepEqual(
     readOutlets("home-cog:primary-menu"),

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/users-web/client/bulkActions");
+  const { useCrudListBulkActions } = await import("@jskit-ai/users-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/users-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"]
+    ]
+  );
+});