@assistant-ui/react-generative-ui 0.0.21 → 0.0.23

package/src/vocabulary/collectFormValues.test.ts

@@ -5,7 +5,16 @@ import {
   collectFormValues,
   type FormControlElementLike,
 } from "./collectFormValues";
-import { GENERATED_NAME_ATTR } from "../constants";
+import {
+  CHECKBOX_GROUP_ATTR,
+  FIELD_VALUE_ATTR,
+  GENERATED_NAME_ATTR,
+} from "../constants";
+import {
+  normalizeTemporalInputValue,
+  toLocalDateTime,
+  toPickerLocalDateTime,
+} from "../temporal";
 
 const el = (
   partial: Partial<FormControlElementLike>,
@@ -19,6 +28,194 @@ const el = (
 });
 
 describe("collectFormValues", () => {
+  it.each([
+    ["time", "13:45:30.500", "13:45:30.5"],
+    ["time", "13:45:30.000", "13:45:30"],
+    ["datetime-local", "2026-07-16T09:45:30.500", "2026-07-16T09:45:30.5"],
+    ["datetime-local", "2026-07-16T09:45:30.000", "2026-07-16T09:45:30"],
+  ])("collects an edited %s in shortest form", (type, value, expected) => {
+    expect(collectFormValues([el({ name: "when", type, value })])).toEqual({
+      when: expected,
+    });
+  });
+
+  it("retains an untouched instant's offset spelling and precision", () => {
+    const anchor = "2025-12-15T17:00:00.5Z";
+    const displayed = toPickerLocalDateTime(anchor);
+    const getAttribute = (name: string) =>
+      name === FIELD_VALUE_ATTR ? anchor : null;
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed,
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed.replace(".500", ".5"),
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed.replace(".500", ".750"),
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.75Z" });
+  });
+
+  it("uses an instant anchor only for datetime-local controls", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "canonical",
+          type: "datetime-local",
+          value: normalizeTemporalInputValue(
+            toLocalDateTime("2025-12-15T17:00:00Z"),
+          ),
+          getAttribute: (name) =>
+            name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null,
+        }),
+        el({
+          name: "ordinary",
+          value: "live",
+          getAttribute: (name) => (name === FIELD_VALUE_ATTR ? "stale" : null),
+        }),
+      ]),
+    ).toEqual({ canonical: "2025-12-15T17:00:00Z", ordinary: "live" });
+  });
+
+  it("uses the declared datetime-local type when the browser reports text", () => {
+    const anchor = "2025-12-15T17:00:00.250Z";
+    const displayed = toPickerLocalDateTime(anchor);
+    const getAttribute = (name: string) =>
+      name === "type"
+        ? "datetime-local"
+        : name === FIELD_VALUE_ATTR
+          ? anchor
+          : null;
+    const control = (value: string) =>
+      el({ name: "when", type: "text", value, getAttribute });
+    expect(collectFormValues([control(displayed)])).toEqual({
+      when: anchor,
+    });
+    expect(
+      collectFormValues([control(displayed.replace(".250", ".750"))]),
+    ).toEqual({
+      when: "2025-12-15T17:00:00.750Z",
+    });
+    expect(collectFormValues([control(displayed.slice(0, -4))])).toEqual({
+      when: "2025-12-15T17:00:00.000Z",
+    });
+  });
+
+  it("uses the declared time type when the browser reports text", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "text",
+          value: "12:00",
+          getAttribute: (name) =>
+            name === "type"
+              ? "time"
+              : name === FIELD_VALUE_ATTR
+                ? "12:00:00"
+                : null,
+        }),
+      ]),
+    ).toEqual({ when: "12:00:00" });
+  });
+
+  it.each([
+    ["time", "17:00:00", "17:00", "08:30:45"],
+    [
+      "datetime-local",
+      "2025-12-15T17:00:00",
+      "2025-12-15T17:00",
+      "2025-12-16T08:30:45",
+    ],
+  ])(
+    "uses the canonical %s value only while its projection matches",
+    (type, canonical, displayed, edited) => {
+      const getAttribute = (name: string) =>
+        name === FIELD_VALUE_ATTR ? canonical : null;
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: displayed, getAttribute }),
+        ]),
+      ).toEqual({ value: canonical });
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: edited, getAttribute }),
+        ]),
+      ).toEqual({ value: edited });
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: "", getAttribute }),
+        ]),
+      ).toEqual({ value: "" });
+    },
+  );
+
+  it("ignores instant anchors on other control types", () => {
+    const getAttribute = (name: string) =>
+      name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null;
+    expect(
+      collectFormValues([
+        el({ name: "date", type: "date", value: "", getAttribute }),
+        el({ name: "time", type: "time", value: "12:34", getAttribute }),
+        el({ name: "text", value: "live", getAttribute }),
+        el({
+          name: "select",
+          type: "select-one",
+          value: "chosen",
+          getAttribute,
+        }),
+        el({ name: "textarea", type: "textarea", value: "text", getAttribute }),
+        el({
+          name: "radio",
+          type: "radio",
+          value: "chosen",
+          checked: true,
+          getAttribute,
+        }),
+        el({ name: "checkbox", type: "checkbox", checked: true, getAttribute }),
+        el({
+          name: "group",
+          type: "checkbox",
+          value: "chosen",
+          checked: true,
+          hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
+          getAttribute,
+        }),
+        el({ name: "range", type: "range", value: "7", getAttribute }),
+      ]),
+    ).toEqual({
+      date: "",
+      time: "12:34",
+      text: "live",
+      select: "chosen",
+      textarea: "text",
+      radio: "chosen",
+      checkbox: true,
+      group: ["chosen"],
+      range: 7,
+    });
+  });
+
   it("resolves a checkbox to its checked boolean", () => {
     expect(
       collectFormValues([
@@ -51,6 +248,27 @@ describe("collectFormValues", () => {
     expect(values.size).toBeUndefined();
   });
 
+  it("resolves a checkbox group to its checked values in document order", () => {
+    const option = (value: string, checked: boolean) =>
+      el({
+        name: "toppings",
+        type: "checkbox",
+        value,
+        checked,
+        hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
+      });
+    expect(
+      collectFormValues([
+        option("basil", true),
+        option("olives", false),
+        option("onion", true),
+      ]),
+    ).toEqual({ toppings: ["basil", "onion"] });
+    expect(collectFormValues([option("basil", false)])).toEqual({
+      toppings: [],
+    });
+  });
+
   it("resolves select/input/textarea/date controls to their string value", () => {
     expect(
       collectFormValues([
@@ -67,6 +285,12 @@ describe("collectFormValues", () => {
     });
   });
 
+  it("resolves a range input to its numeric value", () => {
+    expect(
+      collectFormValues([el({ name: "volume", type: "range", value: "7" })]),
+    ).toEqual({ volume: 7 });
+  });
+
   it("collects repeated non-radio names into an array in document order", () => {
     expect(
       collectFormValues([

package/src/vocabulary/collectFormValues.ts

@@ -1,5 +1,15 @@
 import type { FormEvent } from "react";
-import { GENERATED_NAME_ATTR } from "../constants";
+import {
+  CHECKBOX_GROUP_ATTR,
+  FIELD_NAME_ATTR,
+  FIELD_VALUE_ATTR,
+  GENERATED_NAME_ATTR,
+} from "../constants";
+import {
+  fromLocalDateTime,
+  normalizeTemporalInputValue,
+  toPickerLocalDateTime,
+} from "../temporal";
 
 /**
  * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.
@@ -11,11 +21,12 @@ export type FormControlElementLike = {
   readonly checked?: boolean;
   readonly disabled: boolean;
   readonly hasAttribute: (name: string) => boolean;
+  readonly getAttribute?: ((name: string) => string | null) | undefined;
   readonly matches?: ((selector: string) => boolean) | undefined;
 };
 
 /**
- * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
+ * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. A checkbox group resolves to its checked options' values in document order, or an empty array if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. A time or datetime-local control's `data-aui-field-value` preserves the canonical string when its local projection is unchanged; an edited instant retains its original offset and precision. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
  */
 export function collectFormValues(
   elements: ArrayLike<FormControlElementLike>,
@@ -23,7 +34,8 @@ export function collectFormValues(
   const values: Record<string, unknown> = Object.create(null);
 
   for (const element of Array.from(elements)) {
-    const { name, disabled } = element;
+    const { disabled } = element;
+    const name = element.getAttribute?.(FIELD_NAME_ATTR) ?? element.name;
     if (
       !name ||
       disabled ||
@@ -38,8 +50,45 @@ export function collectFormValues(
       continue;
     }
 
-    const value: string | boolean =
-      element.type === "checkbox" ? (element.checked ?? false) : element.value;
+    if (
+      element.type === "checkbox" &&
+      element.hasAttribute(CHECKBOX_GROUP_ATTR)
+    ) {
+      const existing = values[name];
+      const checked = Array.isArray(existing) ? existing : [];
+      values[name] = element.checked ? [...checked, element.value] : checked;
+      continue;
+    }
+
+    const temporalType =
+      element.type === "datetime-local" || element.type === "time"
+        ? element.type
+        : element.getAttribute?.("type");
+    const inputValue =
+      temporalType === "datetime-local" || temporalType === "time"
+        ? normalizeTemporalInputValue(element.value)
+        : element.value;
+    const fieldValue =
+      temporalType === "datetime-local" || temporalType === "time"
+        ? element.getAttribute?.(FIELD_VALUE_ATTR)
+        : undefined;
+    const value: string | number | boolean =
+      element.type === "checkbox"
+        ? (element.checked ?? false)
+        : element.type === "range"
+          ? Number(element.value)
+          : fieldValue && inputValue !== ""
+            ? normalizeTemporalInputValue(inputValue) ===
+              normalizeTemporalInputValue(
+                temporalType === "time"
+                  ? fieldValue
+                  : toPickerLocalDateTime(fieldValue),
+              )
+              ? fieldValue
+              : temporalType === "datetime-local"
+                ? fromLocalDateTime(inputValue, fieldValue)
+                : inputValue
+            : inputValue;
 
     if (Object.hasOwn(values, name)) {
       const existing = values[name];

package/src/vocabulary/data.test.tsx

@@ -1,3 +1,7 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { describe, it, expect } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { renderGenerativeUI } from "../renderGenerativeUI";
@@ -6,6 +10,10 @@ import { dataVocabulary } from "./data";
 const render = (node: unknown) =>
   renderToStaticMarkup(<>{renderGenerativeUI(node, dataVocabulary)}</>);
 
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
 describe("dataVocabulary", () => {
   it("Table renders columns and rows", () => {
     const html = render({
@@ -32,6 +40,109 @@ describe("dataVocabulary", () => {
     expect(html).toContain("<td>only</td>");
   });
 
+  it("Table formats typed columns and end-aligns numeric formats", () => {
+    const html = render({
+      $type: "Table",
+      columns: [
+        { label: "Number", format: { kind: "number", decimals: 1 } },
+        {
+          label: "Revenue",
+          format: { kind: "currency", currency: "USD", decimals: 2 },
+        },
+        { label: "Share", format: { kind: "percent", decimals: 0 } },
+        { label: "Date", format: { kind: "date" } },
+      ],
+      rows: [[1234.5, 12.4, 0.08, "2024-01-02"]],
+    });
+    expect(html).toContain('data-aui-align="end">Number</th>');
+    expect(html).toContain('data-aui-align="end">Revenue</th>');
+    expect(html).toContain('data-aui-align="end">Share</th>');
+    expect(html).toContain('<td data-aui-align="end">1,234.5</td>');
+    expect(html).toContain('<td data-aui-align="end">$12.40</td>');
+    expect(html).toContain('<td data-aui-align="end">8%</td>');
+    expect(html).toContain("<td>Jan 2, 2024</td>");
+  });
+
+  it("Table keeps wrong-typed formatted cells as raw text", () => {
+    const html = render({
+      $type: "Table",
+      columns: [
+        { label: "Number", format: { kind: "number" } },
+        { label: "Date", format: { kind: "date" } },
+        {
+          label: "Currency",
+          format: { kind: "currency", currency: "not-a-currency" },
+        },
+      ],
+      rows: [["not a number", "not a date", 12]],
+    });
+    expect(html).toContain('<td data-aui-align="end">not a number</td>');
+    expect(html).toContain("<td>not a date</td>");
+    expect(html).toContain('<td data-aui-align="end">12</td>');
+  });
+
+  it("Table sorts through ascending, descending, and original row order", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    let root: Root | undefined;
+    try {
+      root = createRoot(container);
+      await act(async () => {
+        root!.render(
+          renderGenerativeUI(
+            {
+              $type: "Table",
+              sortable: true,
+              columns: [
+                { label: "Name" },
+                { label: "Score", format: { kind: "number" } },
+              ],
+              rows: [
+                ["Item 10", 2],
+                ["Item 2", 10],
+                ["Item 1", 1],
+              ],
+            },
+            dataVocabulary,
+          ),
+        );
+      });
+
+      const headers = container.querySelectorAll("th");
+      const nameButton = headers[0]?.querySelector("button");
+      const scoreButton = headers[1]?.querySelector("button");
+      const rowNames = () =>
+        Array.from(container.querySelectorAll("tbody tr")).map(
+          (row) => row.querySelector("td")?.textContent,
+        );
+      expect(headers[0]?.hasAttribute("aria-sort")).toBe(false);
+      expect(headers[1]?.hasAttribute("aria-sort")).toBe(false);
+
+      await act(async () => scoreButton?.click());
+      expect(headers[0]?.hasAttribute("aria-sort")).toBe(false);
+      expect(headers[1]?.getAttribute("aria-sort")).toBe("ascending");
+      expect(scoreButton?.textContent).toBe("Score↑");
+      expect(rowNames()).toEqual(["Item 1", "Item 10", "Item 2"]);
+
+      await act(async () => scoreButton?.click());
+      expect(headers[1]?.getAttribute("aria-sort")).toBe("descending");
+      expect(scoreButton?.textContent).toBe("Score↓");
+      expect(rowNames()).toEqual(["Item 2", "Item 10", "Item 1"]);
+
+      await act(async () => scoreButton?.click());
+      expect(headers[1]?.hasAttribute("aria-sort")).toBe(false);
+      expect(scoreButton?.textContent).toBe("Score");
+      expect(rowNames()).toEqual(["Item 10", "Item 2", "Item 1"]);
+
+      await act(async () => nameButton?.click());
+      expect(headers[0]?.getAttribute("aria-sort")).toBe("ascending");
+      expect(rowNames()).toEqual(["Item 1", "Item 2", "Item 10"]);
+    } finally {
+      await act(async () => root?.unmount());
+      container.remove();
+    }
+  });
+
   it("Table ignores malformed collections instead of throwing", () => {
     expect(
       render({
@@ -125,7 +236,8 @@ describe("dataVocabulary", () => {
       data: [{ value: 20 }],
     });
     expect(html).not.toContain("<polyline");
-    expect((html.match(/<circle/g) ?? []).length).toBe(1);
+    expect((html.match(/<circle/g) ?? []).length).toBe(2);
+    expect(html).toContain('data-aui="chart-point"');
     expect(html).toContain('cx="50"');
     expect(html).toContain('cy="0"');
     expect(html).toContain('r="2"');
@@ -169,15 +281,38 @@ describe("dataVocabulary", () => {
     expect(html).not.toContain("<rect");
   });
 
-  it("Chart clamps negative and non-finite values to 0", () => {
+  it("Chart maps negative bars from the zero line and non-finite values to 0", () => {
     const html = render({
       $type: "Chart",
       variant: "bar",
-      data: [{ value: -5 }, { value: Number.NaN }, { value: 10 }],
+      data: [
+        { label: "Loss", value: -10 },
+        { value: Number.NaN },
+        { label: "Gain", value: 10 },
+      ],
     });
     expect((html.match(/<rect/g) ?? []).length).toBe(3);
+    expect(html).toContain('data-aui="chart-zero"');
+    expect(html).toContain('y1="20" y2="20"');
+    expect(html).toMatch(/<rect[^>]*y="20"[^>]*height="20"/);
     expect(html).toContain('height="0"');
-    expect(html).toContain('height="40"');
+    expect(html).toContain("<title>Loss: -10</title>");
+    expect(html).toContain("<title>2: 0</title>");
+  });
+
+  it("Chart omits the zero baseline when values stay on one side of zero", () => {
+    const positive = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: 1 }],
+    });
+    const negative = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: -1 }],
+    });
+    expect(positive).not.toContain('data-aui="chart-zero"');
+    expect(negative).not.toContain('data-aui="chart-zero"');
   });
 
   it("Chart with all-zero data renders flat baseline marks", () => {
@@ -307,6 +442,22 @@ describe("dataVocabulary Chart stacking", () => {
     expect((html.match(/y="0"/g) ?? []).length).toBe(1); // only the tallest bar touches y=0
   });
 
+  it("stacks positive and negative bars independently from zero", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      stacked: true,
+      series: [
+        { data: [{ value: -1 }, { value: 1 }] },
+        { data: [{ value: -1 }, { value: 1 }] },
+      ],
+    });
+    expect(html).toContain('x="5" y="20" width="40" height="10"');
+    expect(html).toContain('x="5" y="30" width="40" height="10"');
+    expect(html).toContain('x="55" y="10" width="40" height="10"');
+    expect(html).toContain('x="55" y="0" width="40" height="10"');
+  });
+
   it("stacked areas build cumulative top/bottom polygons per series", () => {
     const html = render({
       $type: "Chart",
@@ -324,6 +475,20 @@ describe("dataVocabulary Chart stacking", () => {
     expect(html).toContain('points="0,0 100,0 100,20 0,20"');
   });
 
+  it("stacks positive and negative areas independently from zero", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      stacked: true,
+      series: [
+        { data: [{ value: -1 }, { value: 1 }] },
+        { data: [{ value: -1 }, { value: 1 }] },
+      ],
+    });
+    expect(html).toContain('points="0,30 100,10 100,20 0,20"');
+    expect(html).toContain('points="0,40 100,0 100,10 0,30"');
+  });
+
   it("stacked bars with showAxis keep the bottom segment on the baseline, abut exactly, and share one denominator with the ticks (totals crossing a tick boundary)", () => {
     const html = render({
       $type: "Chart",
@@ -392,6 +557,21 @@ describe("dataVocabulary Chart area variant", () => {
     expect(html).toMatch(/<polyline[^>]*vector-effect="non-scaling-stroke"/);
   });
 
+  it("fills negative and positive values to the zero line", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      data: [
+        { label: "Loss", value: -10 },
+        { label: "Gain", value: 10 },
+      ],
+    });
+    expect(html).toContain('data-aui="chart-zero"');
+    expect(html).toContain('points="0,40 100,0 100,20 0,20"');
+    expect((html.match(/data-aui="chart-point"/g) ?? []).length).toBe(2);
+    expect(html).toContain("<title>Loss: -10</title>");
+  });
+
   it("renders a circle instead of a degenerate polygon for a single point", () => {
     const html = render({
       $type: "Chart",
@@ -399,7 +579,7 @@ describe("dataVocabulary Chart area variant", () => {
       data: [{ value: 20 }],
     });
     expect(html).not.toContain("<polygon");
-    expect((html.match(/<circle/g) ?? []).length).toBe(1);
+    expect((html.match(/<circle/g) ?? []).length).toBe(2);
   });
 
   it("renders an empty series group without throwing when data is empty", () => {
@@ -447,6 +627,21 @@ describe("dataVocabulary Chart showAxis niceMax ticks", () => {
     expect(html).toContain('height="33.6"');
   });
 
+  it("uses round ticks that include 0 for a domain crossing zero", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      showAxis: true,
+      data: [{ value: -3 }, { value: 5 }],
+    });
+    expect(html).toContain("<div>10</div>");
+    expect(html).toContain("<div>5</div>");
+    expect(html).toContain("<div>0</div>");
+    expect(html).toContain("<div>-5</div>");
+    expect(html).toContain("<div>-10</div>");
+    expect(html).toContain('data-aui="chart-zero"');
+  });
+
   it("stays a bare svg (no frame) when neither showAxis nor showLegend is set, even with new props", () => {
     const html = render({
       $type: "Chart",
@@ -509,6 +704,53 @@ describe("dataVocabulary Chart legend and x-labels", () => {
     );
   });
 
+  it("adds titles to line points with and without a series label", () => {
+    const standalone = render({
+      $type: "Chart",
+      variant: "line",
+      data: [{ label: "Jan", value: 1.5 }, { value: 2 }],
+    });
+    const named = render({
+      $type: "Chart",
+      variant: "line",
+      series: [{ label: "Revenue", data: [{ label: "Jan", value: 1.5 }] }],
+    });
+    expect(standalone).toContain("<title>Jan: 1.5</title>");
+    expect(standalone).toContain("<title>2: 2</title>");
+    expect(named).toContain("<title>Revenue, Jan: 1.5</title>");
+  });
+
+  it("emits per-series colors on chart series and legend items", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showLegend: true,
+      series: [
+        { label: "Revenue", color: "white", data: [{ value: 1 }] },
+        { label: "Cost", color: "alpha-70", data: [{ value: 2 }] },
+      ],
+    });
+    expect(html).toContain(
+      '<g data-aui="chart-series" data-aui-series="0" data-aui-color="white">',
+    );
+    expect(html).toContain(
+      '<span data-aui="chart-legend-item" data-aui-series="1" data-aui-color="alpha-70">',
+    );
+  });
+
+  it("uses the single-series color for its legend swatch", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      color: "white",
+      showLegend: true,
+      data: [{ value: 1 }],
+    });
+    expect(html).toContain(
+      '<span data-aui="chart-legend-item" data-aui-series="0" data-aui-color="white"><span data-aui="chart-legend-swatch"></span>',
+    );
+  });
+
   it("falls back to a positional label when a series has no label", () => {
     const html = render({
       $type: "Chart",
@@ -564,7 +806,7 @@ describe("dataVocabulary Chart legend and x-labels", () => {
       stacked: true,
       series: [{ data: [{ value: 100 }] }, { data: [{ value: 100 }] }],
     });
-    expect((html.match(/cy="0"/g) ?? []).length).toBe(2);
+    expect((html.match(/cy="0"/g) ?? []).length).toBe(4);
   });
 
   it("cycles series colors past the palette size", () => {