[E2E][TEST] Add tests for thirdparty apps (#4708)

* changeset

* add tests for installing and removing app

* add test ids

.changeset/bright-phones-agree.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add tests for thirdparty apps

playwright/data/e2eTestData.ts

@@ -27,24 +27,24 @@ export const DISCOUNTS = {
     name: "e2e promotion to be edited",
     type: "Catalog",
     id: "UHJvbW90aW9uOjI0MGVkZGVkLWYzMTAtNGUzZi1iNTlmLTFlMGFkYWE2ZWFkYg=="
-},
-promotionWithoutRulesToBeDeleted: {
-  id: "UHJvbW90aW9uOjRmNTQwMDc1LTZlZGMtNDI1NC1hY2U2LTQ2MzdlMGYxZWJhOA==",
-  name: "e2e Order predicate promotion without rules",
-  type: "Order",
+  },
+  promotionWithoutRulesToBeDeleted: {
+    id: "UHJvbW90aW9uOjRmNTQwMDc1LTZlZGMtNDI1NC1hY2U2LTQ2MzdlMGYxZWJhOA==",
+    name: "e2e Order predicate promotion without rules",
+    type: "Order",
 
-},
-promotionWithRulesToBeDeleted: {
-  name: "e2e Catalog predicate promotion with rules",
-  id: "UHJvbW90aW9uOjY0N2M2MzdhLTZjNTEtNDYxZC05MjQ2LTc0YTY0OGM0ZjAxNA==",
-},
-cataloguePromotion:{
-  name: "e2e Catalog promotion for adding rules",
-  id: "UHJvbW90aW9uOjNmODZjZDAwLTUwNWEtNGVkNC04ZTliLTJmOGI4NGM3NGNlOQ==",
-},
-orderPromotion: {
-  name: "e2e Order promotion for adding rules",
-  id: "UHJvbW90aW9uOjJlM2VhNDkyLTRhMTAtNDYzOS05MWVmLTc1YzQ1OTUxNGQyMQ==",
+  },
+  promotionWithRulesToBeDeleted: {
+    name: "e2e Catalog predicate promotion with rules",
+    id: "UHJvbW90aW9uOjY0N2M2MzdhLTZjNTEtNDYxZC05MjQ2LTc0YTY0OGM0ZjAxNA==",
+  },
+  cataloguePromotion: {
+    name: "e2e Catalog promotion for adding rules",
+    id: "UHJvbW90aW9uOjNmODZjZDAwLTUwNWEtNGVkNC04ZTliLTJmOGI4NGM3NGNlOQ==",
+  },
+  orderPromotion: {
+    name: "e2e Order promotion for adding rules",
+    id: "UHJvbW90aW9uOjJlM2VhNDkyLTRhMTAtNDYzOS05MWVmLTc1YzQ1OTUxNGQyMQ==",
   },
 }
 
