diff --git a/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.tsx b/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.tsx index 8cd72bfa25d5d4ea44ae38a43fe61cf29fac8a52..d096bd7c1556191d3c1d1be8892f8b59e3e16709 100644 --- a/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.tsx +++ b/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.tsx @@ -5,11 +5,17 @@ import { Tooltip } from "metabase/ui"; import { formatDuration } from "./utils"; interface Props { - time: number; + time?: number; } -export const ExecutionTime = ({ time }: Props) => ( - <Tooltip label={t`Query execution time`}> - <span data-testid="execution-time">{formatDuration(time)}</span> - </Tooltip> -); +export const ExecutionTime = ({ time }: Props) => { + if (time === undefined) { + return null; + } + + return ( + <Tooltip label={t`Query execution time`}> + <span data-testid="execution-time">{formatDuration(time)}</span> + </Tooltip> + ); +}; diff --git a/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.unit.spec.tsx b/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.unit.spec.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a5eba43bf40f268724b56c10852337b33ccc0831 --- /dev/null +++ b/frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.unit.spec.tsx @@ -0,0 +1,33 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +import { ExecutionTime } from "./ExecutionTime"; + +describe("ExecutionTime", () => { + it("renders nothing when no time is provided (metabase#45730)", () => { + const { container } = render(<ExecutionTime />); + + expect(container).toBeEmptyDOMElement(); + }); + + it("renders formatted time when time is provided", () => { + render(<ExecutionTime time={100} />); + + expect(screen.getByTestId("execution-time")).toHaveTextContent("100 ms"); + }); + + it("renders formatted time when time is provided, but the time is 0", () => { + render(<ExecutionTime time={0} />); + + expect(screen.getByTestId("execution-time")).toHaveTextContent("0 ms"); + }); + + it("shows tooltip", async () => { + render(<ExecutionTime time={100} />); + + await userEvent.hover(screen.getByTestId("execution-time")); + expect(screen.getByRole("tooltip")).toHaveTextContent( + "Query execution time", + ); + }); +});