@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/tests/instant-save.test.ts

@@ -0,0 +1,217 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { effectScope, nextTick, reactive } from "vue";
+import { combineSaveStates } from "../layers/dms-layout/app/composables/layout/useInstantSaveHeader";
+import {
+  INSTANT_SAVE_DEBOUNCE_MS,
+  INSTANT_SAVED_STATE_MS,
+  useInstantSave,
+} from "../layers/dms-ui/app/build/composables/instant-save/useInstantSave";
+
+interface Settings extends Record<string, unknown> {
+  name: string;
+  theme: string;
+  digest: boolean;
+}
+
+/** A server that answers when told to: each save waits for `settle`. */
+function deferredServer() {
+  const calls: Array<{
+    changes: Partial<Settings>;
+    resolve: () => void;
+    reject: (error: unknown) => void;
+  }> = [];
+  const save = vi.fn(
+    (changes: Partial<Settings>) =>
+      new Promise<void>((resolve, reject) => {
+        calls.push({ changes, resolve, reject });
+      }),
+  );
+  return { calls, save };
+}
+
+async function settle(): Promise<void> {
+  for (let tick = 0; tick < 4; tick++) await nextTick();
+  await Promise.resolve();
+}
+
+function setup(save: (changes: Partial<Settings>) => Promise<void>) {
+  const values = reactive<Settings>({
+    name: "Acme",
+    theme: "light",
+    digest: true,
+  });
+  const onError = vi.fn();
+  const scope = effectScope();
+  const instant = scope.run(() =>
+    useInstantSave<Settings>({
+      read: (key) => values[key],
+      write: (key, value) => {
+        (values as Record<string, unknown>)[key] = value;
+      },
+      save,
+      onError,
+    }),
+  )!;
+  return { values, instant, onError, scope };
+}
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+describe("useInstantSave", () => {
+  it("saves a pick at once, alone, and shows saving then saved", async () => {
+    const server = deferredServer();
+    const { values, instant } = setup(server.save);
+
+    instant.change("theme", "dark");
+    expect(values.theme).toBe("dark");
+    expect(server.save).toHaveBeenCalledWith({ theme: "dark" });
+    expect(instant.states.theme).toBe("saving");
+
+    server.calls[0]!.resolve();
+    await settle();
+    expect(instant.states.theme).toBe("saved");
+
+    vi.advanceTimersByTime(INSTANT_SAVED_STATE_MS);
+    expect(instant.states.theme).toBe("idle");
+  });
+
+  it("waits for typing to pause before saving text, then sends the last value", async () => {
+    const server = deferredServer();
+    const { instant } = setup(server.save);
+
+    instant.change("name", "A", { debounce: true });
+    instant.change("name", "Ac", { debounce: true });
+    vi.advanceTimersByTime(INSTANT_SAVE_DEBOUNCE_MS - 1);
+    expect(server.save).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(server.save).toHaveBeenCalledTimes(1);
+    expect(server.save).toHaveBeenCalledWith({ name: "Ac" });
+  });
+
+  it("puts the last confirmed value back when a save fails, then retries", async () => {
+    const server = deferredServer();
+    const { values, instant, onError } = setup(server.save);
+
+    instant.change("theme", "dark");
+    const refusal = new Error("refused");
+    server.calls[0]!.reject(refusal);
+    await settle();
+
+    expect(values.theme).toBe("light");
+    expect(instant.states.theme).toBe("error");
+    expect(instant.failed.value).toEqual({ theme: "dark" });
+    expect(onError).toHaveBeenCalledWith(refusal, { theme: "dark" });
+
+    instant.retry();
+    expect(values.theme).toBe("dark");
+    expect(server.save).toHaveBeenLastCalledWith({ theme: "dark" });
+    server.calls[1]!.resolve();
+    await settle();
+    expect(instant.failed.value).toBeNull();
+    expect(instant.states.theme).toBe("saved");
+  });
+
+  it("rolls back to what the server last confirmed, not what was shown first", async () => {
+    const server = deferredServer();
+    const { values, instant } = setup(server.save);
+
+    instant.change("theme", "dark");
+    server.calls[0]!.resolve();
+    await settle();
+    instant.change("theme", "blue");
+    server.calls[1]!.reject(new Error("refused"));
+    await settle();
+
+    expect(values.theme).toBe("dark");
+  });
+
+  it("sends a change made while a save of its key runs once that one ends", async () => {
+    const server = deferredServer();
+    const { values, instant } = setup(server.save);
+
+    instant.change("theme", "dark");
+    instant.change("theme", "blue");
+    expect(server.save).toHaveBeenCalledTimes(1);
+
+    server.calls[0]!.resolve();
+    await settle();
+    expect(server.save).toHaveBeenLastCalledWith({ theme: "blue" });
+    expect(values.theme).toBe("blue");
+  });
+
+  it("keeps a newer value on screen when an older save of its key fails", async () => {
+    const server = deferredServer();
+    const { values, instant } = setup(server.save);
+
+    instant.change("theme", "dark");
+    instant.change("theme", "blue");
+    server.calls[0]!.reject(new Error("refused"));
+    await settle();
+
+    expect(values.theme).toBe("blue");
+  });
+
+  it("saves several keys in one request", () => {
+    const server = deferredServer();
+    const { instant } = setup(server.save);
+
+    instant.changeMany({ theme: "dark", digest: false });
+    expect(server.save).toHaveBeenCalledWith({ theme: "dark", digest: false });
+    expect(instant.states.theme).toBe("saving");
+    expect(instant.states.digest).toBe("saving");
+  });
+
+  it("leaves a text still being typed out of a save of several keys", () => {
+    const server = deferredServer();
+    const { instant } = setup(server.save);
+
+    instant.change("name", "Acme Inc", { debounce: true });
+    instant.changeMany({ theme: "dark" });
+    expect(server.save).toHaveBeenCalledTimes(1);
+    expect(server.save).toHaveBeenCalledWith({ theme: "dark" });
+
+    vi.advanceTimersByTime(INSTANT_SAVE_DEBOUNCE_MS);
+    expect(server.save).toHaveBeenLastCalledWith({ name: "Acme Inc" });
+  });
+
+  it("queues a value the source already shows, from the confirmed one", async () => {
+    const server = deferredServer();
+    const { values, instant } = setup(server.save);
+    instant.confirm({ name: "Acme" });
+
+    values.name = "Typed";
+    instant.queue("name", "Typed");
+    server.calls[0]!.reject(new Error("refused"));
+    await settle();
+
+    expect(values.name).toBe("Acme");
+  });
+
+  it("sends a pending change at once when flushed", () => {
+    const server = deferredServer();
+    const { instant } = setup(server.save);
+
+    instant.change("name", "Acme Inc", { debounce: true });
+    void instant.flush();
+    expect(server.save).toHaveBeenCalledWith({ name: "Acme Inc" });
+  });
+
+  it("drops a pending change once cancelled", () => {
+    const server = deferredServer();
+    const { instant } = setup(server.save);
+
+    instant.change("name", "Acme Inc", { debounce: true });
+    instant.cancel("name");
+    vi.advanceTimersByTime(INSTANT_SAVE_DEBOUNCE_MS);
+    expect(server.save).not.toHaveBeenCalled();
+  });
+
+  it("reads one state for the page: saving, then error, then saved", () => {
+    expect(combineSaveStates(["saved", "error", "saving"])).toBe("saving");
+    expect(combineSaveStates(["saved", "error", "idle"])).toBe("error");
+    expect(combineSaveStates(["idle", "saved", undefined])).toBe("saved");
+    expect(combineSaveStates([])).toBe("idle");
+  });
+});

