feat(testing): Stabalized airtable import and minor cleanups

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>

scripts/playwright/constants/index.ts

@@ -0,0 +1,4 @@
+const airtableApiKey =  "keyn1MR87qgyUsYg4";
+const airtableApiBase =  "https://airtable.com/shr4z0qmh6dg5s3eB";
+
+export { airtableApiKey, airtableApiBase };

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
     );
   }
-}
+}

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({

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'});
   }
 
 

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

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 });
   }
 }
 

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 });