@oneuptime/common 12.0.31 → 12.0.33

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

@@ -0,0 +1,310 @@
+// Components
+import SideMenuSection from "../../../UI/Components/SideMenu/SideMenuSection";
+import { describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React, { ReactElement } from "react";
+
+/*
+ * The collapsible group every product side menu is built out of.
+ *
+ * Almost nothing here is about how the section looks. It is about the shape of
+ * the DOM it produces, because Common/Tests/App/Dashboard/SideMenuHarness.tsx
+ * walks exactly this shape -- h6 title, `div.mb-2` root, first <button> as the
+ * toggle, the toggle's immediate next sibling as the body -- and five product
+ * menu suites (alerts, incidents, scheduled maintenance and friends) read their
+ * menus through it. Break one of those four lookups and the harness does not
+ * throw: `linksIn()` quietly returns an empty list, so those five suites start
+ * asserting things about a menu they can no longer see, and the failure surfaces
+ * as five unrelated red suites with no hint that a section restyle caused it.
+ *
+ * Pinning the contract here means a restyle fails in one obvious place instead.
+ */
+
+const SECTION_TITLE: string = "Monitors";
+
+type MenuRowsFunction = () => Array<ReactElement>;
+
+/*
+ * Plain anchors rather than SideMenuItem: what is under test is the section's
+ * own wrapper, and a real menu row would drag Navigation into a suite that has
+ * no opinion about routing.
+ */
+const menuRows: MenuRowsFunction = (): Array<ReactElement> => {
+  return [
+    <a key="uptime" href="/uptime">
+      Uptime
+    </a>,
+    <a key="logs" href="/logs">
+      Logs
+    </a>,
+  ];
+};
+
+type SectionHeadingFunction = () => HTMLElement;
+
+const sectionHeading: SectionHeadingFunction = (): HTMLElement => {
+  const heading: HTMLHeadingElement | null = document.querySelector("h6");
+
+  if (!heading) {
+    throw new Error("The section rendered no <h6> title.");
+  }
+
+  return heading;
+};
+
+type SectionRootFunction = () => HTMLElement;
+
+const sectionRoot: SectionRootFunction = (): HTMLElement => {
+  const root: HTMLElement | null = sectionHeading().closest("div.mb-2");
+
+  if (!root) {
+    throw new Error('The section title is not inside a "div.mb-2" root.');
+  }
+
+  return root;
+};
+
+type SectionToggleFunction = () => HTMLButtonElement;
+
+const sectionToggle: SectionToggleFunction = (): HTMLButtonElement => {
+  const toggle: HTMLButtonElement | null =
+    sectionRoot().querySelector("button");
+
+  if (!toggle) {
+    throw new Error("The section has no collapse toggle.");
+  }
+
+  return toggle;
+};
+
+type SectionBodyFunction = () => HTMLElement;
+
+const sectionBody: SectionBodyFunction = (): HTMLElement => {
+  const body: Element | null = sectionToggle().nextElementSibling;
+
+  if (!body) {
+    throw new Error("The section toggle has no sibling body element.");
+  }
+
+  return body as HTMLElement;
+};
+
+describe("SideMenuSection", () => {
+  describe("the DOM contract SideMenuHarness reads", () => {
+    /*
+     * `sectionTitlesInOrder()` in the harness is `querySelectorAll("h6")`. Move
+     * the title to an <h5> or a <div> and every product menu suite reports zero
+     * sections rather than a wrong one.
+     */
+    test("the title renders in an <h6>", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      expect(document.querySelectorAll("h6")).toHaveLength(1);
+      expect(sectionHeading().textContent?.trim()).toBe(SECTION_TITLE);
+    });
+
+    /*
+     * The harness climbs from the heading to the section with
+     * `closest("div.mb-2")`. It has to land on the section's own outermost
+     * element -- if `mb-2` moved to some inner wrapper, `linksIn()` would search
+     * a subtree that no longer holds the rows.
+     */
+    test("the section root is the element carrying mb-2", () => {
+      const { container } = render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      expect(sectionRoot()).toHaveClass("mb-2");
+      expect(container.firstElementChild).toBe(sectionRoot());
+    });
+
+    /*
+     * `sectionToggle()` takes the FIRST button in the section, so the header has
+     * to be the only one. A second button in the header (a "collapse all", an
+     * overflow menu) would silently hand the harness the wrong element.
+     */
+    test("the only button in the section is the collapse toggle, and it wraps the title", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      expect(sectionRoot().querySelectorAll("button")).toHaveLength(1);
+      expect(sectionToggle()).toContainElement(sectionHeading());
+    });
+
+    /*
+     * `isExpanded()` reads aria-expanded off that button -- which is also the
+     * only thing telling a screen reader whether the group is open.
+     */
+    test("the toggle carries aria-expanded", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "true");
+    });
+
+    /*
+     * `sectionBody()` is `toggle.nextElementSibling` -- IMMEDIATE, not a
+     * descendant search. Wrapping the animated body in one more div would make
+     * the harness read the wrapper's classes and conclude every section is
+     * expanded.
+     */
+    test("the collapsible body is the toggle's immediate next sibling and holds the rows", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      const body: HTMLElement = sectionBody();
+
+      expect(body).toContainElement(screen.getByText("Uptime"));
+      expect(body).toContainElement(screen.getByText("Logs"));
+      expect(body).toHaveClass("overflow-hidden");
+    });
+  });
+
+  describe("collapse state", () => {
+    /*
+     * The class pair the harness (and the user's eye) reads collapse state
+     * from. There is no `hidden` attribute and no unmount to check instead, so
+     * if these two classes stop appearing together nothing else reports it.
+     */
+    test("defaultCollapsed renders the section closed", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE} defaultCollapsed={true}>
+          {menuRows()}
+        </SideMenuSection>,
+      );
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "false");
+      expect(sectionBody()).toHaveClass("max-h-0");
+      expect(sectionBody()).toHaveClass("opacity-0");
+    });
+
+    test("a section without defaultCollapsed renders open", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "true");
+      expect(sectionBody()).toHaveClass("opacity-100");
+      expect(sectionBody()).not.toHaveClass("max-h-0");
+    });
+
+    /*
+     * Both directions, because a header that only ever closes is the worse
+     * failure: the user loses the rows and has no way to get them back without
+     * reloading the page.
+     */
+    test("clicking the toggle closes the section and clicking again reopens it", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      fireEvent.click(sectionToggle());
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "false");
+      expect(sectionBody()).toHaveClass("max-h-0");
+      expect(sectionBody()).toHaveClass("opacity-0");
+
+      fireEvent.click(sectionToggle());
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "true");
+      expect(sectionBody()).toHaveClass("opacity-100");
+      expect(sectionBody()).not.toHaveClass("max-h-0");
+    });
+  });
+
+  describe("collapsible={false}", () => {
+    /*
+     * A section that cannot collapse must not look like it can, to ANY user.
+     * The chevron and the pointer cursor cover the sighted half of that; the
+     * other half is that there must be no control at all. A <button
+     * aria-expanded="true"> whose handler returns immediately is invisible to
+     * a sighted user and, to everyone else, a tab stop announcing an expand
+     * control that does nothing when activated.
+     */
+    test("renders no interactive control at all", () => {
+      const { container } = render(
+        <SideMenuSection title={SECTION_TITLE} collapsible={false}>
+          {menuRows()}
+        </SideMenuSection>,
+      );
+
+      expect(container.querySelector("button")).toBeNull();
+      expect(container.querySelector("[aria-expanded]")).toBeNull();
+    });
+
+    test("renders no chevron and no pointer cursor", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE} collapsible={false}>
+          {menuRows()}
+        </SideMenuSection>,
+      );
+
+      const header: HTMLElement =
+        sectionHeading().parentElement!.parentElement!;
+
+      expect(header.querySelector("svg")).toBeNull();
+      expect(header).toHaveClass("cursor-default");
+      expect(header).not.toHaveClass("cursor-pointer");
+    });
+
+    test("its rows render and stay rendered", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE} collapsible={false}>
+          {menuRows()}
+        </SideMenuSection>,
+      );
+
+      expect(screen.getByText("Uptime")).toBeInTheDocument();
+      expect(sectionHeading().textContent?.trim()).toBe(SECTION_TITLE);
+    });
+  });
+
+  describe("children stay mounted while collapsed", () => {
+    /*
+     * The reason the body animates a max-height instead of rendering `null`.
+     *
+     * Several menus badge their rows from a fetch fired on mount
+     * (CountModelSideMenuItem does exactly this). If a collapsed section
+     * unmounted its children, every one of those requests would be re-issued
+     * each time the user opened the section again -- a menu of ten counted rows
+     * turns one idle click into ten API calls, and the counts flash back to
+     * empty while they reload.
+     */
+    test("a section collapsed from the start still has its rows in the document", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE} defaultCollapsed={true}>
+          {menuRows()}
+        </SideMenuSection>,
+      );
+
+      expect(screen.getByText("Uptime")).toBeInTheDocument();
+      expect(screen.getByText("Logs")).toBeInTheDocument();
+      expect(sectionRoot().querySelectorAll("a")).toHaveLength(2);
+    });
+
+    /*
+     * Same DOM node before and after, not merely an element with the same text:
+     * a re-created node would mean React unmounted and remounted the row, which
+     * is exactly the fetch storm above.
+     */
+    test("collapsing an open section keeps the very same row elements", () => {
+      render(
+        <SideMenuSection title={SECTION_TITLE}>{menuRows()}</SideMenuSection>,
+      );
+
+      const uptimeRowBeforeCollapse: HTMLElement = screen.getByText("Uptime");
+
+      fireEvent.click(sectionToggle());
+
+      expect(sectionToggle()).toHaveAttribute("aria-expanded", "false");
+      expect(screen.getByText("Uptime")).toBe(uptimeRowBeforeCollapse);
+      expect(screen.getByText("Logs")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,335 @@
+import Modal from "../../../UI/Components/Modal/Modal";
+import SideOver, {
+  ComponentProps,
+} from "../../../UI/Components/SideOver/SideOver";
+/*
+ * The main entry, not "/extend-expect": the latter no longer ships type
+ * declarations, so every jest-dom matcher in this file fails to typecheck and
+ * the whole suite is skipped before a single assertion runs.
+ */
+import "@testing-library/jest-dom";
+import { resetPageScrollLockForTesting } from "../../../UI/Utils/PageScrollLock";
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  screen,
+  within,
+} from "@testing-library/react";
+import React, { ReactElement } from "react";
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
+
+/*
+ * The submit/close STATE of the panel — the two props a panel needs while it
+ * is running something it started. Everything else about SideOver lives in
+ * SideOver.test.tsx; this file exists because these two props are what stop a
+ * long-running panel from lying to the user about what it is doing.
+ *
+ * The behaviour being pinned came out of the recommendations batch-create
+ * panel, which spends the better part of a minute creating monitors one at a
+ * time. Before the props existed, every such caller hand-rolled the same two
+ * things badly: a submit button relabelled "Creating..." that stayed clickable
+ * and fired the whole batch a second time, and an `onClose` that quietly
+ * returned early — leaving a Close button that looks live, takes the click and
+ * does nothing, which reads as a frozen app rather than as a refusal.
+ */
+describe("SideOver submit and close state", () => {
+  const childElement: ReactElement = <div key={0}>child element</div>;
+
+  type MakePropsFunction = (data: {
+    onClose: MockFunction;
+    onSubmit: MockFunction;
+  }) => ComponentProps;
+
+  const makeProps: MakePropsFunction = (data: {
+    onClose: MockFunction;
+    onSubmit: MockFunction;
+  }): ComponentProps => {
+    return {
+      title: "Create monitors",
+      description: "From the recommendations you selected",
+      onClose: data.onClose,
+      onSubmit: data.onSubmit,
+      children: childElement,
+    };
+  };
+
+  /*
+   * The submit button is the only one with this title, and its own text node
+   * sits directly inside the <button> — the spinner is a sibling svg, so the
+   * accessible text stays "Save" in both states and this query keeps working
+   * while loading.
+   */
+  type GetSubmitButtonFunction = () => HTMLElement;
+
+  const getSubmitButton: GetSubmitButtonFunction = (): HTMLElement => {
+    return screen.getByText("Save");
+  };
+
+  /*
+   * The FOOTER Close, scoped deliberately: the header's × is also a close
+   * control, and the whole point of `closeButtonDisabled` is that the two do
+   * not behave the same.
+   */
+  type GetFooterCloseButtonFunction = () => HTMLElement;
+
+  const getFooterCloseButton: GetFooterCloseButtonFunction =
+    (): HTMLElement => {
+      return within(screen.getByTestId("side-over-footer")).getByText("Close");
+    };
+
+  type GetHeaderCloseButtonFunction = () => HTMLElement;
+
+  const getHeaderCloseButton: GetHeaderCloseButtonFunction =
+    (): HTMLElement => {
+      return screen.getByTestId("close-button");
+    };
+
+  type HasSpinnerFunction = (button: HTMLElement) => boolean;
+
+  const hasSpinner: HasSpinnerFunction = (button: HTMLElement): boolean => {
+    return button.querySelector(".animate-spin") !== null;
+  };
+
+  /*
+   * SideOver locks the page scrollbar while it is open, through a counter
+   * shared with Modal. Resetting it around every test keeps one test's
+   * unmount from being the thing that unlocks the page for the next.
+   */
+  beforeEach(() => {
+    resetPageScrollLockForTesting();
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  afterEach(() => {
+    resetPageScrollLockForTesting();
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  describe("submitButtonIsLoading", () => {
+    /*
+     * A spinner alone is decoration. The disable is the part that matters: a
+     * second click on a batch-create submit runs the whole batch again, and
+     * `createOrUpdate` with FormType.Create does not de-duplicate, so the user
+     * ends up with two of every monitor.
+     */
+    test("spins the submit button and disables it, so a long job cannot be started twice", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          submitButtonIsLoading={true}
+        />,
+      );
+
+      const submitButton: HTMLElement = getSubmitButton();
+
+      expect(hasSpinner(submitButton)).toBe(true);
+      expect(submitButton).toBeDisabled();
+
+      fireEvent.click(submitButton);
+
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    /*
+     * The same affordance Modal has always forwarded to its footer. Asserted
+     * side by side rather than described in a comment, because "SideOver
+     * should behave like Modal here" is the entire reason the prop was added
+     * instead of each caller relabelling its own button.
+     */
+    test("behaves the same way Modal's footer does for a loading submit", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          submitButtonIsLoading={true}
+        />,
+      );
+
+      render(
+        <Modal
+          title="Create monitors"
+          onClose={onClose}
+          onSubmit={onSubmit}
+          submitButtonText="Save"
+          isLoading={true}
+        >
+          <div>modal child</div>
+        </Modal>,
+      );
+
+      const modalSubmitButton: HTMLElement = within(
+        screen.getByTestId("modal-footer"),
+      ).getByText("Save");
+      const sideOverSubmitButton: HTMLElement = within(
+        screen.getByTestId("side-over-footer"),
+      ).getByText("Save");
+
+      expect(hasSpinner(modalSubmitButton)).toBe(true);
+      expect(modalSubmitButton).toBeDisabled();
+
+      expect(hasSpinner(sideOverSubmitButton)).toBe(
+        hasSpinner(modalSubmitButton),
+      );
+      expect(sideOverSubmitButton).toBeDisabled();
+    });
+
+    test("leaves the submit button alone when the panel is not loading", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          submitButtonIsLoading={false}
+        />,
+      );
+
+      const submitButton: HTMLElement = getSubmitButton();
+
+      expect(hasSpinner(submitButton)).toBe(false);
+      expect(submitButton).not.toBeDisabled();
+
+      fireEvent.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalled();
+    });
+  });
+
+  describe("closeButtonDisabled", () => {
+    /*
+     * Half of a batch that has already written real records to the database
+     * cannot be abandoned, so the footer Close is genuinely unavailable while
+     * it runs. Disabling it is what makes that legible: the alternative every
+     * caller reached for was an `onClose` that returned early, which leaves a
+     * button that looks live, swallows the click and does nothing.
+     */
+    test("disables the footer Close button and does not call onClose when it is pressed", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          closeButtonDisabled={true}
+        />,
+      );
+
+      const closeButton: HTMLElement = getFooterCloseButton();
+
+      expect(closeButton).toBeDisabled();
+
+      fireEvent.click(closeButton);
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
+
+    /*
+     * A panel must never trap the user. Whatever the panel is in the middle
+     * of, the × is the one way out that always works — a run that cannot be
+     * cancelled is still a run the user is allowed to stop watching.
+     */
+    test("leaves the header × working, so the panel can never trap the user", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          closeButtonDisabled={true}
+        />,
+      );
+
+      const headerCloseButton: HTMLElement = getHeaderCloseButton();
+
+      expect(headerCloseButton).not.toBeDisabled();
+
+      fireEvent.click(headerCloseButton);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    test("keeps the header × working while the submit button is also loading, which is the real state of a running panel", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          submitButtonIsLoading={true}
+          closeButtonDisabled={true}
+        />,
+      );
+
+      expect(getSubmitButton()).toBeDisabled();
+      expect(getFooterCloseButton()).toBeDisabled();
+
+      fireEvent.click(getHeaderCloseButton());
+
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    test("leaves the footer Close button alone when the panel is not running anything", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      render(
+        <SideOver
+          {...makeProps({ onClose: onClose, onSubmit: onSubmit })}
+          closeButtonDisabled={false}
+        />,
+      );
+
+      const closeButton: HTMLElement = getFooterCloseButton();
+
+      expect(closeButton).not.toBeDisabled();
+
+      fireEvent.click(closeButton);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("neither prop passed", () => {
+    /*
+     * Every existing caller passes neither, so both props defaulting to "no
+     * change at all" is what keeps this an additive change rather than a
+     * silent disabling of buttons across the app.
+     */
+    test("leaves an ordinary panel exactly as it was", () => {
+      const onClose: MockFunction = getJestMockFunction();
+      const onSubmit: MockFunction = getJestMockFunction();
+
+      const rendered: RenderResult = render(
+        <SideOver {...makeProps({ onClose: onClose, onSubmit: onSubmit })} />,
+      );
+
+      const submitButton: HTMLElement = getSubmitButton();
+
+      expect(submitButton).not.toBeDisabled();
+      expect(hasSpinner(submitButton)).toBe(false);
+
+      fireEvent.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalled();
+
+      const closeButton: HTMLElement = getFooterCloseButton();
+
+      expect(closeButton).not.toBeDisabled();
+
+      fireEvent.click(closeButton);
+
+      expect(onClose).toHaveBeenCalled();
+
+      rendered.unmount();
+    });
+  });
+});