@antelopejs/dms 0.9.2 → 0.9.4

package/frontend-vue/tests/code-block.test.ts

@@ -1,183 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { type App, createApp, h, ref } from "vue";
-
-const data = ref<Record<string, unknown> | null>(null);
-const error = ref<unknown>(null);
-const isLoading = ref(false);
-const fetchOptions = vi.fn();
-
-vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
-  useChartFetch: (options: unknown) => {
-    fetchOptions(options);
-    return { data, isLoading, error, refresh: async () => {} };
-  },
-}));
-
-vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
-  useWatch: () => ({ state: ref({}) }),
-}));
-
-let app: App | undefined;
-
-const flushPromises = () => new Promise((resolve) => setTimeout(resolve));
-let host: HTMLDivElement;
-
-async function mount(path: string, props: Record<string, unknown>) {
-  const { default: component } = await import(path);
-  app = createApp({ setup: () => () => h(component, props) });
-  for (const name of ["UIcon", "USkeleton", "UButton"]) {
-    app.component(name, (_, { attrs }) =>
-      h("i", { ...attrs, "data-stub": name }),
-    );
-  }
-  app.mount(host);
-  await flushPromises();
-  await vi.dynamicImportSettled();
-  await flushPromises();
-}
-
-const mountSnippet = (props: Record<string, unknown>) =>
-  mount("../layers/dms-ui/app/components/code-snippet/CodeSnippet.vue", props);
-const mountBlock = (props: Record<string, unknown>) =>
-  mount("../layers/dms-ui/app/components/blocks/CodeBlock.vue", {
-    componentId: "code",
-    pageId: "page",
-    ...props,
-  });
-
-const pre = () => host.querySelector("pre")!;
-const copyButton = () => host.querySelector("button");
-
-beforeEach(() => {
-  data.value = null;
-  error.value = null;
-  isLoading.value = false;
-  fetchOptions.mockClear();
-  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
-  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
-  host = document.createElement("div");
-  document.body.append(host);
-});
-
-afterEach(() => {
-  app?.unmount();
-  host.remove();
-  vi.unstubAllGlobals();
-});
-
-describe("DmsCodeSnippet", () => {
-  it("highlights the code in its language, under a head naming it", async () => {
-    await mountSnippet({
-      code: '{ "id": 1 }',
-      language: "json",
-      title: "Body",
-    });
-    expect(pre().textContent).toBe('{ "id": 1 }');
-    expect(pre().querySelector('[style*="--ui-info"]')?.textContent).toBe(
-      '"id"',
-    );
-    expect(host.textContent).toContain("Body");
-    expect(host.textContent).toContain("JSON");
-    expect(copyButton()).not.toBeNull();
-  });
-
-  it("reads an alias as its language", async () => {
-    await mountSnippet({ code: "pnpm install", language: "bash" });
-    expect(pre().dataset.language).toBe("shell");
-    expect(host.textContent).toContain("Shell");
-  });
-
-  it("drops the copy button and the head when nothing is left to show", async () => {
-    await mountSnippet({ code: "plain words", copy: false });
-    expect(copyButton()).toBeNull();
-    expect(pre().previousElementSibling).toBeNull();
-  });
-
-  it("floats the copy button in the code's corner without a title or a language", async () => {
-    await mountSnippet({ code: '{"ok":true}' });
-    expect(host.querySelector("[data-floating-copy]")).toBe(copyButton());
-    expect(host.textContent).not.toContain("Text");
-    expect(pre().className).toContain("pe-10");
-  });
-
-  it("keeps the head of a snippet naming its language", async () => {
-    await mountSnippet({ code: "plain words", language: "text" });
-    expect(host.querySelector("[data-floating-copy]")).toBeNull();
-    expect(copyButton()).not.toBeNull();
-    expect(pre().className).not.toContain("pe-10");
-  });
-
-  it("breaks a word too long for the line with wrap anywhere", async () => {
-    await mountSnippet({ code: "x".repeat(400), wrap: "anywhere" });
-    expect(pre().className).toContain("[overflow-wrap:anywhere]");
-    expect(pre().className).toContain("whitespace-pre-wrap");
-  });
-
-  it("caps the height with a CSS length when no line count is set", async () => {
-    await mountSnippet({ code: "a", maxHeight: "20rem" });
-    expect(pre().style.maxHeight).toBe("20rem");
-    app?.unmount();
-    await mountSnippet({ code: "a\nb", maxHeight: "20rem", maxLines: 1 });
-    expect(pre().style.maxHeight).toBe("35px");
-  });
-
-  it("wraps long lines or scrolls them, and caps the height in lines", async () => {
-    await mountSnippet({ code: "a\nb\nc", wrap: true, maxLines: 2 });
-    expect(pre().className).toContain("whitespace-pre-wrap");
-    expect(pre().style.maxHeight).toBe("54px");
-    app?.unmount();
-    await mountSnippet({ code: "a" });
-    expect(pre().className).toContain("whitespace-pre");
-    expect(pre().className).not.toContain("whitespace-pre-wrap");
-    expect(pre().style.maxHeight).toBe("");
-  });
-});
-
-describe("CodeBlock", () => {
-  it("shows its static code and title", async () => {
-    await mountBlock({ code: "SELECT 1", language: "sql", title: "Query" });
-    expect(pre().textContent).toBe("SELECT 1");
-    expect(host.textContent).toContain("Query");
-  });
-
-  it("replaces the code and the language with what its route answers", async () => {
-    data.value = { code: "echo hi", language: "shell" };
-    await mountBlock({
-      code: "old",
-      language: "json",
-      fetchUrl: "/api/snippet",
-    });
-    expect(fetchOptions).toHaveBeenCalledWith(
-      expect.objectContaining({ fetchUrl: "/api/snippet" }),
-    );
-    expect(pre().textContent).toBe("echo hi");
-    expect(pre().dataset.language).toBe("shell");
-  });
-
-  it("draws placeholder lines until the first answer", async () => {
-    isLoading.value = true;
-    await mountBlock({ fetchUrl: "/api/snippet" });
-    expect(host.querySelector("pre")).toBeNull();
-    expect(host.querySelector("[aria-busy]")).not.toBeNull();
-  });
-
-  it("offers a retry when the first load fails", async () => {
-    error.value = new Error("network");
-    await mountBlock({ fetchUrl: "/api/snippet" });
-    expect(host.querySelector("pre")).toBeNull();
-    expect(host.textContent).toContain("dms.blocks.load_error");
-  });
-});
-
-describe("EmptyState block", () => {
-  it("shows a snippet between its text and its actions", async () => {
-    await mount("../layers/dms-ui/app/components/blocks/EmptyStateBlock.vue", {
-      title: "No email sent yet",
-      code: { content: "await mail.send({ to })", language: "typescript" },
-    });
-    expect(pre().textContent).toBe("await mail.send({ to })");
-    expect(host.textContent).toContain("TypeScript");
-    expect(copyButton()).not.toBeNull();
-  });
-});

