From fe259c73268056c13fe17f41a7ef53617e4ced40 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 18 Apr 2024 09:38:39 -0400
Subject: [PATCH] Fleet UI: Fix disk space tooltip cut off, add tests (#18364)

---
 .../DiskSpaceGraph/DiskSpaceGraph.tests.tsx   | 79 +++++++++++++++++++
 .../DiskSpaceGraph/DiskSpaceGraph.tsx         | 10 +--
 .../components/DiskSpaceGraph/_styles.scss    | 10 ++-
 .../cards/HostSummary/HostSummary.tests.tsx   | 20 +++--
 4 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 frontend/components/DiskSpaceGraph/DiskSpaceGraph.tests.tsx

diff --git a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tests.tsx b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tests.tsx
new file mode 100644
index 0000000000..22ba71e317
--- /dev/null
+++ b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tests.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+
+import { screen, render, fireEvent } from "@testing-library/react";
+
+import DiskSpaceGraph from "./DiskSpaceGraph";
+
+describe("Disk space graph", () => {
+  it("renders warning tooltip for <32gB when hovering over the yellow disk space graph for darwin or windows", async () => {
+    render(
+      <DiskSpaceGraph
+        baseClass="data-set"
+        gigsDiskSpaceAvailable={17}
+        percentDiskSpaceAvailable={10}
+        id="disk-space-graph"
+        platform="darwin"
+        tooltipPosition="bottom"
+      />
+    );
+
+    expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 10%");
+    expect(screen.getByTitle("disk space indicator")).toHaveClass(
+      "data-set__disk-space--yellow"
+    );
+
+    await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
+    const tooltip = screen.getByText(
+      "Not enough disk space available to install most large operating systems updates."
+    );
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it("renders severe warning tooltip for <16 gBwhen hovering over the red disk space graph for darwin or windows", async () => {
+    render(
+      <DiskSpaceGraph
+        baseClass="data-set"
+        gigsDiskSpaceAvailable={5}
+        percentDiskSpaceAvailable={2}
+        id="disk-space-graph"
+        platform="windows"
+        tooltipPosition="bottom"
+      />
+    );
+
+    expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 2%");
+    expect(screen.getByTitle("disk space indicator")).toHaveClass(
+      "data-set__disk-space--red"
+    );
+
+    await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
+    const tooltip = screen.getByText(
+      "Not enough disk space available to install most small operating systems updates."
+    );
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it("renders tooltip when hovering over the green disk space graph for darwin or windows", async () => {
+    render(
+      <DiskSpaceGraph
+        baseClass="data-set"
+        gigsDiskSpaceAvailable={33}
+        percentDiskSpaceAvailable={15}
+        id="disk-space-graph"
+        platform="windows"
+        tooltipPosition="bottom"
+      />
+    );
+
+    expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 15%");
+    expect(screen.getByTitle("disk space indicator")).toHaveClass(
+      "data-set__disk-space--green"
+    );
+
+    await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
+    const tooltip = screen.getByText(
+      "Enough disk space available to install most operating systems updates."
+    );
+    expect(tooltip).toBeInTheDocument();
+  });
+});
diff --git a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
index 7f8e355ac4..008c1a8279 100644
--- a/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
+++ b/frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
@@ -5,7 +5,7 @@ import { COLORS } from "styles/var/colors";
 
 interface IDiskSpaceGraphProps {
   baseClass: string;
-  gigsDiskSpaceAvailable: number | string;
+  gigsDiskSpaceAvailable: number | "---";
   percentDiskSpaceAvailable: number;
   id: string;
   platform: string;
@@ -20,6 +20,10 @@ const DiskSpaceGraph = ({
   platform,
   tooltipPosition = "top",
 }: IDiskSpaceGraphProps): JSX.Element => {
+  if (gigsDiskSpaceAvailable === 0 || gigsDiskSpaceAvailable === "---") {
+    return <span className={`${baseClass}__data`}>No data available</span>;
+  }
+
   const getDiskSpaceIndicatorColor = (): string => {
     // return space-dependent graph colors for mac and windows hosts, green for linux
     if (platform === "darwin" || platform === "windows") {
@@ -44,10 +48,6 @@ const DiskSpaceGraph = ({
     return undefined;
   })();
 
-  if (gigsDiskSpaceAvailable === 0 || gigsDiskSpaceAvailable === "---") {
-    return <span className={`${baseClass}__data`}>No data available</span>;
-  }
-
   return (
     <span className={`${baseClass}__data`}>
       <div
diff --git a/frontend/components/DiskSpaceGraph/_styles.scss b/frontend/components/DiskSpaceGraph/_styles.scss
index 5878f3f1db..eb9518b2d5 100644
--- a/frontend/components/DiskSpaceGraph/_styles.scss
+++ b/frontend/components/DiskSpaceGraph/_styles.scss
@@ -32,9 +32,11 @@
     }
   }
 
-  .disk-space-tooltip {
-    display: block;
-    white-space: normal;
-    max-width: 160px;
+  &__data {
+    .disk-space-tooltip {
+      display: block;
+      white-space: normal;
+      max-width: 160px;
+    }
   }
 }
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tests.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tests.tsx
index da1258a28e..36252c2c1c 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tests.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tests.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { noop } from "lodash";
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import { createCustomRenderer } from "test/test-utils";
 
 import createMockUser from "__mocks__/userMock";
@@ -35,14 +35,18 @@ describe("Host Actions Dropdown", () => {
       );
 
       expect(screen.getByText("Agent")).toBeInTheDocument();
-      await user.hover(screen.getByText(new RegExp(orbitVersion, "i")));
+      await waitFor(() => {
+        waitFor(() => {
+          user.hover(screen.getByText(new RegExp(orbitVersion, "i")));
+        });
 
-      expect(
-        screen.getByText(new RegExp(osqueryVersion, "i"))
-      ).toBeInTheDocument();
-      expect(
-        screen.getByText(new RegExp(fleetdVersion, "i"))
-      ).toBeInTheDocument();
+        expect(
+          screen.getByText(new RegExp(osqueryVersion, "i"))
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText(new RegExp(fleetdVersion, "i"))
+        ).toBeInTheDocument();
+      });
     });
 
     it("omit fleet desktop from tooltip if no fleet desktop version", async () => {