e2e: search and install (#600)

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

README.md

@@ -79,6 +79,17 @@ pnpm install
 pnpm build:desktop
 ```
 
+## Build:lite
+
+Builds a `.app` that is not codesigned or notarized. Ideal for local testing.
+
+```
+export CSC_IDENTITY_AUTO_DISCOVER=false
+export MAC_BUILD_TARGET=dir
+pnpm install
+pnpm build:desktop
+```
+
 ## Dev
 
 ```sh

modules/desktop/src/components/package-install-button/package-install-button.svelte

@@ -45,6 +45,7 @@
 </script>
 
 <Button
+  data-testid="install-button-{pkg.slug}"
   class="w-full border p-0 text-xs text-white {buttonSize === 'small' ? 'h-8' : 'h-10'}"
   type="plain"
   color={getColor(pkg.state)}

modules/desktop/src/components/package-install-button/package-version-selector.svelte

@@ -53,6 +53,7 @@
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="version-item flex items-center justify-start gap-x-1 text-xs"
+            data-testid="install-{idx === 0 && pkg.version === version ? 'latest' : version}"
             class:installable-version={!installedVersions.includes(version)}
             on:click={(evt) => handleClick(evt, version)}
           >

modules/desktop/src/components/search-popup-results/package-search-result.svelte

@@ -29,7 +29,7 @@
       : pkg.thumb_image_url}
     alt={pkg.name}
   />
-  <header class="flex-grow" on:click={() => gotoPackagePage()}>
+  <header data-testid="card-result-{pkg.slug}" class="flex-grow" on:click={() => gotoPackagePage()}>
     <h1>{pkg.full_name}</h1>
     <p class="text-xs line-clamp-2">{pkg.desc}</p>
   </header>

modules/desktop/src/components/search-popup-results/search-popup-results.svelte

