npm - @antelopejs/dms - Versions diffs - 0.4.2 → 0.4.4 - Mend

@antelopejs/dms 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/frontend-vue/tests/color-mode-sync.test.ts ADDED Viewed

@@ -0,0 +1,320 @@
+// @vitest-environment jsdom
+/**
+ * The color-mode plugin in the browser, in boot order: the server-rendered
+ * pre-paint script runs while `<head>` parses, Nuxt UI's `useDark()` runs when
+ * the app installs Nuxt UI, then the DMS plugins run. The `dms-color-mode`
+ * cookie is the source of truth, and vueuse's store, which Nuxt UI's
+ * components share, mirrors it both ways.
+ */
+import { useHead } from "@unhead/vue";
+import {
+  createHead as createClientHead,
+  renderDOMHead,
+} from "@unhead/vue/client";
+import {
+  createHead as createServerHead,
+  renderSSRHead,
+} from "@unhead/vue/server";
+import { useColorMode, useDark } from "@vueuse/core";
+import {
+  computed,
+  createApp,
+  createSSRApp,
+  effectScope,
+  ref,
+  type EffectScope,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+interface ColorSchemeChange {
+  matches: boolean;
+}
+type ColorSchemeListener = (change: ColorSchemeChange) => void;
+type ClientHead = ReturnType<typeof createClientHead>;
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const VUEUSE_STORAGE_KEY = "vueuse-color-scheme";
+const colorSchemeListeners = new Set<ColorSchemeListener>();
+const storedPreference = ref("system");
+const cookieWrites = vi.fn();
+const preference = computed({
+  get: () => storedPreference.value,
+  set: (next: string) => {
+    cookieWrites(next);
+    storedPreference.value = next;
+  },
+});
+let prefersDark = false;
+let scope: EffectScope;
+let clientHead: ClientHead | undefined;
+vi.stubGlobal("defineDmsPlugin", (setup: unknown) => setup);
+vi.stubGlobal("useHead", useHead);
+vi.stubGlobal("useDmsCookie", () => preference);
+const { default: colorModePlugin } = await import(
+  "../layers/dms-layout/app/plugins/color-mode"
+);
+async function renderServerHead(): Promise<string> {
+  vi.stubEnv("SSR", true);
+  const app = createSSRApp({ render: () => null });
+  const head = createServerHead();
+  app.use(head);
+  app.runWithContext(() => colorModePlugin({} as never));
+  vi.unstubAllEnvs();
+  return (await renderSSRHead(head)).headTags;
+}
+const serverHead = await renderServerHead();
+function stubSystemColorScheme(): void {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    get matches() {
+      return query === DARK_SCHEME_QUERY && prefersDark;
+    },
+    addEventListener: (_type: string, listener: ColorSchemeListener) =>
+      colorSchemeListeners.add(listener),
+    removeEventListener: (_type: string, listener: ColorSchemeListener) =>
+      colorSchemeListeners.delete(listener),
+  }));
+}
+function switchSystemColorScheme(isDark: boolean): void {
+  prefersDark = isDark;
+  colorSchemeListeners.forEach((listener) => listener({ matches: isDark }));
+}
+/** Parses the server's `<head>`, running its inline script as a browser would. */
+function loadDocument(cookie?: string): void {
+  if (cookie !== undefined) document.cookie = `dms-color-mode=${cookie}`;
+  document.head.innerHTML = serverHead;
+  const script = document.querySelector("script#dms-color-mode");
+  new Function(script?.textContent ?? "")();
+}
+/** What `@nuxt/ui/vue-plugin` runs when the app installs it. */
+function bootNuxtUi() {
+  return scope.run(() => useDark())!;
+}
+/** A Nuxt UI color-mode component's store, `UDashboardSearch`'s theme group. */
+function mountNuxtUiComponent() {
+  return scope.run(() => useColorMode())!;
+}
+function bootDmsPlugin(): void {
+  const app = createApp({ render: () => null });
+  clientHead = createClientHead();
+  app.use(clientHead);
+  scope.run(() => app.runWithContext(() => colorModePlugin({} as never)));
+}
+function htmlClasses(): string[] {
+  return [...document.documentElement.classList];
+}
+/** Lets the watchers run and unhead patch the document. */
+async function settle(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve));
+  if (clientHead) await renderDOMHead(clientHead);
+}
+beforeEach(() => {
+  scope = effectScope();
+  clientHead = undefined;
+  prefersDark = false;
+  storedPreference.value = "system";
+  cookieWrites.mockClear();
+  localStorage.clear();
+  document.cookie = "dms-color-mode=; max-age=0";
+  document.head.innerHTML = "";
+  document.documentElement.className = "";
+  stubSystemColorScheme();
+});
+afterEach(() => {
+  scope.stop();
+  colorSchemeListeners.clear();
+});
+describe("pre-paint script", () => {
+  it("hands vueuse the cookie's mode, so Nuxt UI boots agreeing", () => {
+    localStorage.setItem(VUEUSE_STORAGE_KEY, "light");
+    // What the renderer's own pre-paint script may still have added.
+    document.documentElement.classList.add("light");
+    loadDocument("%22dark%22");
+    expect(localStorage.getItem(VUEUSE_STORAGE_KEY)).toBe("dark");
+    expect(htmlClasses()).toEqual(["dark"]);
+    expect(bootNuxtUi().value).toBe(true);
+    expect(htmlClasses()).toEqual(["dark"]);
+  });
+  it.each([
+    {
+      source: "light as useDmsCookie writes it, on a dark system",
+      cookie: "%22light%22",
+      prefersDark: true,
+      stored: "light",
+      painted: "light",
+    },
+    {
+      source: "a raw dark",
+      cookie: "dark",
+      prefersDark: false,
+      stored: "dark",
+      painted: "dark",
+    },
+    {
+      source: "system on a dark system",
+      cookie: "%22system%22",
+      prefersDark: true,
+      stored: "auto",
+      painted: "dark",
+    },
+    {
+      source: "no cookie on a light system",
+      cookie: undefined,
+      prefersDark: false,
+      stored: "auto",
+      painted: "light",
+    },
+    {
+      source: "an unknown value on a dark system",
+      cookie: "%22sepia%22",
+      prefersDark: true,
+      stored: "auto",
+      painted: "dark",
+    },
+  ])(
+    "stores $stored and paints $painted for $source",
+    ({ cookie, prefersDark: isDark, stored, painted }) => {
+      prefersDark = isDark;
+      loadDocument(cookie);
+      expect(localStorage.getItem(VUEUSE_STORAGE_KEY)).toBe(stored);
+      expect(htmlClasses()).toEqual([painted]);
+    },
+  );
+  it("is left in place by the client head, which neither removes nor re-inserts it", async () => {
+    loadDocument("%22dark%22");
+    bootNuxtUi();
+    bootDmsPlugin();
+    await settle();
+    expect(document.querySelectorAll("script#dms-color-mode")).toHaveLength(1);
+  });
+  it("is never inserted by the client head when the page was rendered without it", async () => {
+    bootNuxtUi();
+    bootDmsPlugin();
+    await settle();
+    expect(document.querySelectorAll("script#dms-color-mode")).toHaveLength(0);
+  });
+});
+describe("sync with Nuxt UI's store", () => {
+  it("boots without writing either side when the script already agreed", async () => {
+    storedPreference.value = "dark";
+    loadDocument("%22dark%22");
+    const setItem = vi.spyOn(Storage.prototype, "setItem");
+    bootNuxtUi();
+    bootDmsPlugin();
+    await settle();
+    expect(setItem).not.toHaveBeenCalled();
+    expect(cookieWrites).not.toHaveBeenCalled();
+    expect(htmlClasses()).toEqual(["dark"]);
+    setItem.mockRestore();
+  });
+  it("brings the store in line on boot when the pre-paint script did not run", async () => {
+    storedPreference.value = "dark";
+    localStorage.setItem(VUEUSE_STORAGE_KEY, "light");
+    const isDark = bootNuxtUi();
+    bootDmsPlugin();
+    await settle();
+    expect(isDark.value).toBe(true);
+    expect(htmlClasses()).toEqual(["dark"]);
+    expect(cookieWrites).not.toHaveBeenCalled();
+  });
+  it("mirrors a preference change into the store Nuxt UI's components read", async () => {
+    loadDocument();
+    bootNuxtUi();
+    bootDmsPlugin();
+    const component = mountNuxtUiComponent();
+    preference.value = "dark";
+    await settle();
+    expect(component.store.value).toBe("dark");
+    expect(htmlClasses()).toEqual(["dark"]);
+    expect(cookieWrites.mock.calls).toEqual([["dark"]]);
+    preference.value = "system";
+    await settle();
+    expect(component.store.value).toBe("auto");
+    expect(htmlClasses()).toEqual(["light"]);
+  });
+  it("writes a theme picked in a Nuxt UI component back to the cookie", async () => {
+    loadDocument();
+    bootNuxtUi();
+    bootDmsPlugin();
+    const component = mountNuxtUiComponent();
+    component.store.value = "dark";
+    await settle();
+    expect(cookieWrites.mock.calls).toEqual([["dark"]]);
+    expect(htmlClasses()).toEqual(["dark"]);
+    component.store.value = "auto";
+    await settle();
+    expect(cookieWrites.mock.calls).toEqual([["dark"], ["system"]]);
+  });
+  it.each([true, false])(
+    "keeps the class when an explicit mode gives way to a system that resolves the same (dark system: %s)",
+    async (isDark) => {
+      const mode = isDark ? "dark" : "light";
+      prefersDark = isDark;
+      storedPreference.value = mode;
+      loadDocument(`%22${mode}%22`);
+      bootNuxtUi();
+      bootDmsPlugin();
+      await settle();
+      preference.value = "system";
+      await settle();
+      expect(htmlClasses()).toEqual([mode]);
+    },
+  );
+  it("follows the system color scheme while the preference is system", async () => {
+    loadDocument();
+    bootNuxtUi();
+    bootDmsPlugin();
+    await settle();
+    expect(htmlClasses()).toEqual(["light"]);
+    switchSystemColorScheme(true);
+    await settle();
+    expect(htmlClasses()).toEqual(["dark"]);
+  });
+});

