@oneuptime/common 13.0.1 → 13.0.3

package/Tests/App/Dashboard/ExceptionsLandingRedirect.test.tsx

@@ -0,0 +1,63 @@
+import ExceptionsLayout from "../../../../App/FeatureSet/Dashboard/src/Pages/Exceptions/Layout";
+import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import RouteMap, {
+  RouteUtil,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+import Route from "../../../Types/API/Route";
+import Navigation from "../../../UI/Utils/Navigation";
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { Location } from "react-router-dom";
+
+const PROJECT_ID: string = "10000000-0000-4000-8000-000000000001";
+
+interface NavigateSpy {
+  mock: {
+    calls: ReadonlyArray<ReadonlyArray<unknown>>;
+  };
+}
+
+function goTo(path: string): void {
+  window.history.pushState({}, "", path);
+  Navigation.setLocation({
+    pathname: path,
+    search: "",
+    hash: "",
+    state: null,
+    key: "test",
+  } as Location);
+}
+
+afterEach((): void => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("Exceptions landing redirect", () => {
+  test("a bare Exceptions URL opens the Unresolved list", () => {
+    const barePath: string = `/dashboard/${PROJECT_ID}/exceptions`;
+    goTo(barePath);
+
+    const navigate: NavigateSpy = jest
+      .spyOn(Navigation, "navigate")
+      .mockImplementation((): void => {});
+
+    render(<ExceptionsLayout {...({} as PageComponentProps)} />);
+
+    expect(navigate).toHaveBeenCalledTimes(1);
+
+    const destination: Route = navigate.mock.calls[0]![0] as Route;
+
+    expect(destination.toString()).toBe(
+      `/dashboard/${PROJECT_ID}/exceptions/unresolved`,
+    );
+    expect(destination.toString()).toBe(
+      RouteUtil.populateRouteParams(
+        RouteMap[PageMap.EXCEPTIONS] as Route,
+      ).toString(),
+    );
+  });
+});

package/Tests/App/Dashboard/FeedOrdering.test.ts

@@ -0,0 +1,150 @@
+import fs from "fs";
+import path from "path";
+import { describe, expect, test } from "@jest/globals";
+
+interface FeedImplementation {
+  name: string;
+  relativePath: string;
+}
+
+const DASHBOARD_COMPONENTS: string = path.join(
+  __dirname,
+  "..",
+  "..",
+  "..",
+  "..",
+  "App",
+  "FeatureSet",
+  "Dashboard",
+  "src",
+  "Components",
+);
+
+/*
+ * These eight implementations back every activity feed in the dashboard.
+ * ResourceFeed is parameterised across ten infrastructure and service-catalog
+ * resources; the other seven own the richer product feeds with custom icons
+ * and actions. Keep the inventory explicit so a newly added feed has to make
+ * a deliberate ordering decision and join this parity sweep.
+ */
+const FEED_IMPLEMENTATIONS: Array<FeedImplementation> = [
+  {
+    name: "Monitor",
+    relativePath: "Monitor/MonitorFeed.tsx",
+  },
+  {
+    name: "Alert",
+    relativePath: "Alert/AlertFeed.tsx",
+  },
+  {
+    name: "Alert episode",
+    relativePath: "AlertEpisode/AlertEpisodeFeed.tsx",
+  },
+  {
+    name: "Incident",
+    relativePath: "Incident/IncidentFeed.tsx",
+  },
+  {
+    name: "Incident episode",
+    relativePath: "IncidentEpisode/IncidentEpisodeFeed.tsx",
+  },
+  {
+    name: "Scheduled maintenance",
+    relativePath: "ScheduledMaintenance/ScheduledMaintenanceFeed.tsx",
+  },
+  {
+    name: "On-call policy",
+    relativePath: "OnCallPolicy/OnCallDutyPolicyFeed.tsx",
+  },
+  {
+    name: "Infrastructure and service catalog",
+    relativePath: "ResourceFeed/ResourceFeed.tsx",
+  },
+];
+
+function readSource(implementation: FeedImplementation): string {
+  return fs.readFileSync(
+    path.join(DASHBOARD_COMPONENTS, implementation.relativePath),
+    "utf8",
+  );
+}
+
+function findFeedImplementationPaths(directory: string): Array<string> {
+  return fs
+    .readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry: fs.Dirent): Array<string> => {
+      const absolutePath: string = path.join(directory, entry.name);
+
+      if (entry.isDirectory()) {
+        return findFeedImplementationPaths(absolutePath);
+      }
+
+      if (
+        !entry.name.endsWith(".tsx") ||
+        !fs
+          .readFileSync(absolutePath, "utf8")
+          .includes('import Feed from "Common/UI/Components/Feed/Feed"')
+      ) {
+        return [];
+      }
+
+      return [
+        path
+          .relative(DASHBOARD_COMPONENTS, absolutePath)
+          .split(path.sep)
+          .join("/"),
+      ];
+    });
+}
+
+describe("dashboard feed ordering parity", () => {
+  test("tracks every feed implementation", () => {
+    const expectedPaths: Array<string> = FEED_IMPLEMENTATIONS.map(
+      (implementation: FeedImplementation): string => {
+        return implementation.relativePath;
+      },
+    ).sort();
+
+    expect(findFeedImplementationPaths(DASHBOARD_COMPONENTS).sort()).toEqual(
+      expectedPaths,
+    );
+  });
+
+  test.each(FEED_IMPLEMENTATIONS)(
+    "$name requests the newest activity first",
+    (implementation: FeedImplementation) => {
+      const source: string = readSource(implementation);
+
+      expect(source).toContain("postedAt: SortOrder.Descending");
+      expect(source).not.toContain("postedAt: SortOrder.Ascending");
+      expect(source).not.toContain(".reverse()");
+      expect(source).toContain("skip: 0");
+      expect(source).toContain("limit,");
+      expect(source).not.toContain("LIMIT_PER_PROJECT");
+    },
+  );
+
+  test.each(FEED_IMPLEMENTATIONS)(
+    "$name uses the shared progressive feed UI",
+    (implementation: FeedImplementation) => {
+      const source: string = readSource(implementation);
+
+      expect(source).toContain(
+        'import Feed from "Common/UI/Components/Feed/Feed"',
+      );
+      expect(source).toContain(
+        'import useFeedItems from "Common/UI/Components/Feed/useFeedItems"',
+      );
+      expect(source).toContain("<Feed");
+      expect(source).toContain("hasMore={hasMore}");
+      expect(source).toContain("isLoadingMore={isLoadingMore}");
+      expect(source).toContain("onMore={loadMore}");
+    },
+  );
+
+  test("the monitor feed no longer stops at a one-off 50-item window", () => {
+    const monitorSource: string = readSource(FEED_IMPLEMENTATIONS[0]!);
+
+    expect(monitorSource).not.toContain("limit: 50");
+  });
+});

