@oneuptime/common 13.0.8 → 14.0.1

package/Tests/App/Dashboard/SloOverviewKpiStrip.test.tsx

@@ -57,27 +57,30 @@ const getTile: GetTileFunction = (id: string): HTMLElement => {
 };
 
 describe("SloBudgetBar", () => {
-  test("before the first evaluation it draws only an empty track", () => {
-    render(
-      <SloBudgetBar
-        errorBudgetRemainingPercentage={null}
-        atRiskThresholdPercentage={20}
-      />,
-    );
-
-    const bar: HTMLElement = screen.getByRole("progressbar", {
-      name: "Error budget remaining",
-    });
-
-    expect(bar).not.toHaveAttribute("aria-valuenow");
-    expect(bar).toHaveAttribute(
-      "aria-valuetext",
-      "Error budget not evaluated yet",
-    );
-    expect(bar).toHaveClass("bg-gray-100");
-    expect(screen.queryByTestId("slo-budget-bar-fill")).toBeNull();
-    expect(screen.queryByTestId("slo-budget-bar-marker")).toBeNull();
-  });
+  test.each([undefined, null, NaN, Infinity, -Infinity])(
+    "an unknown budget (%s) draws only an empty track",
+    (remainingPercentage: number | undefined | null) => {
+      render(
+        <SloBudgetBar
+          errorBudgetRemainingPercentage={remainingPercentage}
+          atRiskThresholdPercentage={20}
+        />,
+      );
+
+      const bar: HTMLElement = screen.getByRole("progressbar", {
+        name: "Error budget remaining",
+      });
+
+      expect(bar).not.toHaveAttribute("aria-valuenow");
+      expect(bar).toHaveAttribute(
+        "aria-valuetext",
+        "Error budget not evaluated yet",
+      );
+      expect(bar).toHaveClass("bg-gray-100");
+      expect(screen.queryByTestId("slo-budget-bar-fill")).toBeNull();
+      expect(screen.queryByTestId("slo-budget-bar-marker")).toBeNull();
+    },
+  );
 
   test("fills to the remaining budget and ticks the SLO's own at-risk threshold", () => {
     render(
@@ -117,27 +120,56 @@ describe("SloBudgetBar", () => {
     );
   });
 
-  test("an overspent budget draws no fill on a red track, and says it is overspent", () => {
-    render(
-      <SloBudgetBar
-        errorBudgetRemainingPercentage={-340}
-        atRiskThresholdPercentage={20}
-      />,
-    );
-
-    const bar: HTMLElement = screen.getByRole("progressbar");
-
-    expect(screen.queryByTestId("slo-budget-bar-fill")).toBeNull();
-    expect(bar).toHaveClass("bg-red-100");
-    expect(bar).toHaveAttribute("aria-valuenow", "0");
-    expect(bar.getAttribute("aria-valuetext")).toContain(
-      "Error budget overspent (-340%)",
-    );
-    // The threshold tick still shows where "at risk" would have been.
-    expect(screen.getByTestId("slo-budget-bar-marker")).toHaveStyle({
-      left: "20%",
-    });
-  });
+  test.each([-340, -99882.8, -0.00001])(
+    "an exceeded budget (%s) draws no fill and describes the breach without a negative percentage",
+    (remainingPercentage: number) => {
+      render(
+        <SloBudgetBar
+          errorBudgetRemainingPercentage={remainingPercentage}
+          atRiskThresholdPercentage={20}
+        />,
+      );
+
+      const bar: HTMLElement = screen.getByRole("progressbar");
+
+      expect(screen.queryByTestId("slo-budget-bar-fill")).toBeNull();
+      expect(bar).toHaveClass("bg-red-100");
+      expect(bar).toHaveAttribute("aria-valuenow", "0");
+      expect(bar).toHaveAttribute(
+        "aria-valuetext",
+        "Error budget exceeded; no budget remaining; at risk at 20% or less",
+      );
+      // The threshold tick still shows where "at risk" would have been.
+      expect(screen.getByTestId("slo-budget-bar-marker")).toHaveStyle({
+        left: "20%",
+      });
+    },
+  );
+
+  test.each([0, -0])(
+    "an exactly exhausted budget (%s) is distinct from an exceeded budget",
+    (remainingPercentage: number) => {
+      render(
+        <SloBudgetBar
+          errorBudgetRemainingPercentage={remainingPercentage}
+          atRiskThresholdPercentage={20}
+        />,
+      );
+
+      const bar: HTMLElement = screen.getByRole("progressbar");
+
+      expect(bar).toHaveClass("bg-red-100");
+      expect(bar).toHaveAttribute("aria-valuenow", "0");
+      expect(bar).toHaveAttribute(
+        "aria-valuetext",
+        "No error budget remaining; at risk at 20% or less",
+      );
+      expect(screen.queryByTestId("slo-budget-bar-fill")).toBeNull();
+      expect(screen.getByTestId("slo-budget-bar-marker")).toHaveStyle({
+        left: "20%",
+      });
+    },
+  );
 
   test("clamps the fill and the marker onto the track", () => {
     render(
@@ -153,6 +185,10 @@ describe("SloBudgetBar", () => {
     expect(screen.getByTestId("slo-budget-bar-marker")).toHaveStyle({
       left: "100%",
     });
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "100% of the error budget remaining; at risk at 150% or less",
+    );
   });
 });
 
@@ -362,9 +398,11 @@ describe("SloKpiStrip", () => {
     );
 
     const budget: HTMLElement = getTile("slo-kpi-budget");
-    expect(within(budget).getByText("-120%")).toHaveClass("text-red-700");
+    expect(within(budget).getByText("Budget exceeded")).toHaveClass(
+      "text-red-700",
+    );
     expect(
-      within(budget).getByText("−12m 30s over budget of 43m 12s"),
+      within(budget).getByText("12m 30s over budget · 43m 12s allowed"),
     ).toBeInTheDocument();
     expect(within(budget).queryByTestId("slo-budget-bar-fill")).toBeNull();
     expect(within(budget).getByRole("progressbar")).toHaveClass("bg-red-100");
@@ -374,6 +412,267 @@ describe("SloKpiStrip", () => {
     expect(within(runway).getByText("12m 30s over budget")).toBeInTheDocument();
   });
 
+  test("the reported huge negative percentage becomes a clear breach and a duration in a young window", () => {
+    const slo: ServiceLevelObjective = buildSlo({
+      currentSliPercentage: 0.0172,
+      errorBudgetRemainingPercentage: -99882.8,
+      errorBudgetRemainingSeconds: -346980,
+      errorBudgetTotalSeconds: 346980 / 998.828,
+      currentBurnRate: 1000,
+      sloStatus: SloStatus.BudgetExhausted,
+      lastEvaluatedAt: NOW,
+    });
+
+    render(
+      <SloKpiStrip slo={slo} lowestEnabledBurnRateThreshold={14.4} now={NOW} />,
+    );
+
+    const budget: HTMLElement = getTile("slo-kpi-budget");
+    expect(within(budget).getByText("Budget exceeded")).toHaveClass(
+      "text-red-700",
+    );
+    expect(
+      within(budget).getByText(
+        "4d 23m over budget · 5m 47s allowed · window 13% full",
+      ),
+    ).toBeInTheDocument();
+    expect(budget).not.toHaveTextContent("-99882.8%");
+    expect(budget).not.toHaveTextContent("−4d");
+    expect(within(budget).queryByTestId("slo-budget-bar-fill")).toBeNull();
+    expect(within(budget).getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "Error budget exceeded; no budget remaining; at risk at 20% or less",
+    );
+    expect(within(budget).getByTestId("slo-budget-bar-marker")).toHaveStyle({
+      left: "20%",
+    });
+
+    // Presentation must not erase the signed values used by calculations.
+    expect(slo.errorBudgetRemainingPercentage).toBe(-99882.8);
+    expect(slo.errorBudgetRemainingSeconds).toBe(-346980);
+    expect(slo.errorBudgetTotalSeconds).toBe(346980 / 998.828);
+    expect(
+      within(getTile("slo-kpi-runway")).getByText("Overspent"),
+    ).toBeInTheDocument();
+  });
+
+  test("even a fractional overage remains a breach instead of rounding to zero", () => {
+    render(
+      <SloKpiStrip
+        slo={buildSlo({
+          errorBudgetRemainingPercentage: -0.00001,
+          errorBudgetRemainingSeconds: -0.25,
+          errorBudgetTotalSeconds: 2592,
+          lastEvaluatedAt: NOW,
+        })}
+        lowestEnabledBurnRateThreshold={null}
+        now={NOW}
+      />,
+    );
+
+    const budget: HTMLElement = getTile("slo-kpi-budget");
+    expect(within(budget).getByText("Budget exceeded")).toHaveClass(
+      "text-red-700",
+    );
+    expect(
+      within(budget).getByText("under 1s over budget · 43m 12s allowed"),
+    ).toBeInTheDocument();
+    expect(within(budget).queryByText("0%")).toBeNull();
+    expect(within(budget).queryByText("No budget left")).toBeNull();
+    expect(within(budget).queryByTestId("slo-budget-bar-fill")).toBeNull();
+  });
+
+  test.each([0, -0])(
+    "zero remaining (%s) says the budget is used up without claiming an overage",
+    (remaining: number) => {
+      render(
+        <SloKpiStrip
+          slo={buildSlo({
+            errorBudgetRemainingPercentage: remaining,
+            errorBudgetRemainingSeconds: remaining,
+            errorBudgetTotalSeconds: 2592,
+            lastEvaluatedAt: NOW,
+          })}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText("No budget left")).toHaveClass(
+        "text-red-700",
+      );
+      expect(
+        within(budget).getByText("0s left of 43m 12s"),
+      ).toBeInTheDocument();
+      expect(within(budget).queryByText("Budget exceeded")).toBeNull();
+      expect(within(budget).queryByTestId("slo-budget-bar-fill")).toBeNull();
+      expect(within(budget).getByRole("progressbar")).toHaveAttribute(
+        "aria-valuetext",
+        "No error budget remaining; at risk at 20% or less",
+      );
+    },
+  );
+
+  test.each([undefined, null, NaN, Infinity, -Infinity])(
+    "unknown remaining percentage (%s) is not mistaken for a healthy or exhausted budget",
+    (remainingPercentage: number | undefined | null) => {
+      const slo: ServiceLevelObjective = buildSlo({
+        errorBudgetTotalSeconds: 648,
+        sloStatus: SloStatus.Healthy,
+        lastEvaluatedAt: NOW,
+      });
+      Object.assign(slo, {
+        errorBudgetRemainingPercentage: remainingPercentage,
+      });
+
+      render(
+        <SloKpiStrip
+          slo={slo}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText("—")).toHaveClass("text-gray-400");
+      expect(within(budget).getByText("Not evaluated yet")).toBeInTheDocument();
+      expect(budget).not.toHaveTextContent(/NaN|Infinity|window .* full/);
+      expect(within(budget).queryByText("Budget exceeded")).toBeNull();
+      expect(within(budget).queryByText("No budget left")).toBeNull();
+      expect(within(budget).queryByTestId("slo-budget-bar-fill")).toBeNull();
+      expect(within(budget).queryByTestId("slo-budget-bar-marker")).toBeNull();
+      expect(within(budget).getByRole("progressbar")).not.toHaveAttribute(
+        "aria-valuenow",
+      );
+    },
+  );
+
+  test.each([
+    { percentage: 0.00001, label: "<0.1%", color: "text-amber-700" },
+    { percentage: 15.555, label: "15.6%", color: "text-amber-700" },
+    { percentage: 20, label: "20%", color: "text-amber-700" },
+    { percentage: 20.04, label: "20%", color: "text-emerald-700" },
+    { percentage: 100.4, label: "100%", color: "text-emerald-700" },
+  ])(
+    "$percentage percent has a readable $label headline while preserving its actual health and bar fill",
+    ({
+      percentage,
+      label,
+      color,
+    }: {
+      percentage: number;
+      label: string;
+      color: string;
+    }) => {
+      const slo: ServiceLevelObjective = buildSlo({
+        errorBudgetRemainingPercentage: percentage,
+        errorBudgetRemainingSeconds: (percentage * 2592) / 100,
+        errorBudgetTotalSeconds: 2592,
+        lastEvaluatedAt: NOW,
+      });
+
+      render(
+        <SloKpiStrip
+          slo={slo}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText(label)).toHaveClass(color);
+      expect(within(budget).getByTestId("slo-budget-bar-fill")).toHaveStyle({
+        width: `${Math.min(percentage, 100)}%`,
+      });
+      expect(within(budget).getByRole("progressbar")).toHaveAttribute(
+        "aria-valuetext",
+        `${label} of the error budget remaining; at risk at 20% or less`,
+      );
+      expect(within(budget).queryByText("No budget left")).toBeNull();
+      expect(slo.errorBudgetRemainingPercentage).toBe(percentage);
+    },
+  );
+
+  test.each([
+    {
+      percentage: -10,
+      headline: "Budget exceeded",
+      description: "Allowed downtime has been exceeded",
+    },
+    {
+      percentage: 0,
+      headline: "No budget left",
+      description: "All allowed downtime has been used",
+    },
+    {
+      percentage: 50,
+      headline: "50%",
+      description: "Remaining share of the allowed downtime",
+    },
+  ])(
+    "a known $headline state remains explained when the duration is missing",
+    ({
+      percentage,
+      headline,
+      description,
+    }: {
+      percentage: number;
+      headline: string;
+      description: string;
+    }) => {
+      const slo: ServiceLevelObjective = buildSlo({
+        errorBudgetRemainingPercentage: percentage,
+        errorBudgetTotalSeconds: 2592,
+        lastEvaluatedAt: NOW,
+      });
+
+      render(
+        <SloKpiStrip
+          slo={slo}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText(headline)).toBeInTheDocument();
+      expect(within(budget).getByText(description)).toBeInTheDocument();
+      expect(within(budget).queryByText("Not evaluated yet")).toBeNull();
+      expect(budget).not.toHaveTextContent(/NaN|Infinity/);
+    },
+  );
+
+  test.each([undefined, NaN, 0])(
+    "an exceeded budget with no usable total (%s) still explains the measured overage",
+    (totalSeconds: number | undefined) => {
+      render(
+        <SloKpiStrip
+          slo={buildSlo({
+            errorBudgetRemainingPercentage: -10,
+            errorBudgetRemainingSeconds: -750,
+            // exactOptionalPropertyTypes: "no total" is an absent key, not an explicit undefined.
+            ...(totalSeconds === undefined
+              ? {}
+              : { errorBudgetTotalSeconds: totalSeconds }),
+            lastEvaluatedAt: NOW,
+          })}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText("Budget exceeded")).toBeInTheDocument();
+      expect(
+        within(budget).getByText("12m 30s over budget"),
+      ).toBeInTheDocument();
+      expect(budget).not.toHaveTextContent(
+        /allowed|NaN|Infinity|window .* full/,
+      );
+    },
+  );
+
   test("a young rolling window says so under the budget that is still growing", () => {
     render(
       <SloKpiStrip
@@ -398,6 +697,51 @@ describe("SloKpiStrip", () => {
     ).toBeInTheDocument();
   });
 
+  test.each([
+    {
+      label: "calendar month",
+      windowType: SloWindowType.CalendarMonth,
+      multiMonitorMode: SloMultiMonitorMode.AnyDown,
+    },
+    {
+      label: "averaged monitor downtime",
+      windowType: SloWindowType.Rolling,
+      multiMonitorMode: SloMultiMonitorMode.MonitorSecondsAverage,
+    },
+  ])(
+    "an exceeded budget for $label does not add a misleading rolling-window fill estimate",
+    ({
+      windowType,
+      multiMonitorMode,
+    }: {
+      label: string;
+      windowType: SloWindowType;
+      multiMonitorMode: SloMultiMonitorMode;
+    }) => {
+      render(
+        <SloKpiStrip
+          slo={buildSlo({
+            windowType,
+            multiMonitorMode,
+            errorBudgetRemainingPercentage: -100,
+            errorBudgetRemainingSeconds: -648,
+            errorBudgetTotalSeconds: 648,
+            lastEvaluatedAt: NOW,
+          })}
+          lowestEnabledBurnRateThreshold={null}
+          now={NOW}
+        />,
+      );
+
+      const budget: HTMLElement = getTile("slo-kpi-budget");
+      expect(within(budget).getByText("Budget exceeded")).toBeInTheDocument();
+      expect(
+        within(budget).getByText("10m 48s over budget · 10m 48s allowed"),
+      ).toBeInTheDocument();
+      expect(budget).not.toHaveTextContent("window 25% full");
+    },
+  );
+
   test("Monitor Seconds Average SLOs show no runway rather than a wrong one", () => {
     render(
       <SloKpiStrip