package/frontend-vue/tests/code-highlight.test.ts

@@ -1,72 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  type CodeToken,
-  highlightCode,
-} from "../layers/dms-ui/app/build/utils/codeHighlight";
-import { resolveCodeLanguage } from "../layers/dms-ui/app/build/utils/codeLanguages";
-
-const KEYWORD = "var(--ui-primary)";
-const STRING = "var(--ui-success)";
-const NUMBER = "var(--ui-warning)";
-const COMMENT = "var(--ui-text-dimmed)";
-const PROPERTY = "var(--ui-info)";
-
-const colorOf = (tokens: CodeToken[], text: string) =>
-  tokens.find((token) => token.text === text)?.style?.color;
-
-const joined = (tokens: CodeToken[]) =>
-  tokens.map((token) => token.text).join("");
-
-describe("read-only code highlighting", () => {
-  it("keeps every character of the code, in order", () => {
-    const code = '{\n  "name": "media",\n  "size": 42\n}';
-    expect(joined(highlightCode(code, "json"))).toBe(code);
-  });
-
-  it("colours JSON keys, strings and numbers", () => {
-    const tokens = highlightCode('{ "name": "media", "size": 42 }', "json");
-    expect(colorOf(tokens, '"name"')).toBe(PROPERTY);
-    expect(colorOf(tokens, '"media"')).toBe(STRING);
-    expect(colorOf(tokens, "42")).toBe(NUMBER);
-  });
-
-  it("reads TypeScript, SQL and HTML with the editor's languages", () => {
-    expect(
-      colorOf(highlightCode("const x: number = 1;", "typescript"), "const"),
-    ).toBe(KEYWORD);
-    expect(
-      colorOf(highlightCode("SELECT id FROM users", "sql"), "SELECT"),
-    ).toBe(KEYWORD);
-    expect(colorOf(highlightCode('<a href="/">x</a>', "html"), "a")).toBe(
-      KEYWORD,
-    );
-  });
-
-  it("marks a shell command, its flags, strings, variables and comments", () => {
-    const code =
-      'curl -X POST "$API_URL" \\\n  -H "Accept: json" # send\necho $HOME | grep root';
-    const tokens = highlightCode(code, "shell");
-    expect(joined(tokens)).toBe(code);
-    expect(colorOf(tokens, "curl")).toBe(KEYWORD);
-    expect(colorOf(tokens, "-X")).toBe(PROPERTY);
-    expect(colorOf(tokens, '"$API_URL"')).toBe(STRING);
-    expect(colorOf(tokens, "-H")).toBe(PROPERTY);
-    expect(colorOf(tokens, "# send")).toBe(COMMENT);
-    expect(colorOf(tokens, "echo")).toBe(KEYWORD);
-    expect(colorOf(tokens, "$HOME")).toBe(NUMBER);
-    expect(colorOf(tokens, "grep")).toBe(KEYWORD);
-    expect(colorOf(tokens, "root")).toBeUndefined();
-  });
-
-  it("shows plain text and unknown languages as written", () => {
-    expect(highlightCode("SELECT 1", "text")).toEqual([{ text: "SELECT 1" }]);
-    expect(highlightCode("x = 1", "cobol")).toEqual([{ text: "x = 1" }]);
-  });
-
-  it("reads the usual aliases as their language", () => {
-    expect(resolveCodeLanguage("bash")).toBe("shell");
-    expect(resolveCodeLanguage("TS")).toBe("typescript");
-    expect(resolveCodeLanguage("plain")).toBe("text");
-    expect(resolveCodeLanguage(undefined)).toBe("text");
-  });
-});

