@oneuptime/common 11.7.2 → 11.7.4

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

@@ -0,0 +1,358 @@
+import InfoCard from "../../../UI/Components/InfoCard/InfoCard";
+/*
+ * The package entry, not the `/extend-expect` subpath the older tests use:
+ * the matchers are already registered by Tests/jest.setup.ts, and only this
+ * specifier resolves to the type augmentation that makes them visible to
+ * TypeScript.
+ */
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * InfoCard is the stat card used across the product. Most of them are inert
+ * containers, a handful navigate somewhere when clicked, and the network
+ * summary strips use them as toggles that filter the table below.
+ *
+ * The three have to stay distinguishable to a screen reader and to the
+ * keyboard, and the distinctions are all driven off which props were passed —
+ * so that is what these cover, end to end through a real render.
+ */
+
+/*
+ * The card's own root element. Taken off the render container rather than
+ * walked up from the title, because a card with no click handler has no role
+ * to query it by — which is exactly what several of these assert.
+ */
+function getCard(): HTMLElement {
+  return document.body.firstElementChild!.firstElementChild as HTMLElement;
+}
+
+describe("InfoCard", () => {
+  describe("a card with no click handler", () => {
+    test("renders its title and value", () => {
+      render(<InfoCard title="Devices Up" value="12" />);
+
+      expect(screen.getByText("Devices Up")).toBeInTheDocument();
+      expect(screen.getByText("12")).toBeInTheDocument();
+    });
+
+    /*
+     * The majority of InfoCards in the product are read-only. Announcing one
+     * as a button would put a tab stop on every tile of every dashboard.
+     */
+    test("is not a button, and is not focusable", () => {
+      render(<InfoCard title="Devices Up" value="12" />);
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+      expect(getCard()).not.toHaveAttribute("tabindex");
+      expect(getCard()).not.toHaveAttribute("aria-pressed");
+      expect(getCard()).not.toHaveAttribute("aria-label");
+    });
+
+    test("does not look clickable", () => {
+      render(<InfoCard title="Devices Up" value="12" />);
+
+      expect(getCard()).not.toHaveClass("cursor-pointer");
+    });
+  });
+
+  describe("a card that navigates when clicked", () => {
+    /*
+     * The pre-existing clickable cards — the Home overview stats, the
+     * Kubernetes and Proxmox summaries — all navigate. They pass onClick and
+     * no isSelected.
+     */
+    test("is a real button, reachable by keyboard", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      const card: HTMLElement = screen.getByRole("button");
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveAttribute("tabindex", "0");
+      expect(card).toHaveClass("cursor-pointer");
+    });
+
+    /*
+     * The regression this guards: `aria-pressed="false"` asserts the control
+     * is a toggle that is currently off. On a card that navigates away, that
+     * is a state activating it can never reach — the user is told to expect
+     * something the product never does.
+     */
+    test("is not announced as an unpressed toggle", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(screen.getByRole("button")).not.toHaveAttribute("aria-pressed");
+    });
+
+    test("keeps the plain border", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveClass("border-gray-200");
+    });
+  });
+
+  describe("a card used as a toggle", () => {
+    test("announces itself as pressed when selected", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          isSelected={true}
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveAttribute(
+        "aria-pressed",
+        "true",
+      );
+    });
+
+    /*
+     * Explicit `false` is a real state here — the tile exists, it is simply
+     * not the one the table is filtered by — so it must still announce as a
+     * toggle, unlike the navigation card above.
+     */
+    test("announces itself as unpressed when explicitly not selected", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          isSelected={false}
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveAttribute(
+        "aria-pressed",
+        "false",
+      );
+    });
+
+    /*
+     * Tailwind emits both border-colour utilities at the same specificity, so
+     * a selected card that merely *added* a border colour would leave the
+     * winner up to stylesheet order. The class is swapped.
+     */
+    test("swaps its border rather than stacking a second one", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          isSelected={true}
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      const card: HTMLElement = screen.getByRole("button");
+      expect(card).toHaveClass("border-indigo-500");
+      expect(card).not.toHaveClass("border-gray-200");
+    });
+
+    test("carries the caller's label for screen readers", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          isSelected={true}
+          ariaLabel="Devices Up: 12. Showing these in the list below."
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(
+        screen.getByRole("button", {
+          name: "Devices Up: 12. Showing these in the list below.",
+        }),
+      ).toBeInTheDocument();
+    });
+
+    // A label on an inert card would announce a control that is not there.
+    test("ignores the label when there is nothing to activate", () => {
+      render(
+        <InfoCard title="Devices Up" value="12" ariaLabel="Should not apply" />,
+      );
+
+      expect(getCard()).not.toHaveAttribute("aria-label");
+    });
+
+    // Selection styling is meaningless without a handler to toggle it.
+    test("a non-clickable card ignores isSelected", () => {
+      render(<InfoCard title="Devices Up" value="12" isSelected={true} />);
+
+      expect(getCard()).toHaveClass("border-gray-200");
+      expect(getCard()).not.toHaveAttribute("aria-pressed");
+    });
+  });
+
+  describe("activation", () => {
+    test("a click fires the handler", () => {
+      const onClick: () => void = jest.fn();
+      render(<InfoCard title="Devices Up" value="12" onClick={onClick} />);
+
+      fireEvent.click(screen.getByRole("button"));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    /*
+     * A div with an onClick is invisible to the keyboard. Enter and Space are
+     * what a real button responds to, and both have to work here or the tiles
+     * are mouse-only.
+     */
+    test("Enter fires the handler", () => {
+      const onClick: () => void = jest.fn();
+      render(<InfoCard title="Devices Up" value="12" onClick={onClick} />);
+
+      fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Space fires the handler", () => {
+      const onClick: () => void = jest.fn();
+      render(<InfoCard title="Devices Up" value="12" onClick={onClick} />);
+
+      fireEvent.keyDown(screen.getByRole("button"), { key: " " });
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    /*
+     * Space scrolls the page by default. Without preventDefault, activating a
+     * tile from the keyboard would also jump the view down a screen.
+     */
+    test("Space does not also scroll the page", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      // fireEvent returns false when the handler called preventDefault.
+      const notCancelled: boolean = fireEvent.keyDown(
+        screen.getByRole("button"),
+        { key: " ", cancelable: true },
+      );
+
+      expect(notCancelled).toBe(false);
+    });
+
+    test("Enter does not swallow the default either way it is used", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(
+        fireEvent.keyDown(screen.getByRole("button"), {
+          key: "Enter",
+          cancelable: true,
+        }),
+      ).toBe(false);
+    });
+
+    test.each([["Tab"], ["Escape"], ["a"], ["ArrowDown"], ["Shift"]])(
+      "%s does not activate it",
+      (key: string) => {
+        const onClick: () => void = jest.fn();
+        render(<InfoCard title="Devices Up" value="12" onClick={onClick} />);
+
+        const notCancelled: boolean = fireEvent.keyDown(
+          screen.getByRole("button"),
+          { key: key, cancelable: true },
+        );
+
+        expect(onClick).not.toHaveBeenCalled();
+        // And the key still does whatever it normally does.
+        expect(notCancelled).toBe(true);
+      },
+    );
+  });
+
+  describe("styling passthrough", () => {
+    test("the caller's className still lands on the card", () => {
+      render(<InfoCard title="Devices Up" value="12" className="col-span-2" />);
+
+      expect(getCard()).toHaveClass("col-span-2");
+    });
+
+    test("the caller's text class still wraps the value", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          textClassName="text-emerald-600"
+        />,
+      );
+
+      expect(screen.getByText("12")).toHaveClass("text-emerald-600");
+    });
+
+    /*
+     * A keyboard user has to be able to see which card they are on — the
+     * focus ring is the only cue, since the card has no other focus styling.
+     */
+    test("a clickable card shows a focus ring", () => {
+      render(
+        <InfoCard
+          title="Devices Up"
+          value="12"
+          onClick={() => {
+            // no-op
+          }}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveClass("focus-visible:ring-2");
+    });
+
+    test("an inert card does not", () => {
+      render(<InfoCard title="Devices Up" value="12" />);
+
+      expect(getCard()).not.toHaveClass("focus-visible:ring-2");
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+import LogTimeRangePicker, {
+  LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
+} from "../../../UI/Components/LogsViewer/components/LogTimeRangePicker";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+const BUTTON_TEST_ID: string = "log-time-range-picker-button";
+const DROPDOWN_TEST_ID: string = "log-time-range-picker-dropdown";
+
+const ORIGINAL_INNER_WIDTH: number = window.innerWidth;
+const originalGetBoundingClientRect: () => DOMRect =
+  Element.prototype.getBoundingClientRect;
+
+function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+}
+
+function stubTriggerRect(left: number, right: number): void {
+  Element.prototype.getBoundingClientRect = function (this: Element): DOMRect {
+    if (
+      this instanceof HTMLElement &&
+      this.getAttribute("data-testid") === BUTTON_TEST_ID
+    ) {
+      return {
+        left: left,
+        right: right,
+        top: 40,
+        bottom: 68,
+        width: right - left,
+        height: 28,
+        x: left,
+        y: 40,
+        toJSON: (): Record<string, unknown> => {
+          return {};
+        },
+      } as DOMRect;
+    }
+
+    return originalGetBoundingClientRect.call(this);
+  };
+}
+
+function openDropdown(value: RangeStartAndEndDateTime): HTMLElement {
+  render(<LogTimeRangePicker value={value} onChange={jest.fn()} />);
+  fireEvent.click(screen.getByTestId(BUTTON_TEST_ID));
+  return screen.getByTestId(DROPDOWN_TEST_ID);
+}
+
+function hasClass(element: HTMLElement, className: string): boolean {
+  return element.classList.contains(className);
+}
+
+describe("LogTimeRangePicker", () => {
+  beforeEach(() => {
+    setViewportWidth(1440);
+    stubTriggerRect(64, 180);
+  });
+
+  afterEach(() => {
+    cleanup();
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    setViewportWidth(ORIGINAL_INNER_WIDTH);
+  });
+
+  test("opens rightwards when the trigger sits at the left of the toolbar", () => {
+    const dropdown: HTMLElement = openDropdown({
+      range: TimeRange.PAST_ONE_HOUR,
+    });
+
+    expect(hasClass(dropdown, "left-0")).toBe(true);
+    expect(hasClass(dropdown, "right-0")).toBe(false);
+    expect(dropdown.getAttribute("data-align")).toBe("left");
+  });
+
+  test("flips to right alignment when the trigger is near the right edge", () => {
+    stubTriggerRect(1310, 1430);
+
+    const dropdown: HTMLElement = openDropdown({
+      range: TimeRange.PAST_ONE_HOUR,
+    });
+
+    expect(hasClass(dropdown, "right-0")).toBe(true);
+    expect(hasClass(dropdown, "left-0")).toBe(false);
+    expect(dropdown.getAttribute("data-align")).toBe("right");
+  });
+
+  test("stays left aligned on a narrow mobile viewport", () => {
+    setViewportWidth(375);
+    stubTriggerRect(12, 128);
+
+    expect(
+      hasClass(openDropdown({ range: TimeRange.PAST_ONE_HOUR }), "left-0"),
+    ).toBe(true);
+  });
+
+  test("caps the panel width so it cannot exceed the viewport", () => {
+    expect(
+      hasClass(
+        openDropdown({ range: TimeRange.PAST_ONE_HOUR }),
+        "max-w-[calc(100vw-1rem)]",
+      ),
+    ).toBe(true);
+  });
+
+  test("exports a width constant that matches the rendered w-72 panel", () => {
+    expect(LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX).toBe(288);
+    expect(
+      hasClass(openDropdown({ range: TimeRange.PAST_ONE_HOUR }), "w-72"),
+    ).toBe(true);
+  });
+
+  test("keeps the panel anchored below the trigger", () => {
+    const dropdown: HTMLElement = openDropdown({
+      range: TimeRange.PAST_ONE_HOUR,
+    });
+
+    expect(hasClass(dropdown, "absolute")).toBe(true);
+    expect(hasClass(dropdown, "top-full")).toBe(true);
+    expect(
+      dropdown.parentElement?.classList.contains("relative") ?? false,
+    ).toBe(true);
+  });
+});

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

@@ -2,9 +2,13 @@ import { ButtonStyleType } from "../../../UI/Components/Button/Button";
 import ButtonType from "../../../UI/Components/Button/ButtonTypes";
 import Modal, { ModalWidth } from "../../../UI/Components/Modal/Modal";
 import { describe, expect, it, test } from "@jest/globals";
-import "@testing-library/jest-dom/extend-expect";
+/*
+ * 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 { fireEvent, render } from "@testing-library/react";
-import IconProp from "../../../Types/Icon/IconProp";
 import React from "react";
 import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
 
@@ -338,16 +342,50 @@ describe("Modal", () => {
     expect(submitButton).toBeDisabled();
   });
 
-  it("displays the icon when icon is set", () => {
+  /*
+   * The header carries the title, the description and the close button, and
+   * nothing else. A decorative icon beside the title said nothing the title did
+   * not already say, so there is no longer anywhere for one to be rendered.
+   */
+  it("renders no decorative icon in the header", () => {
     const onSubmitMock: MockFunction = getJestMockFunction();
 
+    const { queryByTestId, getByTestId } = render(
+      <Modal
+        title="Test Modal"
+        description="Test modal description"
+        onSubmit={onSubmitMock}
+        onClose={getJestMockFunction()}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(queryByTestId("icon")).not.toBeInTheDocument();
+
+    // The rest of the header is untouched.
+    expect(getByTestId("modal-title")).toHaveTextContent("Test Modal");
+    expect(getByTestId("modal-description")).toHaveTextContent(
+      "Test modal description",
+    );
+    expect(getByTestId("close-button")).toBeInTheDocument();
+  });
+
+  it("keeps the title as the first thing inside the header", () => {
     const { getByTestId } = render(
-      <Modal title="Test Modal" onSubmit={onSubmitMock} icon={IconProp.SMS}>
+      <Modal title="Test Modal" onSubmit={getJestMockFunction()}>
         <div>Modal content</div>
       </Modal>,
     );
 
-    expect(getByTestId("icon")).toBeInTheDocument();
+    const title: HTMLElement = getByTestId("modal-title");
+    const header: HTMLElement = title.parentElement!.parentElement!;
+
+    /*
+     * With the icon gone the title block is the header's first child. Anything
+     * else in that slot would push the title out of line with the body.
+     */
+    expect(header.firstElementChild).toContainElement(title);
   });
 
   it("displays the submit button with the default style when submitButtonStyleType is not set", () => {