package/frontend-vue/tests/form-actions.test.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { formShowsActions } from "../layers/dms-ui/app/composables/form/useForm";
+describe("formShowsActions", () => {
+  it("shows the buttons once the form has somewhere to submit to", () => {
+    expect(formShowsActions({ submitUrl: "/api/order/new" }, [{}])).toBe(true);
+    expect(formShowsActions({}, [{}])).toBe(false);
+  });
+  it("hides them on a form nothing in which can be filled in", () => {
+    expect(
+      formShowsActions({ submitUrl: "/api/order/new" }, [{ disabled: true }]),
+    ).toBe(false);
+  });
+  it("shows them when asked, before there is an address or a field", () => {
+    expect(formShowsActions({ showActions: true }, [])).toBe(true);
+  });
+  it("hides them when asked, whatever the form could submit", () => {
+    expect(
+      formShowsActions({ showActions: false, submitUrl: "/api/order/new" }, [
+        {},
+      ]),
+    ).toBe(false);
+  });
+});

package/frontend-vue/tests/form-required-fields.test.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 import { jsonSchemaToZod, type JsonSchema } from "json-schema-to-zod";
 import {
   buildValidationSchema,
+  isFieldMarkedRequired,
   makeFieldSchemaRequired,
 } from "../layers/dms-ui/app/composables/form/useForm";
