Add app-store tests (#2465)

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.github/workflows/e2e.yml

@@ -7,7 +7,7 @@ on:
       - public/static/locales/**
 jobs:
   test:
-    timeout-minutes: 10
+    timeout-minutes: 15
     name: Testing ${{ matrix.node }} and ${{ matrix.os }}
     strategy:
       matrix:

apps/web/components/App.tsx

@@ -90,7 +90,11 @@ export default function App({
                 ) : (
                   <InstallAppButton
                     type={type}
-                    render={(buttonProps) => <Button {...buttonProps}>{t("install_app")}</Button>}
+                    render={(buttonProps) => (
+                      <Button data-testid="install-app-button" {...buttonProps}>
+                        {t("install_app")}
+                      </Button>
+                    )}
                   />
                 )}
                 {price !== 0 && (

apps/web/components/apps/AppCard.tsx

@@ -20,6 +20,7 @@ export default function AppCard(props: AppCardProps) {
         <div className="flex">
           <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
           <Button
+            data-testid={`app-store-app-card-${props.slug}`}
             color="secondary"
             className="ml-auto flex self-start"
             onClick={() => {

apps/web/components/apps/Categories.tsx

@@ -18,7 +18,9 @@ export default function AppStoreCategories({
       <div className="grid-col-1 grid gap-3 md:grid-flow-col">
         {categories.map((category) => (
           <Link key={category.name} href={"/apps/categories/" + category.name}>
-            <a className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
+            <a
+              data-testid={`app-store-category-${category.name}`}
+              className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
               <div className="min-w-24 -ml-5 text-center sm:ml-0">
                 <Image
                   alt={category.name}

apps/web/playwright/app-store.test.ts

@@ -0,0 +1,46 @@
+import { test } from "./lib/fixtures";
+
+test.describe("App Store - Authed", () => {
+  test.use({ storageState: "playwright/artifacts/proStorageState.json" });
+  test("Browse apple-calendar and try to install", async ({ page }) => {
+    await page.goto("/apps");
+    await page.click('[data-testid="app-store-category-calendar"]');
+    if (!page.url().includes("apps/categories/calendar")) {
+      await page.waitForNavigation({
+        url: (url) => {
+          console.log(url, url.pathname);
+          return url.pathname.includes("apps/categories/calendar");
+        },
+      });
+    }
+    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+    await page.waitForNavigation({
+      url: (url) => {
+        return url.pathname.includes("apps/apple-calendar");
+      },
+    });
+    await page.click('[data-testid="install-app-button"]');
+  });
+});
+
+test.describe("App Store - Unauthed", () => {
+  test("Browse apple-calendar and try to install", async ({ page }) => {
+    await page.goto("/apps");
+
+    await page.click('[data-testid="app-store-category-calendar"]');
+    if (!page.url().includes("apps/categories/calendar")) {
+      await page.waitForNavigation({
+        url: (url) => {
+          console.log(url, url.pathname);
+          return url.pathname.includes("apps/categories/calendar");
+        },
+      });
+    }
+    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+    await page.waitForNavigation({
+      url: (url) => {
+        return url.pathname.includes("/auth/login");
+      },
+    });
+  });
+});

packages/app-store/components.tsx

@@ -36,6 +36,7 @@ export const InstallAppButton = (
       <InstallAppButtonComponent
         render={() => (
           <Button
+            data-testid="install-app-button"
             color="primary"
             href={`${WEBAPP_URL}/auth/login?callbackUrl=${WEBAPP_URL + location.pathname + location.search}`}>
             {t("install_app")}