From 3a01c441fbad0dcb46ea5bbda4fd75ce29c03f55 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 27 Oct 2022 14:50:08 +0530
Subject: [PATCH] feat(testing): Stabalized airtable import and minor cleanups

---
 packages/nc-gui/pages/index/index/index.vue   |  6 ++-
 scripts/playwright/constants/index.ts         |  4 ++
 .../playwright/pages/Dashboard/Grid/index.ts  | 38 ++++++++++++-------
 scripts/playwright/pages/Dashboard/index.ts   |  3 ++
 .../playwright/pages/ProjectsPage/index.ts    | 29 +++++++++++---
 scripts/playwright/playwright.config.ts       |  3 --
 scripts/playwright/quickTests/commonTest.ts   |  2 +-
 scripts/playwright/tests/import.spec.ts       |  8 ++--
 8 files changed, 64 insertions(+), 29 deletions(-)
 create mode 100644 scripts/playwright/constants/index.ts

diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 1695b9892d..4115a7e9a5 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -142,7 +142,10 @@ const copyProjectMeta = async () => {
 </script>
 
 <template>
-  <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
+  <div
+    class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
+    pw-data="projects-container"
+  >
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
       <span class="text-4xl nc-project-page-title" @dblclick="copyProjectMeta">{{ $t('title.myProject') }}</span>
     </h1>
@@ -163,6 +166,7 @@ const copyProjectMeta = async () => {
             v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
+            pw-data="projects-reload-button"
             @click="loadProjects"
           />
         </div>
diff --git a/scripts/playwright/constants/index.ts b/scripts/playwright/constants/index.ts
new file mode 100644
index 0000000000..352d056e67
--- /dev/null
+++ b/scripts/playwright/constants/index.ts
@@ -0,0 +1,4 @@
+const airtableApiKey =  "keyn1MR87qgyUsYg4";
+const airtableApiBase =  "https://airtable.com/shr4z0qmh6dg5s3eB";
+
+export { airtableApiKey, airtableApiBase };
\ No newline at end of file
diff --git a/scripts/playwright/pages/Dashboard/Grid/index.ts b/scripts/playwright/pages/Dashboard/Grid/index.ts
index e14278830e..6174768850 100644
--- a/scripts/playwright/pages/Dashboard/Grid/index.ts
+++ b/scripts/playwright/pages/Dashboard/Grid/index.ts
@@ -64,10 +64,12 @@ export class GridPage extends BasePage {
     index = 0,
     columnHeader = "Title",
     value,
+    networkValidation = true,
   }: {
     index?: number;
     columnHeader?: string;
     value?: string;
+    networkValidation?: boolean;
   } = {}) {
     const rowValue = value ?? `Row ${index}`;
     const rowCount = await this.get().locator(".nc-grid-row").count();
@@ -84,22 +86,28 @@ export class GridPage extends BasePage {
       .locator(`span[title="${columnHeader}"]`)
       .click();
 
-    await this.waitForResponse({
-      uiAction: clickOnColumnHeaderToSave,
-      requestUrlPathToMatch: "api/v1/db/data/noco",
-      httpMethodsToMatch: ["POST"],
-      responseJsonMatcher: (resJson) => resJson?.[columnHeader] === value,
-    });
+    if (networkValidation) {
+      await this.waitForResponse({
+        uiAction: clickOnColumnHeaderToSave,
+        requestUrlPathToMatch: "api/v1/db/data/noco",
+        httpMethodsToMatch: ["POST"],
+        responseJsonMatcher: (resJson) => resJson?.[columnHeader] === value,
+      });
+    } else {
+      await this.rootPage.waitForTimeout(300);
+    }
   }
 
   async editRow({
     index = 0,
     columnHeader = "Title",
     value,
+    networkValidation = true,
   }: {
     index?: number;
     columnHeader?: string;
     value: string;
+    networkValidation?: boolean;
   }) {
     await this._fillRow({ index, columnHeader, value });
 
@@ -108,12 +116,16 @@ export class GridPage extends BasePage {
       .locator(`span[title="${columnHeader}"]`)
       .click();
 
-    await this.waitForResponse({
-      uiAction: clickOnColumnHeaderToSave,
-      requestUrlPathToMatch: "api/v1/db/data/noco",
-      httpMethodsToMatch: ["PATCH"],
-      responseJsonMatcher: (resJson) => resJson?.[columnHeader] === value,
-    });
+    if (networkValidation) {
+      await this.waitForResponse({
+        uiAction: clickOnColumnHeaderToSave,
+        requestUrlPathToMatch: "api/v1/db/data/noco",
+        httpMethodsToMatch: ["PATCH"],
+        responseJsonMatcher: (resJson) => resJson?.[columnHeader] === value,
+      });
+    } else {
+      await this.rootPage.waitForTimeout(300);
+    }
   }
 
   async verifyRow({ index }: { index: number }) {
@@ -314,4 +326,4 @@ export class GridPage extends BasePage {
       param.role === "creator" || param.role === "editor" ? 1 : 0
     );
   }
-}
+}
\ No newline at end of file
diff --git a/scripts/playwright/pages/Dashboard/index.ts b/scripts/playwright/pages/Dashboard/index.ts
index 9618810b6d..808112c0c5 100644
--- a/scripts/playwright/pages/Dashboard/index.ts
+++ b/scripts/playwright/pages/Dashboard/index.ts
@@ -15,6 +15,7 @@ import { ToolbarPage } from "./common/Toolbar";
 import { ImportAirtablePage } from "./Import/Airtable";
 import { ImportTemplatePage } from "./Import/ImportTemplate";
 import { WebhookFormPage } from "./WebhookForm";
+import { ProjectsPage } from "../ProjectsPage";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -85,6 +86,8 @@ export class DashboardPage extends BasePage {
 
   async clickHome() {
     await this.rootPage.locator('[data-cy="nc-noco-brand-icon"]').click();
+    const projectsPage = new ProjectsPage(this.rootPage);
+    await projectsPage.waitToBeRendered();
   }
 
   async waitForTabRender({
diff --git a/scripts/playwright/pages/ProjectsPage/index.ts b/scripts/playwright/pages/ProjectsPage/index.ts
index 6b5a3c70a1..66d54750e5 100644
--- a/scripts/playwright/pages/ProjectsPage/index.ts
+++ b/scripts/playwright/pages/ProjectsPage/index.ts
@@ -13,7 +13,7 @@ export class ProjectsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator("html");
+    return this.rootPage.locator('[pw-data="projects-container"]');
   }
 
   // create project
@@ -27,8 +27,7 @@ export class ProjectsPage extends BasePage {
     withoutPrefix?: boolean;
   }) {
     if(!withoutPrefix) name = this.prefixTitle(name);
-    // fix me! wait for page to be rendered completely
-    await this.rootPage.waitForTimeout(1000);
+
     await this.rootPage.locator(".nc-new-project-menu").click();
 
     const createProjectMenu = await this.rootPage.locator(
@@ -54,6 +53,26 @@ export class ProjectsPage extends BasePage {
     await this.rootPage.waitForTimeout(2000);
   }
 
+  async reloadProjects() {
+    const reloadUiAction = this.get().locator('[pw-data="projects-reload-button"]').click();
+    await this.waitForResponse(
+      {
+        uiAction: reloadUiAction,
+        requestUrlPathToMatch: "/api/v1/db/meta/projects",
+        httpMethodsToMatch: ["GET"],
+      }
+    )
+  }
+
+  async waitToBeRendered() {
+    await this.get().waitFor({
+      state: "visible",
+    });
+    (await this.get().elementHandle())?.waitForElementState("stable");
+    await this.reloadProjects();
+    (await this.get().elementHandle())?.waitForElementState("stable");
+  }
+
   async openProject({title, withoutPrefix}: {title: string, withoutPrefix?: boolean}) {
     if(!withoutPrefix) title = this.prefixTitle(title);
 
@@ -92,9 +111,7 @@ export class ProjectsPage extends BasePage {
     await this.get().locator(`[pw-data="delete-project-${title}"]`).click();
     await this.rootPage.locator(`button:has-text("Yes")`).click();
 
-    await expect.poll(
-      async () => await this.get().locator(`[pw-data="delete-project-${title}"]`).count()
-    ).toBe(0);
+    await this.get().locator('.ant-table-row', {hasText: title}).waitFor({state: 'hidden'});
   }
 
 
diff --git a/scripts/playwright/playwright.config.ts b/scripts/playwright/playwright.config.ts
index 45f7b17d79..0250f8d045 100644
--- a/scripts/playwright/playwright.config.ts
+++ b/scripts/playwright/playwright.config.ts
@@ -1,9 +1,6 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
-process.env.E2E_AIRTABLE_API_KEY = "keyn1MR87qgyUsYg4";
-process.env.E2E_AIRTABLE_BASE_ID = "https://airtable.com/shr4z0qmh6dg5s3eB";
-
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
diff --git a/scripts/playwright/quickTests/commonTest.ts b/scripts/playwright/quickTests/commonTest.ts
index cf309ae34f..0fb6de7f3f 100644
--- a/scripts/playwright/quickTests/commonTest.ts
+++ b/scripts/playwright/quickTests/commonTest.ts
@@ -242,7 +242,7 @@ const quickVerify = async (
     // Delete project
     await dashboard.clickHome();
     const projectsPage = new ProjectsPage(dashboard.rootPage);
-    await projectsPage.delete({ title: context.project.title });
+    await projectsPage.deleteProject({ title: context.project.title, withoutPrefix: true });
   }
 }
 
diff --git a/scripts/playwright/tests/import.spec.ts b/scripts/playwright/tests/import.spec.ts
index 3ca6e0695b..95bfb63a55 100644
--- a/scripts/playwright/tests/import.spec.ts
+++ b/scripts/playwright/tests/import.spec.ts
@@ -1,11 +1,9 @@
 import { test } from "@playwright/test";
+import { airtableApiBase, airtableApiKey } from "../constants";
 import { DashboardPage } from "../pages/Dashboard";
 import { quickVerify } from "../quickTests/commonTest";
 import setup from "../setup";
 
-const apiKey = process.env.E2E_AIRTABLE_API_KEY;
-const apiBase = process.env.E2E_AIRTABLE_BASE_ID;
-
 test.describe("Import", () => {
   let dashboard: DashboardPage;
   let context: any;
@@ -21,8 +19,8 @@ test.describe("Import", () => {
   test("Airtable", async () => {
     await dashboard.treeView.quickImport({ title: "Airtable" });
     await dashboard.importAirtable.import({
-      key: apiKey!,
-      baseId: apiBase!,
+      key: airtableApiKey,
+      baseId: airtableApiBase,
     });
     await dashboard.rootPage.waitForTimeout(1000);
     await quickVerify({ dashboard, airtableImport: true, context });