feat: release design system engine, studio and component contracts

packages/ui/test/select-values.test.ts

@@ -0,0 +1,86 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { mountHtml, renderComponent } from "../../test/src/index.ts";
+import { uiComponentPath } from "../src/registry.ts";
+
+test("Select follows a changed scalar prop after the native control was edited", async () => {
+  const dom = mountHtml(
+    await renderComponent(readFileSync(uiComponentPath("Select"), "utf8"), {
+      name: "controlled",
+      value: "a",
+      options: [
+        { value: "a", label: "First" },
+        { value: "b", label: "Second" },
+      ],
+    }),
+  );
+  const root = dom.querySelector("[data-wrn-hydration], [data-scope]") as any;
+  const control = dom.querySelector("select") as HTMLSelectElement;
+  control.value = "";
+  root.__wrnexusScopeApi.set("value", "b");
+  expect(control.value).toBe("b");
+  root.__wrnexusScopeApi.set("value", "a");
+  expect(control.value).toBe("a");
+});
+
+test("Select emits a snapshot of multiple values before reactive validation updates", async () => {
+  const dom = mountHtml(
+    await renderComponent(readFileSync(uiComponentPath("Select"), "utf8"), {
+      name: "reviewers",
+      label: "Reviewers",
+      multiple: true,
+      values: ["a"],
+      options: [
+        { value: "a", label: "First" },
+        { value: "b", label: "Second" },
+        { value: "c", label: "Third" },
+      ],
+    }),
+  );
+  const root = dom.querySelector(".wrn-next--select")!;
+  const control = dom.querySelector("select") as HTMLSelectElement;
+  expect(Array.from(control.selectedOptions).map((option) => option.value)).toEqual(["a"]);
+  (dom.querySelector("[data-wrn-hydration], [data-scope]") as any).__wrnexusScopeApi.set("values", [
+    "a",
+    "c",
+  ]);
+  expect(Array.from(control.selectedOptions).map((option) => option.value)).toEqual(["a", "c"]);
+  (dom.querySelector("[data-wrn-hydration], [data-scope]") as any).__wrnexusScopeApi.set("values", [
+    "a",
+  ]);
+  const outputs: any[] = [];
+  root.addEventListener("input", (event) => outputs.push((event as CustomEvent).detail));
+  control.options[0].selected = false;
+  control.options[1].selected = true;
+  control.options[2].selected = true;
+  control.dispatchEvent(new (dom.window as any).Event("input", { bubbles: true }));
+  expect(outputs).toHaveLength(1);
+  expect(outputs[0].value).toBe("b");
+  expect(outputs[0].values).toEqual(["b", "c"]);
+  for (const option of Array.from(control.options)) option.selected = false;
+  expect(outputs[0].values).toEqual(["b", "c"]);
+  control.dispatchEvent(new (dom.window as any).Event("input", { bubbles: true }));
+  expect(outputs[1].values).toEqual([]);
+});
+
+test("Select preserves the scalar output for single selection", async () => {
+  const dom = mountHtml(
+    await renderComponent(readFileSync(uiComponentPath("Select"), "utf8"), {
+      name: "single",
+      value: "a",
+      options: [
+        { value: "a", label: "First" },
+        { value: "b", label: "Second" },
+      ],
+    }),
+  );
+  let payload: any;
+  dom.querySelector(".wrn-next--select")!.addEventListener("input", (event) => {
+    payload = (event as CustomEvent).detail;
+  });
+  const control = dom.querySelector("select") as HTMLSelectElement;
+  control.value = "b";
+  control.dispatchEvent(new (dom.window as any).Event("input", { bubbles: true }));
+  expect(payload.value).toBe("b");
+  expect(payload.values).toEqual([]);
+});