@oneuptime/common 13.0.1 → 13.0.4

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

@@ -0,0 +1,241 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { Blue500 } from "../../../Types/BrandColors";
+import IconProp from "../../../Types/Icon/IconProp";
+import Feed from "../../../UI/Components/Feed/Feed";
+import { FeedItemProps } from "../../../UI/Components/Feed/FeedItem";
+
+interface MockFeedItemProps {
+  textInMarkdown: string;
+  isLastItem: boolean;
+}
+
+jest.mock("../../../UI/Components/Feed/FeedItem", () => {
+  return {
+    __esModule: true,
+    default: (props: MockFeedItemProps): React.ReactElement => {
+      return React.createElement(
+        "li",
+        {
+          "data-testid": "feed-item",
+          "data-is-last-item": props.isLastItem.toString(),
+        },
+        props.textInMarkdown,
+      );
+    },
+  };
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+function makeItem(label: string, itemDateTime: Date): FeedItemProps {
+  return {
+    key: label,
+    textInMarkdown: label,
+    itemDateTime,
+    icon: IconProp.Activity,
+    color: Blue500,
+  };
+}
+
+function getRenderedLabels(): Array<string> {
+  return screen.getAllByTestId("feed-item").map((item: HTMLElement) => {
+    return item.textContent || "";
+  });
+}
+
+describe("Feed", () => {
+  test("renders every supplied item in the supplied order without mutating the array", () => {
+    const items: Array<FeedItemProps> = [
+      makeItem("middle", new Date("2026-09-10T12:00:00.000Z")),
+      makeItem("oldest", new Date("2026-09-09T12:00:00.000Z")),
+      makeItem("newest", new Date("2026-09-11T12:00:00.000Z")),
+    ];
+    const originalItems: Array<FeedItemProps> = [...items];
+
+    render(<Feed items={items} noItemsMessage="No activity" />);
+
+    expect(getRenderedLabels()).toEqual(["middle", "oldest", "newest"]);
+    expect(items).toEqual(originalItems);
+    expect(items[0]).toBe(originalItems[0]);
+    expect(items[1]).toBe(originalItems[1]);
+    expect(items[2]).toBe(originalItems[2]);
+  });
+
+  test.each<[string, boolean | undefined]>([
+    ["omitted", undefined],
+    ["false", false],
+  ])(
+    "does not render More when hasMore is %s",
+    (_label: string, hasMore: boolean | undefined) => {
+      render(
+        <Feed
+          items={[makeItem("activity", new Date("2026-09-11T12:00:00.000Z"))]}
+          noItemsMessage="No activity"
+          hasMore={hasMore}
+        />,
+      );
+
+      expect(
+        screen.queryByRole("button", { name: "More" }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  test("renders an exact More button after the final feed item", () => {
+    render(
+      <Feed
+        items={[
+          makeItem("first", new Date("2026-09-11T12:00:00.000Z")),
+          makeItem("second", new Date("2026-09-10T12:00:00.000Z")),
+        ]}
+        noItemsMessage="No activity"
+        hasMore={true}
+        onMore={() => {}}
+      />,
+    );
+
+    const list: HTMLElement = screen.getByRole("list");
+    const button: HTMLElement = screen.getByRole("button", { name: "More" });
+    const finalItem: HTMLElement = screen.getAllByTestId("feed-item")[1]!;
+
+    expect(button).toHaveTextContent(/^More$/);
+    expect(
+      list.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    expect(
+      finalItem.compareDocumentPosition(button) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
+
+  test("calls onMore once for each click", () => {
+    const onMore: ReturnType<typeof jest.fn<() => void>> =
+      jest.fn<() => void>();
+
+    render(
+      <Feed
+        items={[makeItem("activity", new Date("2026-09-11T12:00:00.000Z"))]}
+        noItemsMessage="No activity"
+        hasMore={true}
+        onMore={onMore}
+      />,
+    );
+
+    const moreButton: HTMLElement = screen.getByRole("button", {
+      name: "More",
+    });
+    fireEvent.click(moreButton);
+    fireEvent.click(moreButton);
+
+    expect(onMore).toHaveBeenCalledTimes(2);
+  });
+
+  test("disables More while loading and keeps every existing item visible", () => {
+    const onMore: ReturnType<typeof jest.fn<() => void>> =
+      jest.fn<() => void>();
+    const items: Array<FeedItemProps> = [
+      makeItem("first", new Date("2026-09-11T12:00:00.000Z")),
+      makeItem("second", new Date("2026-09-10T12:00:00.000Z")),
+    ];
+
+    render(
+      <Feed
+        items={items}
+        noItemsMessage="No activity"
+        hasMore={true}
+        onMore={onMore}
+        isLoadingMore={true}
+      />,
+    );
+
+    const moreButton: HTMLElement = screen.getByRole("button", {
+      name: "More",
+    });
+    expect(moreButton).toBeDisabled();
+    expect(moreButton).toHaveAttribute("aria-disabled", "true");
+    expect(getRenderedLabels()).toEqual(["first", "second"]);
+
+    fireEvent.click(moreButton);
+
+    expect(onMore).not.toHaveBeenCalled();
+    expect(getRenderedLabels()).toEqual(["first", "second"]);
+  });
+
+  test("removes More when a rerender reports that no further items remain", () => {
+    const items: Array<FeedItemProps> = [
+      makeItem("first", new Date("2026-09-11T12:00:00.000Z")),
+      makeItem("second", new Date("2026-09-10T12:00:00.000Z")),
+    ];
+    const { rerender } = render(
+      <Feed
+        items={items}
+        noItemsMessage="No activity"
+        hasMore={true}
+        onMore={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "More" })).toBeVisible();
+
+    rerender(
+      <Feed
+        items={items}
+        noItemsMessage="No activity"
+        hasMore={false}
+        onMore={() => {}}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: "More" }),
+    ).not.toBeInTheDocument();
+    expect(getRenderedLabels()).toEqual(["first", "second"]);
+  });
+
+  test("retains the empty state when there are no items", () => {
+    render(<Feed items={[]} noItemsMessage="Nothing has happened yet" />);
+
+    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(screen.getByText("Nothing has happened yet")).toBeVisible();
+    expect(screen.queryAllByTestId("feed-item")).toHaveLength(0);
+    expect(
+      screen.queryByRole("button", { name: "More" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("marks only the final rendered item as the last connector item", () => {
+    const first: FeedItemProps = makeItem(
+      "first",
+      new Date("2026-09-11T12:00:00.000Z"),
+    );
+    const second: FeedItemProps = makeItem(
+      "second",
+      new Date("2026-09-10T12:00:00.000Z"),
+    );
+    const third: FeedItemProps = makeItem(
+      "third",
+      new Date("2026-09-09T12:00:00.000Z"),
+    );
+    const { rerender } = render(
+      <Feed items={[first, second]} noItemsMessage="No activity" />,
+    );
+
+    let renderedItems: Array<HTMLElement> = screen.getAllByTestId("feed-item");
+    expect(renderedItems[0]).toHaveAttribute("data-is-last-item", "false");
+    expect(renderedItems[1]).toHaveAttribute("data-is-last-item", "true");
+
+    rerender(
+      <Feed items={[first, second, third]} noItemsMessage="No activity" />,
+    );
+
+    renderedItems = screen.getAllByTestId("feed-item");
+    expect(renderedItems[0]).toHaveAttribute("data-is-last-item", "false");
+    expect(renderedItems[1]).toHaveAttribute("data-is-last-item", "false");
+    expect(renderedItems[2]).toHaveAttribute("data-is-last-item", "true");
+  });
+});

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

@@ -0,0 +1,368 @@
+import BasicForm from "../../../../UI/Components/Forms/BasicForm";
+import Fields from "../../../../UI/Components/Forms/Types/Fields";
+import FormFieldSchemaType from "../../../../UI/Components/Forms/Types/FormFieldSchemaType";
+import FormValues from "../../../../UI/Components/Forms/Types/FormValues";
+import { FormStep } from "../../../../UI/Components/Forms/Types/FormStep";
+import { JSONObject, JSONValue } from "../../../../Types/JSON";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+import "@testing-library/jest-dom";
+import {
+  act,
+  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, { createRef, ReactElement, RefObject } from "react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+
+function isBrowser(values: FormValues<JSONObject>): boolean {
+  return values["kind"] === "browser";
+}
+
+const STEPS: Array<FormStep<JSONObject>> = [
+  { title: "Details", id: "details" },
+  { title: "Browser Settings", id: "browser", showIf: isBrowser },
+  { title: "Confirmation", id: "confirmation" },
+];
+
+const FIELDS: Fields<JSONObject> = [
+  {
+    field: { name: true },
+    title: "Name",
+    fieldType: FormFieldSchemaType.Text,
+    stepId: "details",
+    required: true,
+  },
+  {
+    field: { kind: true },
+    title: "Kind",
+    fieldType: FormFieldSchemaType.Text,
+    stepId: "details",
+    defaultValue: "server",
+  },
+  {
+    field: { origin: true },
+    title: "Origin",
+    fieldType: FormFieldSchemaType.Text,
+    stepId: "browser",
+    showIf: isBrowser,
+    required: true,
+  },
+  {
+    field: { confirmation: true },
+    title: "Confirmation Text",
+    fieldType: FormFieldSchemaType.Text,
+    stepId: "confirmation",
+    required: true,
+  },
+];
+
+interface FormHandle {
+  setFieldValue: (name: string, value: JSONValue) => void;
+  submitForm: () => void;
+}
+
+interface WizardOptions {
+  hideSubmitButton?: boolean;
+  isLoading?: boolean;
+  summary?: boolean;
+  onFormStepChange?: (stepId: string) => void;
+}
+
+interface RenderWizardResult extends RenderResult {
+  user: UserEvent;
+  handleSubmit: MockFunction;
+  formRef: RefObject<FormHandle>;
+  view: (options?: WizardOptions) => ReactElement;
+}
+
+function renderWizard(options: WizardOptions = {}): RenderWizardResult {
+  const handleSubmit: MockFunction = getJestMockFunction();
+  const formRef: RefObject<FormHandle> = createRef<FormHandle>();
+  const view: (overrides?: WizardOptions) => ReactElement = (
+    overrides: WizardOptions = options,
+  ): ReactElement => {
+    return (
+      <BasicForm
+        id="step-navigation-wizard"
+        ref={formRef}
+        fields={FIELDS}
+        steps={STEPS}
+        onSubmit={handleSubmit}
+        onFormStepChange={overrides.onFormStepChange}
+        submitButtonText="Create"
+        hideSubmitButton={overrides.hideSubmitButton}
+        isLoading={overrides.isLoading}
+        summary={{ enabled: overrides.summary || false }}
+        disableAutofocus={true}
+      />
+    );
+  };
+
+  return {
+    ...render(view()),
+    handleSubmit,
+    formRef,
+    view,
+    user: userEvent.setup({ delay: null }),
+  };
+}
+
+async function enterName(): Promise<void> {
+  fireEvent.change(await screen.findByRole("textbox", { name: "Name" }), {
+    target: { value: "Production" },
+  });
+}
+
+async function goNext(user: UserEvent): Promise<void> {
+  await user.click(screen.getByRole("button", { name: "Next" }));
+}
+
+function progress(): HTMLElement {
+  return screen.getByRole("navigation", { name: "Progress" });
+}
+
+async function goToStep(user: UserEvent, title: string): Promise<void> {
+  await user.click(within(progress()).getByText(title));
+}
+
+async function expectInputValue(name: string, value: string): Promise<void> {
+  await waitFor(() => {
+    expect(screen.getByRole("textbox", { name })).toHaveValue(value);
+  });
+}
+
+describe("BasicForm step navigation", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("shows the mobile step title and visible count without a Back button on the first step", async () => {
+    renderWizard();
+    await screen.findByRole("textbox", { name: "Name" });
+
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("status")).toHaveTextContent("Step 1 of 2");
+    expect(screen.getByRole("status")).toHaveTextContent("Details");
+    expect(screen.getByRole("status")).toHaveClass("lg:hidden");
+  });
+
+  test("returns through a completed sidebar step and preserves edits without a Back button or submission", async () => {
+    const { user, handleSubmit }: RenderWizardResult = renderWizard();
+    await enterName();
+    await goNext(user);
+    await screen.findByRole("textbox", { name: "Confirmation Text" });
+
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    await goToStep(user, "Details");
+
+    await expectInputValue("Name", "Production");
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("does not skip to an unfinished sidebar step", async () => {
+    const { user, handleSubmit }: RenderWizardResult = renderWizard();
+    await screen.findByRole("textbox", { name: "Name" });
+
+    await goToStep(user, "Confirmation");
+
+    expect(screen.getByRole("textbox", { name: "Name" })).toBeVisible();
+    expect(
+      screen.queryByRole("textbox", { name: "Confirmation Text" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("status")).toHaveTextContent("Step 1 of 2");
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("skips a hidden conditional step in both directions and updates the progress count", async () => {
+    const { user }: RenderWizardResult = renderWizard();
+    await enterName();
+    await goNext(user);
+
+    expect(
+      await screen.findByRole("textbox", { name: "Confirmation Text" }),
+    ).toBeVisible();
+    expect(screen.getByRole("status")).toHaveTextContent("Step 2 of 2");
+    await goToStep(user, "Details");
+    await expectInputValue("Name", "Production");
+
+    fireEvent.change(screen.getByRole("textbox", { name: /^Kind/ }), {
+      target: { value: "browser" },
+    });
+    await goNext(user);
+    expect(
+      await screen.findByRole("textbox", { name: "Origin" }),
+    ).toBeVisible();
+    expect(screen.getByRole("status")).toHaveTextContent("Step 2 of 3");
+    fireEvent.change(screen.getByRole("textbox", { name: "Origin" }), {
+      target: { value: "https://example.com" },
+    });
+    await goNext(user);
+    await screen.findByRole("textbox", { name: "Confirmation Text" });
+    await goToStep(user, "Browser Settings");
+    await expectInputValue("Origin", "https://example.com");
+  });
+
+  test("lets users leave an invalid current step and still validates it when they return", async () => {
+    const { user, handleSubmit }: RenderWizardResult = renderWizard();
+    await enterName();
+    await goNext(user);
+    await user.click(screen.getByRole("button", { name: "Create" }));
+    expect(
+      await screen.findByText("Confirmation Text is required."),
+    ).toBeVisible();
+
+    await goToStep(user, "Details");
+    await expectInputValue("Name", "Production");
+    await goNext(user);
+    await user.click(screen.getByRole("button", { name: "Create" }));
+    expect(
+      await screen.findByText("Confirmation Text is required."),
+    ).toBeVisible();
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("uses live eligible steps for imperative Next and immediate sidebar navigation after changing a condition", async () => {
+    let recordNavigation: boolean = false;
+    let returnedFromConfirmation: boolean = false;
+    const visitedSteps: Array<string> = [];
+    const { formRef, user, handleSubmit }: RenderWizardResult = renderWizard({
+      hideSubmitButton: true,
+      onFormStepChange: (stepId: string): void => {
+        if (!recordNavigation) {
+          return;
+        }
+        if (visitedSteps[visitedSteps.length - 1] !== stepId) {
+          visitedSteps.push(stepId);
+        }
+        if (stepId === "confirmation" && !returnedFromConfirmation) {
+          returnedFromConfirmation = true;
+          // Navigate before the passive effect refreshes the stored step list.
+          within(progress()).getByText("Details").click();
+        }
+      },
+    });
+    await enterName();
+    fireEvent.change(screen.getByRole("textbox", { name: /^Kind/ }), {
+      target: { value: "browser" },
+    });
+    act(() => {
+      formRef.current?.submitForm();
+    });
+    await screen.findByRole("textbox", { name: "Origin" });
+    await goToStep(user, "Details");
+    await expectInputValue("Name", "Production");
+
+    recordNavigation = true;
+    act(() => {
+      // A modal footer can submit before React commits the filtered step list.
+      formRef.current?.setFieldValue("kind", "server");
+      formRef.current?.submitForm();
+    });
+
+    await waitFor(() => {
+      expect(visitedSteps).toEqual(["confirmation", "details"]);
+    });
+    await expectInputValue("Name", "Production");
+    expect(
+      screen.queryByRole("textbox", { name: "Origin" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("keeps completed sidebar steps available without a Back button when a modal owns submission", async () => {
+    const { formRef, user, handleSubmit }: RenderWizardResult = renderWizard({
+      hideSubmitButton: true,
+    });
+    await enterName();
+    act(() => {
+      formRef.current?.submitForm();
+    });
+    await screen.findByRole("textbox", { name: "Confirmation Text" });
+
+    expect(
+      screen.queryByRole("button", { name: "Create" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Next" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    await goToStep(user, "Details");
+    await expectInputValue("Name", "Production");
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("preserves progress and values through loading without adding a Back button", async () => {
+    const { user, rerender, view }: RenderWizardResult = renderWizard();
+    await enterName();
+    await goNext(user);
+    await screen.findByRole("textbox", { name: "Confirmation Text" });
+    rerender(view({ isLoading: true }));
+
+    expect(screen.getByRole("status")).toHaveTextContent("Step 2 of 2");
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    rerender(view({ isLoading: false }));
+    await goToStep(user, "Details");
+    await expectInputValue("Name", "Production");
+  });
+
+  test("returns from summary to the last visible step and preserves its value", async () => {
+    const { user, handleSubmit }: RenderWizardResult = renderWizard({
+      summary: true,
+    });
+    await enterName();
+    await goNext(user);
+    fireEvent.change(
+      await screen.findByRole("textbox", { name: "Confirmation Text" }),
+      {
+        target: { value: "Ready" },
+      },
+    );
+    await goNext(user);
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("Summary");
+    });
+    expect(screen.getByRole("status")).toHaveTextContent("Step 3 of 3");
+
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    await goToStep(user, "Confirmation");
+    await expectInputValue("Confirmation Text", "Ready");
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  test("does not add navigation to a form without steps", async () => {
+    render(
+      <BasicForm
+        id="single-page-form"
+        fields={[{ ...FIELDS[0], stepId: undefined }]}
+        onSubmit={getJestMockFunction()}
+        submitButtonText="Save"
+      />,
+    );
+    await screen.findByRole("textbox", { name: "Name" });
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Back" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeVisible();
+  });
+});