package/Tests/App/Dashboard/GoogleSecOpsConnectionsErrors.test.tsx

@@ -12,53 +12,103 @@ import {
   cleanup,
   fireEvent,
   render,
+  RenderResult,
   screen,
-  waitFor,
   within,
 } from "@testing-library/react";
-import React, { ReactElement } from "react";
+import React, { act, ReactElement } from "react";
 import { MemoryRouter } from "react-router-dom";
 import GoogleSecOpsConnectionsPage from "../../../../App/FeatureSet/Dashboard/src/Pages/SecurityEvents/GoogleSecOpsConnections";
 import GoogleSecOpsConnection from "../../../Models/DatabaseModels/GoogleSecOpsConnection";
 import Project from "../../../Models/DatabaseModels/Project";
 import Route from "../../../Types/API/Route";
 import ObjectID from "../../../Types/ObjectID";
+import ModelColumn from "../../../UI/Components/ModelTable/Column";
+import { ComponentProps as ModelTableProps } from "../../../UI/Components/ModelTable/ModelTable";
+import TableRow from "../../../UI/Components/Table/TableRow";
+import TableColumn from "../../../UI/Components/Table/Types/Column";
+import FieldType from "../../../UI/Components/Types/FieldType";
 import PermissionGate from "../../../UI/Utils/PermissionGate";
 import ProjectUtil from "../../../UI/Utils/Project";
 