package/frontend-vue/tests/color-mode-server-render.test.ts

@@ -1,84 +0,0 @@
-/**
- * The color-mode plugin as the server runs it: the `<html>` tag of the rendered
- * document already carries an explicit preference, so the first paint is right
- * without waiting for JavaScript, and `system` is left to the pre-paint script.
- */
-import { useHead } from "@unhead/vue";
-import { createHead, renderSSRHead } from "@unhead/vue/server";
-import { createSSRApp, ref } from "vue";
-import { beforeEach, expect, it, vi } from "vitest";
-
-interface CookieOptions {
-  default: () => unknown;
-  maxAge?: number;
-}
-
-const COLOR_MODE_COOKIE = "dms-color-mode";
-const ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365;
-const requestCookies = new Map<string, unknown>();
-const cookieReads = vi.fn();
-
-vi.stubGlobal("defineDmsPlugin", (setup: unknown) => setup);
-vi.stubGlobal("useHead", useHead);
-vi.stubGlobal("useDmsCookie", (name: string, options: CookieOptions) => {
-  cookieReads(name, options);
-  return ref(
-    requestCookies.has(name) ? requestCookies.get(name) : options.default(),
-  );
-});
-
-const { default: colorModePlugin } = await import(
-  "../layers/dms-layout/app/plugins/color-mode"
-);
-
-async function renderHead(preference?: string) {
-  if (preference !== undefined)
-    requestCookies.set(COLOR_MODE_COOKIE, preference);
-  const app = createSSRApp({ render: () => null });
-  const head = createHead();
-  app.use(head);
-  await app.runWithContext(() => colorModePlugin({} as never));
-  return renderSSRHead(head);
-}
-
-beforeEach(() => {
-  requestCookies.clear();
-  cookieReads.mockClear();
-});
-
-it.each(["light", "dark"])(
-  "renders the %s class on <html> for an explicit preference",
-  async (preference) => {
-    const { htmlAttrs } = await renderHead(preference);
-
-    expect(htmlAttrs).toContain(` class="${preference}"`);
-  },
-);
-
-it.each([undefined, "system", "sepia"])(
-  "leaves the class to the browser for a %s preference",
-  async (preference) => {
-    const { htmlAttrs } = await renderHead(preference);
-
-    expect(htmlAttrs).not.toContain("class");
-  },
-);
-
-it("reads the dms-color-mode cookie, kept a year and defaulting to system", async () => {
-  await renderHead();
-
-  expect(cookieReads).toHaveBeenCalledOnce();
-  const [name, options] = cookieReads.mock.calls[0] as [string, CookieOptions];
-  expect(name).toBe(COLOR_MODE_COOKIE);
-  expect(options.maxAge).toBe(ONE_YEAR_IN_SECONDS);
-  expect(options.default()).toBe("system");
-});
-
-it("ships the pre-paint script as a classic inline script in <head>", async () => {
-  // No src, type, defer or async: the browser runs it while it parses <head>,
-  // before the deferred entry module that installs Nuxt UI.
-  const { headTags, bodyTags, bodyTagsOpen } = await renderHead("dark");
-
-  expect(headTags).toMatch(/<script id="dms-color-mode">\(\(\) => \{/);
-  expect(bodyTags + bodyTagsOpen).toBe("");
-});

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

@@ -1,320 +0,0 @@
-// @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"]);
-  });
-});