@nativerent/js-utils 1.1.0 → 1.2.0

package/tests/tests.ts

@@ -1,18 +1,55 @@
 import {
   areDiff,
   arrayDiff,
+  arrayIntersect,
+  autoSizeText,
   capitalize,
+  countObjectInnerLength,
+  createHtmlElement,
+  createLinkElement,
+  createPixelElement,
+  createScriptElement,
+  createStyleElement,
+  createSvgElement,
   debounce,
+  decodeSafeURL,
+  deepCloneObject,
+  encodeQueryString,
+  extractNumbers,
   filterObjectKeysByValues,
+  fireBlurEvent,
+  fireEvent,
+  fireInputEvent,
+  flatHtmlAttributes,
+  flattenObject,
+  flattenObjectAsArray,
   formatNumber,
   formatNumberWithSign,
+  formatPercent,
   formatWithSign,
   getFromObject,
+  getHtmlElement,
+  getNumericStyleProp,
+  getObjectKeys,
+  getRandomInt,
   getRandomItem,
   getRandomStr,
+  getSafeURL,
+  getScreenSize,
+  hashCode,
+  hasObjectChanged,
+  injectScript,
+  injectStyleLink,
+  insertCss,
+  insertHtmlElements,
+  insertJs,
   isBool,
   isDefined,
+  isElementVisible,
   isFn,
+  isHTMLElement,
+  isNotEmptyString,
+  isNullOrUndef,
   isNum,
   isObject,
   isStr,
@@ -20,13 +57,18 @@ import {
   isUndef,
   objectHasProp,
   objectToQueryString,
+  onDOMReady,
   parseObjectPathStr,
   parseURL,
+  removeSpaces,
   roundBigNum,
   roundDown,
   roundUp,
   sortByAlphabet,
+  stringToHtmlElements,
   sumArray,
+  throttle,
+  toBinaryStr,
   toCamelCase,
   toPercent,
   toSnakeCase,
@@ -201,6 +243,16 @@ test.each([
   expect(formatNumber(num, digits)).toBe(expected);
 });
 
+test.each([
+  [34, "34.00%"],
+  ["4546.77", "4 546.77%"],
+  ["4546.774", "4 546.77%"],
+  ["1000.009", "1 000.01%"],
+  ["1000000.001", "1 000 000.00%"],
+])("formatPercent", (num, expected) => {
+  expect(formatPercent(num)).toBe(expected);
+});
+
 test.each([
   [34, 5, "+34.00000"],
   [-4545, 2, "-4 545.00"],
@@ -252,6 +304,40 @@ test.each([
   expect(arrayDiff(arr1, arr2)).toEqual(expected);
 });
 
+test.each([
+  [[1, 2, 3], [4, 5, 6], []],
+  [
+    ["q", "w", "e", "r", "t", "y"],
+    ["w", "q", "r"],
+    ["q", "w", "r"],
+  ],
+  [
+    ["multi dimensional array", "t", "e", "y"],
+    ["e", "t", "multi dimensional array", "y"],
+    ["multi dimensional array", "t", "e", "y"],
+  ],
+  [
+    // keeps duplicates
+    [true, false, false, true, 1, 0],
+    [true, true, false, 0, false, 0, false, false],
+    [true, false, false, true, 0],
+  ],
+  [
+    [null, false, "657", "#000"],
+    ["black", undefined, 0, false, 657, null],
+    [null, false],
+  ],
+  [
+    [null, undefined, 1],
+    [undefined, null],
+    [null, undefined],
+  ],
+  [[], [undefined, null, 1, "d"], []],
+  [[NaN, 1], [NaN], [NaN]],
+])("arrayIntersect", (arr1, arr2, expected) => {
+  expect(arrayIntersect(arr1, arr2)).toEqual(expected);
+});
+
 test.each([
   [{ d: "d" }, true],
   [["d"], false],
@@ -328,6 +414,52 @@ test.each([
   expect(isString(val)).toBe(expected);
 });
 
+test.each([
+  [{ d: "d" }, false],
+  [["d"], false],
+  [null, false],
+  [undefined, false],
+  [0, false],
+  [() => "g", false],
+  [NaN, false],
+  ["", false],
+  ["str", true],
+  [120, false],
+  [Symbol("s"), false],
+  [function () {}, false],
+  [false, false],
+  [true, false],
+  ["false", true],
+  ["true", true],
+  ["1", true],
+  ["empty", true],
+])("isNotEmptyString", (val, expected) => {
+  expect(isNotEmptyString(val)).toBe(expected);
+});
+
+test.each([
+  [{ d: "d" }, false],
+  [["d"], false],
+  [null, false],
+  [undefined, false],
+  [0, false],
+  [() => "g", false],
+  [NaN, false],
+  ["", false],
+  ["str", true],
+  [120, false],
+  [Symbol("s"), false],
+  [function () {}, false],
+  [false, false],
+  [true, false],
+  ["false", true],
+  ["true", true],
+  ["1", true],
+  ["empty", true],
+])("isNotEmptyString", (val, expected) => {
+  expect(isNotEmptyString(val)).toBe(expected);
+});
+
 test.each([
   [{ d: "d" }, false],
   [["d"], false],
@@ -404,10 +536,29 @@ test.each([
   expect(isDefined(val)).toBe(expected);
 });
 
+test.each([
+  [null, true],
+  [undefined, true],
+  [0, false],
+  ["", false],
+  [false, false],
+  [{}, false],
+  [[], false],
+  [() => {}, false],
+  [NaN, false],
+  [Symbol("s"), false],
+])("isNullOrUndef", (val, expected) => {
+  expect(isNullOrUndef(val)).toBe(expected);
+});
+
 test.each([[isDefined], [parseURL]])("debounce", (fn) => {
   expect(typeof debounce(fn, 100)).toBe("function");
 });
 
+test.each([[isDefined], [parseURL]])("throttle", (fn) => {
+  expect(typeof throttle(fn, 100)).toBe("function");
+});
+
 test.each([
   [
     { start: 134356456456, end: null, status: [1, 2, 4, 7] },
@@ -519,3 +670,1580 @@ test.each([
 ])("roundDown", (num, precision, expected) => {
   expect(roundDown(num, precision)).toBe(expected);
 });
+
+describe("isHTMLElement", () => {
+  test("true for HTMLElement", () => {
+    expect(isHTMLElement(document.createElement("div"))).toBe(true);
+  });
+
+  test("true for SVGElement", () => {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    expect(isHTMLElement(svg)).toBe(true);
+  });
+
+  test("false for non-elements", () => {
+    expect(isHTMLElement(null)).toBe(false);
+    expect(isHTMLElement({})).toBe(false);
+  });
+});
+
+describe("deepCloneObject", () => {
+  it("clones a plain object deeply", () => {
+    const input = {
+      a: 1,
+      b: { c: 2 },
+      d: [1, { e: 3 }],
+    };
+
+    const clone = deepCloneObject(input);
+
+    // same structure
+    expect(clone).toEqual(input);
+
+    // not the same references
+    expect(clone).not.toBe(input);
+    expect(clone.b).not.toBe(input.b);
+    expect(clone.d).not.toBe(input.d);
+    expect(clone.d[1]).not.toBe(input.d[1]);
+  });
+
+  it("changes to clone do not affect original", () => {
+    const input = { nested: { x: 1 } };
+    const clone = deepCloneObject(input);
+
+    clone.nested.x = 999;
+
+    expect(input.nested.x).toBe(1);
+    expect(clone.nested.x).toBe(999);
+  });
+
+  it("drops undefined values in objects and turns them into null in arrays", () => {
+    const input = {
+      a: undefined as unknown as number | undefined,
+      arr: [1, undefined, 3],
+    };
+
+    const clone = deepCloneObject(input);
+
+    // JSON.stringify removes undefined object props
+    expect("a" in (clone as any)).toBe(false);
+
+    // JSON.stringify converts undefined array entries to null
+    expect((clone as any).arr).toEqual([1, null, 3]);
+  });
+
+  it("serializes Date to ISO string (lossy)", () => {
+    const input = { when: new Date("2020-01-01T00:00:00.000Z") };
+    const clone = deepCloneObject(input);
+
+    // Date becomes string
+    expect(typeof (clone as any).when).toBe("string");
+    expect((clone as any).when).toBe("2020-01-01T00:00:00.000Z");
+  });
+
+  it("throws on circular references", () => {
+    const input: any = { a: 1 };
+    input.self = input;
+
+    expect(() => deepCloneObject(input)).toThrow();
+  });
+});
+
+describe("getNumericStyleProp", () => {
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    el = document.createElement("div");
+    document.body.appendChild(el);
+  });
+
+  it("returns numeric value for px styles", () => {
+    el.style.marginTop = "12px";
+
+    expect(getNumericStyleProp("marginTop", el)).toBe(12);
+  });
+
+  it("returns 0 if style property is not set", () => {
+    expect(getNumericStyleProp("paddingLeft", el)).toBe(0);
+  });
+
+  it("does not truncate fractional px values", () => {
+    el.style.width = "10.5px";
+
+    expect(getNumericStyleProp("width", el)).toBe(10.5);
+  });
+
+  it("returns NaN for non-px values", () => {
+    el.style.width = "auto";
+
+    expect(getNumericStyleProp("width", el)).toBe(NaN);
+  });
+
+  it("returns 0 when computed style value is empty string", () => {
+    // jsdom often returns "" for unset values
+    expect(getNumericStyleProp("height", el)).toBe(0);
+  });
+});
+
+describe("getObjectKeys", () => {
+  it("returns own enumerable keys", () => {
+    const obj = { a: 1, b: 2 };
+
+    expect(getObjectKeys(obj)).toEqual(["a", "b"]);
+  });
+
+  it("does not include inherited properties", () => {
+    const proto = { inherited: true };
+    const obj = Object.create(proto);
+    obj.own = true;
+
+    expect(getObjectKeys(obj)).toEqual(["own"]);
+  });
+
+  it("ignores non-enumerable properties", () => {
+    const obj = {};
+    Object.defineProperty(obj, "hidden", {
+      value: 123,
+      enumerable: false,
+    });
+
+    expect(getObjectKeys(obj)).toEqual([]);
+  });
+
+  it("returns empty array for empty object", () => {
+    expect(getObjectKeys({})).toEqual([]);
+  });
+
+  it("does not include symbol keys", () => {
+    const sym = Symbol("x");
+    const obj = { a: 1, [sym]: 2 };
+
+    expect(getObjectKeys(obj)).toEqual(["a"]);
+  });
+});
+
+describe("countObjectInnerLength", () => {
+  it("returns 0 for empty object", () => {
+    expect(countObjectInnerLength({})).toBe(0);
+  });
+
+  it("returns length for single key", () => {
+    expect(countObjectInnerLength({ a: [1, 2, 3] })).toBe(3);
+  });
+
+  it("sums lengths for multiple keys", () => {
+    expect(countObjectInnerLength({ a: [1, 2], b: [], c: ["x"] })).toBe(3);
+  });
+
+  it("treats null/undefined arrays as 0 (defensive version)", () => {
+    expect(
+      countObjectInnerLength({ a: [1], b: null as any, c: undefined as any }),
+    ).toBe(1);
+  });
+});
+
+describe("isElementVisible", () => {
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    el = document.createElement("div");
+    Object.defineProperty(window, "innerHeight", {
+      value: 800,
+      configurable: true,
+    });
+  });
+
+  it("returns false when height is 0", () => {
+    mockRect(el, { top: 0, bottom: 0, height: 0 });
+    expect(isElementVisible(el)).toBe(false);
+  });
+
+  it("returns true when fully visible", () => {
+    mockRect(el, { top: 100, bottom: 200, height: 100 });
+    expect(isElementVisible(el, 50)).toBe(true);
+    expect(isElementVisible(el, 100)).toBe(true);
+  });
+
+  it("returns true when partially visible above threshold", () => {
+    // element spans -50..50 => 50px visible of 100px => 50%
+    mockRect(el, { top: -50, bottom: 50, height: 100 });
+    expect(isElementVisible(el, 50)).toBe(true);
+    expect(isElementVisible(el, 51)).toBe(false);
+  });
+
+  it("returns false when completely above viewport", () => {
+    mockRect(el, { top: -200, bottom: -100, height: 100 });
+    expect(isElementVisible(el)).toBe(false);
+  });
+
+  it("returns false when completely below viewport", () => {
+    mockRect(el, { top: 900, bottom: 1000, height: 100 });
+    expect(isElementVisible(el)).toBe(false);
+  });
+
+  it("handles element taller than viewport", () => {
+    // element spans -200..1000 (height 1200), visible is 800 => 66.6%
+    mockRect(el, { top: -200, bottom: 1000, height: 1200 });
+    expect(isElementVisible(el, 66)).toBe(true);
+    expect(isElementVisible(el, 67)).toBe(false);
+  });
+});
+
+describe("decodeSafeURL", () => {
+  it("decodes a valid encoded URL", () => {
+    const encoded = "https://example.com/path%20with%20spaces";
+    expect(decodeSafeURL(encoded)).toBe("https://example.com/path with spaces");
+  });
+
+  it("returns original string for already decoded URLs", () => {
+    const url = "https://example.com/path with spaces";
+    expect(decodeSafeURL(url)).toBe(url);
+  });
+
+  it("returns original string for malformed encoding", () => {
+    const malformed = "https://example.com/%E0%A4%A";
+    expect(decodeSafeURL(malformed)).toBe(malformed);
+  });
+
+  it("does not decode query string components", () => {
+    const encoded = "https://example.com/?a=1%26b=2";
+    // decodeURI keeps %26 intact
+    expect(decodeSafeURL(encoded)).toBe("https://example.com/?a=1%26b=2");
+  });
+
+  it("handles empty string", () => {
+    expect(decodeSafeURL("")).toBe("");
+  });
+});
+
+describe("getSafeURL", () => {
+  beforeEach(() => {
+    history.pushState({}, "", "/current%20path");
+  });
+
+  it("returns encoded URL for valid input", () => {
+    const url = "https://example.com/path with spaces";
+    expect(getSafeURL(url)).toBe("https://example.com/path%20with%20spaces");
+  });
+
+  it("handles malformed encoded URLs safely", () => {
+    const malformed = "https://example.com/%E0%A4%A";
+    expect(getSafeURL(malformed)).toBe(encodeURI(malformed));
+  });
+
+  it("uses location.href when url is undefined", () => {
+    expect(getSafeURL()).toBe("https://example.com/current%20path");
+  });
+
+  it("uses location.href when url is empty string (current behavior)", () => {
+    expect(getSafeURL("")).toBe("https://example.com/current%20path");
+  });
+
+  it("does not double-encode an already encoded URL", () => {
+    const encoded = "https://example.com/a%20b";
+    expect(getSafeURL(encoded)).toBe("https://example.com/a%20b");
+  });
+});
+
+describe("encodeQueryString", () => {
+  it("returns input when url is empty", () => {
+    expect(encodeQueryString("")).toBe("");
+  });
+
+  it("returns input when url has no query string", () => {
+    const url = "https://example.com/path";
+    expect(encodeQueryString(url)).toBe(url);
+  });
+
+  it("encodes query string values", () => {
+    const url = "https://example.com/path?a=1 b&c=hello world";
+    expect(encodeQueryString(url)).toBe(
+      "https://example.com/path?a=1%20b&c=hello%20world",
+    );
+  });
+
+  it("preserves base URL and replaces query string", () => {
+    const url = "https://example.com/path/to?a=old value";
+    expect(encodeQueryString(url)).toBe(
+      "https://example.com/path/to?a=old%20value",
+    );
+  });
+
+  it("drops hash fragment with current implementation", () => {
+    const url = "https://example.com/path?a=1#section";
+    expect(encodeQueryString(url)).toBe("https://example.com/path?a=1");
+  });
+
+  it("does not double-encode an already encoded query", () => {
+    const url = "https://example.com/path?a=hello%20world";
+    expect(encodeQueryString(url)).toBe(
+      "https://example.com/path?a=hello%20world",
+    );
+  });
+});
+
+describe("injectScript", () => {
+  beforeEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("appends a script element to document.head", () => {
+    injectScript("test.js");
+
+    const scripts = document.head.querySelectorAll("script");
+    expect(scripts.length).toBe(1);
+  });
+
+  it("sets the script src correctly", () => {
+    injectScript("https://example.com/test.js");
+
+    const script = document.head.querySelector("script") as HTMLScriptElement;
+    expect(script.src).toBe("https://example.com/test.js");
+  });
+
+  it("sets async to true", () => {
+    injectScript("test.js");
+
+    const script = document.head.querySelector("script") as HTMLScriptElement;
+    expect(script.async).toBe(true);
+  });
+
+  it("does not remove existing scripts", () => {
+    injectScript("a.js");
+    injectScript("b.js");
+
+    const scripts = document.head.querySelectorAll("script");
+    expect(scripts.length).toBe(2);
+    expect(scripts[0].src).toContain("a.js");
+    expect(scripts[1].src).toContain("b.js");
+  });
+});
+
+describe("injectStyleLink", () => {
+  beforeEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("appends a link element to document.head", () => {
+    injectStyleLink("styles.css");
+
+    const links = document.head.querySelectorAll("link");
+    expect(links.length).toBe(1);
+  });
+
+  it('sets rel="stylesheet"', () => {
+    injectStyleLink("styles.css");
+
+    const link = document.head.querySelector("link") as HTMLLinkElement;
+    expect(link.rel).toBe("stylesheet");
+    // or: expect(link.getAttribute('rel')).toBe('stylesheet');
+  });
+
+  it("sets href correctly", () => {
+    injectStyleLink("https://example.com/styles.css");
+
+    const link = document.head.querySelector("link") as HTMLLinkElement;
+    expect(link.href).toBe("https://example.com/styles.css");
+  });
+
+  it("does not remove existing links", () => {
+    injectStyleLink("a.css");
+    injectStyleLink("b.css");
+
+    const links = document.head.querySelectorAll('link[rel="stylesheet"]');
+    expect(links.length).toBe(2);
+    expect((links[0] as HTMLLinkElement).href).toContain("a.css");
+    expect((links[1] as HTMLLinkElement).href).toContain("b.css");
+  });
+});
+
+describe("toBinaryStr", () => {
+  it("returns identical output for ASCII strings", () => {
+    const input = "hello";
+    const binary = toBinaryStr(input);
+
+    expect(binary).toBe("hello");
+    expect(binary.length).toBe(5);
+  });
+
+  it("encodes non-ASCII characters as UTF-8 bytes", () => {
+    // '€' = 0xE2 0x82 0xAC in UTF-8
+    const binary = toBinaryStr("€");
+
+    expect(binary.length).toBe(3);
+    expect(binary.charCodeAt(0)).toBe(0xe2);
+    expect(binary.charCodeAt(1)).toBe(0x82);
+    expect(binary.charCodeAt(2)).toBe(0xac);
+  });
+
+  it("handles emoji correctly (4-byte UTF-8)", () => {
+    // 😀 = F0 9F 98 80
+    const binary = toBinaryStr("😀");
+
+    expect([
+      binary.charCodeAt(0),
+      binary.charCodeAt(1),
+      binary.charCodeAt(2),
+      binary.charCodeAt(3),
+    ]).toEqual([0xf0, 0x9f, 0x98, 0x80]);
+  });
+
+  it("can be round-tripped back to the original string", () => {
+    const input = "Hello € 😀";
+
+    const binary = toBinaryStr(input);
+    const decoded = new TextDecoder().decode(
+      Uint8Array.from(binary, (c) => c.charCodeAt(0)),
+    );
+
+    expect(decoded).toBe(input);
+  });
+});
+
+describe("getHtmlElement", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("returns the element when it exists", () => {
+    document.body.innerHTML = '<div id="test"></div>';
+
+    const el = getHtmlElement("test");
+
+    expect(el).not.toBeNull();
+    expect(el?.id).toBe("test");
+  });
+
+  it("returns null when the element does not exist", () => {
+    const el = getHtmlElement("missing");
+
+    expect(el).toBeNull();
+  });
+});
+
+describe("stringToHtmlElements", () => {
+  it("returns empty NodeList for empty string", () => {
+    const nodes = stringToHtmlElements("");
+    expect(nodes.length).toBe(0);
+  });
+
+  it("parses a single element", () => {
+    const nodes = stringToHtmlElements("<span>Hi</span>");
+
+    expect(nodes.length).toBe(1);
+    expect(nodes[0].nodeType).toBe(Node.ELEMENT_NODE);
+    expect((nodes[0] as HTMLElement).tagName).toBe("SPAN");
+  });
+
+  it("parses multiple sibling elements", () => {
+    const nodes = stringToHtmlElements("<div></div><p></p>");
+
+    expect(nodes.length).toBe(2);
+    expect((nodes[0] as HTMLElement).tagName).toBe("DIV");
+    expect((nodes[1] as HTMLElement).tagName).toBe("P");
+  });
+
+  it("includes text nodes", () => {
+    const nodes = stringToHtmlElements("Hello <b>world</b>");
+
+    expect(nodes.length).toBe(2);
+    expect(nodes[0].nodeType).toBe(Node.TEXT_NODE);
+    expect(nodes[0].textContent).toBe("Hello ");
+    expect((nodes[1] as HTMLElement).tagName).toBe("B");
+  });
+
+  it("does not strip newlines before parsing", () => {
+    const nodes = stringToHtmlElements(`
+      <div>
+        test
+      </div>
+    `);
+
+    expect(nodes.length).toBe(1);
+    expect((nodes[0] as HTMLElement).textContent).toBe("        test      ");
+  });
+
+  it("ignores leading and trailing whitespace", () => {
+    const nodes = stringToHtmlElements("   <span></span>   ");
+    expect(nodes.length).toBe(1);
+  });
+});
+
+describe("createHtmlElement", () => {
+  it("creates an element of the given type", () => {
+    const el = createHtmlElement("div");
+
+    expect(el).toBeInstanceOf(HTMLElement);
+    expect(el.tagName).toBe("DIV");
+  });
+
+  it("sets provided attributes", () => {
+    const el = createHtmlElement("input", {
+      type: "text",
+      name: "username",
+      value: "john",
+    });
+
+    expect(el.getAttribute("type")).toBe("text");
+    expect(el.getAttribute("name")).toBe("username");
+    expect(el.getAttribute("value")).toBe("john");
+  });
+
+  it("returns an element without attributes when none are provided", () => {
+    const el = createHtmlElement("span");
+
+    expect(el.attributes.length).toBe(0);
+  });
+
+  it("ignores inherited attributes", () => {
+    const proto = { inherited: "nope" };
+    const attrs = Object.create(proto);
+    attrs.id = "test";
+
+    const el = createHtmlElement("div", attrs);
+
+    expect(el.getAttribute("id")).toBe("test");
+    expect(el.getAttribute("inherited")).toBeNull();
+  });
+
+  it("overwrites duplicate attributes", () => {
+    const el = createHtmlElement("div", { id: "a", id2: "b" });
+
+    // Setting the same attribute twice isn’t possible in object literal,
+    // but this documents that attributes are applied in key order.
+    expect(el.getAttribute("id")).toBe("a");
+  });
+});
+
+describe("flatHtmlAttributes", () => {
+  it("returns empty object when attributes is undefined", () => {
+    expect(flatHtmlAttributes(undefined)).toEqual({});
+  });
+
+  it("returns empty object when attributes is null", () => {
+    expect(flatHtmlAttributes(null as any)).toEqual({});
+  });
+
+  it("flattens element attributes into an object", () => {
+    const el = document.createElement("div");
+    el.setAttribute("id", "test");
+    el.setAttribute("data-x", "123");
+
+    expect(flatHtmlAttributes(el.attributes)).toEqual({
+      id: "test",
+      "data-x": "123",
+    });
+  });
+
+  it("returns empty object for element with no attributes", () => {
+    const el = document.createElement("span");
+
+    expect(flatHtmlAttributes(el.attributes)).toEqual({});
+  });
+
+  it("overwrites duplicate attribute names with the last value", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-x", "1");
+    el.setAttribute("data-x", "2");
+
+    expect(flatHtmlAttributes(el.attributes)).toEqual({
+      "data-x": "2",
+    });
+  });
+});
+
+describe("createScriptElement", () => {
+  it("creates a script element", () => {
+    const el = createScriptElement("https://example.com/a.js");
+    expect(el.tagName).toBe("SCRIPT");
+  });
+
+  it("sets src and async when inline is false (default)", () => {
+    const el = createScriptElement("https://example.com/a.js");
+    expect(el.src).toBe("https://example.com/a.js");
+    expect(el.async).toBe(true);
+    expect(el.textContent).toBe("");
+  });
+
+  it("creates an inline script when inline is true", () => {
+    const el = createScriptElement('console.log("hi")', true);
+    expect(el.src).toBe(""); // no external src
+    expect(el.async).toBe(undefined); // default; you never set it in inline mode
+    expect(el.textContent).toBe('console.log("hi")');
+  });
+
+  it("sets provided attributes", () => {
+    const el = createScriptElement("https://example.com/a.js", false, {
+      defer: "true",
+      "data-test": "1",
+      nonce: "abc123",
+    });
+
+    expect(el.getAttribute("defer")).toBe("true");
+    expect(el.getAttribute("data-test")).toBe("1");
+    expect(el.getAttribute("nonce")).toBe("abc123");
+  });
+
+  it("sets provided attributes also in inline mode", () => {
+    const el = createScriptElement("alert(1)", true, { nonce: "n" });
+    expect(el.getAttribute("nonce")).toBe("n");
+    expect(el.textContent).toBe("alert(1)");
+  });
+});
+
+describe("createStyleElement", () => {
+  it("creates a style element", () => {
+    const el = createStyleElement(null);
+
+    expect(el.tagName).toBe("STYLE");
+  });
+
+  it("adds a text node when css is provided", () => {
+    const css = "body { color: red; }";
+    const el = createStyleElement(css);
+
+    expect(el.textContent).toBe(css);
+  });
+
+  it("returns an empty style element when css is null", () => {
+    const el = createStyleElement(null);
+
+    expect(el.textContent).toBe("");
+    expect(el.childNodes.length).toBe(0);
+  });
+
+  it("does not add a text node for empty string (current behavior)", () => {
+    const el = createStyleElement("");
+
+    expect(el.textContent).toBe("");
+    expect(el.childNodes.length).toBe(0);
+  });
+});
+
+describe("createLinkElement", () => {
+  it("creates a link element", () => {
+    const el = createLinkElement("style.css");
+
+    expect(el.tagName).toBe("LINK");
+  });
+
+  it("sets rel to stylesheet", () => {
+    const el = createLinkElement("style.css");
+
+    expect(el.rel).toBe("stylesheet");
+    expect(el.getAttribute("rel")).toBe("stylesheet");
+  });
+
+  it("sets href correctly", () => {
+    const el = createLinkElement("https://example.com/style.css");
+
+    // absolute URLs are normalized by the browser/jsdom
+    expect(el.href).toBe("https://example.com/style.css");
+  });
+
+  it("keeps href attribute for relative paths", () => {
+    const el = createLinkElement("style.css");
+
+    expect(el.getAttribute("href")).toBe("style.css");
+  });
+});
+
+describe("createSvgElement", () => {
+  it("creates an SVG element in the SVG namespace", () => {
+    const el = createSvgElement("", {});
+
+    expect(el.tagName.toLowerCase()).toBe("svg");
+    expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
+  });
+
+  it("sets provided attributes", () => {
+    const el = createSvgElement("", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+    });
+
+    expect(el.getAttribute("width")).toBe("24");
+    expect(el.getAttribute("height")).toBe("24");
+    expect(el.getAttribute("viewBox")).toBe("0 0 24 24");
+  });
+
+  it("sets inner HTML content", () => {
+    const el = createSvgElement('<circle cx="5" cy="5" r="5"></circle>', {});
+
+    expect(el.querySelector("circle")).not.toBeNull();
+    const circle = el.querySelector("circle")!;
+    expect(circle.getAttribute("r")).toBe("5");
+  });
+
+  it("supports nested SVG elements", () => {
+    const el = createSvgElement('<g><path d="M0 0h10v10H0z"></path></g>', {});
+
+    expect(el.querySelector("g")).not.toBeNull();
+    expect(el.querySelector("path")?.getAttribute("d")).toBe("M0 0h10v10H0z");
+  });
+});
+
+describe("createPixelElement", () => {
+  it("creates an image element", () => {
+    const el = createPixelElement("https://example.com/pixel");
+
+    expect(el.tagName).toBe("IMG");
+  });
+
+  it("sets src correctly", () => {
+    const el = createPixelElement("https://example.com/pixel");
+
+    // absolute URLs are normalized by jsdom
+    expect(el.src).toBe("https://example.com/pixel");
+  });
+
+  it("sets width and height to 1", () => {
+    const el = createPixelElement("x");
+
+    expect(el.width).toBe(1);
+    expect(el.height).toBe(1);
+  });
+
+  it("positions the image off-screen", () => {
+    const el = createPixelElement("x");
+
+    expect(el.style.position).toBe("absolute");
+    expect(el.style.left).toBe("-99999px");
+  });
+
+  it("does not append the element to the document", () => {
+    createPixelElement("x");
+
+    expect(document.querySelectorAll("img").length).toBe(0);
+  });
+});
+
+describe("insertJs", () => {
+  beforeEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("appends a script element to document.head", () => {
+    insertJs("https://example.com/a.js");
+
+    const scripts = document.head.querySelectorAll("script");
+    expect(scripts.length).toBe(1);
+  });
+
+  it("creates an external script when inline is false", () => {
+    insertJs("https://example.com/a.js");
+
+    const script = document.head.querySelector("script")!;
+    expect(script.getAttribute("src")).toBe("https://example.com/a.js");
+    expect(script.textContent).toBe("");
+  });
+
+  it("creates an inline script when inline is true", () => {
+    insertJs('console.log("hi")', true);
+
+    const script = document.head.querySelector("script")!;
+    expect(script.getAttribute("src")).toBeNull();
+    expect(script.textContent).toBe('console.log("hi")');
+  });
+
+  it("does not append multiple scripts unintentionally", () => {
+    insertJs("a.js");
+    insertJs("b.js");
+
+    const scripts = document.head.querySelectorAll("script");
+    expect(scripts.length).toBe(2);
+  });
+});
+
+describe("insertCss", () => {
+  beforeEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("inserts a style element when external is false", () => {
+    insertCss("body { color: red; }");
+
+    const style = document.head.querySelector("style");
+    expect(style).not.toBeNull();
+    expect(style!.textContent).toBe("body { color: red; }");
+  });
+
+  it("inserts a link element when external is true", () => {
+    insertCss("https://example.com/style.css", undefined, true);
+
+    const link = document.head.querySelector("link");
+    expect(link).not.toBeNull();
+    expect(link!.rel).toBe("stylesheet");
+    expect(link!.getAttribute("href")).toBe("https://example.com/style.css");
+  });
+
+  it("sets className on the inserted element", () => {
+    insertCss("body { color: red; }", "test-class");
+
+    const style = document.head.querySelector("style")!;
+    expect(style.className).toBe("test-class");
+  });
+
+  it("sets className on external link element", () => {
+    insertCss("style.css", "external-style", true);
+
+    const link = document.head.querySelector("link")!;
+    expect(link.className).toBe("external-style");
+  });
+
+  it("appends multiple css elements when called multiple times", () => {
+    insertCss("a {}");
+    insertCss("b {}");
+
+    expect(document.head.querySelectorAll("style").length).toBe(2);
+  });
+});
+
+describe("onDOMReady", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("calls callback immediately when document is interactive", () => {
+    Object.defineProperty(document, "readyState", {
+      value: "interactive",
+      configurable: true,
+    });
+
+    const cb = jest.fn();
+    onDOMReady(cb, 1, "a");
+
+    expect(cb).toHaveBeenCalledWith(1, "a");
+  });
+
+  it("calls callback immediately when document is complete", () => {
+    Object.defineProperty(document, "readyState", {
+      value: "complete",
+      configurable: true,
+    });
+
+    const cb = jest.fn();
+    onDOMReady(cb);
+
+    expect(cb).toHaveBeenCalled();
+  });
+
+  it("waits for DOMContentLoaded when document is loading", () => {
+    Object.defineProperty(document, "readyState", {
+      value: "loading",
+      configurable: true,
+    });
+
+    const cb = jest.fn();
+    onDOMReady(cb, "x");
+
+    expect(cb).not.toHaveBeenCalled();
+
+    document.dispatchEvent(new Event("DOMContentLoaded"));
+
+    expect(cb).toHaveBeenCalledWith("x");
+  });
+});
+
+describe("fireEvent", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it("dispatches an event on a provided element", () => {
+    const el = document.createElement("button");
+    document.body.appendChild(el);
+
+    const handler = jest.fn();
+    el.addEventListener("custom", handler);
+
+    fireEvent("custom", el);
+
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("dispatches an event when given a selector string", () => {
+    document.body.innerHTML = '<div id="x"></div>';
+    const el = document.querySelector("#x")!;
+
+    const handler = jest.fn();
+    el.addEventListener("ping", handler);
+
+    fireEvent("ping", "#x");
+
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when selector does not match", () => {
+    const handler = jest.fn();
+    document.body.addEventListener("ping", handler);
+
+    fireEvent("ping", "#missing");
+    jest.advanceTimersByTime(0);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("supports delay", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    const handler = jest.fn();
+    el.addEventListener("later", handler);
+
+    fireEvent("later", el, 100);
+
+    jest.advanceTimersByTime(99);
+    expect(handler).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("event bubbles", () => {
+    const parent = document.createElement("div");
+    const child = document.createElement("span");
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    const parentHandler = jest.fn();
+    parent.addEventListener("bub", parentHandler);
+
+    fireEvent("bub", child);
+    jest.advanceTimersByTime(0);
+
+    expect(parentHandler).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("fireInputEvent", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("dispatches an input event on an element", () => {
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+
+    const handler = jest.fn();
+    input.addEventListener("input", handler);
+
+    fireInputEvent(input);
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("dispatches an input event when given a selector", () => {
+    document.body.innerHTML = '<input id="i" />';
+    const input = document.querySelector("#i")!;
+
+    const handler = jest.fn();
+    input.addEventListener("input", handler);
+
+    fireInputEvent("#i");
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when element is null", () => {
+    const handler = jest.fn();
+    document.body.addEventListener("input", handler);
+
+    fireInputEvent(null);
+    jest.advanceTimersByTime(0);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("respects delay", () => {
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+
+    const handler = jest.fn();
+    input.addEventListener("input", handler);
+
+    fireInputEvent(input, 50);
+
+    jest.advanceTimersByTime(49);
+    expect(handler).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("fireBlurEvent", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("dispatches a blur event on an element", () => {
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+
+    const handler = jest.fn();
+    input.addEventListener("blur", handler);
+
+    fireBlurEvent(input);
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("dispatches a blur event when given a selector", () => {
+    document.body.innerHTML = '<input id="i" />';
+    const input = document.querySelector("#i")!;
+
+    const handler = jest.fn();
+    input.addEventListener("blur", handler);
+
+    fireBlurEvent("#i");
+    jest.advanceTimersByTime(0);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when element is null", () => {
+    const handler = jest.fn();
+    document.body.addEventListener("blur", handler);
+
+    fireBlurEvent(null);
+    jest.advanceTimersByTime(0);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("respects delay", () => {
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+
+    const handler = jest.fn();
+    input.addEventListener("blur", handler);
+
+    fireBlurEvent(input, 25);
+
+    jest.advanceTimersByTime(24);
+    expect(handler).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("bubbles (non-native behavior, but current contract)", () => {
+    const parent = document.createElement("div");
+    const input = document.createElement("input");
+    parent.appendChild(input);
+    document.body.appendChild(parent);
+
+    const parentHandler = jest.fn();
+    parent.addEventListener("blur", parentHandler);
+
+    fireBlurEvent(input);
+    jest.advanceTimersByTime(0);
+
+    expect(parentHandler).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("insertHtmlElements", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    document.head.innerHTML = "";
+  });
+
+  it("defaults appendTo to document.body", () => {
+    const nodes = stringToHtmlElements('<div id="x"></div>') as any;
+    insertHtmlElements(nodes);
+
+    expect(document.body.querySelector("#x")).not.toBeNull();
+  });
+
+  it("inserts elements and preserves attributes", () => {
+    const nodes = stringToHtmlElements('<div id="a" data-x="1"></div>') as any;
+    insertHtmlElements(nodes);
+
+    const el = document.body.querySelector("#a") as HTMLElement;
+    expect(el).not.toBeNull();
+    expect(el.getAttribute("data-x")).toBe("1");
+  });
+
+  it("inserts text nodes and ignores comments", () => {
+    const nodes = stringToHtmlElements("Hello<!--c--><b>world</b>") as any;
+    insertHtmlElements(nodes);
+
+    expect(document.body.textContent).toContain("Hello");
+    expect(document.body.querySelector("b")?.textContent).toBe("world");
+    // comment should not appear as a node we inserted
+    expect(document.body.innerHTML).not.toContain("<!--");
+  });
+
+  it("recreates external scripts with attributes", () => {
+    const nodes = stringToHtmlElements(
+      '<script src="a.js" data-test="1"></script>',
+    ) as any;
+
+    insertHtmlElements(nodes);
+
+    const script = document.body.querySelector("script") as HTMLScriptElement;
+    expect(script).not.toBeNull();
+    expect(script.getAttribute("src")).toBe("a.js");
+    expect(script.getAttribute("data-test")).toBe("1");
+    expect(script.async).toBe(true);
+  });
+
+  it("recreates inline scripts", () => {
+    const nodes = stringToHtmlElements(
+      '<script>console.log("x")</script>',
+    ) as any;
+    insertHtmlElements(nodes);
+
+    const script = document.body.querySelector("script") as HTMLScriptElement;
+    expect(script).not.toBeNull();
+    expect(script.getAttribute("src")).toBeNull();
+    expect(script.textContent).toBe('console.log("x")');
+  });
+
+  it("recreates style elements", () => {
+    const nodes = stringToHtmlElements("<style>body{margin:0}</style>") as any;
+    insertHtmlElements(nodes);
+
+    const style = document.body.querySelector("style") as HTMLStyleElement;
+    expect(style).not.toBeNull();
+    expect(style.textContent).toContain("body{margin:0}");
+  });
+
+  it("recreates svg elements and attributes", () => {
+    const nodes = stringToHtmlElements(
+      '<svg width="10"><circle cx="5" cy="5" r="5"></circle></svg>',
+    ) as any;
+
+    insertHtmlElements(nodes);
+
+    const svg = document.body.querySelector("svg") as SVGSVGElement;
+    expect(svg).not.toBeNull();
+    expect(svg.getAttribute("width")).toBe("10");
+    expect(svg.querySelector("circle")).not.toBeNull();
+  });
+
+  it("recursively inserts nested children", () => {
+    const nodes = stringToHtmlElements("<div><span>Hi</span></div>") as any;
+    insertHtmlElements(nodes);
+
+    expect(document.body.querySelector("div span")?.textContent).toBe("Hi");
+  });
+});
+
+describe("getScreenSize", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("returns screen width and height when available", () => {
+    Object.defineProperty(window, "screen", {
+      value: { width: 1920, height: 1080 },
+      configurable: true,
+    });
+
+    expect(getScreenSize()).toEqual({ width: 1920, height: 1080 });
+  });
+
+  it("falls back to window inner size when screen is undefined", () => {
+    Object.defineProperty(window, "screen", {
+      value: undefined,
+      configurable: true,
+    });
+
+    Object.defineProperty(window, "innerWidth", {
+      value: 800,
+      configurable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      value: 600,
+      configurable: true,
+    });
+
+    expect(getScreenSize()).toEqual({ width: 800, height: 600 });
+  });
+});
+
+describe("getRandomInt", () => {
+  it("returns values within [min, max)", () => {
+    for (let i = 0; i < 1000; i++) {
+      const n = getRandomInt(5, 10);
+      expect(n).toBeGreaterThanOrEqual(5);
+      expect(n).toBeLessThan(10);
+    }
+  });
+
+  it("returns integers only", () => {
+    const n = getRandomInt(0, 10);
+    expect(Number.isInteger(n)).toBe(true);
+  });
+
+  it("handles non-integer inputs by rounding", () => {
+    for (let i = 0; i < 100; i++) {
+      const n = getRandomInt(1.2, 4.8);
+      expect(n).toBeGreaterThanOrEqual(2);
+      expect(n).toBeLessThan(4);
+    }
+  });
+});
+
+describe("hashCode", () => {
+  it("returns a number", () => {
+    expect(typeof hashCode("test")).toBe("number");
+  });
+
+  it("returns the same hash for the same input", () => {
+    expect(hashCode("hello")).toBe(hashCode("hello"));
+  });
+
+  it("returns different hashes for different strings", () => {
+    expect(hashCode("hello")).not.toBe(hashCode("world"));
+  });
+
+  it("is case-sensitive", () => {
+    expect(hashCode("Hello")).not.toBe(hashCode("hello"));
+  });
+
+  it("returns 0 for empty string", () => {
+    expect(hashCode("")).toBe(0);
+  });
+
+  it("returns an unsigned 32-bit integer", () => {
+    const hash = hashCode("some string");
+    expect(hash).toBeGreaterThanOrEqual(0);
+    expect(hash).toBeLessThanOrEqual(0xffffffff);
+  });
+
+  it("handles unicode characters", () => {
+    const hash1 = hashCode("€");
+    const hash2 = hashCode("😀");
+
+    expect(hash1).toBeGreaterThanOrEqual(0);
+    expect(hash2).toBeGreaterThanOrEqual(0);
+    expect(hash1).not.toBe(hash2);
+  });
+
+  it("produces stable output across calls", () => {
+    const value = "consistent input";
+    const expected = hashCode(value);
+
+    for (let i = 0; i < 10; i++) {
+      expect(hashCode(value)).toBe(expected);
+    }
+  });
+});
+
+describe("hasObjectChanged", () => {
+  it("returns false when objects are equal", () => {
+    const oldObj = { a: 1, b: "x" };
+    const newObj = { a: 1, b: "x" };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(false);
+  });
+
+  it("returns true when a primitive value changes", () => {
+    const oldObj = { a: 1 };
+    const newObj = { a: 2 };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(true);
+  });
+
+  it("returns true when a key is missing in new (newVal undefined)", () => {
+    const oldObj = { a: 1 };
+    const newObj = {};
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(true);
+  });
+
+  it("handles nested objects", () => {
+    const oldObj = { a: { x: 1 } };
+    const newObj = { a: { x: 2 } };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(true);
+  });
+
+  it("returns true when old is object but new is not", () => {
+    const oldObj = { a: { x: 1 } };
+    const newObj = { a: 123 };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(true);
+  });
+
+  it("compares arrays (whatever arrayDiff semantics are)", () => {
+    const oldObj = { a: [1, 2] };
+    const newObj = { a: [1, 2, 3] };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(true);
+  });
+
+  it("does not detect new keys by default (current semantics)", () => {
+    const oldObj = { a: 1 };
+    const newObj = { a: 1, b: 2 };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj))).toBe(false);
+  });
+
+  it("detects new keys when enabled", () => {
+    const oldObj = { a: 1 };
+    const newObj = { a: 1, b: 2 };
+
+    expect(hasObjectChanged(oldObj, Object.entries(newObj), true)).toBe(true);
+  });
+});
+
+describe("extractNumbers", () => {
+  it("extracts digits from a string", () => {
+    expect(extractNumbers("abc123def")).toBe("123");
+  });
+
+  it("extracts digits from a number", () => {
+    expect(extractNumbers(12345)).toBe("12345");
+  });
+
+  it("removes non-digit characters", () => {
+    expect(extractNumbers("a1-b2.c3")).toBe("123");
+  });
+
+  it("removes minus sign and decimal point", () => {
+    expect(extractNumbers(-12.34)).toBe("1234");
+  });
+
+  it("returns empty string when there are no digits", () => {
+    expect(extractNumbers("abc")).toBe("");
+  });
+
+  it("returns empty string for non-string, non-number values", () => {
+    expect(extractNumbers(null)).toBe("");
+    expect(extractNumbers(undefined)).toBe("");
+    expect(extractNumbers({})).toBe("");
+    expect(extractNumbers([])).toBe("");
+    expect(extractNumbers(() => 123)).toBe("");
+  });
+
+  it("handles numeric strings", () => {
+    expect(extractNumbers("00123")).toBe("00123");
+  });
+});
+
+describe("removeSpaces", () => {
+  it("removes spaces from a string", () => {
+    expect(removeSpaces("a b c")).toBe("abc");
+  });
+
+  it("removes all whitespace characters", () => {
+    expect(removeSpaces("a\tb\nc")).toBe("abc");
+  });
+
+  it("removes whitespace from numbers converted to string", () => {
+    expect(removeSpaces(1_000_000)).toBe("1000000");
+  });
+
+  it("returns empty string when input has only whitespace", () => {
+    expect(removeSpaces("   \n\t")).toBe("");
+  });
+
+  it("returns empty string for non-string, non-number values", () => {
+    expect(removeSpaces(null)).toBe("");
+    expect(removeSpaces(undefined)).toBe("");
+    expect(removeSpaces({})).toBe("");
+    expect(removeSpaces([])).toBe("");
+    expect(removeSpaces(() => "x")).toBe("");
+  });
+
+  it("does not modify strings without whitespace", () => {
+    expect(removeSpaces("abc")).toBe("abc");
+  });
+
+  it("handles numeric strings", () => {
+    expect(removeSpaces(" 001 23 ")).toBe("00123");
+  });
+});
+
+describe("flattenObject", () => {
+  it("flattens nested objects with dot notation", () => {
+    expect(flattenObject({ a: { b: { c: 1 } } })).toEqual({ "a.b.c": 1 });
+  });
+
+  it("keeps top-level primitive keys", () => {
+    expect(flattenObject({ a: 1, b: "x" })).toEqual({ a: 1, b: "x" });
+  });
+
+  it("flattens arrays using numeric indices", () => {
+    expect(flattenObject({ arr: [10, 20] })).toEqual({
+      "arr.0": 10,
+      "arr.1": 20,
+    });
+  });
+
+  it("flattens nested arrays/objects", () => {
+    expect(flattenObject({ a: [{ b: 1 }] })).toEqual({ "a.0.b": 1 });
+  });
+
+  it("treats null as a leaf value", () => {
+    expect(flattenObject({ a: null })).toEqual({ a: null });
+  });
+
+  it("omits empty objects/arrays (current behavior)", () => {
+    expect(flattenObject({ a: {}, b: [] })).toEqual({});
+  });
+});
+
+describe("flattenObjectAsArray", () => {
+  it("converts dot notation to bracket notation", () => {
+    expect(flattenObjectAsArray({ a: { b: { c: 1 } } })).toEqual({
+      "a[b][c]": 1,
+    });
+  });
+
+  it("handles arrays by converting numeric segments to brackets", () => {
+    expect(flattenObjectAsArray({ arr: [10, 20] })).toEqual({
+      "arr[0]": 10,
+      "arr[1]": 20,
+    });
+  });
+
+  it("handles mixed nested arrays and objects", () => {
+    expect(flattenObjectAsArray({ a: [{ b: 1 }] })).toEqual({ "a[0][b]": 1 });
+  });
+
+  it("returns empty object for empty input", () => {
+    expect(flattenObjectAsArray({} as any)).toEqual({});
+  });
+
+  it("keeps null leaf values", () => {
+    expect(flattenObjectAsArray({ a: null } as any)).toEqual({ a: null });
+  });
+});
+
+describe("autoSizeText (using real getNumericStyleProp)", () => {
+  let el: HTMLElement;
+
+  // Model: textHeight() inside your code is:
+  // floor(scrollHeight - paddingTop - paddingBottom)
+  // We'll set scrollHeight = fontSize*2 + paddingTop + paddingBottom
+  // => textHeight = fontSize*2 (nice and deterministic / monotonic)
+  const paddingTopPx = 2;
+  const paddingBottomPx = 2;
+
+  beforeEach(() => {
+    el = document.createElement("div");
+
+    // Ensure a starting font size unless the test sets it explicitly
+    el.style.fontSize = "10px";
+
+    // Mock computed style to reflect element.style + fixed paddings
+    jest
+      .spyOn(window, "getComputedStyle")
+      .mockImplementation((elem: Element) => {
+        const htmlEl = elem as HTMLElement;
+
+        return {
+          fontSize: htmlEl.style.fontSize || "10px",
+          paddingTop: `${paddingTopPx}px`,
+          paddingBottom: `${paddingBottomPx}px`,
+        } as any;
+      });
+
+    // scrollHeight depends on current font size (in px)
+    Object.defineProperty(el, "scrollHeight", {
+      get() {
+        const fontSize = parseFloat(el.style.fontSize || "0"); // may be NaN
+        // If NaN, make scrollHeight NaN-ish; but DOM expects number, so fallback
+        const fs = Number.isFinite(fontSize) ? fontSize : 0;
+        return fs * 2 + paddingTopPx + paddingBottomPx;
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("reduces font size until text fits the height", () => {
+    // textHeight = fontSize * 2
+    // need <= 30 => fontSize <= 15
+    el.style.fontSize = "20px";
+
+    autoSizeText(el, /*height*/ 30, /*minFontSize*/ 5, /*maxFontSize*/ 50);
+
+    expect(el.style.fontSize).toBe("15px");
+  });
+
+  it("enlarges font size until it reaches the height (or passes it)", () => {
+    // start at 10 => textHeight=20, height=30 => should grow to 15 => textHeight=30
+    el.style.fontSize = "10px";
+
+    autoSizeText(el, /*height*/ 30, /*minFontSize*/ 5, /*maxFontSize*/ 50);
+
+    expect(el.style.fontSize).toBe("15px");
+  });
+
+  it("does not reduce below minFontSize (even if still too tall)", () => {
+    // height=5 means we'd like fontSize<=2.5, but min is 10
+    el.style.fontSize = "20px";
+
+    autoSizeText(el, /*height*/ 5, /*minFontSize*/ 10, /*maxFontSize*/ 50);
+
+    expect(el.style.fontSize).toBe("10px");
+  });
+
+  it("does not enlarge above maxFontSize", () => {
+    // height is huge so it tries to enlarge, but max is 12
+    el.style.fontSize = "10px";
+
+    autoSizeText(el, /*height*/ 200, /*minFontSize*/ 5, /*maxFontSize*/ 12);
+
+    expect(el.style.fontSize).toBe("12px");
+  });
+
+  it("does nothing when computed fontSize is non-numeric (NaN path)", () => {
+    el.style.fontSize = "medium";
+
+    autoSizeText(el, /*height*/ 30, /*minFontSize*/ 5, /*maxFontSize*/ 50);
+
+    // Current implementation can't adjust because fontSize becomes NaN.
+    // It should not throw, and fontSize stays as originally set.
+    expect(el.style.fontSize).toBe("medium");
+  });
+});
+
+function mockRect(el: HTMLElement, rect: Partial<DOMRect>): void {
+  jest.spyOn(el, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    toJSON: () => ({}),
+    ...rect,
+  } as DOMRect);
+}