Fix integration tests

Lichtblick-Suite · Apr 22, 2024 · 6c8ba13 · 6c8ba13
1 parent f9c4b2c
commit 6c8ba13
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 31 deletions.
diff --git a/desktop/integration-test/menus.test.ts b/desktop/integration-test/menus.test.ts
@@ -4,43 +4,44 @@
 
 import { signal } from "@foxglove/den/async";
 
-import { launchApp } from "./launchApp";
+import { AppType, launchApp } from "./launchApp";
 
 describe("menus", () => {
-  it("should display the data source dialog when clicking File > Open", async () => {
-    await using app = await launchApp();
-    // The Open dialog shows up automatically; close it
+  const closeDataSourceDialogAfterAppLaunch = async (app: AppType) => {
     await expect(app.renderer.getByTestId("DataSourceDialog").isVisible()).resolves.toBe(true);
     await app.renderer.getByTestId("DataSourceDialog").getByTestId("CloseIcon").click();
-    await expect(app.renderer.getByTestId("DataSourceDialog").count()).resolves.toBe(0);
+    await expect(app.renderer.getByTestId("DataSourceDialog").isVisible()).resolves.toBe(false);
+  };
 
-    // Click "File > Open" and the dialog should appear again
-    await app.main.evaluate(async ({ Menu }) => {
-      const menu = Menu.getApplicationMenu();
-      menu?.getMenuItemById("fileMenu")?.submenu?.getMenuItemById("open")?.click();
-    });
-    await app.renderer.waitForSelector('[data-testid="DataSourceDialog"]', { state: "visible" });
-  }, 15_000);
+  it("should display the data source dialog when clicking File > Open", async () => {
+    await using app = await launchApp();
+
+    await closeDataSourceDialogAfterAppLaunch(app);
+
+    await app.renderer.getByTestId("AppMenuButton").click();
+    await app.renderer.getByTestId("app-menu-file").click();
+    await app.renderer.getByTestId("menu-item-open").click();
+
+    await expect(app.renderer.getByTestId("DataSourceDialog").isVisible()).resolves.toBe(true);
+  });
 
   it("should display the Open Connection screen when clicking File > Open Connection", async () => {
     await using app = await launchApp();
-    // The Open dialog shows up automatically; close it
-    await expect(app.renderer.getByTestId("DataSourceDialog").isVisible()).resolves.toBe(true);
-    await expect(app.renderer.getByTestId("OpenConnection").count()).resolves.toBe(0);
-    await app.renderer.getByTestId("DataSourceDialog").getByTestId("CloseIcon").click();
-    await expect(app.renderer.getByTestId("DataSourceDialog").count()).resolves.toBe(0);
 
-    // Click "File > Open Connection" and the Open Connection screen should appear
-    await app.main.evaluate(async ({ Menu }) => {
-      const menu = Menu.getApplicationMenu();
-      menu?.getMenuItemById("fileMenu")?.submenu?.getMenuItemById("openConnection")?.click();
-    });
-    await app.renderer.waitForSelector('[data-testid="OpenConnection"]', { state: "visible" });
-  }, 15_000);
+    await closeDataSourceDialogAfterAppLaunch(app);
+
+    await app.renderer.getByTestId("AppMenuButton").click();
+    await app.renderer.getByTestId("app-menu-file").click();
+    await app.renderer.getByTestId("menu-item-open-connection").click();
+
+    await expect(app.renderer.getByTestId("OpenConnection").count()).resolves.toBe(1);
+  });
 
   it("should open the file chooser when clicking File > Open Local File", async () => {
     await using app = await launchApp();
 
+    await closeDataSourceDialogAfterAppLaunch(app);
+
     // The page is loaded as a file:// URL in the test, so showOpenFilePicker is not available and we need to mock it.
     // If it were available we could use `app.renderer.waitForEvent("filechooser")` instead.
     const openFilePickerCalled = signal<boolean>();
@@ -49,12 +50,10 @@ describe("menus", () => {
       return [];
     });
 
-    // Click "File > Open Connection" and the Open Connection screen should appear
-    await app.main.evaluate(async ({ Menu }) => {
-      const menu = Menu.getApplicationMenu();
-      menu?.getMenuItemById("fileMenu")?.submenu?.getMenuItemById("openLocalFile")?.click();
-    });
+    await app.renderer.getByTestId("AppMenuButton").click();
+    await app.renderer.getByTestId("app-menu-file").click();
+    await app.renderer.getByTestId("menu-item-open-local-file").click();
 
     await expect(openFilePickerCalled).resolves.toBe(true);
-  }, 15_000);
+  });
 });
diff --git a/packages/studio-base/src/components/AppBar/AppMenu.tsx b/packages/studio-base/src/components/AppBar/AppMenu.tsx
@@ -70,6 +70,7 @@ export function AppMenu(props: AppMenuProps): JSX.Element {
         type: "item",
         label: t("open"),
         key: "open",
+        dataTestId: "menu-item-open",
         onClick: () => {
           dialogActions.dataSource.open("start");
           handleNestedMenuClose();
@@ -79,6 +80,7 @@ export function AppMenu(props: AppMenuProps): JSX.Element {
         type: "item",
         label: t("openLocalFile"),
         key: "open-file",
+        dataTestId: "menu-item-open-local-file",
         onClick: () => {
           handleNestedMenuClose();
           dialogActions.openFile.open().catch(console.error);
@@ -88,6 +90,7 @@ export function AppMenu(props: AppMenuProps): JSX.Element {
         type: "item",
         label: t("openConnection"),
         key: "open-connection",
+        dataTestId: "menu-item-open-connection",
         onClick: () => {
           dialogActions.dataSource.open("connection");
           handleNestedMenuClose();

diff --git a/packages/studio-base/src/components/AppBar/NestedMenuItem.tsx b/packages/studio-base/src/components/AppBar/NestedMenuItem.tsx
@@ -104,6 +104,7 @@ export function NestedMenuItem(
                   className={classes.menuItem}
                   key={item.key}
                   onClick={item.onClick}
+                  data-testid={item.dataTestId}
                   disabled={item.disabled}
                 >
                   {item.label}

diff --git a/packages/studio-base/src/components/AppBar/index.tsx b/packages/studio-base/src/components/AppBar/index.tsx
@@ -198,6 +198,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
                 className={cx(classes.logo, { "Mui-selected": appMenuOpen })}
                 color="inherit"
                 id="app-menu-button"
+                data-testid="AppMenuButton"
                 title="Menu"
                 aria-controls={appMenuOpen ? "app-menu" : undefined}
                 aria-haspopup="true"

diff --git a/packages/studio-base/src/components/AppBar/types.ts b/packages/studio-base/src/components/AppBar/types.ts
@@ -17,6 +17,7 @@ export type AppBarMenuItem =
       onClick?: MouseEventHandler<HTMLElement>;
       external?: boolean;
       icon?: ReactNode;
+      dataTestId?: string;
     }
   | { type: "subheader"; label: ReactNode; key: string }
   | { type: "divider" };
diff --git a/packages/studio-base/src/components/DataSourceDialog/DataSourceDialog.tsx b/packages/studio-base/src/components/DataSourceDialog/DataSourceDialog.tsx
@@ -135,7 +135,7 @@ export function DataSourceDialog(props: DataSourceDialogProps): JSX.Element {
       }}
     >
       <IconButton className={classes.closeButton} onClick={onModalClose} edge="end">
-        <CloseIcon />
+        <CloseIcon data-testid="CloseIcon" />
       </IconButton>
       <Stack
         flexGrow={1}