@antelopejs/dms 0.7.1 → 0.7.3

package/frontend-vue/tests/banner-block-fetch.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+/**
+ * A Banner with a `fetchUrl` draws what its route answers, over its static
+ * options field by field; draws nothing while the first answer is on its way
+ * or when the route answers no banner (`null`, `{}`, a 204); reads its route
+ * again on a page refresh; and runs the button targets the route answers.
+ */
+import { createApp, defineComponent, h, reactive, ref } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { refreshPageBlocks } from "../layers/dms-ui/app/utils/blockRefresh";
+
+const requests: string[] = [];
+let answer: unknown = null;
+const pressed: unknown[] = [];
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return answer;
+  },
+}));
+vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+vi.stubGlobal("useApiError", () => {});
+vi.stubGlobal("useI18n", () => ({ t: String, locale: ref("en") }));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-ui/app/build/composables/actions/useActionTargets",
+  () => ({
+    useActionTargets: () => ({
+      handleCustomButton: (button: unknown) => pressed.push(button),
+    }),
+  }),
+);
+vi.mock("../layers/dms-ui/app/components/banner/Banner.vue", () => ({
+  default: defineComponent({
+    props: {
+      title: { type: String, default: undefined },
+      description: { type: String, default: undefined },
+      tone: { type: String, default: undefined },
+      icon: { type: String, default: undefined },
+    },
+    setup:
+      (props, { slots }) =>
+      () =>
+        h("section", { "data-banner": JSON.stringify(props) }, [
+          slots.actions?.(),
+        ]),
+  }),
+}));
+
+const { default: BannerBlock } = await import(
+  "../layers/dms-ui/app/components/blocks/BannerBlock.vue"
+);
+
+// useChartFetch debounces every refresh past the first by 180ms.
+const SETTLE_MS = 250;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+const FETCH_URL = "/api/ws/{{params.id}}/health";
+
+const UButton = defineComponent({
+  props: { label: { type: String, default: undefined } },
+  setup:
+    (props, { attrs }) =>
+    () =>
+      h("button", { onClick: attrs.onClick }, props.label),
+});
+
+const mounted: Array<{ unmount: () => void }> = [];
+
+function mountBanner(props: Record<string, unknown>) {
+  const root = document.createElement("div");
+  const app = createApp(BannerBlock, {
+    componentId: "health",
+    pageId: "ws",
+    routeParams: { id: "ws-1" },
+    fetchUrl: FETCH_URL,
+    ...props,
+  });
+  app.component("UButton", UButton);
+  app.mount(root);
+  mounted.push(app);
+  return {
+    root,
+    read: () => {
+      const banner = root.querySelector("[data-banner]");
+      return banner ? JSON.parse(banner.getAttribute("data-banner")!) : null;
+    },
+  };
+}
+
+beforeEach(() => {
+  requests.length = 0;
+  pressed.length = 0;
+  answer = null;
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+it("draws the fetched props over the static options", async () => {
+  answer = { tone: "error", title: "Provider down" };
+  const banner = mountBanner({ title: "Static", description: "Kept" });
+  expect(banner.read()).toBeNull();
+  await settle();
+
+  expect(requests).toEqual(["/api/ws/ws-1/health"]);
+  expect(banner.read()).toMatchObject({
+    tone: "error",
+    title: "Provider down",
+    description: "Kept",
+    icon: "i-ph-warning-circle",
+  });
+});
+
+it.each([
+  ["null", null],
+  ["an empty object", {}],
+  ["no content (204)", undefined],
+])("draws nothing when the route answers %s", async (_name, response) => {
+  answer = response;
+  const banner = mountBanner({ title: "Static" });
+  await settle();
+  expect(requests).toHaveLength(1);
+  expect(banner.root.innerHTML).toBe("<!--v-if-->");
+});
+
+it("follows a page refresh, appearing and going away", async () => {
+  const banner = mountBanner({});
+  await settle();
+  expect(banner.read()).toBeNull();
+
+  answer = { title: "Degraded" };
+  refreshPageBlocks();
+  await settle();
+  expect(banner.read()).toMatchObject({ title: "Degraded" });
+
+  answer = null;
+  refreshPageBlocks();
+  await settle();
+  expect(banner.read()).toBeNull();
+  expect(requests).toHaveLength(3);
+});
+
+it("runs a button target the route answers", async () => {
+  const replay = {
+    label: "Replay",
+    target: { type: "api", url: "/api/replay", successMessage: "Replayed" },
+    confirm: { title: "Replay the queue?" },
+  };
+  answer = { title: "Outage", actions: [replay] };
+  const banner = mountBanner({});
+  await settle();
+
+  banner.root.querySelector("button")!.click();
+  expect(pressed).toEqual([replay]);
+});

package/frontend-vue/tests/block-fetch-options-forwarding.test.ts

@@ -0,0 +1,100 @@
+/**
+ * Every block reading its data through useChartFetch hands it the period
+ * scope and the realtime topics of its options: a block that dropped them
+ * would silently stop following its PeriodSelector or its topics.
+ */
+import { type Component, createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import type { UseChartFetchOptions } from "../layers/dms-ui/app/composables/chart/useChartFetch";
+
+const fetchOptions: Array<UseChartFetchOptions<unknown>> = [];
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: (options: UseChartFetchOptions<unknown>) => {
+    fetchOptions.push(options);
+    return {
+      data: ref(null),
+      isLoading: ref(false),
+      error: ref(null),
+      refresh: async () => {},
+    };
+  },
+}));
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+// The frames around the blocks are not under test here.
+vi.mock("../layers/dms-ui/app/components/card/Card.vue", () => ({
+  default: defineComponent({ setup: () => () => h("div") }),
+}));
+vi.mock(
+  "#dms-layout/app/build/composables/navigation/useCategoryNavCards",
+  () => ({
+    useCategoryNavCards: () => ({ cards: ref([]) }),
+    usePreviewEntryVeil: () => ({}),
+  }),
+);
+
+const BLOCKS: Record<string, string> = {
+  StatGroupBlock: "../layers/dms-ui/app/components/blocks/StatGroupBlock.vue",
+  KeyValueListBlock:
+    "../layers/dms-ui/app/components/blocks/KeyValueListBlock.vue",
+  NavCardGridBlock:
+    "../layers/dms-ui/app/components/blocks/NavCardGridBlock.vue",
+  ActivityFeed:
+    "../layers/dms-ui/app/components/activity-feed/ActivityFeed.vue",
+  MeterBlock: "../layers/dms-ui/app/components/meter/MeterBlock.vue",
+};
+const GLOBAL_COMPONENTS = ["DmsCard", "UIcon", "USkeleton", "UButton", "ULink"];
+const SCOPE = "dashboard";
+const TOPICS = ["stats:first", "stats:second"];
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+async function render(block: Component): Promise<void> {
+  const app = createSSRApp({
+    render: () =>
+      h(block, {
+        componentId: "block",
+        pageId: "page",
+        fetchUrl: "/api/data",
+        periodScope: SCOPE,
+        realtimeTopic: TOPICS,
+      }),
+  });
+  for (const name of GLOBAL_COMPONENTS) app.component(name, Slot);
+  await renderToString(app);
+}
+
+beforeEach(() => {
+  fetchOptions.length = 0;
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+it.each(Object.keys(BLOCKS))(
+  "%s forwards periodScope and realtimeTopic",
+  async (name) => {
+    const block = (await import(BLOCKS[name])).default as Component;
+    await render(block);
+    expect(fetchOptions).toHaveLength(1);
+    expect(fetchOptions[0]).toMatchObject({
+      fetchUrl: "/api/data",
+      periodScope: SCOPE,
+      realtimeTopic: TOPICS,
+    });
+  },
+);

package/frontend-vue/tests/block-items-period-realtime.test.ts

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+/**
+ * A list block reading its items from a route follows a PeriodSelector like
+ * a KPI card (the period goes with every request, and a new period reads the
+ * route again) and reads the route again on each event of its realtime
+ * topics, keeping its items on screen until the answer lands.
+ */
+import { createApp, defineComponent, h, nextTick, reactive, ref } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import type { RealtimeTopicHandler } from "../layers/dms-core/app/composables/realtime/useUserRealtime";
+
+const requests: string[] = [];
+let revision = 1;
+const topicHandlers = new Map<string, RealtimeTopicHandler>();
+
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return { items: [{ revision }] };
+  },
+}));
+vi.stubGlobal("useDmsRoute", () => reactive({ query: {} }));
+
+vi.mock("../layers/dms-core/app/composables/watch/useWatch", () => ({
+  useWatch: () => ({ state: ref({}) }),
+}));
+vi.mock(
+  "../layers/dms-core/app/composables/components/useComponentEvent",
+  () => ({ useComponentEvent: () => ({}) }),
+);
+vi.mock("../layers/dms-core/app/composables/realtime/useRealtimeTopic", () => ({
+  useRealtimeTopic: (topic: string, handler: RealtimeTopicHandler) => {
+    topicHandlers.set(topic, handler);
+  },
+}));
+
+const { usePeriod } = await import(
+  "../layers/dms-core/app/composables/period/usePeriod"
+);
+const { registerPeriodScope } = await import(
+  "../layers/dms-core/app/composables/period/usePeriodScope"
+);
+const { useBlockItems } = await import(
+  "../layers/dms-ui/app/build/composables/blocks/useBlockItems"
+);
+
+const SCOPE = "block-items-period";
+const STATS_URL = "/api/stats";
+const FACTS_TOPICS = ["facts:first", "facts:second"];
+// useChartFetch debounces every refresh past the first by 180ms.
+const SETTLE_MS = 250;
+const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
+
+interface ItemsProbe {
+  items?: { value: unknown[] };
+  isPending?: { value: boolean };
+}
+
+interface SelectedPeriod {
+  period?: ReturnType<typeof usePeriod>;
+}
+
+const mounted: Array<{ unmount: () => void }> = [];
+
+function mountPeriodPage() {
+  const selected: SelectedPeriod = {};
+  const Selector = defineComponent({
+    setup() {
+      const period = usePeriod({ defaultPreset: "last-7-days" });
+      registerPeriodScope(SCOPE, period.state);
+      selected.period = period;
+      return () => h("div");
+    },
+  });
+  const Block = defineComponent({
+    setup() {
+      useBlockItems({
+        items: () => [],
+        fetchUrl: STATS_URL,
+        periodScope: SCOPE,
+      });
+      return () => h("div");
+    },
+  });
+  const app = createApp({ render: () => h("main", [h(Selector), h(Block)]) });
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return selected;
+}
+
+function mountRealtimeBlock(probe: ItemsProbe) {
+  const Block = defineComponent({
+    setup() {
+      const { items, isPending } = useBlockItems({
+        items: () => [],
+        fetchUrl: STATS_URL,
+        realtimeTopic: FACTS_TOPICS,
+      });
+      probe.items = items;
+      probe.isPending = isPending;
+      return () => h("div");
+    },
+  });
+  const app = createApp(Block);
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+}
+
+beforeEach(() => {
+  requests.length = 0;
+  revision = 1;
+  topicHandlers.clear();
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+it("requests the items with the period of its scope, again when it changes", async () => {
+  const selected = mountPeriodPage();
+  await settle();
+  expect(requests).toHaveLength(1);
+  expect(requests[0]).toMatch(/^\/api\/stats\?from=.*&preset=last-7-days/);
+
+  selected.period?.setPreset("last-30-days");
+  await nextTick();
+  await settle();
+  expect(requests).toHaveLength(2);
+  expect(requests[1]).toContain("preset=last-30-days");
+});
+
+it("reads the route again on each event of any of its topics", async () => {
+  const probe: ItemsProbe = {};
+  mountRealtimeBlock(probe);
+  await settle();
+  expect([...topicHandlers.keys()]).toEqual(FACTS_TOPICS);
+  expect(probe.items?.value).toEqual([{ revision: 1 }]);
+
+  revision = 2;
+  topicHandlers.get("facts:second")?.({ type: "facts.update" } as never);
+  expect(probe.isPending?.value).toBe(false);
+  expect(probe.items?.value).toEqual([{ revision: 1 }]);
+  await settle();
+
+  expect(requests).toEqual([STATS_URL, STATS_URL]);
+  expect(probe.items?.value).toEqual([{ revision: 2 }]);
+});

package/frontend-vue/tests/block-route-params.test.ts

@@ -17,6 +17,7 @@ import {
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   replaceUrlVariables,
+  resolveTextVariables,
   resolveUrlVariables,
 } from "../layers/dms-ui/app/build/utils/urlVariables";
 
@@ -96,6 +97,53 @@ describe("resolveUrlVariables", () => {
     );
   });
 
+  it("encodes the values it fills, so each stays one parameter", () => {
+    expect(
+      resolveUrlVariables("/api/log/{{params.id}}?route={{query.route}}", {
+        routeParams: { id: "a b" },
+        routeQuery: { route: "GET /api/a?b=c&d" },
+      }),
+    ).toBe("/api/log/a%20b?route=GET%20%2Fapi%2Fa%3Fb%3Dc%26d");
+  });
+
+  // The router keeps the page path percent-encoded, and route parameters are
+  // read from it.
+  it("does not encode a route parameter twice", () => {
+    expect(
+      replaceUrlVariables("/api/ws/{{params.id}}", {
+        routeParams: { id: "caf%C3%A9%20bar" },
+        routeQuery: {},
+      }),
+    ).toBe("/api/ws/caf%C3%A9%20bar");
+    expect(
+      replaceUrlVariables("/api/ws/{{params.id}}", {
+        routeParams: { id: "100%" },
+        routeQuery: {},
+      }),
+    ).toBe("/api/ws/100%25");
+  });
+
+  it("writes response values as answered", () => {
+    expect(
+      replaceUrlVariables("{{response.redirectPath}}&tab={{query.tab}}", {
+        routeQuery: { tab: "a&b" },
+        response: { redirectPath: "/settings/users?invited=1" },
+      }),
+    ).toBe("/settings/users?invited=1&tab=a%26b");
+  });
+
+  it("fills a plain value without encoding it", () => {
+    expect(
+      resolveTextVariables("{{query.status}} / {{params.id}}", {
+        routeParams: { id: "ws-1" },
+        routeQuery: { status: "on hold" },
+      }),
+    ).toBe("on hold / ws-1");
+    expect(resolveTextVariables("{{query.status}}", { routeQuery: {} })).toBe(
+      undefined,
+    );
+  });
+
   it("leaves a URL without tokens as it is", () => {
     expect(resolveUrlVariables("/api/plain", { routeQuery: {} })).toBe(
       "/api/plain",

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

@@ -0,0 +1,155 @@
+// @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("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

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