@oneuptime/common 13.0.6 → 13.0.8

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

@@ -3,7 +3,13 @@ import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
 import HTTPResponse from "../../../Types/API/HTTPResponse";
 import { JSONObject } from "../../../Types/JSON";
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import React from "react";
 import { beforeEach, describe, expect, it } from "@jest/globals";
 
@@ -30,6 +36,7 @@ import { beforeEach, describe, expect, it } from "@jest/globals";
 let isEnterpriseEdition: boolean = true;
 let billingEnabled: boolean = false;
 let isMasterAdmin: boolean = true;
+let isLoggedIn: boolean = true;
 
 /*
  * Object.defineProperty rather than getters in an object literal: this file is
@@ -65,6 +72,9 @@ jest.mock("../../../UI/Utils/User", () => {
       isMasterAdmin: (): boolean => {
         return isMasterAdmin;
       },
+      isLoggedIn: (): boolean => {
+        return isLoggedIn;
+      },
     },
   };
 });
@@ -159,12 +169,89 @@ const openDialog: OpenDialogFunction = async (): Promise<void> => {
   fireEvent.click(screen.getByRole("button", { name: /Enterprise Edition/i }));
 };
 
+/*
+ * The license GET also serves the login page, so on its own the server answers
+ * a caller with no session with the reduced anonymous payload and a 200. Inside
+ * a signed-in app that caller is this component with an expired session, and
+ * the reduced payload reads as "no license, no instances". Sending
+ * `signedIn=true` makes the server answer 401 instead, which the API client
+ * refreshes and replays. On the login page (nobody signed in) the flag must
+ * NOT be sent, or the page would get a 401 instead of the edition pill.
+ */
+describe("EditionLabel - telling the license route we expect to be signed in", () => {
+  type LicenseGetFunction = () => FetchCall;
+
+  const licenseGet: LicenseGetFunction = (): FetchCall => {
+    const call: FetchCall | undefined = fetchCalls.find(
+      (candidate: FetchCall): boolean => {
+        return (
+          candidate.method === "GET" &&
+          candidate.url.includes("/global-config/license")
+        );
+      },
+    );
+
+    expect(call).toBeDefined();
+
+    return call as FetchCall;
+  };
+
+  type RenderAndSettleFunction = () => Promise<void>;
+
+  /*
+   * Renders and waits for the license GET, then lets the response's state
+   * updates land inside act() so they do not spill past the end of the test.
+   */
+  const renderAndSettle: RenderAndSettleFunction = async (): Promise<void> => {
+    render(<EditionLabel />);
+
+    await waitFor(() => {
+      expect(fetchCalls.length).toBeGreaterThan(0);
+    });
+
+    await act(async () => {
+      await new Promise<void>((resolve: () => void) => {
+        setTimeout(resolve, 0);
+      });
+    });
+  };
+
+  beforeEach(() => {
+    fetchCalls.length = 0;
+    isEnterpriseEdition = true;
+    billingEnabled = false;
+    isMasterAdmin = true;
+    isLoggedIn = true;
+    respond = (): HTTPResponse<JSONObject> => {
+      return new HTTPResponse<JSONObject>(200, licensePayload(), {});
+    };
+  });
+
+  it("adds signedIn=true to the license fetch when a user is logged in", async () => {
+    isLoggedIn = true;
+
+    await renderAndSettle();
+
+    expect(licenseGet().url).toContain("signedIn=true");
+  });
+
+  it("does not add signedIn to the license fetch when nobody is logged in", async () => {
+    isLoggedIn = false;
+
+    await renderAndSettle();
+
+    expect(licenseGet().url).toContain("/global-config/license");
+    expect(licenseGet().url).not.toContain("signedIn");
+  });
+});
+
 describe("EditionLabel - refreshing the license", () => {
   beforeEach(() => {
     fetchCalls.length = 0;
     isEnterpriseEdition = true;
     billingEnabled = false;
     isMasterAdmin = true;
+    isLoggedIn = true;
     respond = (): HTTPResponse<JSONObject> => {
       return new HTTPResponse<JSONObject>(200, licensePayload(), {});
     };
@@ -311,6 +398,7 @@ describe("EditionLabel - what an exhausted seat limit looks like", () => {
     isEnterpriseEdition = true;
     billingEnabled = false;
     isMasterAdmin = true;
+    isLoggedIn = true;
     respond = (): HTTPResponse<JSONObject> => {
       return new HTTPResponse<JSONObject>(200, licensePayload(), {});
     };

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

@@ -0,0 +1,174 @@
+import EventAttachmentList, {
+  EventAttachment,
+} from "../../../UI/Components/AttachmentList/EventAttachmentList";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import type { SpyInstance } from "jest-mock";
+
+/*
+ * A private status page serves note attachments behind the reader's
+ * session. The cards are plain links, and a plain link gets none of the API
+ * class's refresh-and-replay, so a reader who had the page open past the
+ * 15-minute access token opened every attachment as a 401. Given a
+ * refreshSession, a click refreshes before the new tab loads; without one
+ * (public pages) the cards stay the plain links they were.
+ */
+
+const ATTACHMENT: EventAttachment = {
+  name: "postmortem.pdf",
+  downloadUrl:
+    "/status-page-api/incident-public-note/attachment/sp/incident/note/file",
+};
+
+interface FakeTab {
+  opener: unknown;
+  closed: boolean;
+  location: { href: string };
+}
+
+type WindowOpenMock = SpyInstance<typeof window.open>;
+
+// Lets every pending promise chain run to completion.
+async function flushPromises(): Promise<void> {
+  await new Promise<void>((resolve: () => void): void => {
+    setTimeout(resolve, 0);
+  });
+}
+
+/*
+ * Whether the component took the click over, read after React has handled
+ * it. jsdom does not implement navigation, so the link's own default is
+ * stopped here too, once that has been recorded.
+ */
+let lastClickWasPrevented: boolean | null = null;
+
+const recordAndStopClick: (event: MouseEvent) => void = (
+  event: MouseEvent,
+): void => {
+  lastClickWasPrevented = event.defaultPrevented;
+  event.preventDefault();
+};
+
+let windowOpen: WindowOpenMock;
+let tab: FakeTab;
+
+beforeEach(() => {
+  lastClickWasPrevented = null;
+  document.addEventListener("click", recordAndStopClick);
+
+  tab = { opener: window, closed: false, location: { href: "" } };
+  windowOpen = jest.spyOn(window, "open").mockImplementation((): Window => {
+    return tab as unknown as Window;
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  document.removeEventListener("click", recordAndStopClick);
+  jest.restoreAllMocks();
+});
+
+describe("EventAttachmentList", () => {
+  test("without refreshSession the card is a plain link the browser follows by itself", () => {
+    render(<EventAttachmentList attachments={[ATTACHMENT]} />);
+
+    const link: HTMLElement = screen.getByTitle(ATTACHMENT.name);
+
+    expect(link).toHaveAttribute("href", ATTACHMENT.downloadUrl);
+    expect(link).toHaveAttribute("target", "_blank");
+
+    fireEvent.click(link);
+
+    expect(lastClickWasPrevented).toBe(false);
+    expect(windowOpen).not.toHaveBeenCalled();
+  });
+
+  test("with refreshSession a click refreshes the session first, then opens the attachment", async () => {
+    let finishRefresh: (value: boolean) => void = (): void => {};
+    const refreshSession: ReturnType<typeof jest.fn<() => Promise<boolean>>> =
+      jest.fn<() => Promise<boolean>>((): Promise<boolean> => {
+        return new Promise<boolean>(
+          (resolve: (value: boolean) => void): void => {
+            finishRefresh = resolve;
+          },
+        );
+      });
+
+    render(
+      <EventAttachmentList
+        attachments={[ATTACHMENT]}
+        refreshSession={refreshSession}
+      />,
+    );
+
+    const link: HTMLElement = screen.getByTitle(ATTACHMENT.name);
+
+    // The href stays for middle-click and "copy link address".
+    expect(link).toHaveAttribute("href", ATTACHMENT.downloadUrl);
+
+    fireEvent.click(link);
+
+    expect(lastClickWasPrevented).toBe(true);
+    expect(refreshSession).toHaveBeenCalledTimes(1);
+    expect(windowOpen).toHaveBeenCalledWith("", "_blank");
+
+    await flushPromises();
+    expect(tab.location.href).toBe("");
+
+    finishRefresh(true);
+    await flushPromises();
+
+    expect(tab.location.href).toBe(ATTACHMENT.downloadUrl);
+  });
+
+  test("with refreshSession a modified click is still left to the browser", () => {
+    const refreshSession: ReturnType<typeof jest.fn<() => Promise<boolean>>> =
+      jest.fn<() => Promise<boolean>>(async (): Promise<boolean> => {
+        return true;
+      });
+
+    render(
+      <EventAttachmentList
+        attachments={[ATTACHMENT]}
+        refreshSession={refreshSession}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle(ATTACHMENT.name), { metaKey: true });
+
+    expect(lastClickWasPrevented).toBe(false);
+    expect(refreshSession).not.toHaveBeenCalled();
+    expect(windowOpen).not.toHaveBeenCalled();
+  });
+
+  test("the inline variant, used for timeline notes, takes the same refresh", () => {
+    const refreshSession: ReturnType<typeof jest.fn<() => Promise<boolean>>> =
+      jest.fn<() => Promise<boolean>>(async (): Promise<boolean> => {
+        return true;
+      });
+
+    render(
+      <EventAttachmentList
+        attachments={[ATTACHMENT]}
+        variant="inline"
+        showHeader={false}
+        showCount={false}
+        refreshSession={refreshSession}
+      />,
+    );
+
+    fireEvent.click(screen.getByTitle(ATTACHMENT.name));
+
+    expect(lastClickWasPrevented).toBe(true);
+    expect(refreshSession).toHaveBeenCalledTimes(1);
+  });
+});

package/Tests/UI/Components/Forms/BasicFormBurnRateTemplateDefaults.test.tsx

@@ -0,0 +1,395 @@
+import {
+  BURN_RATE_RULE_FORM_FIELDS,
+  BURN_RATE_RULE_FORM_STEPS,
+} from "../../../../../App/FeatureSet/Dashboard/src/Pages/Slo/Utils/BurnRateRuleForm";
+import ServiceLevelObjectiveBurnRateRule from "../../../../Models/DatabaseModels/ServiceLevelObjectiveBurnRateRule";
+import Email from "../../../../Types/Email";
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import Field from "../../../../UI/Components/Forms/Types/Field";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import { FormStep } from "../../../../UI/Components/Forms/Types/FormStep";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import {
+  DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+  DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+} from "../../../../Utils/Slo/SloBurnRateTemplate";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  RenderResult,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import React, { ReactElement } from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+type BurnRateValues = FormValues<ServiceLevelObjectiveBurnRateRule>;
+
+const TEMPLATE_FIELDS: Fields<ServiceLevelObjectiveBurnRateRule> =
+  BURN_RATE_RULE_FORM_FIELDS.filter(
+    (field: Field<ServiceLevelObjectiveBurnRateRule>): boolean => {
+      return [
+        "alertTitleTemplate",
+        "alertDescriptionTemplate",
+        "incidentTitleTemplate",
+        "incidentDescriptionTemplate",
+      ].includes(Object.keys(field.field || {})[0] || "");
+    },
+  );
+
+const OUTPUT_STEPS: Array<FormStep<ServiceLevelObjectiveBurnRateRule>> =
+  BURN_RATE_RULE_FORM_STEPS.filter(
+    (step: FormStep<ServiceLevelObjectiveBurnRateRule>): boolean => {
+      return step.id === "alert-details" || step.id === "incident-details";
+    },
+  );
+
+const DEFAULT_TEMPLATES: BurnRateValues = {
+  alertTitleTemplate: DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+  alertDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+  incidentTitleTemplate: DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+  incidentDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+};
+
+interface FormOptions {
+  initialValues?: BurnRateValues;
+  fields?: Fields<ServiceLevelObjectiveBurnRateRule>;
+}
+
+interface FormResult extends RenderResult {
+  onSubmit: MockFunction;
+  user: UserEvent;
+  view: (options?: FormOptions) => ReactElement;
+}
+
+function renderForm(options: FormOptions = {}): FormResult {
+  const onSubmit: MockFunction = getJestMockFunction();
+  const view: (overrides?: FormOptions) => ReactElement = (
+    overrides: FormOptions = options,
+  ): ReactElement => {
+    return (
+      <BasicForm
+        id="burn-rate-template-defaults"
+        fields={overrides.fields || TEMPLATE_FIELDS}
+        steps={OUTPUT_STEPS}
+        initialValues={{
+          shouldCreateAlert: true,
+          shouldCreateIncident: true,
+          ...overrides.initialValues,
+        }}
+        onSubmit={onSubmit}
+        submitButtonText="Save Rule"
+        disableAutofocus={true}
+      />
+    );
+  };
+
+  return {
+    ...render(view()),
+    onSubmit,
+    view,
+    user: userEvent.setup({ delay: null }),
+  };
+}
+
+async function next(
+  user: UserEvent,
+  expectedTitle: string = DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE,
+): Promise<void> {
+  await user.click(screen.getByRole("button", { name: "Next" }));
+  await waitFor(() => {
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(expectedTitle);
+  });
+}
+
+async function returnToAlert(user: UserEvent): Promise<void> {
+  await user.click(
+    within(screen.getByRole("navigation", { name: "Progress" })).getByText(
+      "Alert",
+    ),
+  );
+  await screen.findByRole("textbox", { name: /^Alert Title/ });
+}
+
+async function descriptionSource(user: UserEvent): Promise<HTMLElement> {
+  await user.click(
+    screen.getByRole("button", { name: "Markdown", exact: true }),
+  );
+  return screen.getByRole("textbox", { name: /Description/ });
+}
+
+describe("BasicForm burn-rate template defaults", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("prefills and submits all four actual template fields while opening their descriptions", async () => {
+    const { user, onSubmit }: FormResult = renderForm();
+
+    expect(
+      await screen.findByRole("textbox", { name: /^Alert Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(
+      screen.getByRole("textbox", { name: /^Alert Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+
+    await next(user);
+
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining(DEFAULT_TEMPLATES),
+      expect.any(Function),
+    );
+  });
+
+  test("preserves distinct existing title and Markdown templates on both steps", async () => {
+    const initialValues: BurnRateValues = {
+      alertTitleTemplate: "Alert: {{sloName}}",
+      alertDescriptionTemplate: "## Alert response\n\nInspect {{ruleName}}.",
+      incidentTitleTemplate: "Incident: {{ruleName}}",
+      incidentDescriptionTemplate:
+        "## Incident response\n\nEscalate {{sloName}}.",
+    };
+    const { user, onSubmit }: FormResult = renderForm({ initialValues });
+
+    expect(
+      await screen.findByRole("textbox", { name: /^Alert Title/ }),
+    ).toHaveValue(initialValues.alertTitleTemplate);
+    expect(await descriptionSource(user)).toHaveValue(
+      initialValues.alertDescriptionTemplate,
+    );
+    await next(user, initialValues.incidentTitleTemplate);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(initialValues.incidentTitleTemplate);
+    expect(await descriptionSource(user)).toHaveValue(
+      initialValues.incidentDescriptionTemplate,
+    );
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining(initialValues),
+      expect.any(Function),
+    );
+  });
+
+  test.each(["", null])(
+    "preserves explicitly empty %p templates when editing",
+    async (empty: string | null) => {
+      const initialValues: BurnRateValues = {
+        alertTitleTemplate: empty,
+        alertDescriptionTemplate: empty,
+        incidentTitleTemplate: empty,
+        incidentDescriptionTemplate: empty,
+      } as unknown as BurnRateValues;
+      const { user, onSubmit }: FormResult = renderForm({ initialValues });
+
+      expect(
+        await screen.findByRole("textbox", { name: /^Alert Title/ }),
+      ).toHaveValue("");
+      expect(
+        screen.getByRole("button", { name: "Description" }),
+      ).toHaveAttribute("aria-expanded", "false");
+      await user.click(screen.getByRole("button", { name: "Description" }));
+      expect(
+        screen.getByRole("textbox", { name: /^Alert Description/ }),
+      ).toBeEmptyDOMElement();
+      await next(user, "");
+      expect(
+        screen.getByRole("textbox", { name: /^Incident Title/ }),
+      ).toHaveValue("");
+      expect(
+        screen.getByRole("button", { name: "Description" }),
+      ).toHaveAttribute("aria-expanded", "false");
+      await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining(initialValues),
+        expect.any(Function),
+      );
+    },
+  );
+
+  test("keeps cleared defaults empty through collapse, later initial values, and step navigation", async () => {
+    const { user, onSubmit, rerender, view }: FormResult = renderForm();
+    await screen.findByRole("textbox", { name: /^Alert Title/ });
+    fireEvent.change(screen.getByRole("textbox", { name: /^Alert Title/ }), {
+      target: { value: "" },
+    });
+    const source: HTMLElement = await descriptionSource(user);
+    fireEvent.change(source, { target: { value: "" } });
+    await user.click(screen.getByRole("button", { name: "Description" }));
+
+    rerender(
+      view({ initialValues: DEFAULT_TEMPLATES, fields: [...TEMPLATE_FIELDS] }),
+    );
+
+    expect(source).not.toBeVisible();
+    expect(source).toHaveValue("");
+    await user.click(screen.getByRole("button", { name: "Description" }));
+    expect(screen.getByRole("textbox", { name: /^Alert Description/ })).toBe(
+      source,
+    );
+    expect(source).toHaveValue("");
+    await next(user);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue(DEFAULT_SLO_BURN_RATE_TITLE_TEMPLATE);
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await returnToAlert(user);
+
+    expect(screen.getByRole("textbox", { name: /^Alert Title/ })).toHaveValue(
+      "",
+    );
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    await user.click(screen.getByRole("button", { name: "Description" }));
+    expect(
+      screen.getByRole("textbox", { name: /^Alert Description/ }),
+    ).toBeEmptyDOMElement();
+    await next(user);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...DEFAULT_TEMPLATES,
+        alertTitleTemplate: "",
+        alertDescriptionTemplate: "",
+      }),
+      expect.any(Function),
+    );
+  }, 120000);
+
+  test("uses asynchronously supplied edit data before field initialization and defaults only missing values", async () => {
+    const { user, onSubmit, rerender, view }: FormResult = renderForm({
+      fields: [],
+    });
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    const initialValues: BurnRateValues = {
+      alertTitleTemplate: "Loaded alert title",
+      alertDescriptionTemplate: "",
+      incidentTitleTemplate: "Loaded incident title",
+    };
+
+    rerender(view({ initialValues, fields: [] }));
+    rerender(view({ initialValues, fields: TEMPLATE_FIELDS }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /^Alert Title/ })).toHaveValue(
+        "Loaded alert title",
+      );
+    });
+    expect(screen.getByRole("button", { name: "Description" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    await next(user, "Loaded incident title");
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Title/ }),
+    ).toHaveValue("Loaded incident title");
+    expect(
+      screen.getByRole("textbox", { name: /^Incident Description/ }),
+    ).toHaveTextContent(DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE);
+    await user.click(screen.getByRole("button", { name: "Save Rule" }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...initialValues,
+        incidentDescriptionTemplate: DEFAULT_SLO_BURN_RATE_DESCRIPTION_TEMPLATE,
+      }),
+      expect.any(Function),
+    );
+  });
+
+  test("preserves a stored numeric zero instead of displaying the field default", async () => {
+    const onSubmit: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
+    render(
+      <BasicForm
+        fields={[
+          {
+            field: { threshold: true },
+            title: "Threshold",
+            fieldType: FormFieldSchemaType.Number,
+            defaultValue: 9,
+          },
+        ]}
+        initialValues={{ threshold: 0 }}
+        onSubmit={onSubmit}
+        submitButtonText="Save"
+        disableAutofocus={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("spinbutton", { name: /^Threshold/ }),
+      ).toHaveValue(0);
+    });
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { threshold: 0 },
+      expect.any(Function),
+    );
+  });
+
+  test("keeps model Email wrappers visible through the same generic input branch", async () => {
+    const email: Email = new Email("saved.owner@example.com");
+    const onSubmit: MockFunction = getJestMockFunction();
+    const user: UserEvent = userEvent.setup({ delay: null });
+    render(
+      <BasicForm
+        fields={[
+          {
+            field: { email: true },
+            title: "Email",
+            fieldType: FormFieldSchemaType.Email,
+          },
+        ]}
+        initialValues={{ email }}
+        onSubmit={onSubmit}
+        submitButtonText="Save"
+        disableAutofocus={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /^Email/ })).toHaveValue(
+        email.toString(),
+      );
+    });
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { email: email.toString() },
+      expect.any(Function),
+    );
+  });
+});