diff --git a/apps/fabro-web/app/components/runs-list/run-table-row.tsx b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
index e7447bce5..5066bc9d8 100644
--- a/apps/fabro-web/app/components/runs-list/run-table-row.tsx
+++ b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
@@ -115,11 +115,9 @@ export function RunTableRow({
)}
{show("size") && (
-
+ |
{run.size != null && (
-
-
-
+
)}
|
)}
diff --git a/apps/fabro-web/app/components/size-chip.test.tsx b/apps/fabro-web/app/components/size-chip.test.tsx
index b355f5db1..498c97f5e 100644
--- a/apps/fabro-web/app/components/size-chip.test.tsx
+++ b/apps/fabro-web/app/components/size-chip.test.tsx
@@ -1,25 +1,43 @@
-import { describe, expect, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
import TestRenderer, { act } from "react-test-renderer";
+import { setupReactTestEnv } from "../lib/test-utils";
import { SizeChip } from "./size-chip";
import { Tooltip } from "./ui";
-function tooltipLabel(element: React.ReactElement): string {
+let teardownReactTestEnv: (() => void) | undefined;
+const mountedRenderers: TestRenderer.ReactTestRenderer[] = [];
+
+function render(element: React.ReactElement): TestRenderer.ReactTestRenderer {
let renderer: TestRenderer.ReactTestRenderer | undefined;
act(() => {
renderer = TestRenderer.create(element);
});
- return renderer!.root.findByType(Tooltip).props.label as string;
+ mountedRenderers.push(renderer!);
+ return renderer!;
+}
+
+function tooltipLabel(element: React.ReactElement): string {
+ return render(element).root.findByType(Tooltip).props.label as string;
}
describe("SizeChip", () => {
- test("renders the size letter", () => {
- let renderer: TestRenderer.ReactTestRenderer | undefined;
- act(() => {
- renderer = TestRenderer.create();
- });
+ beforeEach(() => {
+ teardownReactTestEnv = setupReactTestEnv();
+ });
- expect(JSON.stringify(renderer!.toJSON())).toContain("M");
+ afterEach(() => {
+ act(() => {
+ for (const renderer of mountedRenderers.splice(0)) {
+ renderer.unmount();
+ }
+ });
+ teardownReactTestEnv?.();
+ teardownReactTestEnv = undefined;
+ });
+
+ test("renders the size letter", () => {
+ expect(JSON.stringify(render().toJSON())).toContain("M");
});
test("appends the cost to the tooltip", () => {
diff --git a/apps/fabro-web/app/components/size-chip.tsx b/apps/fabro-web/app/components/size-chip.tsx
index d23210955..7563b4c87 100644
--- a/apps/fabro-web/app/components/size-chip.tsx
+++ b/apps/fabro-web/app/components/size-chip.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
import type { RunSize } from "@qltysh/fabro-api-client";
import { formatUsdMicros } from "../lib/format";
@@ -11,7 +12,7 @@ const SIZE_TONE: Record = {
XL: { className: "bg-coral/15 text-coral", note: "unhealthy" },
};
-export function SizeChip({
+export const SizeChip = memo(function SizeChip({
size,
totalUsdMicros,
}: {
@@ -30,4 +31,4 @@ export function SizeChip({
);
-}
+});
diff --git a/apps/fabro-web/app/routes/runs.tsx b/apps/fabro-web/app/routes/runs.tsx
index fe21e36c8..b1e09bf67 100644
--- a/apps/fabro-web/app/routes/runs.tsx
+++ b/apps/fabro-web/app/routes/runs.tsx
@@ -418,7 +418,7 @@ function PrCardFooter({ pr, actions }: { pr: RunItem; actions?: string[] }) {
)}
{pr.size != null && (
-
+
)}