@@ -86,3 +87,46 @@ describe("buildValidationSchema", () => {
     expect(schema.safeParse({ firstname: "" }).success).to.equal(true);
   });
 });
+describe("isFieldMarkedRequired", () => {
+  const none = new Set<string>();
+  it("marks a field declared required", () => {
+    expect(
+      isFieldMarkedRequired({ id: "name", required: true }, none, none, none),
+    ).to.equal(true);
+    expect(isFieldMarkedRequired({ id: "name" }, none, none, none)).to.equal(
+      false,
+    );
+  });
+  it("marks a field a watch action made required", () => {
+    expect(
+      isFieldMarkedRequired({ id: "name" }, none, none, new Set(["name"])),
+    ).to.equal(true);
+  });
+  it("does not mark a switch, which always holds a value", () => {
+    expect(
+      isFieldMarkedRequired(
+        { id: "owner", required: true, type: "boolean" },
+        none,
+        none,
+        new Set(["owner"]),
+      ),
+    ).to.equal(false);
+  });
+  it("does not mark a disabled or hidden field, which is not validated", () => {
+    const field = { id: "name", required: true };
+    expect(
+      isFieldMarkedRequired({ ...field, disabled: true }, none, none, none),
+    ).to.equal(false);
+    expect(
+      isFieldMarkedRequired(field, new Set(["name"]), none, none),
+    ).to.equal(false);
+    expect(
+      isFieldMarkedRequired(field, none, new Set(["name"]), none),
+    ).to.equal(false);
+  });
+});

