test: webhook (wip)

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

scripts/playwright/pages/Dashboard/WebhookForm/index.ts

@@ -0,0 +1,116 @@
+// playwright-dev-page.ts
+import { expect, Locator } from "@playwright/test";
+import BasePage from "../../Base";
+import { DashboardPage } from "..";
+// import clipboard from "clipboardy";
+
+export class WebhookFormPage extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly addNewButton: Locator;
+  readonly saveButton: Locator;
+  readonly testButton: Locator;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+    this.addNewButton = this.dashboard.get().locator(".nc-btn-create-webhook");
+    this.saveButton = this.get().locator('button:has-text("Save")');
+    this.testButton = this.get().locator('button:has-text("Test Webhook")');
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-drawer-webhook`);
+  }
+
+  async create({
+    title,
+    event,
+    url,
+  }: {
+    title: string;
+    event: string;
+    url: string;
+  }) {
+    await this.addNewButton.click();
+    await this.get().waitFor({ state: "visible" });
+
+    await this.configureHeader({
+      key: "Content-type",
+      value: "application/json",
+    });
+
+    await this.configureWebhook({ title, event, url });
+  }
+
+  async configureWebhook({
+    title,
+    event,
+    url,
+  }: {
+    title?: string;
+    event?: string;
+    url?: string;
+  }) {
+    if (title) {
+      await this.get().locator(`.nc-text-field-hook-title`).fill(title);
+    }
+    if (event) {
+      await this.get().locator(`.nc-text-field-hook-event`).click();
+      const modal = this.rootPage.locator(`.nc-dropdown-webhook-event`);
+      await modal.locator(`.ant-select-item:has-text("${event}")`).click();
+    }
+    if (url) {
+      await this.get().locator(`.nc-text-field-hook-url-path`).fill(url);
+    }
+  }
+
+  async addCondition() {
+    await this.get().locator(`.nc-check-box-hook-condition`).click();
+    const modal = await this.get().locator(`.menu-filter-dropdown`).last();
+    await modal.locator(`button:has-text("Add Filter")`).click();
+  }
+
+  async deleteCondition() {
+    await this.get().locator(`.nc-filter-item-remove-btn`).click();
+  }
+
+  async save() {
+    await this.saveButton.click();
+  }
+
+  async test() {
+    await this.testButton.click();
+    await this.toastWait({ message: "Webhook tested successfully" });
+  }
+
+  async delete({ index }: { index: number }) {
+    await this.get().locator(`.nc-hook-delete-icon`).nth(index).click();
+    await this.toastWait({ message: "Hook deleted successfully" });
+  }
+
+  async close() {
+    // type esc key
+    await this.get().press("Escape");
+  }
+
+  async open({ index }: { index: number }) {
+    await this.dashboard.get().locator(`.nc-hook`).nth(index).click();
+  }
+
+  async configureHeader({ key, value }: { key: string; value: string }) {
+    // hardcode "Content-type: application/json"
+    await this.get().locator(`.ant-tabs-tab-btn:has-text("Headers")`).click();
+
+    await this.get().locator(".nc-input-hook-header-key >> input").fill(key);
+    const modal = this.rootPage.locator(`.nc-dropdown-webhook-header`);
+    await modal.locator(`.ant-select-item:has-text("${key}")`).click();
+
+    await this.get().locator(".nc-input-hook-header-value").type(value);
+    await this.get().press("Enter");
+
+    await this.get()
+      .locator(".nc-hook-header-tab-checkbox")
+      .locator("input.ant-checkbox-input")
+      .click();
+  }
+}

scripts/playwright/pages/Dashboard/common/Toolbar/StackBy.ts

@@ -20,8 +20,4 @@ export class ToolbarStackbyPage extends BasePage {
       .locator(`div[title="${title}"]`)
       .click();
   }
-
-  // click({ title }: { title: string }) {
-  //   return this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).click();
-  // }
 }

scripts/playwright/pages/Dashboard/index.ts

@@ -13,6 +13,7 @@ import { GalleryPage } from "./Gallery";
 import { KanbanPage } from "./Kanban";
 import { ToolbarPage } from "./common/Toolbar";
 import { ImportAirtablePage } from "./Import/Airtable";
+import { WebhookFormPage } from "./WebhookForm";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -24,6 +25,7 @@ export class DashboardPage extends BasePage {
   readonly form: FormPage;
   readonly kanban: KanbanPage;
   readonly expandedForm: ExpandedFormPage;
+  readonly webhookForm: WebhookFormPage;
   readonly childList: ChildList;
   readonly linkRecord: LinkRecord;
   readonly settings: SettingsPage;
@@ -41,6 +43,7 @@ export class DashboardPage extends BasePage {
     this.form = new FormPage(this);
     this.kanban = new KanbanPage(this);
     this.expandedForm = new ExpandedFormPage(this);
+    this.webhookForm = new WebhookFormPage(this);
     this.childList = new ChildList(this);
     this.linkRecord = new LinkRecord(this);
     this.settings = new SettingsPage(this);

scripts/playwright/tests/webhook.spec.ts

@@ -0,0 +1,32 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
+
+test.describe.skip("Webhook", () => {
+  let dashboard: DashboardPage, toolbar: ToolbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test("CRUD", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.createTable({ title: "Test" });
+
+    await toolbar.clickActions();
+    await toolbar.actions.click("Webhooks");
+
+    await dashboard.webhookForm.create({
+      title: "Test",
+      url: "https://example.com",
+      event: "After Insert",
+    });
+
+    await dashboard.webhookForm.addCondition();
+  });
+});