From 67edf9971b1006d1e63fc747967d16641c067c3f Mon Sep 17 00:00:00 2001
From: ABevier <awbevier@gmail.com>
Date: Mon, 15 May 2023 19:53:27 -0400
Subject: [PATCH] more e2e tuning (#614)

* more e2e tuning

* prettier
---
 modules/desktop/electron/libs/logger.ts       |  5 ++
 .../package-banner/package-banner.svelte      |  1 +
 modules/desktop/src/libs/stores/pkgs.ts       |  8 +--
 modules/desktop/test/specs/app.e2e.ts         | 60 ++++---------------
 modules/desktop/test/specs/utils.ts           | 55 +++++++++++------
 modules/desktop/test/specs/waitutils.ts       | 34 +++++++++++
 modules/desktop/wdio.conf.ts                  |  4 +-
 .../ui/src/notification/notification.svelte   |  6 +-
 8 files changed, 100 insertions(+), 73 deletions(-)
 create mode 100644 modules/desktop/test/specs/waitutils.ts

diff --git a/modules/desktop/electron/libs/logger.ts b/modules/desktop/electron/libs/logger.ts
index ef8a9e4..8aa811f 100644
--- a/modules/desktop/electron/libs/logger.ts
+++ b/modules/desktop/electron/libs/logger.ts
@@ -4,6 +4,11 @@ export const setSentryLogging = (sentry: any) => {
   const oldError = log.error;
 
   log.error = (...params: any[]) => {
+    if (process.env.TEST === "true") {
+      log.info(params);
+      return;
+    }
+
     oldError(params);
     sentry.captureException(params[0].message);
   };
diff --git a/modules/desktop/src/components/package-banner/package-banner.svelte b/modules/desktop/src/components/package-banner/package-banner.svelte
index 8bc86c6..8ffd5b2 100644
--- a/modules/desktop/src/components/package-banner/package-banner.svelte
+++ b/modules/desktop/src/components/package-banner/package-banner.svelte
@@ -125,6 +125,7 @@
             <ToolTip>
               <Button
                 slot="target"
+                data-testid="uninstall-button"
                 class="h-10"
                 type="plain"
                 color="blue"
diff --git a/modules/desktop/src/libs/stores/pkgs.ts b/modules/desktop/src/libs/stores/pkgs.ts
index 2d3e962..fdaf894 100644
--- a/modules/desktop/src/libs/stores/pkgs.ts
+++ b/modules/desktop/src/libs/stores/pkgs.ts
@@ -249,11 +249,9 @@ const uninstallPkg = async (pkg: GUIPackage) => {
       await deletePkg(pkg, v);
     }
 
-    await withDelay(() => {
-      updatePackage(pkg.full_name, {
-        installed_versions: []
-      });
-    }, 1000);
+    updatePackage(pkg.full_name, {
+      installed_versions: []
+    });
   } catch (error) {
     log.error(error);
     notificationStore.add({
diff --git a/modules/desktop/test/specs/app.e2e.ts b/modules/desktop/test/specs/app.e2e.ts
index 0d0e3bb..16007d3 100644
--- a/modules/desktop/test/specs/app.e2e.ts
+++ b/modules/desktop/test/specs/app.e2e.ts
@@ -1,5 +1,5 @@
 import { browser } from "wdio-electron-service";
-import { setupUtils, sleep } from "./utils.ts";
+import { setupUtils } from "./utils.ts";
 
 type utilType = ReturnType<typeof setupUtils>;
 
@@ -30,19 +30,10 @@ describe("basic smoke test", () => {
     // Be nice to devs running this over and over
     await utils.uninstallPackageIfNeeded();
 
-    await utils.installLatestVersion();
+    await utils.installLatestVersion("tea_xyz_brewkit");
 
-    //use findByText to wait for the install to complete
-    await expect(
-      await screen.findByText(
-        /^Package tea.xyz\/brewkit .* has been installed./,
-        {},
-        { timeout: 60000, interval: 1000 }
-      )
-    ).toExist();
+    await utils.verifyAndCloseNotification(/^Package tea.xyz\/brewkit .* has been installed./);
     await expect(await screen.findByRole("button", { name: "OPEN IN TERMINAL" })).toExist();
-
-    await utils.closeNotification();
   });
 
   it("search and install create-dmg", async () => {
@@ -58,17 +49,11 @@ describe("basic smoke test", () => {
     await utils.packageDetailsLoaded();
     await utils.uninstallPackageIfNeeded();
 
-    await utils.installLatestVersion();
+    await utils.installLatestVersion("github_com_create_dmg_create_dmg");
 
-    await expect(
-      await screen.findByText(
-        /^Package github.com\/create-dmg\/create-dmg .* has been installed./,
-        {},
-        { timeout: 60000, interval: 1000 }
-      )
-    ).toExist();
-
-    await utils.closeNotification();
+    await utils.verifyAndCloseNotification(
+      /^Package github.com\/create-dmg\/create-dmg .* has been installed./
+    );
   });
 
   it("should be able to install specific version", async () => {
@@ -79,42 +64,23 @@ describe("basic smoke test", () => {
     pnpmCard.click();
 
     await utils.uninstallPackageIfNeeded();
+    await utils.installSpecificVersion("pnpm_io", "8.0.0");
 
-    await utils.installSpecificVersion("8.0.0");
+    await utils.verifyAndCloseNotification(/^Package pnpm.io .* has been installed./);
 
-    await expect(
-      await screen.findByText(
-        /^Package pnpm.io .* has been installed./,
-        {},
-        { timeout: 60000, interval: 1000 }
-      )
-    ).toExist();
+    // Now test the update
+    await utils.goHome();
 
-    await utils.closeNotification();
-  });
-
-  it("should be able to update a package", async () => {
-    // this requires ^ to succeed first
-    const { screen } = utils!;
     const menuBtn = await screen.findByTestId("menu-button-updates-available");
     menuBtn.click();
 
     const header = await screen.findByText("available updates");
     await expect(header).toExist();
 
-    const updateBtn = await screen.findByTestId("install-button-pnpm_io");
+    const updateBtn = await utils.findByTestId("install-button-pnpm_io");
     await expect(updateBtn).toExist();
-
     updateBtn.click();
 
-    await expect(
-      await screen.findByText(
-        /^Package pnpm.io .* has been installed./,
-        {},
-        { timeout: 60000, interval: 1000 }
-      )
-    ).toExist();
-
-    await utils.closeNotification();
+    await utils.verifyAndCloseNotification(/^Package pnpm.io .* has been installed./);
   });
 });
diff --git a/modules/desktop/test/specs/utils.ts b/modules/desktop/test/specs/utils.ts
index 0c56a96..b276a1a 100644
--- a/modules/desktop/test/specs/utils.ts
+++ b/modules/desktop/test/specs/utils.ts
@@ -1,4 +1,5 @@
 import * as testingLibraryWdio from "@testing-library/webdriverio";
+import { waitForNotExist } from "./waitutils.ts";
 
 // work around for importing CommonJS module
 const { setupBrowser } = testingLibraryWdio;
@@ -11,6 +12,14 @@ export function setupUtils(browser: WebdriverIO.Browser) {
     return (await screen.findByRole("button", { name })) as unknown as HTMLElement;
   };
 
+  const findByTestId = async (testId: string) => {
+    return (await screen.findByTestId(
+      testId,
+      {},
+      { interval: 1000, timeout: 10000 }
+    )) as unknown as HTMLElement;
+  };
+
   //
   // Package List Page
   //
@@ -40,31 +49,34 @@ export function setupUtils(browser: WebdriverIO.Browser) {
   };
 
   const uninstallPackageIfNeeded = async () => {
-    const uninstallButton = (await screen.queryByRole("button", {
-      name: "UNINSTALL"
-    })) as unknown as HTMLElement;
+    const uninstallButton = (await screen.queryByTestId(
+      "uninstall-button"
+    )) as unknown as HTMLElement;
+    console.log(`will uninstall package = ${!!uninstallButton}`);
     if (uninstallButton) {
       uninstallButton.click();
-      // wait for the install button to show back up
-      await screen.findByRole("button", { name: /^INSTALL / }, { timeout: 60000, interval: 1000 });
+      // wait for the uninstall button to disappear
+      await waitForNotExist(() => screen.queryByTestId("uninstall-button"), { timeout: 20000 });
     }
   };
 
-  const installLatestVersion = async () => {
-    await installSpecificVersion("latest");
+  const installLatestVersion = async (slug: string) => {
+    await installSpecificVersion(slug, "latest");
   };
 
-  const installSpecificVersion = async (version: string) => {
-    const installButton = await findButton(/^INSTALL |^UPDATE/);
+  const installSpecificVersion = async (slug: string, version: string) => {
+    console.log(`Installing package: ${slug}@${version}`);
+
+    const installButton = await findByTestId(`install-button-${slug}`);
+    expect(installButton).toExist();
     installButton.click();
 
-    const versionButton = await screen.findByTestId(`install-${version}`);
-    await versionButton.waitForExist();
+    const versionButton = await findByTestId(`install-${version}`);
+    expect(versionButton).toExist();
     versionButton.click();
   };
 
   const goHome = async () => {
-    // await browser.url("/");
     const homeButton = await screen.findByTestId("home-button");
     await homeButton.click();
     const homeMenu = $("#side-menu");
@@ -82,10 +94,17 @@ export function setupUtils(browser: WebdriverIO.Browser) {
   };
 
   const closeNotification = async () => {
-    const closeNotificationBtn = $(".close-notification");
+    console.log("Closing notification");
+    const closeNotificationBtn = await findByTestId("close-notification");
     await expect(closeNotificationBtn).toExist();
-    await closeNotificationBtn.click();
-    await expect(closeNotificationBtn).not.toExist();
+    closeNotificationBtn.click();
+    await waitForNotExist(() => screen.queryByTestId("close-notification"));
+  };
+
+  // verify a notification matching the regex is shown and then close it
+  const verifyAndCloseNotification = async (regex: RegExp) => {
+    await expect(await screen.findByText(regex, {}, { timeout: 30000, interval: 1000 })).toExist();
+    await closeNotification();
   };
 
   return {
@@ -93,14 +112,14 @@ export function setupUtils(browser: WebdriverIO.Browser) {
     searchTerm,
     goHome,
     findButton,
+    findByTestId,
     findPackageCardBySlug,
     findSearchPackageCardBySlug,
     packageDetailsLoaded,
     uninstallPackageIfNeeded,
     installLatestVersion,
     installSpecificVersion,
-    closeNotification
+    closeNotification,
+    verifyAndCloseNotification
   };
 }
-
-export const sleep = (delayMs: number) => new Promise((resolve) => setTimeout(resolve, delayMs));
diff --git a/modules/desktop/test/specs/waitutils.ts b/modules/desktop/test/specs/waitutils.ts
new file mode 100644
index 0000000..b213665
--- /dev/null
+++ b/modules/desktop/test/specs/waitutils.ts
@@ -0,0 +1,34 @@
+export const sleep = (delayMs: number) => new Promise((resolve) => setTimeout(resolve, delayMs));
+
+export type WaitOpts = { timeout?: number; interval?: number };
+
+// wait for a query to return a non-truthy value
+export const waitForNotExist = async (
+  query: () => Promise<WebdriverIO.Element | null>,
+  opts: WaitOpts = {}
+) => {
+  return waitFor(async () => await expect(await query()).not.toExist(), opts);
+};
+
+export const waitFor = async (
+  action: () => Promise<void>,
+  { interval = 1000, timeout = 5000 }: WaitOpts = {}
+) => {
+  const start = Date.now();
+  let lastErr;
+
+  console.log("Wait For", { interval, timeout });
+
+  while (Date.now() - start < timeout) {
+    try {
+      await action();
+      return;
+    } catch (e) {
+      // swallow it and keep trying
+      lastErr = e;
+    }
+    await sleep(interval);
+  }
+
+  throw new Error(`waitFor timed out. Last error: ${lastErr}`);
+};
diff --git a/modules/desktop/wdio.conf.ts b/modules/desktop/wdio.conf.ts
index 4a40bb7..fd6880a 100644
--- a/modules/desktop/wdio.conf.ts
+++ b/modules/desktop/wdio.conf.ts
@@ -27,7 +27,7 @@ export const config: Options.Testrunner = {
       browserName: "chrome" // or "firefox", "microsoftedge", "safari"
     }
   ],
-  logLevel: "debug",
+  logLevel: "info",
   bail: 0,
   baseUrl: "http://localhost",
   waitforTimeout: 10000,
@@ -54,6 +54,6 @@ export const config: Options.Testrunner = {
     ui: "bdd",
     timeout: 120000
   },
-  specFileRetries: 3,
+  specFileRetries: 2,
   specFileRetriesDelay: 5
 };
diff --git a/modules/ui/src/notification/notification.svelte b/modules/ui/src/notification/notification.svelte
index 48871a4..11542f6 100644
--- a/modules/ui/src/notification/notification.svelte
+++ b/modules/ui/src/notification/notification.svelte
@@ -28,7 +28,11 @@
         }}>{notification.callback_label}</button
       >
     {/if}
-    <button class="close-notification icon-tea-x-btn mt-1 text-xs" on:click={onClose} />
+    <button
+      data-testid="close-notification"
+      class="close-notification icon-tea-x-btn mt-1 text-xs"
+      on:click={onClose}
+    />
   </div>
 </div>