@@ -45,10 +45,11 @@
 {#if $searching === true}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div id="bg-close" class="z-40" on:click={onClose} />
-  <section class="z-50">
+  <section class="z-50" data-testid="search-popup">
     <header class="flex border border-x-0 border-t-0 border-gray bg-black">
       <div class="relative w-full">
         <SearchInput
+          data-testid="search-input-popup"
           class="h-9  w-full rounded-sm"
           size="small"
           autofocus={true}

modules/desktop/src/components/side-menu/side-menu.svelte

@@ -12,7 +12,7 @@
   $: needsUpdateCount = $packageList.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
 </script>
 
-<aside class="border border-b-0 border-l-0 border-t-0 border-gray p-2">
+<aside id="side-menu" class="border border-b-0 border-l-0 border-t-0 border-gray p-2">
   <ul class="flex flex-col gap-1 px-1 pt-4">
     <MenuButton
       label={$t("tags.discover").toLowerCase()}

modules/desktop/src/components/top-bar/top-bar.svelte

@@ -22,7 +22,7 @@
   on:dblclick={topbarDoubleClick}
 >
   <ul class="flex h-10 items-center gap-1 pl-20 align-middle leading-10 text-gray">
-    <a href="/?tab=discover">
+    <a href="/?tab=discover" data-testid="home-button">
       <div class="home-btn w-12 text-center text-2xl">
         <i class="icon-tea-logo-iconasset-1" />
       </div>
@@ -43,6 +43,7 @@
   </ul>
   <div class="relative w-1/3 px-2">
     <SearchInput
+      data-testid="topbar-search-input"
       class="h-9 w-full rounded-sm border border-gray"
       size="small"
       placeholder={$t("store-search-placeholder")}

modules/desktop/test/specs/app.e2e.ts

@@ -1,9 +1,17 @@
 import { browser } from "wdio-electron-service";
-import { setupUtils } from "./utils.ts";
+import { setupUtils, sleep } from "./utils.ts";
+
+type utilType = ReturnType<typeof setupUtils>;
 
 describe("basic smoke test", () => {
+  let utils: utilType;
+
+  beforeEach(async () => {
+    utils = setupUtils(browser);
+    await utils.goHome();
+  });
+
   it("install brewkit from the made by tea tab", async () => {
-    const utils = setupUtils(browser);
     const { screen } = utils!;
 
     // app launches to discover screen by default - make sure Stable Diffusion is there
@@ -33,5 +41,46 @@ describe("basic smoke test", () => {
       )
     ).toExist();
     await expect(await screen.findByRole("button", { name: "OPEN IN TERMINAL" })).toExist();
+
+    const closeNotificationBtn = $(".close-notification");
+    await expect(closeNotificationBtn).toExist();
+    await closeNotificationBtn.click();
+    await expect(closeNotificationBtn).not.toExist();
+  });
+
+  it("search and install create-dmg", async () => {
+    const { screen } = utils!;
+
+    const fakeInput = await screen.findByTestId("topbar-search-input");
+    await fakeInput.click();
+
+    await (await screen.findByTestId("search-popup")).waitForExist();
+
+    const searchInput = await screen.findByTestId("search-input-popup");
+    await searchInput.setValue("create-dmg");
+
+    const packageFullname = "github.com/create-dmg/create-dmg";
+    const createDmgSlug = packageFullname.replace(/[^\w\s]/gi, "_").toLocaleLowerCase();
+    const createDmgCard = await utils.findSearchPackageCardBySlug(createDmgSlug);
+    await expect(createDmgCard).toExist();
+    createDmgCard.click();
+
+    await utils.packageDetailsLoaded();
+    await utils.uninstallPackageIfNeeded();
+
+    await utils.installLatestVersion();
+
+    await expect(
+      await screen.findByText(
+        /^Package github.com\/create-dmg\/create-dmg .* has been installed./,
+        {},
+        { timeout: 60000, interval: 1000 }
+      )
+    ).toExist();
+
+    const closeNotificationBtn = $(".close-notification");
+    await expect(closeNotificationBtn).toExist();
+    await closeNotificationBtn.click();
+    await expect(closeNotificationBtn).not.toExist();
   });
 });

modules/desktop/test/specs/utils.ts

@@ -1,4 +1,4 @@
-import testingLibraryWdio from "@testing-library/webdriverio";
+import * as testingLibraryWdio from "@testing-library/webdriverio";
 
 // work around for importing CommonJS module
 const { setupBrowser } = testingLibraryWdio;
@@ -21,6 +21,16 @@ export function setupUtils(browser: WebdriverIO.Browser) {
     return (await screen.findByTestId(`package-card-${slug}`)) as unknown as HTMLElement;
   };
 
+  //
+  // Search Popup
+  //
+
+  // Find a package card on a package list screen
+  const findSearchPackageCardBySlug = async (slug: string) => {
+    // Trying to find the anchor tag role doesn't work, so we have to find by test id of the div inside the anchor
+    return (await screen.findByTestId(`card-result-${slug}`)) as unknown as HTMLElement;
+  };
+
   //
   // Package Details Page
   //
@@ -44,15 +54,25 @@ export function setupUtils(browser: WebdriverIO.Browser) {
     const installButton = await findButton(/^INSTALL |^UPDATE/);
     installButton.click();
 
-    // install the latest version
+    const latestButton = await screen.findByTestId("install-latest");
-    const versionInstallButton = (await screen.findByText(/(latest)/)) as unknown as HTMLElement;
+    await latestButton.waitForExist();
-    versionInstallButton.click();
+    latestButton.click();
+  };
+
+  const goHome = async () => {
+    // await browser.url("/");
+    const homeButton = await screen.findByTestId("home-button");
+    await homeButton.click();
+    const homeMenu = $("#side-menu");
+    await homeMenu.waitForExist();
   };
 
   return {
     screen,
+    goHome,
     findButton,
     findPackageCardBySlug,
+    findSearchPackageCardBySlug,
     packageDetailsLoaded,
     uninstallPackageIfNeeded,
     installLatestVersion

modules/desktop/wdio.conf.ts

@@ -16,7 +16,7 @@ export const config: Options.Testrunner = {
       transpileOnly: true
     }
   },
-  specs: ["./test/specs/**/*.ts"],
+  specs: ["./test/specs/**/*.e2e.ts"],
   exclude: [
     // 'path/to/excluded/files'
   ],

modules/ui/src/button/button.svelte

@@ -15,6 +15,7 @@
 
 <div class="button-container">
   <button
+    data-testid={$$props["data-testid"] || "button"}
     type="button"
     class="w-full text-gray {clazz} {type} {color}"
     class:active

modules/ui/src/notification/notification.svelte

@@ -28,7 +28,7 @@
         }}>{notification.callback_label}</button
       >
     {/if}
-    <button class="icon-tea-x-btn mt-1 text-xs" on:click={onClose} />
+    <button class="close-notification icon-tea-x-btn mt-1 text-xs" on:click={onClose} />
   </div>
 </div>
 

modules/ui/src/search-input/search-input.svelte

@@ -53,6 +53,7 @@
     <i class="icon-search-icon" />
   </div>
   <input
+    data-testid={$$props["data-testid"] || "search-input"}
     bind:this={searchInput}
     type="search"
     class="flex-grow pb-2 text-sm"