From 1c4a9ed745f59fd138c0650cf3ca96748e821492 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Fri, 3 Apr 2026 00:07:40 +0200
Subject: [PATCH] fix(site): use async findBy queries in ChatModelAdminPanel
 stories (#23999)

> This PR was authored by Mux on behalf of @ibetitsmike.

Chromatic tests for `ChatModelAdminPanel` were failing because
synchronous
`getByRole`/`getByLabelText` calls were used after `userEvent.click()`
actions
that trigger navigation to a conditionally-rendered detail view. The
switches
and inputs in `ProviderForm` aren't in the DOM immediately after click,
so the
synchronous queries fail with "Unable to find an accessible element."

Changed all post-click `getByRole`/`getByLabelText` calls to their async
`findByRole`/`findByLabelText` equivalents across three stories:
`ProviderWithUserKeysEnabled`, `EnvPresetProviders`, and
`CreateAndUpdateProvider`.
---
 .../ChatModelAdminPanel.stories.tsx              | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ChatModelAdminPanel.stories.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ChatModelAdminPanel.stories.tsx
index ab662dcff3..fa84610123 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ChatModelAdminPanel.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ChatModelAdminPanel.stories.tsx
@@ -318,7 +318,9 @@ export const EnvPresetProviders: Story = {
 		).toBeInTheDocument();
 
 		// Navigate to Anthropic detail view and verify it's also env-managed.
-		await userEvent.click(body.getByRole("button", { name: /Anthropic/i }));
+		await userEvent.click(
+			await body.findByRole("button", { name: /Anthropic/i }),
+		);
 		await expect(
 			await body.findByText(
 				"This provider key is configured from deployment environment settings and cannot be edited in this UI.",
@@ -436,10 +438,10 @@ export const CreateAndUpdateProvider: Story = {
 		await userEvent.click(await body.findByRole("button", { name: /OpenAI/i }));
 
 		await expect(
-			body.getByRole("switch", { name: "Central API key" }),
+			await body.findByRole("switch", { name: "Central API key" }),
 		).toBeChecked();
 		expect(
-			body.getByRole("switch", { name: "Allow user API keys" }),
+			await body.findByRole("switch", { name: "Allow user API keys" }),
 		).not.toBeChecked();
 		expect(
 			body.queryByRole("switch", { name: "Use central key as fallback" }),
@@ -450,11 +452,11 @@ export const CreateAndUpdateProvider: Story = {
 			"sk-provider-key",
 		);
 		await userEvent.type(
-			body.getByLabelText("Base URL"),
+			await body.findByLabelText("Base URL"),
 			"https://proxy.example.com/v1",
 		);
 		await userEvent.click(
-			body.getByRole("button", { name: "Create provider config" }),
+			await body.findByRole("button", { name: "Create provider config" }),
 		);
 
 		await waitFor(() => {
@@ -478,7 +480,7 @@ export const CreateAndUpdateProvider: Story = {
 		});
 
 		await userEvent.click(
-			body.getByRole("switch", { name: "Allow user API keys" }),
+			await body.findByRole("switch", { name: "Allow user API keys" }),
 		);
 		await userEvent.click(
 			await body.findByRole("switch", { name: "Use central key as fallback" }),
@@ -547,7 +549,7 @@ export const ProviderWithUserKeysEnabled: Story = {
 		).toBeInTheDocument();
 		await userEvent.click(body.getByRole("button", { name: /OpenAI/i }));
 		await expect(
-			body.getByRole("switch", { name: "Allow user API keys" }),
+			await body.findByRole("switch", { name: "Allow user API keys" }),
 		).toBeChecked();
 		await expect(
 			await body.findByRole("switch", {