Frontend: Updates to unit test (#7850)

frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx

@@ -2,23 +2,23 @@ import React from "react";
 
 import { fireEvent, render, screen } from "@testing-library/react";
 
+import { renderWithSetup } from "test/testingUtils";
+
 import paths from "router/paths";
 
 import SummaryTile from "./SummaryTile";
 
 import TestIcon from "../../../../../../assets/images/icon-windows-black-24x24@2x.png";
 
-const INITIAL_OPACITY = 0;
-
 const LOADING_OPACITY = 0.4;
 
 describe("SummaryTile - component", () => {
-  it("summary tile is hidden when showUI is false on first load", () => {
+  it("summary tile is hidden when showUI is false", () => {
     render(
       <SummaryTile
         count={200}
         isLoading={false}
-        showUI={false} // being tested
+        showUI={false} // tested
         title={"Windows hosts"}
         icon={TestIcon}
         tooltip={"Hosts on any Windows device"}
@@ -28,7 +28,7 @@ describe("SummaryTile - component", () => {
 
     const tile = screen.getByTestId("tile");
 
-    expect(tile).toHaveStyle(`opacity: ${INITIAL_OPACITY}`);
+    expect(tile).not.toBeVisible();
   });
 
   it("renders loading state", () => {
@@ -47,6 +47,7 @@ describe("SummaryTile - component", () => {
     const tile = screen.getByTestId("tile");
 
     expect(tile).toHaveStyle(`opacity: ${LOADING_OPACITY}`);
+    expect(tile).toBeVisible();
   });
 
   it("renders title, count, and image based on the information and data passed in", () => {
@@ -63,20 +64,32 @@ describe("SummaryTile - component", () => {
     );
 
     const title = screen.getByText("Windows hosts");
-
     const count = screen.getByText("200");
-
     const icon = screen.getByRole("img");
 
     expect(title).toBeInTheDocument();
-
     expect(count).toBeInTheDocument();
-
     expect(icon).toHaveAttribute("src", "test-file-stub");
   });
 
-  it("renders tooltip on title hover", async () => {
+  it("does not render icon if not provided", () => {
     render(
+      <SummaryTile
+        count={200}
+        isLoading={false}
+        showUI
+        title={"Windows hosts"}
+        path={paths.MANAGE_HOSTS_LABEL(10)}
+      />
+    );
+
+    const icon = screen.queryByRole("img");
+
+    expect(icon).toBeNull();
+  });
+
+  it("renders tooltip on title hover", async () => {
+    const { user } = renderWithSetup(
       <SummaryTile
         count={200}
         isLoading={false}
@@ -88,15 +101,13 @@ describe("SummaryTile - component", () => {
       />
     );
 
-    fireEvent.mouseOver(screen.getByText("Windows hosts"));
+    await user.hover(screen.getByText("Windows hosts"));
 
-    expect(
-      await screen.findByText("Hosts on any Windows device")
-    ).toBeInTheDocument();
+    expect(screen.getByText("Hosts on any Windows device")).toBeInTheDocument();
   });
 
   it("renders manage host page on click", async () => {
-    render(
+    const { user } = renderWithSetup(
       <SummaryTile
         count={200}
         isLoading={false}
@@ -108,7 +119,7 @@ describe("SummaryTile - component", () => {
       />
     );
 
-    fireEvent.click(screen.getByText("Windows hosts"));
+    await user.click(screen.getByText("Windows hosts"));
 
     expect(window.location.pathname).toBe("/hosts/manage/labels/10");
   });

frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tsx

@@ -4,13 +4,14 @@ import Button from "components/buttons/Button";
 import { kebabCase } from "lodash";
 
 import TooltipWrapper from "components/TooltipWrapper";
+import { StringDecoder } from "string_decoder";
 
 interface ISummaryTileProps {
   count: number;
   isLoading: boolean;
   showUI: boolean;
   title: string;
-  icon?: any;
+  icon?: string;
   tooltip?: string;
   path: string;
 }