From c0b63285b63fd6caadbaf13b48049094dbc42677 Mon Sep 17 00:00:00 2001
From: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Date: Thu, 18 Jul 2024 11:45:09 +0200
Subject: [PATCH] Do not render `ExecutionTime` if there is no `time` to format
(#45749)
* Do not render if there is no time to format
* Add a unit test
* Render time if 0
* Simplify the logic with explicit check for `undefined`
---
.../view/ExecutionTime/ExecutionTime.tsx | 18 ++++++----
.../ExecutionTime/ExecutionTime.unit.spec.tsx | 33 +++++++++++++++++++
2 files changed, 45 insertions(+), 6 deletions(-)
create mode 100644 frontend/src/metabase/query_builder/components/view/ExecutionTime/ExecutionTime.unit.spec.tsx
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 8cd72bfa25d..d096bd7c155 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 00000000000..a5eba43bf40
--- /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",
+ );
+ });
+});
--
GitLab