diff --git a/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx b/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx index 5fe3e5e56e..555c3d0b4e 100644 --- a/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tests.tsx +++ b/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( { 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( + + ); + + const icon = screen.queryByRole("img"); + + expect(icon).toBeNull(); + }); + + it("renders tooltip on title hover", async () => { + const { user } = renderWithSetup( { /> ); - 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( { /> ); - fireEvent.click(screen.getByText("Windows hosts")); + await user.click(screen.getByText("Windows hosts")); expect(window.location.pathname).toBe("/hosts/manage/labels/10"); }); diff --git a/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tsx b/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tsx index 708a70d16d..ddfc111843 100644 --- a/frontend/pages/Homepage/cards/HostsSummary/SummaryTile/SummaryTile.tsx +++ b/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; }