package/frontend-vue/tests/key-value-rows.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import {
+  keyValueObject,
+  keyValueProblem,
+  keyValueRows,
+} from "../layers/dms-ui/app/build/composables/form/keyValueRows";
+
+describe("key-value rows", () => {
+  it("reads an object as rows, and back", () => {
+    const value = { Accept: "*/*", "X-Trace": "on" };
+    const rows = keyValueRows(value, false);
+    expect(rows).toEqual([
+      { key: "Accept", value: "*/*" },
+      { key: "X-Trace", value: "on" },
+    ]);
+    expect(keyValueObject(rows, false)).toEqual(value);
+  });
+
+  it("reads and writes { value, enabled } when toggleable", () => {
+    const value = { retries: { value: 3, enabled: false } };
+    const rows = keyValueRows(value, true);
+    expect(rows).toEqual([{ key: "retries", value: 3, enabled: false }]);
+    expect(keyValueObject(rows, true)).toEqual(value);
+    expect(keyValueObject([{ key: "new" }], true)).toEqual({
+      new: { value: null, enabled: true },
+    });
+  });
+
+  it("drops the rows nobody filled, and trims the names", () => {
+    expect(keyValueObject([{}, { key: " a ", value: "1" }], false)).toEqual({
+      a: "1",
+    });
+  });
+
+  it("says when a value has no name, or a name comes twice", () => {
+    expect(keyValueProblem([{ key: "", value: "x" }])).toBe(
+      "$dms.field_errors.key_missing",
+    );
+    expect(
+      keyValueProblem([
+        { key: "a", value: "1" },
+        { key: "a ", value: "2" },
+      ]),
+    ).toBe("$dms.field_errors.key_duplicate");
+    expect(keyValueProblem([{}, { key: "a", value: "1" }])).toBeUndefined();
+  });
+
+  it("reads nothing as no rows", () => {
+    expect(keyValueRows(null, false)).toEqual([]);
+    expect(keyValueRows(undefined, true)).toEqual([]);
+  });
+});