-interface TableColumn {
-  title: string;
-  getElement?: (item: GoogleSecOpsConnection) => ReactElement;
-}
-
 let mockConnections: Array<GoogleSecOpsConnection> = [];
+let mockTableProps: ModelTableProps<GoogleSecOpsConnection> | undefined;
+let mockIsMobile: boolean = false;
 
 /*
- * Supply table rows while exercising the page's real cell, modal and copy
- * button. The table's API, pagination and editing controls are unrelated.
+ * Replace only the ModelTable data-loading boundary. The real TableRow decides
+ * action visibility, dispatches the selected row, and completes its loading
+ * state. The page's modal, buttons and clipboard behavior also remain real.
  */
 jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
   return {
     __esModule: true,
-    default: (props: { columns: Array<TableColumn> }): ReactElement => {
-      const errorColumn: TableColumn | undefined = props.columns.find(
-        (column: TableColumn): boolean => {
-          return column.title === "Last Error";
-        },
-      );
+    default: (props: ModelTableProps<GoogleSecOpsConnection>): ReactElement => {
+      mockTableProps = props;
+      const columns: Array<TableColumn<GoogleSecOpsConnection>> = [
+        ...props.columns.map(
+          (
+            column: ModelColumn<GoogleSecOpsConnection>,
+          ): TableColumn<GoogleSecOpsConnection> => {
+            return {
+              title: column.title,
+              type: column.type,
+              key: Object.keys(column.field)[0] as keyof GoogleSecOpsConnection,
+              getElement: column.getElement,
+              noValueMessage: column.noValueMessage,
+            };
+          },
+        ),
+        { title: "Actions", type: FieldType.Actions },
+      ];
+
+      if (mockIsMobile) {
+        return (
+          <div>
+            {mockConnections.map(
+              (connection: GoogleSecOpsConnection): ReactElement => {
+                return (
+                  <section key={connection._id} data-testid={connection.name}>
+                    <TableRow
+                      item={connection}
+                      columns={columns}
+                      actionButtons={props.actionButtons}
+                      isMobile={true}
+                    />
+                  </section>
+                );
+              },
+            )}
+          </div>
+        );
+      }
 
       return (
-        <div>
+        <table aria-label="Google SecOps Connections">
+          <thead>
+            <tr>
+              {columns.map(
+                (column: TableColumn<GoogleSecOpsConnection>): ReactElement => {
+                  return <th key={column.title}>{column.title}</th>;
+                },
+              )}
+            </tr>
+          </thead>
           {mockConnections.map(
             (connection: GoogleSecOpsConnection): ReactElement => {
               return (
-                <div key={connection._id} data-testid="connection-error">
-                  {errorColumn?.getElement?.(connection)}
-                </div>
+                <tbody key={connection._id} data-testid={connection.name}>
+                  <TableRow
+                    item={connection}
+                    columns={columns}
+                    actionButtons={props.actionButtons}
+                    isMobile={false}
+                  />
+                </tbody>
               );
             },
           )}
-        </div>
+        </table>
       );
     },
   };
@@ -99,40 +149,61 @@ const LONG_ERROR: string =
 
 const originalClipboard: PropertyDescriptor | undefined =
   Object.getOwnPropertyDescriptor(navigator, "clipboard");
-/*
- * `jest` here is the one imported from @jest/globals, whose fn() is generic
- * over the function type. Naming the result through ReturnType keeps that
- * type rather than the ambient @types/jest `Mock<Return, Args>`, which is a
- * different shape and does not accept it.
- */
 const writeText: ReturnType<typeof jest.fn<(text: string) => Promise<void>>> =
   jest.fn<(text: string) => Promise<void>>();
 
-function renderPage(error: string | null | undefined): void {
+function createConnection(
+  name: string,
+  error: string | null | undefined,
+): GoogleSecOpsConnection {
   const connection: GoogleSecOpsConnection = new GoogleSecOpsConnection();
-  connection._id = "22222222-2222-4222-8222-222222222222";
+  connection.id = ObjectID.generate();
+  connection.name = name;
   if (error !== undefined) {
+    // API responses can contain null even though the optional model field is string.
     connection.lastError = error as string;
   }
-  mockConnections = [connection];
+  return connection;
+}
 
+function pageElement(): ReactElement {
   const project: Project = new Project();
   project.id = PROJECT_ID;
-
-  render(
+  return (
     <MemoryRouter>
       <GoogleSecOpsConnectionsPage
         pageRoute={new Route("/dashboard/security-events/google-secops")}
         currentProject={project}
         hasPaymentMethod={true}
       />
-    </MemoryRouter>,
+    </MemoryRouter>
+  );
+}
+
+function renderPage(connections: Array<GoogleSecOpsConnection>): RenderResult {
+  mockConnections = connections;
+  return render(pageElement());
+}
+
+function openError(connectionName: string = "Production"): HTMLElement {
+  fireEvent.click(
+    within(screen.getByTestId(connectionName)).getByRole("button", {
+      name: "View Error",
+    }),
   );
+  act((): void => {
+    // Finish the modal's entry animation without relying on wall-clock timing.
+    jest.advanceTimersByTime(80);
+  });
+  return screen.getByRole("dialog", { name: "Last Error" });
 }
 
-describe("Google SecOps complete error messages", () => {
+describe("Google SecOps connection error actions", () => {
   beforeEach((): void => {
+    jest.useFakeTimers();
     mockConnections = [];
+    mockTableProps = undefined;
+    mockIsMobile = false;
     writeText.mockReset();
     writeText.mockResolvedValue();
     Object.defineProperty(navigator, "clipboard", {
@@ -145,6 +216,8 @@ describe("Google SecOps complete error messages", () => {
 
   afterEach((): void => {
     cleanup();
+    jest.clearAllTimers();
+    jest.useRealTimers();
     jest.restoreAllMocks();
   });
 
@@ -156,89 +229,195 @@ describe("Google SecOps complete error messages", () => {
     }
   });
 
-  test("copies the complete stored message directly from its shortened row preview", async (): Promise<void> => {
-    renderPage(LONG_ERROR);
+  test("replaces the Last Error column with an action while still fetching the stored error", (): void => {
+    renderPage([createConnection("Production", LONG_ERROR)]);
 
-    const row: HTMLElement = screen.getByTestId("connection-error");
-    expect(row.textContent).toContain("Google SecOps alerts fetch failed");
-    expect(row.textContent).not.toContain("Verify the instance resource name");
-    expect(row.textContent).not.toContain(LONG_ERROR);
-
-    fireEvent.click(screen.getByRole("button", { name: "Copy Error" }));
+    expect(
+      screen.queryByRole("columnheader", { name: "Last Error" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Actions" })).toBeVisible();
+    expect(mockTableProps?.selectMoreFields).toEqual(
+      expect.objectContaining({ lastError: true }),
+    );
 
-    await waitFor((): void => {
-      expect(writeText).toHaveBeenCalledTimes(1);
-      expect(writeText).toHaveBeenCalledWith(LONG_ERROR);
+    const row: HTMLElement = screen.getByTestId("Production");
+    const viewError: HTMLElement = within(row).getByRole("button", {
+      name: "View Error",
     });
-    expect(await screen.findByText("Copied!")).toBeVisible();
+    expect(viewError).toBeEnabled();
+    expect(viewError.closest("td")).toBe(row.querySelector("td:last-child"));
+    expect(row).not.toHaveTextContent("Google SecOps alerts fetch failed");
+    expect(screen.queryByRole("button", { name: "Copy Error" })).toBeNull();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
-  test("opens, copies and closes the full error without losing line breaks or trailing details", async (): Promise<void> => {
-    renderPage(LONG_ERROR);
-
-    fireEvent.click(screen.getByRole("button", { name: "View Full Error" }));
-
-    const dialog: HTMLElement = screen.getByRole("dialog", {
-      name: "Last Error",
-    });
-    const fullError: HTMLElement =
-      within(dialog).getByLabelText("Full error message");
-    expect(fullError.textContent).toBe(LONG_ERROR);
-    expect(dialog.querySelector("script")).toBeNull();
-    expect(fullError).toHaveAttribute("tabindex", "0");
-
-    fireEvent.click(within(dialog).getByRole("button", { name: "Copy Error" }));
-    await waitFor((): void => {
-      expect(writeText).toHaveBeenCalledWith(LONG_ERROR);
+  describe.each([
+    { layout: "desktop", isMobile: false },
+    { layout: "mobile", isMobile: true },
+  ])("$layout actions", ({ isMobile }: { isMobile: boolean }): void => {
+    beforeEach((): void => {
+      mockIsMobile = isMobile;
     });
 
-    fireEvent.click(
-      within(dialog).getAllByRole("button", { name: "Close" })[0]!,
+    test.each([undefined, null, ""])(
+      "shows no error action for a healthy connection with lastError=%s",
+      (error: string | null | undefined): void => {
+        renderPage([createConnection("Production", error)]);
+
+        expect(screen.getByTestId("Production")).toBeVisible();
+        expect(screen.queryByRole("button", { name: "View Error" })).toBeNull();
+        expect(screen.queryByRole("button", { name: "Copy Error" })).toBeNull();
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        expect(writeText).not.toHaveBeenCalled();
+      },
     );
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "View Full Error" }),
-    ).toBeVisible();
-  });
 
-  test.each(["Enter", " "])(
-    "copies the full message with the %s key",
-    async (key: string): Promise<void> => {
-      renderPage(LONG_ERROR);
-      fireEvent.keyDown(screen.getByRole("button", { name: "Copy Error" }), {
-        key,
+    test("opens and copies the complete multiline error, then can reopen after closing", async (): Promise<void> => {
+      renderPage([createConnection("Production", LONG_ERROR)]);
+
+      const dialog: HTMLElement = openError();
+      const fullError: HTMLElement =
+        within(dialog).getByLabelText("Full error message");
+      expect(fullError.textContent).toBe(LONG_ERROR);
+      expect(fullError.tagName).toBe("PRE");
+      expect(fullError).toHaveAttribute("tabindex", "0");
+      expect(dialog.querySelector("script")).toBeNull();
+
+      await act(async (): Promise<void> => {
+        fireEvent.click(
+          within(dialog).getByRole("button", { name: "Copy Error" }),
+        );
       });
-      await waitFor((): void => {
+      expect(writeText).toHaveBeenCalledTimes(1);
+      expect(writeText).toHaveBeenCalledWith(LONG_ERROR);
+      expect(within(dialog).getByText("Copied!")).toBeVisible();
+
+      act((): void => {
+        jest.advanceTimersByTime(1000);
+      });
+      expect(
+        within(dialog).getByRole("button", { name: "Copy Error" }),
+      ).toHaveTextContent("Copy Error");
+
+      fireEvent.click(
+        within(dialog).getAllByRole("button", { name: "Close" })[1]!,
+      );
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Copy Error" })).toBeNull();
+      expect(screen.getByRole("button", { name: "View Error" })).toBeEnabled();
+
+      // A missing action-completion callback leaves this button stuck loading.
+      expect(
+        within(openError()).getByLabelText("Full error message").textContent,
+      ).toBe(LONG_ERROR);
+    });
+
+    test.each(["Enter", " "])(
+      "copies the full message from the dialog with the %s key",
+      async (key: string): Promise<void> => {
+        renderPage([createConnection("Production", LONG_ERROR)]);
+        const dialog: HTMLElement = openError();
+        await act(async (): Promise<void> => {
+          fireEvent.keyDown(
+            within(dialog).getByRole("button", { name: "Copy Error" }),
+            {
+              key,
+            },
+          );
+        });
         expect(writeText).toHaveBeenCalledTimes(1);
         expect(writeText).toHaveBeenCalledWith(LONG_ERROR);
+      },
+    );
+
+    test("opens the selected connection's error and leaves healthy rows without the action", async (): Promise<void> => {
+      const firstError: string = "First tenant: permission denied";
+      const secondError: string = "Second tenant: instance not found";
+      renderPage([
+        createConnection("First tenant", firstError),
+        createConnection("Healthy tenant", undefined),
+        createConnection("Second tenant", secondError),
+      ]);
+
+      expect(
+        screen.getAllByRole("button", { name: "View Error" }),
+      ).toHaveLength(2);
+      expect(
+        within(screen.getByTestId("Healthy tenant")).queryByRole("button", {
+          name: "View Error",
+        }),
+      ).toBeNull();
+
+      const secondDialog: HTMLElement = openError("Second tenant");
+      expect(
+        within(secondDialog).getByLabelText("Full error message").textContent,
+      ).toBe(secondError);
+      await act(async (): Promise<void> => {
+        fireEvent.click(
+          within(secondDialog).getByRole("button", { name: "Copy Error" }),
+        );
       });
-    },
-  );
+      expect(writeText).toHaveBeenCalledWith(secondError);
+      fireEvent.click(
+        within(secondDialog).getAllByRole("button", { name: "Close" })[0]!,
+      );
 
-  test("keeps a short error readable and copyable", async (): Promise<void> => {
-    const error: string =
-      "Google SecOps alerts fetch failed (HTTP 403): permission denied";
-    renderPage(error);
-    expect(screen.getByText(error)).toBeVisible();
-    fireEvent.click(screen.getByRole("button", { name: "Copy Error" }));
-    await waitFor((): void => {
-      expect(writeText).toHaveBeenCalledWith(error);
+      const firstDialog: HTMLElement = openError("First tenant");
+      expect(
+        within(firstDialog).getByLabelText("Full error message").textContent,
+      ).toBe(firstError);
     });
-  });
 
-  test.each([undefined, null, ""])(
-    "shows no error actions for a healthy row with lastError=%s",
-    (error: string | null | undefined): void => {
-      renderPage(error);
-      expect(screen.getByTestId("connection-error")).toHaveTextContent("-");
+    test("hides a cleared error after refresh and opens the latest error if the connection fails again", (): void => {
+      const connection: GoogleSecOpsConnection = createConnection(
+        "Production",
+        "Previous failure",
+      );
+      const page: RenderResult = renderPage([connection]);
+
+      openError();
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+      connection.lastError = "";
+      page.rerender(pageElement());
+      expect(screen.queryByRole("button", { name: "View Error" })).toBeNull();
+
+      connection.lastError = "Latest failure after a successful poll";
+      page.rerender(pageElement());
       expect(
-        screen.queryByRole("button", { name: "Copy Error" }),
-      ).not.toBeInTheDocument();
+        within(openError()).getByLabelText("Full error message").textContent,
+      ).toBe(connection.lastError);
+    });
+
+    test("allows read-only members to view and copy errors while update actions remain disabled", async (): Promise<void> => {
+      jest.spyOn(PermissionGate, "check").mockReturnValue({
+        isAllowed: false,
+        disabledReason: "You do not have permission to update connections.",
+      });
+      const error: string =
+        "Google SecOps alerts fetch failed (HTTP 403): permission denied";
+      renderPage([createConnection("Production", error)]);
+
       expect(
-        screen.queryByRole("button", { name: "View Full Error" }),
-      ).not.toBeInTheDocument();
-      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-      expect(writeText).not.toHaveBeenCalled();
-    },
-  );
+        screen.getByRole("button", { name: "Test connection" }),
+      ).toBeDisabled();
+      expect(screen.getByRole("button", { name: "Run now" })).toBeDisabled();
+      expect(
+        screen.getByRole("button", { name: "Update Service Account JSON" }),
+      ).toBeDisabled();
+      expect(screen.getByRole("button", { name: "View Error" })).toBeEnabled();
+
+      const dialog: HTMLElement = openError();
+      expect(
+        within(dialog).getByLabelText("Full error message").textContent,
+      ).toBe(error);
+      await act(async (): Promise<void> => {
+        fireEvent.click(
+          within(dialog).getByRole("button", { name: "Copy Error" }),
+        );
+      });
+      expect(writeText).toHaveBeenCalledWith(error);
+    });
+  });
 });