@antelopejs/dms 0.6.2 → 0.7.1

package/frontend-vue/tests/form-display-options.test.ts

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { computed, createApp, h, useAttrs } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import Display from "../layers/dms-ui/app/components/form/components/Display.vue";
+
+interface StatusOptions {
+  onlineLabel?: string;
+  offlineLabel?: string;
+}
+
+// A status type worded from its options, as the registered one is: the
+// fallback labels show when the options do not reach the formatter.
+const statusType = {
+  id: "status",
+  formatter: {
+    default: (value: unknown, _locale: string, options?: unknown) => {
+      const opts = options as StatusOptions | undefined;
+      return value
+        ? (opts?.onlineLabel ?? "Online")
+        : (opts?.offlineLabel ?? "Offline");
+    },
+  },
+};
+
+/** A read-only field as a form renders it: its options spread on it. */
+function mountDisplay(modelValue: unknown, options: Record<string, unknown>) {
+  const app = createApp({
+    render: () => h(Display, { modelValue, type: "status", ...options }),
+  });
+  const container = document.createElement("div");
+  app.mount(container);
+  return { app, container };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("useAttrs", useAttrs);
+  vi.stubGlobal("useI18n", () => ({
+    locale: { value: "en" },
+    t: (key: string) => key,
+  }));
+  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => statusType }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("words a read-only status with the labels its column sets", () => {
+  const options = {
+    onlineLabel: "Pending",
+    offlineLabel: "Expired",
+    onlineColor: "warning",
+    offlineColor: "neutral",
+  };
+
+  const pending = mountDisplay(true, options);
+  const expired = mountDisplay(false, options);
+
+  expect(pending.container.textContent).toBe("Pending");
+  expect(expired.container.textContent).toBe("Expired");
+  pending.app.unmount();
+  expired.app.unmount();
+});

package/frontend-vue/tests/form-load-error.test.ts