package/frontend-vue/tests/keyboard-platform.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_KEYBOARD_PLATFORM,
+  detectKeyboardPlatform,
+  formatKeyboardShortcut,
+  keyboardKeyLabel,
+} from "../layers/dms-ui/app/composables/global/keyboardPlatform";
+import { PAGE_SEARCH_HINT_KEYS } from "../layers/dms-ui/app/build/composables/global/searchShortcuts";
+
+const MAC_UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36";
+const WINDOWS_UA =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36";
+const IPHONE_UA =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+
+describe("detectKeyboardPlatform", () => {
+  it.each([
+    ["client hint macOS", { userAgentData: { platform: "macOS" } }, "mac"],
+    [
+      "client hint Windows",
+      { userAgentData: { platform: "Windows" } },
+      "other",
+    ],
+    ["client hint Linux", { userAgentData: { platform: "Linux" } }, "other"],
+    ["platform MacIntel", { platform: "MacIntel" }, "mac"],
+    ["platform iPhone", { platform: "iPhone" }, "mac"],
+    ["platform iPad", { platform: "iPad" }, "mac"],
+    ["platform Win32", { platform: "Win32" }, "other"],
+    ["platform Linux x86_64", { platform: "Linux x86_64" }, "other"],
+    ["mac user agent only", { userAgent: MAC_UA }, "mac"],
+    ["iPhone user agent only", { userAgent: IPHONE_UA }, "mac"],
+    ["windows user agent only", { userAgent: WINDOWS_UA }, "other"],
+  ] as const)("reads %s", (_case, navigator, expected) => {
+    expect(detectKeyboardPlatform(navigator)).toBe(expected);
+  });
+
+  it("prefers the client hint over the legacy platform", () => {
+    expect(
+      detectKeyboardPlatform({
+        userAgentData: { platform: "Windows" },
+        platform: "MacIntel",
+      }),
+    ).toBe("other");
+  });
+
+  it("falls back to the server default without a navigator", () => {
+    expect(detectKeyboardPlatform(undefined)).toBe(DEFAULT_KEYBOARD_PLATFORM);
+    expect(DEFAULT_KEYBOARD_PLATFORM).toBe("other");
+  });
+});
+
+describe("keyboard labels", () => {
+  it("prints meta as ⌘ on macOS and Ctrl elsewhere", () => {
+    expect(keyboardKeyLabel("meta", "mac")).toBe("⌘");
+    expect(keyboardKeyLabel("meta", "other")).toBe("Ctrl");
+  });
+
+  it("prints the other modifiers per platform", () => {
+    expect(keyboardKeyLabel("shift", "mac")).toBe("⇧");
+    expect(keyboardKeyLabel("alt", "mac")).toBe("⌥");
+    expect(keyboardKeyLabel("alt", "other")).toBe("Alt");
+  });
+
+  it("uppercases letters and keeps unknown key names", () => {
+    expect(keyboardKeyLabel("k", "mac")).toBe("K");
+    expect(keyboardKeyLabel("/", "other")).toBe("/");
+    expect(keyboardKeyLabel("letter_placeholder", "other")).toBe(
+      "letter_placeholder",
+    );
+  });
+
+  it("runs a mac combination together and spaces a PC one", () => {
+    expect(formatKeyboardShortcut(["meta", "k"], "mac")).toBe("⌘K");
+    expect(formatKeyboardShortcut(["meta", "k"], "other")).toBe("Ctrl K");
+    expect(formatKeyboardShortcut(["meta", "v"], "other")).toBe("Ctrl V");
+  });
+
+  it("prints the page search hint as ⌘ / or Ctrl /", () => {
+    expect(
+      PAGE_SEARCH_HINT_KEYS.map((k) => keyboardKeyLabel(k, "mac")),
+    ).toEqual(["⌘", "/"]);
+    expect(
+      PAGE_SEARCH_HINT_KEYS.map((k) => keyboardKeyLabel(k, "other")),
+    ).toEqual(["Ctrl", "/"]);
+  });
+});

