From 9ed666a475a28ef94da46769001cd5dfaac56397 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 14 Apr 2022 09:30:38 +0530
Subject: [PATCH] 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               |  2 +-
 apps/web/components/App.tsx             |  6 +++-
 apps/web/components/apps/AppCard.tsx    |  1 +
 apps/web/components/apps/Categories.tsx |  4 ++-
 apps/web/playwright/app-store.test.ts   | 46 +++++++++++++++++++++++++
 packages/app-store/components.tsx       |  1 +
 6 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/playwright/app-store.test.ts

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 1441aa26..be1360f6 100644
--- a/.github/workflows/e2e.yml
+++ b/.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:
diff --git a/apps/web/components/App.tsx b/apps/web/components/App.tsx
index 627dbb09..7b6b816b 100644
--- a/apps/web/components/App.tsx
+++ b/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 && (
diff --git a/apps/web/components/apps/AppCard.tsx b/apps/web/components/apps/AppCard.tsx
index f50ea3b8..2549b5e4 100644
--- a/apps/web/components/apps/AppCard.tsx
+++ b/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={() => {
diff --git a/apps/web/components/apps/Categories.tsx b/apps/web/components/apps/Categories.tsx
index 77a718b6..8b4f563e 100644
--- a/apps/web/components/apps/Categories.tsx
+++ b/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}
diff --git a/apps/web/playwright/app-store.test.ts b/apps/web/playwright/app-store.test.ts
new file mode 100644
index 00000000..22b1309e
--- /dev/null
+++ b/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");
+      },
+    });
+  });
+});
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index 19401357..05b6453d 100644
--- a/packages/app-store/components.tsx
+++ b/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")}