@@ -0,0 +1,160 @@
+import { readFileSync } from "node:fs";
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import FormLoadError from "../layers/dms-ui/app/build/components/form/FormLoadError.vue";
+import {
+  type FormLoadSource,
+  trackFormRecordLoad,
+} from "../layers/dms-ui/app/build/composables/form/formRecordLoad";
+
+// A role that may edit a table's rows but not view them opened the edit form
+// empty: the row's read was refused, the form showed its blank fields, and a
+// value picked there replaced the row's own. A form whose record does not
+// load shows why, with a retry, and cannot be saved.
+
+const ROW = { values: { email: "zz-invitee@example.com" }, initial: {} };
+const FORBIDDEN = Object.assign(new Error("Forbidden"), { statusCode: 403 });
+
+interface Payload {
+  values: Record<string, unknown>;
+  initial: Record<string, unknown>;
+}
+
+function loadOf(
+  data: Payload | null,
+  error: unknown,
+  next?: { data: Payload; error: unknown },
+): FormLoadSource<Payload> {
+  const load: FormLoadSource<Payload> = {
+    data: ref(data),
+    error: ref(error),
+    refresh: vi.fn(async () => {
+      if (!next) return;
+      load.data.value = next.data;
+      load.error.value = next.error;
+    }),
+  };
+  return load;
+}
+
+describe("a form's record load", () => {
+  it("reports a refused read as forbidden and applies nothing", () => {
+    const apply = vi.fn();
+    const load = trackFormRecordLoad(loadOf(null, FORBIDDEN), apply);
+    expect(load.failure.value).toBe("forbidden");
+    expect(apply).not.toHaveBeenCalled();
+  });
+
+  it("never applies the values an earlier opening left in the cache", () => {
+    const apply = vi.fn();
+    const load = trackFormRecordLoad(loadOf(ROW, new Error("network")), apply);
+    expect(load.failure.value).toBe("error");
+    expect(apply).not.toHaveBeenCalled();
+  });
+
+  it("opens on the record once a retry loads it", async () => {
+    const apply = vi.fn();
+    const source = loadOf(null, FORBIDDEN, { data: ROW, error: null });
+    const load = trackFormRecordLoad(source, apply);
+    await load.retry();
+    expect(source.refresh).toHaveBeenCalledOnce();
+    expect(load.failure.value).toBe(null);
+    expect(load.retrying.value).toBe(false);
+    expect(apply).toHaveBeenCalledWith(ROW);
+  });
+
+  it("applies a record that loaded", () => {
+    const apply = vi.fn();
+    const load = trackFormRecordLoad(loadOf(ROW, null), apply);
+    expect(load.failure.value).toBe(null);
+    expect(apply).toHaveBeenCalledWith(ROW);
+  });
+});
+
+describe("the load error a form shows", () => {
+  const Slot = defineComponent({
+    props: {
+      title: { type: String, default: "" },
+      description: { type: String, default: "" },
+      label: { type: String, default: "" },
+    },
+    setup:
+      (props, { slots }) =>
+      () =>
+        h("div", [
+          props.title,
+          props.description,
+          props.label,
+          slots.default?.(),
+          slots.actions?.(),
+        ]),
+  });
+
+  async function render(failure: "forbidden" | "error"): Promise<string> {
+    const app = createSSRApp({
+      render: () => h(FormLoadError, { failure }),
+    });
+    for (const name of ["UButton", "UIcon"]) app.component(name, Slot);
+    return renderToString(app);
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal("useI18n", () => ({ t: String }));
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("says the read was refused, with a retry", async () => {
+    const html = await render("forbidden");
+    expect(html).toContain("dms.form.load_error.forbidden_title");
+    expect(html).toContain("dms.form.load_error.forbidden_description");
+    expect(html).toContain("dms.form.load_error.retry");
+  });
+
+  it("says the load failed, with a retry", async () => {
+    const html = await render("error");
+    expect(html).toContain("dms.form.load_error.error_title");
+    expect(html).toContain("dms.form.load_error.retry");
+  });
+
+  it("has its texts in English and French", () => {
+    for (const file of ["ui-en-GB.json", "ui-fr-FR.json"]) {
+      const locale = JSON.parse(
+        readFileSync(
+          new URL(`../layers/dms-ui/i18n/locales/${file}`, import.meta.url),
+          "utf8",
+        ),
+      );
+      expect(Object.keys(locale.dms.form.load_error).sort()).toEqual([
+        "error_description",
+        "error_title",
+        "forbidden_description",
+        "forbidden_title",
+        "retry",
+      ]);
+    }
+  });
+});
+
+describe("a form whose record did not load", () => {
+  const formSource = readFileSync(
+    new URL("../layers/dms-ui/app/components/form/Form.vue", import.meta.url),
+    "utf8",
+  );
+
+  it("shows the load error instead of its fields", () => {
+    expect(formSource).toMatch(
+      /<div v-if="loadFailure"[^>]*>\s*<DmsFormLoadError[\s\S]*?<\/div>\s*<div v-else :class="surfaceClasses\.body">/,
+    );
+  });
+
+  it("cannot be saved: no save bar, and a submit is refused", () => {
+    expect(formSource).toMatch(
+      /<DmsSaveBar\s+v-if="canSave && !isInstant && !loadFailure"/,
+    );
+    expect(formSource).toMatch(
+      /function onSubmit\([^)]*\) \{\s*if \(loadFailure\.value \|\| !runValidators\(\)\) return;/,
+    );
+  });
+});

package/frontend-vue/tests/form-saved-before-success.test.ts

@@ -0,0 +1,110 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { computed, effectScope, ref, watch, type EffectScope } from "vue";
+import { HttpMethod } from "../layers/dms-core/app/types/http";
+import { useForm } from "../layers/dms-ui/app/composables/form/useForm";
+import { useEventedAction } from "../layers/dms-core/app/composables/useEventedAction";
+import { FormEvents } from "../layers/dms-ui/app/composables/form/types/events";
+
+const authFetch = vi.fn();
+const sendComponentEvent = vi.fn();
+let scope: EffectScope;
+
+const FIELDS = [
+  { id: "roles", label: "Roles", component: { componentName: "DmsInputText" } },
+];
+
+function setupForm(onSaved: () => void) {
+  return scope.run(() =>
+    useForm(
+      {
+        componentId: "form-1",
+        pageId: "page-1",
+        fields: FIELDS,
+        fetchUrl: "/api/invites/get?id=invite-1",
+        submitUrl: "/api/invites/edit?id=invite-1",
+      } as never,
+      { onSaved },
+    ),
+  )!;
+}
+
+beforeEach(() => {
+  scope = effectScope();
+  authFetch.mockResolvedValue({ success: true });
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("HttpMethod", HttpMethod);
+  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+  vi.stubGlobal("Color", { error: "error", success: "success", info: "info" });
+  vi.stubGlobal("CONTENT_LANGUAGE_HEADER", "Content-Language");
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string) => key,
+    processApiMessage: (message: string) => message,
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useDmsRoute", () => ({ query: {} }));
+  vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent }));
+  // The real one: it sends the submit events the watch rules react to.
+  vi.stubGlobal("useEventedAction", useEventedAction);
+  vi.stubGlobal(
+    "useWatch",
+    (_actions: unknown, _id: unknown, initial: Record<string, unknown>) => ({
+      isLoading: ref(false),
+      state: ref({ ...initial }),
+    }),
+  );
+  vi.stubGlobal("navigateDms", vi.fn());
+});
+
+afterEach(() => {
+  scope.stop();
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+describe("DMS form announcing a successful submit", () => {
+  // A form page goes back to its list on the success event: announced while
+  // the form still held its changes, the leave guard asked to discard them
+  // although they were saved, and the page stayed open behind its dialog.
+  it("holds nothing unsaved once the success event goes out", async () => {
+    const steps: string[] = [];
+    const form = setupForm(() => steps.push("saved"));
+    let savedValues: unknown;
+    sendComponentEvent.mockImplementation((event: string) => {
+      if (event !== FormEvents.SUBMIT_SUCCESS) return;
+      steps.push("success");
+      savedValues = { ...form.initialValues.value };
+    });
+    form.initialValues.value = { roles: ["auditor"] };
+    const edited = { roles: ["auditor", "finance"] };
+    Object.assign(form.state.value, edited);
+
+    await form.onSubmit({ data: edited } as never);
+
+    expect(steps).toEqual(["saved", "success"]);
+    expect(savedValues).toEqual(edited);
+    expect(form.submitSucceeded.value).toBe(true);
+  });
+
+  it("announces no success, and saves nothing, when the submit is refused", async () => {
+    authFetch.mockRejectedValue({ statusCode: 400, data: "refused" });
+    const onSaved = vi.fn();
+    const form = setupForm(onSaved);
+    form.initialValues.value = { roles: ["auditor"] };
+    Object.assign(form.state.value, { roles: [] });
+
+    await form.onSubmit({ data: { roles: [] } } as never);
+
+    expect(onSaved).not.toHaveBeenCalled();
+    expect(sendComponentEvent).not.toHaveBeenCalledWith(
+      FormEvents.SUBMIT_SUCCESS,
+      expect.anything(),
+      expect.anything(),
+    );
+    expect(form.initialValues.value).toEqual({ roles: ["auditor"] });
+  });
+});

package/frontend-vue/tests/github-star-prompt.test.ts

@@ -0,0 +1,328 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  ref,
+  type App,
+  type Component,
+  type Ref,
+} from "vue";
+import GithubStarPrompt from "../layers/dms-layout/app/build/components/layout/GithubStarPrompt.vue";
+import EmptyLayout from "../layers/dms-layout/app/custom-layouts/EmptyLayout.vue";
+import SaveBar from "../layers/dms-ui/app/components/save-bar/SaveBar.vue";
+import {
+  GITHUB_STAR_PROMPT_DELAY_MS,
+  GITHUB_STAR_PROMPT_KEYS,
+  GITHUB_STAR_PROMPT_SNOOZE_MS,
+  GITHUB_STAR_PROMPT_TICK_MS,
+} from "../layers/dms-layout/app/build/composables/general/useGithubStarPrompt";
+import { GITHUB_REPOSITORY_URL } from "../layers/dms-layout/app/build/utils/github-repository";
+
+vi.mock("../layers/dms-layout/app/build/components/layout/Footer.vue", () => ({
+  default: { render: () => null },
+}));
+
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+
+let storage: Map<string, string>;
+let user: Ref<object | null>;
+let toasts: Ref<object[]>;
+let visibility: DocumentVisibilityState;
+let app: App | undefined;
+let host: HTMLDivElement;
+
+const ButtonStub = defineComponent({
+  inheritAttrs: false,
+  props: { label: { type: String, default: undefined } },
+  emits: ["click"],
+  setup:
+    (props, { attrs, emit }) =>
+    () =>
+      h(
+        "button",
+        {
+          type: "button",
+          "data-action": attrs["data-action"],
+          "aria-label": attrs["aria-label"],
+          onClick: () => emit("click"),
+        },
+        props.label,
+      ),
+});
+
+const memoryStorage = {
+  getItem: (key: string) => storage.get(key) ?? null,
+  setItem: (key: string, value: string) => void storage.set(key, value),
+  removeItem: (key: string) => void storage.delete(key),
+};
+
+const throwingStorage = {
+  getItem: () => {
+    throw new Error("SecurityError");
+  },
+  setItem: () => {
+    throw new Error("QuotaExceededError");
+  },
+};
+
+async function mount(component: Component = GithubStarPrompt): Promise<void> {
+  host = document.createElement("div");
+  document.body.append(host);
+  app = createApp(component);
+  app.component("UButton", ButtonStub);
+  app.component("UIcon", { render: () => null });
+  app.component("DmsIconWell", { render: () => null });
+  app.component("DmsAppLogo", { render: () => null });
+  app.mount(host);
+  await nextTick();
+}
+
+function prompt(): HTMLElement | null {
+  return host.querySelector('[role="dialog"]');
+}
+
+async function click(action: string): Promise<void> {
+  host.querySelector<HTMLButtonElement>(`[data-action="${action}"]`)!.click();
+  await nextTick();
+}
+
+async function advance(ms: number): Promise<void> {
+  vi.advanceTimersByTime(ms);
+  await nextTick();
+}
+
+async function setVisibility(state: DocumentVisibilityState): Promise<void> {
+  visibility = state;
+  document.dispatchEvent(new Event("visibilitychange"));
+  await nextTick();
+}
+
+function seedActiveTime(ms: number): void {
+  storage.set(GITHUB_STAR_PROMPT_KEYS.activeMs, String(ms));
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubEnv("DEV", true);
+  storage = new Map();
+  user = ref({ email: "user@example.com" });
+  toasts = ref([]);
+  visibility = "visible";
+  vi.spyOn(document, "visibilityState", "get").mockImplementation(
+    () => visibility,
+  );
+  vi.stubGlobal("localStorage", memoryStorage);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useCurrentUser", () => ({ user }));
+  vi.stubGlobal("useToast", () => ({ toasts }));
+  vi.stubGlobal("useColorModePreference", () => ref("system"));
+  vi.stubGlobal("open", vi.fn());
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  host?.remove();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.unstubAllEnvs();
+});
+
+describe("GithubStarPrompt", () => {
+  it("stays hidden before 15 minutes of use", async () => {
+    await mount();
+    await advance(GITHUB_STAR_PROMPT_DELAY_MS - GITHUB_STAR_PROMPT_TICK_MS);
+
+    expect(prompt()).toBeNull();
+    expect(Number(storage.get(GITHUB_STAR_PROMPT_KEYS.activeMs))).toBe(
+      GITHUB_STAR_PROMPT_DELAY_MS - GITHUB_STAR_PROMPT_TICK_MS,
+    );
+  });
+
+  it("shows in dev mode after 15 minutes of visible time, added up across sessions", async () => {
+    seedActiveTime(10 * MINUTE_MS);
+    await mount();
+    await advance(4 * MINUTE_MS);
+    expect(prompt()).toBeNull();
+
+    await advance(MINUTE_MS);
+
+    expect(prompt()).not.toBeNull();
+    expect(prompt()!.getAttribute("aria-labelledby")).toBeTruthy();
+  });
+
+  it("does not count the time the tab is hidden", async () => {
+    seedActiveTime(14 * MINUTE_MS);
+    await mount();
+    await setVisibility("hidden");
+    await advance(HOUR_MS);
+    expect(prompt()).toBeNull();
+
+    await setVisibility("visible");
+    await advance(MINUTE_MS);
+
+    expect(prompt()).not.toBeNull();
+  });
+
+  it("hides on Later and shows again 48 hours after", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await mount();
+    expect(prompt()).not.toBeNull();
+
+    await click("later");
+
+    expect(prompt()).toBeNull();
+    expect(Number(storage.get(GITHUB_STAR_PROMPT_KEYS.snoozedUntil))).toBe(
+      Date.now() + GITHUB_STAR_PROMPT_SNOOZE_MS,
+    );
+    await advance(GITHUB_STAR_PROMPT_SNOOZE_MS - HOUR_MS);
+    expect(prompt()).toBeNull();
+
+    await advance(HOUR_MS);
+    expect(prompt()).not.toBeNull();
+  });
+
+  it("opens the repository on star, and never shows again", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await mount();
+
+    await click("star");
+
+    expect(window.open).toHaveBeenCalledWith(
+      GITHUB_REPOSITORY_URL,
+      "_blank",
+      "noopener,noreferrer",
+    );
+    expect(prompt()).toBeNull();
+    expect(storage.get(GITHUB_STAR_PROMPT_KEYS.dismissed)).toBe("1");
+
+    app!.unmount();
+    host.remove();
+    await mount();
+    await advance(GITHUB_STAR_PROMPT_SNOOZE_MS);
+    expect(prompt()).toBeNull();
+  });
+
+  it("treats the close button as never show again", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await mount();
+
+    await click("close");
+
+    expect(prompt()).toBeNull();
+    expect(storage.get(GITHUB_STAR_PROMPT_KEYS.dismissed)).toBe("1");
+    expect(window.open).not.toHaveBeenCalled();
+  });
+
+  it("follows a choice made in another tab", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await mount();
+
+    storage.set(GITHUB_STAR_PROMPT_KEYS.dismissed, "1");
+    await advance(GITHUB_STAR_PROMPT_TICK_MS);
+
+    expect(prompt()).toBeNull();
+  });
+
+  // The time and the choices then last as long as the page.
+  it("does not crash when storage throws", async () => {
+    vi.stubGlobal("localStorage", throwingStorage);
+    await mount();
+    await advance(GITHUB_STAR_PROMPT_DELAY_MS - GITHUB_STAR_PROMPT_TICK_MS);
+    expect(prompt()).toBeNull();
+    await advance(GITHUB_STAR_PROMPT_TICK_MS);
+    expect(prompt()).not.toBeNull();
+
+    await click("later");
+    await advance(GITHUB_STAR_PROMPT_TICK_MS);
+    expect(prompt()).toBeNull();
+
+    await advance(GITHUB_STAR_PROMPT_SNOOZE_MS);
+    await click("close");
+    await advance(GITHUB_STAR_PROMPT_SNOOZE_MS);
+    expect(prompt()).toBeNull();
+  });
+
+  it("steps aside while a toast is up", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    toasts.value = [{ id: 1 }];
+    await mount();
+    expect(prompt()).toBeNull();
+
+    toasts.value = [];
+    await nextTick();
+    expect(prompt()).not.toBeNull();
+  });
+
+  it("steps aside while a floating save bar is shown", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+    }));
+    const dirty = ref(false);
+    const variant = ref<"floating" | "band">("floating");
+    await mount(
+      defineComponent({
+        setup: () => () => [
+          h(GithubStarPrompt),
+          h(SaveBar, { dirty: dirty.value, variant: variant.value }),
+        ],
+      }),
+    );
+    // Nothing to save: the bar keeps its place, hidden.
+    expect(prompt()).not.toBeNull();
+
+    dirty.value = true;
+    await nextTick();
+    expect(prompt()).toBeNull();
+
+    // A form card's footer band is not the bar sticking to the bottom.
+    variant.value = "band";
+    await nextTick();
+    expect(prompt()).not.toBeNull();
+
+    variant.value = "floating";
+    await nextTick();
+    expect(prompt()).toBeNull();
+
+    dirty.value = false;
+    await nextTick();
+    expect(prompt()).not.toBeNull();
+  });
+
+  it("renders nothing without a signed-in user", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    user.value = null;
+    await mount();
+
+    expect(prompt()).toBeNull();
+  });
+
+  it("is not part of the auth pages' layout", async () => {
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await mount(EmptyLayout);
+
+    expect(prompt()).toBeNull();
+  });
+
+  it("never shows outside dev mode, nor counts or stores anything", async () => {
+    vi.stubEnv("DEV", false);
+    const setItem = vi.spyOn(memoryStorage, "setItem");
+    await mount();
+    await advance(GITHUB_STAR_PROMPT_DELAY_MS);
+    seedActiveTime(GITHUB_STAR_PROMPT_DELAY_MS);
+    await advance(GITHUB_STAR_PROMPT_TICK_MS);
+
+    expect(prompt()).toBeNull();
+    expect(setItem).not.toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});