@oneuptime/common 14.0.8 → 14.0.9

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

@@ -4,10 +4,47 @@ import Input, {
 } from "../../../UI/Components/Input/Input";
 import "@testing-library/jest-dom";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useLayoutEffect,
+  useRef,
+} from "react";
 import { describe, expect, afterEach, test } from "@jest/globals";
 import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
 
+type ReadValueAtMountFunction = (input: ReactElement) => Array<string>;
+
+/*
+ * What the <input> holds at the end of the commit that inserts it, before any
+ * passive effect has run. A parent's layout effect runs after its children's,
+ * in that same commit, and nothing the browser does (paint, a click, a
+ * keystroke, an automation tool's fill) can land before it. An empty string
+ * here is a field someone can see and type into while it is still blank.
+ */
+const readValueAtMount: ReadValueAtMountFunction = (
+  input: ReactElement,
+): Array<string> => {
+  const seen: Array<string> = [];
+
+  const Probe: FunctionComponent = (): ReactElement => {
+    const container: React.MutableRefObject<HTMLDivElement | null> =
+      useRef<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+      seen.push(
+        container.current?.querySelector("input")?.value ?? "<no input>",
+      );
+    }, []);
+
+    return <div ref={container}>{input}</div>;
+  };
+
+  render(<Probe />);
+
+  return seen;
+};
+
 describe("Input", () => {
   afterEach(() => {
     cleanup();
@@ -142,6 +179,48 @@ describe("Input", () => {
     expect(screen.getByDisplayValue(newValue)).toBeInTheDocument();
   });
 
+  /*
+   * The SLO burn rate form's Incident Title mounted blank and filled its
+   * default template in a task later. A fill that selected the blank field and
+   * then inserted its text on either side of that task put the text after the
+   * default: "SLO burn rate: {{sloName}} — {{ruleName}}Coordinate response
+   * for {{sloName}}". A person clicking into the field as the step appeared
+   * got the same.
+   */
+  test("shows initialValue in the commit that mounts it", () => {
+    expect(
+      readValueAtMount(
+        <Input initialValue="SLO burn rate: {{sloName}} — {{ruleName}}" />,
+      ),
+    ).toEqual(["SLO burn rate: {{sloName}} — {{ruleName}}"]);
+  });
+
+  test("shows value over initialValue in the commit that mounts it", () => {
+    expect(
+      readValueAtMount(<Input value="value" initialValue="initial value" />),
+    ).toEqual(["value"]);
+  });
+
+  test("shows a date in the commit that mounts it", () => {
+    expect(
+      readValueAtMount(
+        <Input type={InputType.DATE} initialValue="2023-04-22T00:00:00" />,
+      ),
+    ).toEqual(["2023-04-22"]);
+  });
+
+  test("mounts empty when it has no value", () => {
+    expect(readValueAtMount(<Input placeholder="placeholder" />)).toEqual([""]);
+  });
+
+  test("follows an initialValue that arrives after mounting", () => {
+    const { rerender } = render(<Input initialValue="" />);
+
+    rerender(<Input initialValue="loaded later" />);
+
+    expect(screen.getByDisplayValue("loaded later")).toBeInTheDocument();
+  });
+
   test("resets input to initialValue when value changes to empty string", () => {
     const value: string = "value";
     const initialValue: string = "initial value";