Fix tests

coder · BrunoQuaresma · Oct 3, 2024 · Sep 30, 2024 · Oct 1, 2024 · Oct 2, 2024
commit 01e66ed1afb37da966f51dc210d7a460aa45d501
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -11,30 +11,30 @@ import { server } from "testHelpers/server";
 // This would fail unit testing, or at least make it very slow with
 // actual network requests. So just globally mock this hook.
 jest.mock("contexts/useProxyLatency", () => ({
-  useProxyLatency: (proxies?: Region[]) => {
-    // Must use `useMemo` here to avoid infinite loop.
-    // Mocking the hook with a hook.
-    const proxyLatencies = useMemo(() => {
-      if (!proxies) {
-        return {} as Record<string, ProxyLatencyReport>;
-      }
-      return proxies.reduce(
-        (acc, proxy) => {
-          acc[proxy.id] = {
-            accurate: true,
-            // Return a constant latency of 8ms.
-            // If you make this random it could break stories.
-            latencyMS: 8,
-            at: new Date(),
-          };
-          return acc;
-        },
-        {} as Record<string, ProxyLatencyReport>,
-      );
-    }, [proxies]);
+	useProxyLatency: (proxies?: Region[]) => {
+		// Must use `useMemo` here to avoid infinite loop.
+		// Mocking the hook with a hook.
+		const proxyLatencies = useMemo(() => {
+			if (!proxies) {
+				return {} as Record<string, ProxyLatencyReport>;
+			}
+			return proxies.reduce(
+				(acc, proxy) => {
+					acc[proxy.id] = {
+						accurate: true,
+						// Return a constant latency of 8ms.
+						// If you make this random it could break stories.
+						latencyMS: 8,
+						at: new Date(),
+					};
+					return acc;
+				},
+				{} as Record<string, ProxyLatencyReport>,
+			);
+		}, [proxies]);
 
-    return { proxyLatencies, refetch: jest.fn() };
-  },
+		return { proxyLatencies, refetch: jest.fn() };
+	},
 }));
 
 global.scrollTo = jest.fn();
@@ -43,28 +43,30 @@ window.HTMLElement.prototype.scrollIntoView = jest.fn();
 window.open = jest.fn();
 navigator.sendBeacon = jest.fn();
 
+global.ResizeObserver = require("resize-observer-polyfill");
+
 // Polyfill the getRandomValues that is used on utils/random.ts
 Object.defineProperty(global.self, "crypto", {
-  value: {
-    getRandomValues: function (buffer: Buffer) {
-      return crypto.randomFillSync(buffer);
-    },
-  },
+	value: {
+		getRandomValues: function (buffer: Buffer) {
+			return crypto.randomFillSync(buffer);
+		},
+	},
 });
 
 // Establish API mocking before all tests through MSW.
 beforeAll(() =>
-  server.listen({
-    onUnhandledRequest: "warn",
-  }),
+	server.listen({
+		onUnhandledRequest: "warn",
+	}),
 );
 
 // Reset any request handlers that we may add during the tests,
 // so they don't affect other tests.
 afterEach(() => {
-  cleanup();
-  server.resetHandlers();
-  jest.resetAllMocks();
+	cleanup();
+	server.resetHandlers();
+	jest.resetAllMocks();
 });
 
 // Clean up after the tests are finished.

diff --git a/site/package.json b/site/package.json
@@ -90,6 +90,7 @@
 		"react-virtualized-auto-sizer": "1.0.24",
 		"react-window": "1.8.10",
 		"remark-gfm": "4.0.0",
+		"resize-observer-polyfill": "1.5.1",
 		"rollup-plugin-visualizer": "5.12.0",
 		"semver": "7.6.2",
 		"tzdata": "1.0.40",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.test.tsx
@@ -65,7 +65,9 @@ describe("WorkspaceBuildPage", () => {
 
 	test("shows selected agent logs", async () => {
 		const server = new WS(
-			`ws://localhost/api/v2/workspaceagents/${MockWorkspaceAgent.id}/logs?follow&after=0`,
+			`ws://localhost/api/v2/workspaceagents/${
+				MockWorkspaceAgent.id
+			}/logs?follow&after=0`,
 		);
 		renderWithAuth(<WorkspaceBuildPage />, {
 			route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}/builds/${MockWorkspace.latest_build.build_number}?${LOGS_TAB_KEY}=${MockWorkspaceAgent.id}`,

diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -210,7 +210,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 	);
 };
 
-const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
+const ScrollArea: FC<HTMLProps<HTMLDivElement>> = (props) => {
 	// TODO: Use only CSS to set the height of the content.
 	// Note: On Safari, when content is rendered inside a flex container and needs
 	// to scroll, the parent container must have a height set. Achieving this may
@@ -221,14 +221,6 @@ const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
 	const contentRef = useRef<HTMLDivElement>(null);
 	const [height, setHeight] = useState<CSSProperties["height"]>("100%");
 	useLayoutEffect(() => {
-		// TODO: Mock ResizeObserver in the test environment. This is a temporary
-		// workaround because the recommended way to mock ResizeObserver, as
-		// described in the following reference, did not work:
-		// https://github.com/ZeeCoder/use-resize-observer/issues/40#issuecomment-991256805
-		if (window.ResizeObserver === undefined) {
-			return;
-		}
-
 		const contentEl = contentRef.current;
 		if (!contentEl) {
 			return;
@@ -249,7 +241,11 @@ const ScrollArea: FC<HTMLProps<HTMLDivElement>> = () => {
 	}, []);
 
 	return (
-		<div ref={contentRef} css={{ height, overflowY: "auto", width: "100%" }} />
+		<div
+			ref={contentRef}
+			css={{ height, overflowY: "auto", width: "100%" }}
+			{...props}
+		/>
 	);
 };