@oneuptime/common 12.0.9 → 12.0.11

package/Tests/Types/Runbook/RunbookStepType.test.ts

@@ -1,5 +1,7 @@
 import RunbookStepType, {
+  PAYLOAD_CARRYING_STEP_TYPES,
   RUNNER_EXECUTED_STEP_TYPES,
+  isPayloadCarryingStepType,
   isRunnerExecutedStepType,
 } from "../../../Types/Runbook/RunbookStepType";
 import { describe, expect, test } from "@jest/globals";
@@ -240,3 +242,125 @@ describe("isRunnerExecutedStepType", () => {
     );
   });
 });
+
+/*
+ * The second partition, inside the Runner lane: how a job carries its
+ * instruction.
+ *
+ * A Bash or JavaScript job carries a script. An SSH or Kubernetes job carries
+ * structured instructions plus a credential resolved at claim time, and an
+ * EMPTY script — which is the whole reason this split has to be named
+ * somewhere. Issue #3209 was RunnerJob.script being declared a required
+ * column: an empty string is falsy, so the required-column check rejected
+ * every SSH and Kubernetes job at create() with "script is required". The rule
+ * is per-type and cannot be written as column metadata, so it lives in
+ * RunnerJobService.enqueue and reads this list.
+ */
+describe("PAYLOAD_CARRYING_STEP_TYPES", () => {
+  test("contains exactly SSH and Kubernetes", () => {
+    expect(PAYLOAD_CARRYING_STEP_TYPES).toEqual([
+      RunbookStepType.SSH,
+      RunbookStepType.Kubernetes,
+    ]);
+    expect(new Set(PAYLOAD_CARRYING_STEP_TYPES).size).toBe(
+      PAYLOAD_CARRYING_STEP_TYPES.length,
+    );
+  });
+
+  test("every entry is also a Runner-executed type", () => {
+    /*
+     * A payload-carrying type that the Worker executes would be a
+     * contradiction: the payload exists to be handed to a Runner.
+     */
+    for (const type of PAYLOAD_CARRYING_STEP_TYPES) {
+      expect(RUNNER_EXECUTED_STEP_TYPES).toContain(type);
+    }
+  });
+});
+
+describe("isPayloadCarryingStepType", () => {
+  test.each([RunbookStepType.SSH, RunbookStepType.Kubernetes])(
+    "%s carries a payload rather than a script",
+    (type: RunbookStepType) => {
+      expect(isPayloadCarryingStepType(type)).toBe(true);
+    },
+  );
+
+  test.each([RunbookStepType.Bash, RunbookStepType.JavaScript])(
+    "%s carries a script rather than a payload",
+    (type: RunbookStepType) => {
+      /*
+       * Answering true for a script type would let a Bash job with no script
+       * through enqueue, and the Runner would spawn an empty shell and report
+       * success — indistinguishable from a step that actually ran.
+       */
+      expect(isPayloadCarryingStepType(type)).toBe(false);
+    },
+  );
+
+  test("the Runner lane splits cleanly into script-carrying and payload-carrying", () => {
+    /*
+     * Total and disjoint within the Runner lane. enqueue treats the two as
+     * complementary — anything not payload-carrying is required to bring a
+     * script — so a new Runner type that belongs in neither set does not
+     * exist, and a new one added to the enum must be placed here deliberately.
+     */
+    const payload: Array<RunbookStepType> = RUNNER_EXECUTED_STEP_TYPES.filter(
+      (type: RunbookStepType) => {
+        return isPayloadCarryingStepType(type);
+      },
+    );
+    const script: Array<RunbookStepType> = RUNNER_EXECUTED_STEP_TYPES.filter(
+      (type: RunbookStepType) => {
+        return !isPayloadCarryingStepType(type);
+      },
+    );
+
+    expect(payload.slice().sort()).toEqual(
+      PAYLOAD_CARRYING_STEP_TYPES.slice().sort(),
+    );
+    expect(script.slice().sort()).toEqual(
+      [RunbookStepType.JavaScript, RunbookStepType.Bash].slice().sort(),
+    );
+    expect(payload.length + script.length).toBe(
+      RUNNER_EXECUTED_STEP_TYPES.length,
+    );
+  });
+
+  test("agrees with the exported list for every member of the enum", () => {
+    for (const type of Object.values(RunbookStepType)) {
+      const answer: boolean = isPayloadCarryingStepType(type);
+
+      expect(typeof answer).toBe("boolean");
+      expect(answer).toBe(PAYLOAD_CARRYING_STEP_TYPES.includes(type));
+    }
+  });
+
+  test("no Worker-executed type carries a payload", () => {
+    for (const type of WORKER_EXECUTED_STEP_TYPES) {
+      expect(isPayloadCarryingStepType(type)).toBe(false);
+    }
+  });
+
+  test("near misses, null and undefined do not carry a payload", () => {
+    /*
+     * Falling back to false is the safe direction: an unrecognised type is
+     * then required to bring a script, and enqueue rejects it rather than
+     * creating a job with nothing in it.
+     */
+    const notPayloadTypes: Array<unknown> = [
+      "",
+      " ",
+      "ssh",
+      "SSH ",
+      "kubernetes",
+      "Docker",
+      null,
+      undefined,
+    ];
+
+    for (const value of notPayloadTypes) {
+      expect(isPayloadCarryingStepType(value as RunbookStepType)).toBe(false);
+    }
+  });
+});

