fix(site): update `useAgentLogs` to make it more testable and add more tests #19126

Parkreiner · 2025-08-02T20:59:24Z

Changes made

Updated how useAgentLogs was defined to make it easier to inject specific data dependencies (basically making the hook more unit-testable)
Simplified the hook API to limit the amount of scope of data it needs to work
Added more test cases, and re-enabled the one test case we had previously disabled
Extracted our mock websocket code into a separate file, and added more methods to it
Updated all runtime code to accommodate new changes

…mes/logs-flake

Parkreiner · 2025-08-02T21:01:22Z

site/src/hooks/useEmbeddedMetadata.ts

 		const stableMetadataResult = useMemo<UseEmbeddedMetadataResult>(() => {
 			return {
 				metadata,
 				clearMetadataByKey: manager.clearMetadataByKey,
 			};
-		}, [metadata]);
+		}, [manager, metadata]);


A case where realistically, the value of manager won't ever change, but it technically can, since function parameters are reassignable. So better to add it to the dependencies for correctness

Parkreiner · 2025-08-02T21:02:08Z

site/src/modules/resources/AgentRow.tsx

 	const logListRef = useRef<List>(null);
 	const logListDivRef = useRef<HTMLDivElement>(null);
-	const startupLogs = useMemo(() => {
-		const allLogs = agentLogs || [];


agentLogs is no longer nullable, so a bunch of logic can be removed

Parkreiner · 2025-08-02T21:04:57Z

site/src/modules/resources/useAgentLogs.test.ts

@@ -1,60 +1,147 @@
 import { renderHook, waitFor } from "@testing-library/react";


Enough changed with the test file that it honestly might not even be worth looking at the old version of the code

Parkreiner · 2025-08-04T03:01:45Z

site/src/testHelpers/websockets.ts

+	publishError: (event: Event) => void;
+	publishClose: (event: CloseEvent) => void;
+	publishOpen: (event: Event) => void;
+	readonly isConnectionOpen: boolean;


Setup is 99% the same from the old file, just with the addition of this getter method

aslilac

I think this mock WebSocket implementation needs some tests of its own, and is probably worth its own PR as well. @jaaydenh has been working on a similar refactor of some other tests that I think uses a copy of this WebSocket mock. It'd be nice to sync on that so that we don't duplicate effort, and then we can get everyones tests reviewed. 😄

Parkreiner · 2025-08-04T18:17:27Z

@aslilac Yeah, totally fair. I'll check with Jaayden

Needed for #19126 and #18679 ## Changes made - Moved `createWebSocket` to dedicated file and addressed edge cases for making it a reliable mock - Added test cases to validate mock functionality

aslilac

I'd love to have a story for the logs_overflowed state

(sorry if this is asking a lot, I just keep seeing things that'd be nice to clean up everywhere)

aslilac · 2025-08-07T21:33:55Z

site/src/modules/resources/AgentRow.tsx

+		}
+		return [
+			...agentLogs,
+			{
 				id: -1,
 				level: "error",
 				output:
 					"Startup logs exceeded the max size of 1MB, and will not continue to be written to the database! Logs will continue to be written to the /tmp/coder-startup-script.log file in the workspace.",
 				created_at: new Date().toISOString(),


we're leaking in here. I feel like this should be...

Suggested change

created_at: new Date().toISOString(),

created_at: agentLogs.at(-1).created_at,

since that's probably more "correct" and deterministic

aslilac · 2025-08-07T21:39:09Z

site/src/modules/resources/useAgentLogs.test.ts

+
+function generateMockLogs(
+	logCount: number,
+	baseDate = new Date(),


Suggested change

baseDate = new Date(),

baseDate = new Date("Thu, 07 Aug 2025 21:38:12 GMT"),

as an example, how about just right now

aslilac · 2025-08-07T22:16:27Z

site/src/modules/resources/AgentRow.tsx

+		}
+		return [
+			...agentLogs,
+			{


also I know it was already like this, but is shoving a log entry on the end really the best way to do this?

this startupLogs value eventually gets passed to AgentLogs below. what if we just passed agentLogs in unmodified and added an overflowed prop that shows the warning?

aslilac · 2025-08-07T22:28:15Z

site/src/modules/resources/useAgentLogs.test.ts

+		for (const log of reversed) {
+			act(() => {
+				serverResult.current?.publishMessage(
+					new MessageEvent("message", { data: JSON.stringify([log]) }),
+				);
+			});
+		}


Suggested change

for (const log of reversed) {

act(() => {

serverResult.current?.publishMessage(

new MessageEvent("message", { data: JSON.stringify([log]) }),

);

});

}

await act(async () => {

for (const log of reversed) {

serverResult.current?.publishMessage(

new MessageEvent("message", { data: JSON.stringify([log]) }),

);

}

});

I'm still trying to build up an intuition for act, but I noticed while looking at the docs that they now promote calling it with an async function and awaiting so I'm wondering if this patch makes sense.

reference: https://react.dev/reference/react/act

aslilac · 2025-08-07T22:29:22Z

site/src/modules/resources/useAgentLogs.test.ts

+		});
+
+		const errorEvent = new Event("error");
+		act(() => serverResult.current?.publishError(errorEvent));


Suggested change

act(() => serverResult.current?.publishError(errorEvent));

await act(() => serverResult.current?.publishError(errorEvent));

aslilac · 2025-08-07T22:34:14Z

site/src/modules/resources/useAgentLogs.test.ts

+		expect(onError).toHaveBeenCalledTimes(1);
+	});
+
+	it("Clears logs when hook becomes disabled (protection to avoid duplicate logs when hook goes back to being re-enabled)", async () => {


Suggested change

it("Clears logs when hook becomes disabled (protection to avoid duplicate logs when hook goes back to being re-enabled)", async () => {

// This is a protection to avoid duplicate logs when the hook is re-enabled

it("Clears logs when hook becomes disabled", async () => {

aslilac · 2025-08-07T22:35:55Z

site/src/modules/resources/useAgentLogs.ts

-import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
+import {
+	type WatchWorkspaceAgentLogsParams,
+	watchWorkspaceAgentLogs,


I wonder if rather than all of this factory stuff we could just mock watchWorkspaceAgentLogs. I think that might make it easier to get the publisher value too, but can't say for sure.

aslilac · 2025-08-07T22:54:25Z

site/src/modules/resources/useAgentLogs.test.ts

+		const initialEvent = new MessageEvent("message", {
+			data: JSON.stringify(initialLogs),
+		});
+		act(() => serverResult.current?.publishMessage(initialEvent));


Suggested change

act(() => serverResult.current?.publishMessage(initialEvent));

await act(async () => serverResult.current?.publishMessage(initialEvent));

aslilac · 2025-08-07T22:54:38Z

site/src/modules/resources/useAgentLogs.test.ts

+			const newEvent = new MessageEvent("message", {
+				data: JSON.stringify(newLogs),
+			});
+			act(() => serverResult.current?.publishMessage(newEvent));


Suggested change

act(() => serverResult.current?.publishMessage(newEvent));

await act(async () => serverResult.current?.publishMessage(newEvent));

aslilac · 2025-08-07T22:59:58Z

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

-		return <Loader />;
-	}
-
+	const logs = useAgentLogs(agent.id, true);


another "I know it was already like this" moment but nondescript booleans like this are dreadful. I'd love to see this argument go from boolean to { enabled: boolean = true } (similar to what react-query does, default to on, optimized for the happy path)

aslilac · 2025-08-07T23:12:25Z

site/src/modules/resources/useAgentLogs.test.ts

+function mountHook(options: MountHookOptions): MountHookResult {
+	const { initialAgentId, enabled = true, onError = jest.fn() } = options;
+
+	const serverResult: ServerResult = { current: undefined };


if we stick with this we could just use createRef and React.RefObject<MockWebSocketServer> instead of making our own type here

Parkreiner added 15 commits May 23, 2025 20:03

wip: commit progress on test update

d6e00c3

refactor: update useAgentLogs tests as unit tests

43d0ca8

docs: rewrite comment for clarity

727bddd

fix: remove unnecessary type

d46d144

fix: make sure logs have different timestamps

91a6fc1

fix: add different dates to reduce risk of false positives

ecbe7b0

Merge branch 'main' into mes/logs-flake

d13bcdc

Merge branch 'main' into mes/logs-flake

0f21097

refactor: decrease coupling

abd6553

wip: commit progress on updating flake

bade97a

Merge branch 'mes/logs-flake' of https://github.com/coder/coder into …

e11fefd

…mes/logs-flake

fix: get all tests passing

bc3d095

chore: add one more test case

550d09e

fix: update type mismatches

cc7e632

refactor: clean up some code

79c7ffd

Parkreiner self-assigned this Aug 2, 2025

Parkreiner requested a review from aslilac as a code owner August 2, 2025 20:59

Parkreiner commented Aug 2, 2025

View reviewed changes

Parkreiner added 4 commits August 2, 2025 21:41

fix: make testing boundaries more formal

43a0d3a

fix: remove premature optimization

982d3e1

fix: update setup

41c5a12

fix: update state sync logic

42cb73b

Parkreiner changed the title ~~fix: update useAgentLogs to make it more testable and add more tests~~ fix(site): update useAgentLogs to make it more testable and add more tests Aug 4, 2025

Parkreiner commented Aug 4, 2025

View reviewed changes

Merge branch 'main' into mes/logs-flake

3a5f7bb

aslilac reviewed Aug 4, 2025

View reviewed changes

Parkreiner added 2 commits August 4, 2025 18:09

fix: update wonky types

35a40df

Merge branch 'main' into mes/logs-flake

306dbc7

Parkreiner mentioned this pull request Aug 5, 2025

fix(site): add tests for createMockWebSocket #19172

Merged

Merge branch 'main' into mes/logs-flake

f49e55a

Parkreiner requested a review from aslilac August 7, 2025 21:00

Parkreiner added 2 commits August 7, 2025 21:08

fix: update tests

c2fc772

fix: format

2cabd85

aslilac reviewed Aug 7, 2025

View reviewed changes

		@@ -1,60 +1,147 @@
		import { renderHook, waitFor } from "@testing-library/react";

	created_at: new Date().toISOString(),
	created_at: agentLogs.at(-1).created_at,

	baseDate = new Date(),
	baseDate = new Date("Thu, 07 Aug 2025 21:38:12 GMT"),

	act(() => serverResult.current?.publishError(errorEvent));
	await act(() => serverResult.current?.publishError(errorEvent));

	it("Clears logs when hook becomes disabled (protection to avoid duplicate logs when hook goes back to being re-enabled)", async () => {
	// This is a protection to avoid duplicate logs when the hook is re-enabled
	it("Clears logs when hook becomes disabled", async () => {

	act(() => serverResult.current?.publishMessage(initialEvent));
	await act(async () => serverResult.current?.publishMessage(initialEvent));

fix(site): update useAgentLogs to make it more testable and add more tests #19126

Are you sure you want to change the base?

fix(site): update useAgentLogs to make it more testable and add more tests #19126

Conversation

Parkreiner commented Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes made

Uh oh!

Parkreiner Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parkreiner Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aslilac left a comment

Choose a reason for hiding this comment

Uh oh!

Parkreiner commented Aug 4, 2025

Uh oh!

aslilac left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

fix(site): update `useAgentLogs` to make it more testable and add more tests #19126

fix(site): update `useAgentLogs` to make it more testable and add more tests #19126

Parkreiner commented Aug 2, 2025 •

edited

Loading

Parkreiner Aug 2, 2025 •

edited

Loading

Parkreiner Aug 2, 2025 •

edited

Loading