package/frontend-vue/tests/form-submit-target.test.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { resolveSubmitTarget } from "../layers/dms-ui/app/composables/form/useForm";
+const page = { routeParams: { id: "42" }, routeQuery: { id: "7" } };
+describe("resolveSubmitTarget", () => {
+  it("sends a submit where its URL points, tokens filled in", () => {
+    expect(resolveSubmitTarget("/api/ticket/edit?id={{query.id}}", page)).toEqual(
+      { url: "/api/ticket/edit?id=7" },
+    );
+    expect(resolveSubmitTarget("/api/ticket/edit?id={{params.id}}", page)).toEqual(
+      { url: "/api/ticket/edit?id=42" },
+    );
+  });
+  it("has nowhere to send a read-only form's values", () => {
+    expect(resolveSubmitTarget(undefined, page)).toEqual({ missing: "url" });
+    expect(resolveSubmitTarget("", page)).toEqual({ missing: "url" });
+  });
+  it("refuses a URL naming a row the page does not carry", () => {
+    expect(
+      resolveSubmitTarget("/api/ticket/edit?id={{query.id}}", {
+        routeQuery: {},
+      }),
+    ).toEqual({ missing: "token" });
+  });
+});

package/frontend-vue/tests/tree-without-source.test.ts ADDED Viewed

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+/**
+ * A tree is configured after it is placed.
+ *
+ * The editor drops a block and the author points it at its data afterwards, so
+ * a tree with neither a URL nor nodes of its own is a page under construction,
+ * not a mistake. It used to throw during setup, which the canvas could only
+ * report as a crash on the block the author had just placed.
+ */
+import * as vue from "vue";
+import { ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import type { TreeProps } from "../layers/dms-ui/app/composables/tree/types";
+// The layer's auto-imports, as the Nuxt build would supply them: Vue's own
+// first, then the DMS helpers the composable reaches for.
+for (const name of [
+  "ref",
+  "shallowRef",
+  "computed",
+  "watch",
+  "watchEffect",
+  "toValue",
+  "nextTick",
+] as const) {
+  vi.stubGlobal(name, vue[name]);
+}
+vi.stubGlobal(
+  "TreeEvents",
+  new Proxy({}, { get: (_target, key) => String(key) }),
+);
+vi.stubGlobal("createError", (payload: unknown) => new Error(String(payload)));
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async () => [],
+}));
+vi.stubGlobal("useComponentEvent", () => ({ sendComponentEvent: () => {} }));
+vi.stubGlobal("useDefinedFunctions", () => ({ getFunction: () => undefined }));
+vi.stubGlobal("useTranslation", () => ({ processI18n: (text: string) => text }));
+vi.stubGlobal("useWatch", () => ({ isLoading: ref(false), state: ref({}) }));
+vi.stubGlobal("useToast", () => ({ add: () => {} }));
+vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+vi.stubGlobal("useEventedAction", () => ({ execute: async () => [] }));
+vi.stubGlobal(
+  "useDmsAsyncData",
+  async (_key: string, handler: () => Promise<unknown>) => ({
+    data: ref(await handler()),
+    status: ref("success"),
+    refresh: async () => {},
+  }),
+);
+const { useTree } = await import(
+  "../layers/dms-ui/app/composables/tree/useTree"
+);
+describe("a tree with no source yet", () => {
+  const props = (extra: Partial<TreeProps> = {}) =>
+    ({
+      selectionBehavior: "toggle",
+      componentId: "tree",
+      pageId: "page",
+      ...extra,
+    }) as TreeProps;
+  it("holds nothing, rather than refusing to render", async () => {
+    const tree = await useTree(props());
+    expect(tree.items.value).toEqual([]);
+  });
+  it("still reads the nodes it is given", async () => {
+    const tree = await useTree(
+      props({ staticNodes: [{ value: "one", label: "One" }] }),
+    );
+    expect(tree.items.value.map((node) => node.value)).toEqual(["one"]);
+  });
+});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"