package/Tests/Types/Workflow/BaseModelComponents.test.ts

@@ -203,6 +203,23 @@ describe("the write payload is keyed on columns", () => {
     );
   });
 
+  /*
+   * ArgumentsForm reads the argument id to decide whether the record editor
+   * opens with a blank row for every column a create must supply: "json" is a
+   * create, anything else is an update. An update that opened on six seeded
+   * fields when the builder meant to set one would be a regression nothing else
+   * here would catch, so the two spellings are pinned as a pair.
+   */
+  test('a create\'s payload is "json" and an update\'s is "data", never the reverse', () => {
+    expect(argumentOf(find("-create-one"), "json")).toBeDefined();
+    expect(argumentOf(find("-create-one"), "data")).toBeUndefined();
+
+    for (const idSuffix of ["-update-one", "-update-many"]) {
+      expect(argumentOf(find(idSuffix), "data")).toBeDefined();
+      expect(argumentOf(find(idSuffix), "json")).toBeUndefined();
+    }
+  });
+
   test("no component declares a BaseModel argument", () => {
     /*
      * The bug this whole change came from: the row editor was selected only for

package/Tests/UI/Components/Button.test.tsx

@@ -1,6 +1,7 @@
 import Button, {
   ButtonSize,
   ButtonStyleType,
+  ComponentProps,
 } from "../../../UI/Components/Button/Button";
 import ButtonType from "../../../UI/Components/Button/ButtonTypes";
 import ShortcutKey from "../../../UI/Components/ShortcutKey/ShortcutKey";
@@ -200,3 +201,281 @@ describe("Button", () => {
     expect(handleClick).toBeCalled();
   });
 });
+
+type RenderButtonFunction = (props: Partial<ComponentProps>) => HTMLElement;
+
+const renderButton: RenderButtonFunction = (
+  props: Partial<ComponentProps>,
+): HTMLElement => {
+  const { unmount } = render(<Button dataTestId="test-id" {...props} />);
+  const button: HTMLElement = screen.getByTestId("test-id");
+  // Clone so assertions survive the unmount and each case starts from a clean DOM.
+  const clone: HTMLElement = button.cloneNode(true) as HTMLElement;
+  unmount();
+  return clone;
+};
+
+type ClassesOfFunction = (element: HTMLElement) => Array<string>;
+
+const classesOf: ClassesOfFunction = (element: HTMLElement): Array<string> => {
+  return element.className.split(/\s+/).filter((cssClass: string) => {
+    return cssClass.length > 0;
+  });
+};
+
+/*
+ * Every ButtonStyleType, so new styles are covered by the invariants below
+ * without anyone having to remember to add them here.
+ */
+const ALL_BUTTON_STYLES: Array<[string, ButtonStyleType]> = Object.keys(
+  ButtonStyleType,
+)
+  .filter((key: string) => {
+    return isNaN(Number(key));
+  })
+  .map((key: string) => {
+    return [key, ButtonStyleType[key as keyof typeof ButtonStyleType]] as [
+      string,
+      ButtonStyleType,
+    ];
+  });
+
+describe("Button disabled styling", () => {
+  /*
+   * The regression this suite exists for: the disabled background used to be
+   * appended alongside the enabled one, and Tailwind emits .bg-indigo-300
+   * before .bg-indigo-600, so the enabled colour won the cascade and every
+   * disabled primary button rendered at full saturation.
+   */
+  test("disabled PRIMARY does not carry the enabled background class", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+      disabled: true,
+    });
+
+    expect(button).not.toHaveClass("bg-indigo-600");
+    expect(button).toHaveClass("bg-indigo-300");
+  });
+
+  test("disabled SECONDARY does not carry the enabled background class", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.SECONDARY,
+      disabled: true,
+    });
+
+    expect(button).not.toHaveClass("bg-indigo-100");
+    expect(button).toHaveClass("bg-indigo-300");
+  });
+
+  test("enabled PRIMARY keeps the enabled background and no disabled background", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+      disabled: false,
+    });
+
+    expect(button).toHaveClass("bg-indigo-600");
+    expect(button).not.toHaveClass("bg-indigo-300");
+  });
+
+  test("enabled SECONDARY keeps the enabled background and no disabled background", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.SECONDARY,
+      disabled: false,
+    });
+
+    expect(button).toHaveClass("bg-indigo-100");
+    expect(button).not.toHaveClass("bg-indigo-300");
+  });
+
+  test("an omitted disabled prop styles PRIMARY as enabled", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+    });
+
+    expect(button).toHaveClass("bg-indigo-600");
+    expect(button).not.toHaveClass("bg-indigo-300");
+  });
+
+  test("an omitted disabled prop styles SECONDARY as enabled", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.SECONDARY,
+    });
+
+    expect(button).toHaveClass("bg-indigo-100");
+    expect(button).not.toHaveClass("bg-indigo-300");
+  });
+
+  test.each(ALL_BUTTON_STYLES)(
+    "%s emits at most one background utility when disabled",
+    (_name: string, buttonStyle: ButtonStyleType) => {
+      const button: HTMLElement = renderButton({ buttonStyle, disabled: true });
+
+      const backgrounds: Array<string> = classesOf(button).filter(
+        (cssClass: string) => {
+          return cssClass.startsWith("bg-");
+        },
+      );
+
+      expect(backgrounds.length).toBeLessThanOrEqual(1);
+    },
+  );
+
+  test.each(ALL_BUTTON_STYLES)(
+    "%s emits at most one background utility when enabled",
+    (_name: string, buttonStyle: ButtonStyleType) => {
+      const button: HTMLElement = renderButton({
+        buttonStyle,
+        disabled: false,
+      });
+
+      const backgrounds: Array<string> = classesOf(button).filter(
+        (cssClass: string) => {
+          return cssClass.startsWith("bg-");
+        },
+      );
+
+      expect(backgrounds.length).toBeLessThanOrEqual(1);
+    },
+  );
+
+  const DIMMING_STYLES: Array<[string, ButtonStyleType]> = [
+    ["PRIMARY", ButtonStyleType.PRIMARY],
+    ["SECONDARY", ButtonStyleType.SECONDARY],
+  ];
+
+  test.each(DIMMING_STYLES)(
+    "%s resolves to a different background when disabled",
+    (_name: string, buttonStyle: ButtonStyleType) => {
+      type BackgroundOfFunction = (disabled: boolean) => string | undefined;
+
+      const backgroundOf: BackgroundOfFunction = (
+        disabled: boolean,
+      ): string | undefined => {
+        return classesOf(renderButton({ buttonStyle, disabled })).find(
+          (cssClass: string) => {
+            return cssClass.startsWith("bg-");
+          },
+        );
+      };
+
+      const enabled: string | undefined = backgroundOf(false);
+      const disabled: string | undefined = backgroundOf(true);
+
+      expect(enabled).toBeDefined();
+      expect(disabled).toBeDefined();
+      expect(disabled).not.toBe(enabled);
+    },
+  );
+});
+
+describe("Button hover styling", () => {
+  /*
+   * Hover affordances are gated on `disabled`; the ternary used to be inverted,
+   * so hover styles applied to exactly the buttons that could not be clicked.
+   */
+  const HOVER_GATED_STYLES: Array<[string, ButtonStyleType, string]> = [
+    ["PRIMARY", ButtonStyleType.PRIMARY, "hover:bg-indigo-700"],
+    ["SECONDARY", ButtonStyleType.SECONDARY, "hover:bg-indigo-200"],
+    ["DANGER", ButtonStyleType.DANGER, "hover:bg-red-700"],
+    ["DANGER_OUTLINE", ButtonStyleType.DANGER_OUTLINE, "hover:bg-red-50"],
+    ["SUCCESS", ButtonStyleType.SUCCESS, "hover:bg-green-700"],
+    ["SUCCESS_OUTLINE", ButtonStyleType.SUCCESS_OUTLINE, "hover:bg-green-50"],
+    ["WARNING", ButtonStyleType.WARNING, "hover:bg-yellow-700"],
+    ["WARNING_OUTLINE", ButtonStyleType.WARNING_OUTLINE, "hover:bg-yellow-50"],
+    ["ICON", ButtonStyleType.ICON, "hover:text-gray-900"],
+    ["ICON_LIGHT", ButtonStyleType.ICON_LIGHT, "hover:text-gray-500"],
+  ];
+
+  test.each(HOVER_GATED_STYLES)(
+    "%s applies its hover class only when enabled",
+    (_name: string, buttonStyle: ButtonStyleType, hoverClass: string) => {
+      expect(renderButton({ buttonStyle, disabled: false })).toHaveClass(
+        hoverClass,
+      );
+      expect(renderButton({ buttonStyle, disabled: true })).not.toHaveClass(
+        hoverClass,
+      );
+    },
+  );
+});
+
+describe("Button class list composition", () => {
+  test("the size class is appended for every style", () => {
+    ALL_BUTTON_STYLES.forEach(([, buttonStyle]: [string, ButtonStyleType]) => {
+      expect(
+        renderButton({ buttonStyle, buttonSize: ButtonSize.Small }),
+      ).toHaveClass("px-2", "py-1");
+    });
+  });
+
+  test("a caller-supplied className is appended alongside the style classes", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+      className: "my-custom-class",
+      disabled: true,
+    });
+
+    expect(button).toHaveClass("my-custom-class");
+    expect(button).toHaveClass("bg-indigo-300");
+  });
+
+  test("every style resolves to a non-empty class list in both states", () => {
+    ALL_BUTTON_STYLES.forEach(([, buttonStyle]: [string, ButtonStyleType]) => {
+      [true, false].forEach((disabled: boolean) => {
+        expect(
+          classesOf(renderButton({ buttonStyle, disabled })).length,
+        ).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  test("no style emits a class twice", () => {
+    ALL_BUTTON_STYLES.forEach(([, buttonStyle]: [string, ButtonStyleType]) => {
+      [true, false].forEach((disabled: boolean) => {
+        const classes: Array<string> = classesOf(
+          renderButton({ buttonStyle, disabled }),
+        );
+
+        expect(classes).toHaveLength(new Set(classes).size);
+      });
+    });
+  });
+});
+
+describe("Button disabled behaviour", () => {
+  test("a disabled button is marked disabled to assistive technology", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+      disabled: true,
+    });
+
+    expect(button).toHaveAttribute("disabled");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("a loading button is disabled", () => {
+    const button: HTMLElement = renderButton({
+      buttonStyle: ButtonStyleType.PRIMARY,
+      isLoading: true,
+    });
+
+    expect(button).toHaveAttribute("disabled");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("a disabled button does not fire onClick", () => {
+    const handleClick: () => void = jest.fn();
+    render(
+      <Button
+        dataTestId="test-id"
+        buttonStyle={ButtonStyleType.PRIMARY}
+        disabled={true}
+        onClick={handleClick}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("test-id"));
+
+    expect(handleClick).not.toBeCalled();
+  });
+});

package/Tests/UI/Components/Charts/ChartXAxisDataKey.test.tsx

@@ -0,0 +1,256 @@
+import "@testing-library/jest-dom";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+/*
+ * ResponsiveContainer measures its parent, which is always 0x0 in jsdom, so
+ * the chart renders nothing without a fixed size. Same shim as
+ * AxisTickColor.test.tsx — anything that asserts on rendered GEOMETRY needs
+ * it, because a 0x0 chart draws no marks either and would make every one of
+ * these assertions pass for the wrong reason.
+ */
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts");
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return React.cloneElement(children, { width: 600, height: 300 });
+    },
+  };
+});
+
+import AreaChartElement from "../../../../UI/Components/Charts/Area/AreaChart";
+import BarChartElement from "../../../../UI/Components/Charts/Bar/BarChart";
+import LineChartElement from "../../../../UI/Components/Charts/Line/LineChart";
+import { CHART_DATA_POINT_X_AXIS_KEY } from "../../../../UI/Components/Charts/ChartLibrary/Types/ChartDataPoint";
+import ChartCurve from "../../../../UI/Components/Charts/Types/ChartCurve";
+import DataPoint from "../../../../UI/Components/Charts/Types/DataPoint";
+import SeriesPoint from "../../../../UI/Components/Charts/Types/SeriesPoints";
+import {
+  XAxis as ChartXAxis,
+  XAxisAggregateType,
+} from "../../../../UI/Components/Charts/Types/XAxis/XAxis";
+import XAxisType from "../../../../UI/Components/Charts/Types/XAxis/XAxisType";
+import YAxis, {
+  YAxisPrecision,
+} from "../../../../UI/Components/Charts/Types/YAxis/YAxis";
+import YAxisType from "../../../../UI/Components/Charts/Types/YAxis/YAxisType";
+
+/*
+ * The three chart wrappers hand recharts a FIXED x-axis dataKey, while the
+ * rows they hand it are built by DataPointUtil. Those two used to agree only
+ * by convention: the util keyed each row by the caller's `xAxis.legend`, and
+ * every caller but one happened to pass the literal "Time".
+ *
+ * The one that did not — the SLO dashboard widget, which passed "" — got a
+ * chart with axes, grid and tooltip but no line: recharts looked up "Time" on
+ * every row, found nothing, and drew no path. Nothing failed, nothing logged;
+ * the widget just rendered an empty frame on public and private dashboards
+ * alike.
+ *
+ * These tests hold the axis key on both sides of that seam: whatever legend a
+ * caller passes, the marks get drawn.
+ */
+
+const START: Date = new Date("2026-08-10T00:00:00.000Z");
+const END: Date = new Date("2026-08-10T01:00:00.000Z");
+
+/* An hour window buckets at one minute, so these land on distinct buckets. */
+type BuildPointsFunction = () => Array<DataPoint>;
+
+const buildPoints: BuildPointsFunction = (): Array<DataPoint> => {
+  const points: Array<DataPoint> = [];
+
+  for (let index: number = 0; index < 10; index++) {
+    points.push({
+      x: new Date(START.getTime() + index * 60 * 1000),
+      y: 90 + index,
+    });
+  }
+
+  return points;
+};
+
+type BuildXAxisFunction = (legend: string) => ChartXAxis;
+
+const buildXAxis: BuildXAxisFunction = (legend: string): ChartXAxis => {
+  return {
+    legend: legend,
+    options: {
+      type: XAxisType.Time,
+      min: START,
+      max: END,
+      aggregateType: XAxisAggregateType.Average,
+    },
+  };
+};
+
+const Y_AXIS: YAxis = {
+  legend: "%",
+  options: {
+    type: YAxisType.Number,
+    min: "auto",
+    max: 100,
+    precision: YAxisPrecision.TwoDecimals,
+    formatter: (value: number): string => {
+      return `${value}%`;
+    },
+  },
+};
+
+const SERIES_NAME: string = "SLI";
+
+type BuildSeriesFunction = () => Array<SeriesPoint>;
+
+const buildSeries: BuildSeriesFunction = (): Array<SeriesPoint> => {
+  return [{ seriesName: SERIES_NAME, data: buildPoints() }];
+};
+
+/*
+ * Legends worth covering: the canonical one every other caller passes, the
+ * empty string the SLO widget passed (the reported bug), and an arbitrary
+ * label, which is what a future caller is most likely to reach for.
+ */
+const LEGENDS: Array<[string, string]> = [
+  ['the canonical "Time"', "Time"],
+  ["an empty legend", ""],
+  ["an arbitrary legend", "Timestamp"],
+  ["a legend with markup-ish characters", "Time (UTC) <>"],
+];
+
+interface ChartUnderTest {
+  name: string;
+  /** CSS selector for the SVG geometry this chart type draws per series. */
+  markSelector: string;
+  render: (xAxis: ChartXAxis) => React.ReactElement;
+}
+
+const CHARTS: Array<ChartUnderTest> = [
+  {
+    name: "LineChart",
+    markSelector: "path.recharts-line-curve",
+    render: (xAxis: ChartXAxis): React.ReactElement => {
+      return (
+        <LineChartElement
+          data={buildSeries()}
+          xAxis={xAxis}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="x-axis-key-test"
+        />
+      );
+    },
+  },
+  {
+    name: "AreaChart",
+    markSelector: "path.recharts-area-area",
+    render: (xAxis: ChartXAxis): React.ReactElement => {
+      return (
+        <AreaChartElement
+          data={buildSeries()}
+          xAxis={xAxis}
+          yAxis={Y_AXIS}
+          curve={ChartCurve.MONOTONE}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="x-axis-key-test"
+        />
+      );
+    },
+  },
+  {
+    /*
+     * Bars are drawn through a custom `shape` renderer, so the mark is a bare
+     * <path> under recharts' own rectangle group rather than a classed one.
+     */
+    name: "BarChart",
+    markSelector: "g.recharts-bar-rectangle path",
+    render: (xAxis: ChartXAxis): React.ReactElement => {
+      return (
+        <BarChartElement
+          data={buildSeries()}
+          xAxis={xAxis}
+          yAxis={Y_AXIS}
+          heightInPx={300}
+          showLegend={false}
+          sync={false}
+          syncid="x-axis-key-test"
+        />
+      );
+    },
+  },
+];
+
+afterEach((): void => {
+  cleanup();
+});
+
+describe("Chart x-axis data key", () => {
+  test("the canonical key is the literal recharts reads", (): void => {
+    /*
+     * Pinned, not derived. The wrappers and DataPointUtil both import this
+     * constant, so a rename would keep them agreeing with each other while
+     * silently changing the shape handed to recharts.
+     */
+    expect(CHART_DATA_POINT_X_AXIS_KEY).toBe("Time");
+  });
+
+  for (const chart of CHARTS) {
+    describe(chart.name, () => {
+      test.each(LEGENDS)(
+        `draws its series with %s`,
+        (_label: string, legend: string): void => {
+          const { container } = render(chart.render(buildXAxis(legend)));
+
+          const marks: Array<Element> = Array.from(
+            container.querySelectorAll(chart.markSelector),
+          );
+
+          expect(marks.length).toBeGreaterThan(0);
+
+          /*
+           * Present-but-empty geometry is the exact failure mode here: a
+           * <path> with no `d` renders nothing at all, so the element count
+           * alone would not have caught the bug.
+           */
+          for (const mark of marks) {
+            expect(mark.getAttribute("d")).toBeTruthy();
+          }
+        },
+      );
+
+      test("draws the same geometry whatever the legend says", (): void => {
+        const canonical: RenderResultContainer = render(
+          chart.render(buildXAxis("Time")),
+        );
+        const canonicalPaths: Array<string | null> = Array.from(
+          canonical.container.querySelectorAll(chart.markSelector),
+        ).map((element: Element) => {
+          return element.getAttribute("d");
+        });
+
+        cleanup();
+
+        const other: RenderResultContainer = render(
+          chart.render(buildXAxis("")),
+        );
+        const otherPaths: Array<string | null> = Array.from(
+          other.container.querySelectorAll(chart.markSelector),
+        ).map((element: Element) => {
+          return element.getAttribute("d");
+        });
+
+        expect(otherPaths).toEqual(canonicalPaths);
+      });
+    });
+  }
+});
+
+interface RenderResultContainer {
+  container: HTMLElement;
+}