package/frontend-vue/tests/kpi-no-comparison.test.ts

@@ -0,0 +1,92 @@
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
+
+const response = ref<Record<string, unknown> | null>(null);
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: response,
+    isLoading: ref(false),
+    error: ref(null),
+    refresh: async () => {},
+  }),
+}));
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const TREND_LINE = 'class="flex h-6 items-center"';
+const STAT_TREND_PLACEHOLDER = 'class="h-4"';
+// The trend badge's own classes (the sparkline's gradient carries "%" too).
+const TREND_BADGE = "whitespace-nowrap tabular-nums transition-colors";
+
+async function render(props: Record<string, unknown> = {}) {
+  const app = createSSRApp({
+    render: () =>
+      h(KpiCard, {
+        title: "Revenue",
+        componentId: "kpi",
+        pageId: "page",
+        compareLabel: "vs previous month",
+        ...props,
+      }),
+  });
+  for (const name of ["DmsCard", "UIcon", "USkeleton", "UButton"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("a KPI card with no comparison period", () => {
+  it("shows no change at all, not a 0% stand-in", async () => {
+    response.value = { value: 1535, sparkline: [1, 2, 3] };
+    const html = await render();
+    expect(html).not.toContain(TREND_BADGE);
+    expect(html).not.toContain("●");
+    expect(html).toContain("vs previous month");
+  });
+
+  it("keeps the trend's line, so toggling a comparison moves nothing", async () => {
+    response.value = { value: 1535 };
+    const without = await render();
+    response.value = { value: 1535, previousValue: 1616, delta: -5 };
+    const withDelta = await render();
+    expect(without).toContain(TREND_LINE);
+    expect(withDelta).toContain(TREND_LINE);
+    expect(withDelta).toContain(TREND_BADGE);
+    expect(withDelta).toMatch(/-5[.,]0\s?%/);
+  });
+
+  it("still shows a real flat change while comparing", async () => {
+    response.value = { value: 1535, previousValue: 1535, delta: 0 };
+    expect(await render()).toContain("●");
+  });
+
+  it("holds the trend's place in the stat variant too", async () => {
+    response.value = { value: 1535, sparkline: [1, 2, 3] };
+    const html = await render({ variant: "stat", showSparkline: true });
+    expect(html).toContain(STAT_TREND_PLACEHOLDER);
+    expect(html).not.toContain(TREND_BADGE);
+  });
+
+  it("reserves nothing when the card shows no change by design", async () => {
+    response.value = { value: 1535 };
+    const html = await render({ showDelta: false, compareLabel: undefined });
+    expect(html).not.toContain(TREND_LINE);
+  });
+});

package/frontend-vue/tests/member-role-picker.test.ts

@@ -0,0 +1,227 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  type App,
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  provide,
+  ref,
+} from "vue";
+import {
+  formFieldInjectionKey,
+  formStateInjectionKey,
+} from "@nuxt/ui/composables/useFormField";
+import { sameFormValue } from "../layers/dms-ui/app/build/composables/unsaved-changes/formValue";
+
+const ROLES_URL = "/settings/workspace/members/role-options";
+const ROLE_OPTIONS = {
+  roles: [
+    { _id: "admin", name: "Admin", permissionIds: ["a", "b", "c"] },
+    { _id: "finance", name: "Finance", permissionIds: ["c", "d"] },
+    { _id: "support", name: "Support", permissionIds: ["e"] },
+  ],
+  totalPermissions: 10,
+};
+
+const fieldError = ref<string | undefined>();
+const formState = ref<Record<string, unknown>>({});
+const model = ref<string[] | null | undefined>([]);
+const authFetch = vi.fn();
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+const translate = (key: string, named?: Record<string, unknown>) =>
+  named ? `${key} ${Object.values(named).join("/")}` : key;
+
+async function flush(): Promise<void> {
+  for (let tick = 0; tick < 6; tick++) await nextTick();
+}
+
+/** The picker inside a UFormField named `roleIds`, as a form renders it. */
+async function mountPicker(props: Record<string, unknown> = {}) {
+  const { default: MemberRolePicker } = await import(
+    "../layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue"
+  );
+  const Field = defineComponent({
+    setup() {
+      provide(
+        formFieldInjectionKey,
+        computed(() => ({
+          name: "roleIds",
+          error: fieldError.value,
+          ariaId: "field-roles",
+        })) as never,
+      );
+      provide(
+        formStateInjectionKey,
+        computed(() => formState.value),
+      );
+      return () =>
+        h(MemberRolePicker, {
+          id: "roleIds",
+          rolesUrl: ROLES_URL,
+          modelValue: model.value,
+          "onUpdate:modelValue": (value: string[]) => {
+            model.value = value;
+          },
+          ...props,
+        });
+    },
+  });
+  app = createApp(Field);
+  const stub = (tag: string) =>
+    defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h(tag, slots.default?.()),
+    });
+  app.component("UIcon", stub("i"));
+  app.component("USkeleton", stub("span"));
+  app.component("ULink", stub("a"));
+  app.mount(host);
+  await flush();
+}
+
+const pill = (name: string) =>
+  [...host.querySelectorAll<HTMLButtonElement>("button[data-value]")].find(
+    (button) => button.textContent?.trim() === name,
+  )!;
+const pressed = () =>
+  [...host.querySelectorAll("button[aria-pressed='true']")].map((button) =>
+    button.textContent?.trim(),
+  );
+const hint = () => host.querySelector("p")?.textContent?.trim();
+
+async function toggle(name: string): Promise<void> {
+  pill(name).click();
+  await flush();
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("onMounted", onMounted);
+  vi.stubGlobal("useI18n", () => ({ t: translate }));
+  authFetch.mockReset();
+  authFetch.mockResolvedValue(ROLE_OPTIONS);
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  fieldError.value = undefined;
+  formState.value = {};
+  model.value = [];
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("offers the server's roles and picks and unpicks them", async () => {
+  await mountPicker();
+
+  expect(authFetch).toHaveBeenCalledWith(ROLES_URL);
+  expect(
+    [...host.querySelectorAll("button[data-value]")].map((b) =>
+      b.textContent?.trim(),
+    ),
+  ).toEqual(["Admin", "Finance", "Support"]);
+  expect(pressed()).toEqual([]);
+
+  await toggle("Finance");
+  await toggle("Admin");
+  expect(model.value).toEqual(["finance", "admin"]);
+  expect(pressed()).toEqual(["Admin", "Finance"]);
+  // Permissions granted by both roles count once.
+  expect(hint()).toContain(
+    "page.settings.members.invite.roles_hint Admin + Finance/4/10",
+  );
+
+  await toggle("Finance");
+  expect(model.value).toEqual(["admin"]);
+});
+
+it("can clear every role, saying what an empty choice means", async () => {
+  model.value = ["support"];
+  await mountPicker({ allowEmpty: true });
+
+  await toggle("Support");
+  expect(model.value).toEqual([]);
+  expect(hint()).toContain("page.settings.members.form.roles_hint_none");
+});
+
+it("asks for a role while none is picked when one is required", async () => {
+  await mountPicker();
+  expect(hint()).toContain("page.settings.members.invite.roles_hint_empty");
+});
+
+it("rings the unpicked pills and marks the group invalid on a field error", async () => {
+  model.value = ["admin"];
+  await mountPicker();
+  const group = host.querySelector("[role=group]")!;
+  expect(group.getAttribute("aria-invalid")).toBe("false");
+  expect(pill("Finance").className).not.toContain("border-error");
+
+  fieldError.value = "This field is required";
+  await flush();
+
+  expect(group.getAttribute("aria-invalid")).toBe("true");
+  expect(group.getAttribute("aria-describedby")).toBe("field-roles-error");
+  expect(pill("Finance").className).toContain("border-error");
+  expect(pill("Support").className).toContain("border-error");
+  // A picked role keeps its picked look.
+  expect(pill("Admin").className).not.toContain("border-error");
+});
+
+it("puts a role picked again back in its loaded place, leaving the form clean", async () => {
+  // As the members data API loads them: `{ _id, name }` each.
+  const loaded = [
+    { _id: "support", name: "Support" },
+    { _id: "admin", name: "Admin" },
+  ];
+  model.value = ["support", "admin"];
+  await mountPicker({
+    initialValue: loaded,
+    keyMapping: { label: "name", value: "_id" },
+  });
+
+  await toggle("Support");
+  expect(sameFormValue(model.value, ["support", "admin"])).toBe(false);
+
+  await toggle("Support");
+  expect(model.value).toEqual(["support", "admin"]);
+  expect(sameFormValue(model.value, ["support", "admin"])).toBe(true);
+
+  // A role new to the form follows the loaded ones.
+  await toggle("Finance");
+  expect(model.value).toEqual(["support", "admin", "finance"]);
+});
+
+it("keeps the roles inert while the owner field is on", async () => {
+  model.value = ["admin"];
+  formState.value = { isTenantOwner: true };
+  await mountPicker({ ownerField: "isTenantOwner" });
+
+  expect(pill("Finance").disabled).toBe(true);
+  expect(hint()).toContain("page.settings.members.invite.roles_owner_hint");
+  await toggle("Finance");
+  expect(model.value).toEqual(["admin"]);
+
+  formState.value = { isTenantOwner: false };
+  await flush();
+  expect(pill("Finance").disabled).toBe(false);
+  await toggle("Finance");
+  expect(model.value).toEqual(["admin", "finance"]);
+});
+
+it("waits for the form's values before showing the pills", async () => {
+  await mountPicker({ loading: true });
+  expect(host.querySelectorAll("button[data-value]")).toHaveLength(0);
+});