@@ -84,8 +84,8 @@ export const CATEGORIES = {
     ],
   },
   e2eCategory: {
-   id: "Q2F0ZWdvcnk6NTEx",
-  name: "e2e category"
+    id: "Q2F0ZWdvcnk6NTEx",
+    name: "e2e category"
   }
 };
 export const COLLECTIONS = {
@@ -202,7 +202,7 @@ export const PRODUCTS = {
     id: "UHJvZHVjdDo3OQ==",
     name: "Bean Juice"
   },
-  e2eProduct2:{
+  e2eProduct2: {
     id: "UHJvZHVjdDoxMTU=",
     name: "Black Hoodie"
   },
@@ -372,3 +372,11 @@ export const USERS = {
     lastName: "user",
   },
 };
+
+export const APPS = {
+  appToBeDeleted: {
+    id: "QXBwOjY2",
+    name: "Adyen",
+    info: "App used in delete app test",
+  }
+}

playwright/data/url.ts

@@ -1,7 +1,7 @@
 export const URL_LIST = {
   addProduct: "products/add",
   addPageType: "pages/add?page-type-id=",
-  apps: "custom-apps/",
+  apps: "apps/",
   attributes: "attributes/",
   addAttributes: "attributes/add",
   categories: "categories/",

playwright/pages/appInstallationPage.ts

@@ -0,0 +1,13 @@
+import type { Page } from "@playwright/test";
+
+export class AppInstallationPage {
+    readonly page: Page;
+
+    constructor(
+        page: Page,
+        readonly appInstallationPageHeader = page.getByTestId("app-installation-page-header"),
+        readonly installAppButton = page.getByTestId("install-app-button"),
+    ) {
+        this.page = page;
+    }
+}

playwright/pages/appPageThirdparty.ts

@@ -0,0 +1,28 @@
+import type { Page } from "@playwright/test";
+import { BasePage } from "@pages/basePage";
+import { URL_LIST } from "@data/url";
+import { DeleteDialog } from "./dialogs/deleteDialog";
+
+
+export class AppPage extends BasePage {
+    readonly page: Page;
+    readonly basePage: BasePage;
+    readonly deleteAppDialog: DeleteDialog;
+
+
+    constructor(
+        page: Page,
+        readonly deleteButton = page.getByText("Delete"),
+    ) {
+        super(page);
+        this.page = page;
+        this.basePage = new BasePage(page);
+        this.deleteAppDialog = new DeleteDialog(page);
+    }
+
+    async goToExistingAppPage(appId: string) {
+        const appUrl = URL_LIST.apps + appId;
+        await this.page.goto(appUrl);
+    }
+
+}

playwright/pages/appsPage.ts

@@ -1,15 +1,36 @@
 import type { Page } from "@playwright/test";
+import { URL_LIST } from "@data/url";
+import { BasePage } from "@pages/basePage";
 
-export class AppsPage {
+export class AppsPage extends BasePage {
   readonly page: Page;
+  readonly basePage: BasePage;
 
   constructor(
     page: Page,
     readonly installExternalAppButton = page.getByTestId(
       "add-app-from-manifest",
     ),
     readonly appsLogosList = page.getByTestId("app-logo"),
+    readonly appManifestUrlInput = page
+      .getByTestId("manifest-url-input")
+      .locator("input"),
+    readonly installAppFromManifestButton = page.getByTestId("install-app-from-manifest"),
+    readonly installedAppRow = page.getByTestId("apps:installed-app-row"),
+    readonly appKlaviyo = page.getByTestId("app-klaviyo"),
+    readonly appAdyen = page.getByTestId("app-adyen"),
   ) {
+    super(page);
     this.page = page;
+    this.basePage = new BasePage(page);
   }
+
+  async gotoAppsList() {
+    await this.page.goto(URL_LIST.apps);
+  }
+
+  async typeManifestUrl(manifestUrl: string) {
+    await this.appManifestUrlInput.fill(manifestUrl);
+  }
+
 }

playwright/tests/apps.spec.ts

@@ -0,0 +1,53 @@
+import { AppsPage } from "@pages/appsPage";
+import { AppInstallationPage } from "@pages/appInstallationPage";
+import { expect, test } from "@playwright/test";
+import { AppPage } from "@pages/appPageThirdparty";
+import { APPS } from "@data/e2eTestData";
+
+test.use({ storageState: "playwright/.auth/admin.json" });
+let appsPage: AppsPage;
+let installationPage: AppInstallationPage;
+let appPage: AppPage;
+
+test("TC: SALEOR_119 User should be able to install and configure app from manifest @e2e", async ({
+  page,
+}) => {
+  const appsPage = new AppsPage(page);
+  const installationPage = new AppInstallationPage(page);
+
+  await appsPage.gotoAppsList();
+  await expect(appsPage.installExternalAppButton).toBeVisible();
+  await appsPage.installExternalAppButton.click();
+  await appsPage.typeManifestUrl("https://klaviyo.saleor.app/api/manifest");
+  await appsPage.installAppFromManifestButton.click();
+  await expect(installationPage.appInstallationPageHeader).toHaveText("You are about to install Klaviyo");
+  await installationPage.installAppButton.click();
+  await appsPage.expectSuccessBanner();
+  await expect(appsPage.installedAppRow.first()).toBeVisible();
+  await expect(appsPage.appKlaviyo).toContainText("Klaviyo");
+  await appsPage.appKlaviyo.click();
+
+  const iframeLocator = page.frameLocator("iframe");
+
+  await expect(iframeLocator.getByLabel("PUBLIC_TOKEN")).toBeVisible();
+  await iframeLocator.getByLabel("PUBLIC_TOKEN").fill("test_token");
+  await iframeLocator.getByText("Save").click();
+  await appsPage.expectSuccessBanner();
+
+});
+
+test("TC: SALEOR_120 User should be able to delete thirdparty app @e2e", async ({
+  page,
+}) => {
+  const appsPage = new AppsPage(page);
+  const appPage = new AppPage(page);
+
+  await appPage.goToExistingAppPage(APPS.appToBeDeleted.id);
+  await expect(appPage.pageHeader).toContainText("Adyen");
+  await appPage.deleteButton.click();
+  await appPage.deleteAppDialog.clickDeleteButton();
+  await appsPage.expectSuccessBanner();
+  await expect(appsPage.installedAppRow.first()).toBeVisible();
+  await expect(appsPage.appAdyen).not.toBeVisible();
+
+});

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -70,6 +70,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                   intl.formatMessage(messages.title, { name })
                 )
               }
+              data-test-id="app-installation-page-header"
             />
             <CardContent className={classes.installCard}>
               {loading ? (
@@ -154,7 +155,11 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             <Button variant="secondary" onClick={navigateToAppsList}>
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
-            <Button variant="primary" onClick={onSubmit}>
+            <Button
+              variant="primary"
+              onClick={onSubmit}
+              data-test-id="install-app-button"
+            >
               <FormattedMessage {...messages.installButton} />
             </Button>
           </Box>

src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx

@@ -33,9 +33,9 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
       state={{ from: location.pathname }}
       className={sprinkles({ display: "contents" })}
       inline={false}
-      data-testid={"apps:installed-app-row"}
     >
       <List.Item
+        data-test-id={"apps:installed-app-row"}
         padding={4}
         borderTopStyle="solid"
         borderWidth={1}
@@ -64,7 +64,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
             alignItems="flex-start"
           >
             <Box display="flex" gap={2}>
-              <Text variant="bodyStrong">{app.name}</Text>
+              <Text
+                variant="bodyStrong"
+                data-test-id={"app-" + app.name?.toLowerCase().replace(" ", "")}
+              >
+                {app.name}
+              </Text>
               {isExternal && (
                 <Chip
                   data-test-id="app-external-label"