test: webhook part2/2

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

scripts/playwright/package.json

@@ -19,6 +19,8 @@
     "promised-sqlite3": "^1.2.0"
   },
   "dependencies": {
+    "body-parser": "^1.20.1",
+    "express": "^4.18.2",
     "fs": "^0.0.1-security"
   }
 }

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

@@ -2,10 +2,12 @@
 import { expect, Locator } from "@playwright/test";
 import BasePage from "../../Base";
 import { DashboardPage } from "..";
+import { ToolbarPage } from "../common/Toolbar";
 // import clipboard from "clipboardy";
 
 export class WebhookFormPage extends BasePage {
   readonly dashboard: DashboardPage;
+  readonly toolbar: ToolbarPage;
   readonly addNewButton: Locator;
   readonly saveButton: Locator;
   readonly testButton: Locator;
@@ -13,6 +15,7 @@ export class WebhookFormPage extends BasePage {
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
+    this.toolbar = dashboard.grid.toolbar;
     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")');
@@ -25,12 +28,15 @@ export class WebhookFormPage extends BasePage {
   async create({
     title,
     event,
-    url,
+    url = "http://localhost:9090/hook",
   }: {
     title: string;
     event: string;
-    url: string;
+    url?: string;
   }) {
+    await this.toolbar.clickActions();
+    await this.toolbar.actions.click("Webhooks");
+
     await this.addNewButton.click();
     await this.get().waitFor({ state: "visible" });
 
@@ -38,8 +44,9 @@ export class WebhookFormPage extends BasePage {
       key: "Content-type",
       value: "application/json",
     });
-
     await this.configureWebhook({ title, event, url });
+    await this.save();
+    await this.close();
   }
 
   async configureWebhook({
@@ -64,14 +71,49 @@ export class WebhookFormPage extends BasePage {
     }
   }
 
-  async addCondition() {
+  async addCondition({
+    column,
+    operator,
+    value,
+    save,
+  }: {
+    column: string;
+    operator: string;
+    value: string;
+    save: boolean;
+  }) {
     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();
+
+    await modal.locator(".nc-filter-field-select").click();
+    const modalField = await this.dashboard.rootPage.locator(
+      ".nc-dropdown-toolbar-field-list:visible"
+    );
+    await modalField.locator(`.ant-select-item:has-text("${column}")`).click();
+
+    await modal.locator(".nc-filter-operation-select").click();
+    const modalOp = await this.dashboard.rootPage.locator(
+      ".nc-dropdown-filter-comp-op:visible"
+    );
+    await modalOp.locator(`.ant-select-item:has-text("${operator}")`).click();
+
+    if (operator != "is null" && operator != "is not null") {
+      await modal.locator("input.nc-filter-value-select").fill(value);
+    }
+
+    if (save) {
+      await this.save();
+      await this.close();
+    }
   }
 
-  async deleteCondition() {
+  async deleteCondition(p: { save: boolean }) {
     await this.get().locator(`.nc-filter-item-remove-btn`).click();
+    if (p.save) {
+      await this.save();
+      await this.close();
+    }
   }
 
   async save() {
@@ -84,8 +126,14 @@ export class WebhookFormPage extends BasePage {
   }
 
   async delete({ index }: { index: number }) {
+    await this.toolbar.clickActions();
+    await this.toolbar.actions.click("Webhooks");
+
     await this.get().locator(`.nc-hook-delete-icon`).nth(index).click();
     await this.toastWait({ message: "Hook deleted successfully" });
+
+    // click escape to close the drawer
+    await this.get().press("Escape");
   }
 
   async close() {
@@ -94,6 +142,8 @@ export class WebhookFormPage extends BasePage {
   }
 
   async open({ index }: { index: number }) {
+    await this.toolbar.clickActions();
+    await this.toolbar.actions.click("Webhooks");
     await this.dashboard.get().locator(`.nc-hook`).nth(index).click();
   }
 

scripts/playwright/setup/server.ts

@@ -0,0 +1,64 @@
+// https://glebbahmutov.com/blog/restart-server/
+
+// const { express } = require("express");
+// const { bodyParser } = require("body-parser");
+
+import express from "express";
+import bodyParser from "body-parser";
+
+let request = [];
+
+async function makeServer() {
+  const app = express();
+  app.use(bodyParser.json());
+
+  app.get("/hook/all", (req, res) => {
+    // console.log(request)
+    res.json(request);
+  });
+  app.get("/hook/last", (req, res) => {
+    if (request.length) {
+      // console.log(request[request.length - 1])
+      res.json(request[request.length - 1]);
+    }
+  });
+  app.get("/hook/count", (req, res) => {
+    // console.log(request.length)
+    res.json(request.length);
+  });
+  app.get("/hook/clear", (req, res) => {
+    request = [];
+    res.status(200).end();
+  });
+
+  app.post("/hook", (req, res) => {
+    request.push(req.body);
+    // console.log("/hook :: ", req.body) // Call your action on the request here
+    res.status(200).end(); // Responding is important
+  });
+
+  app.post("/stop", (req, res) => {
+    process.exit();
+  });
+
+  const port = 9090;
+
+  return new Promise((resolve) => {
+    const server = app.listen(port, function () {
+      const port = server.address().port;
+      console.log("Example app listening at port %d", port);
+
+      // close the server
+      const close = () => {
+        return new Promise((resolve) => {
+          console.log("closing server");
+          server.close(resolve);
+        });
+      };
+
+      resolve({ server, port, close });
+    });
+  });
+}
+
+export default makeServer;

scripts/playwright/tests/webhook.spec.ts

@@ -1,32 +1,242 @@
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { DashboardPage } from "../pages/Dashboard";
 import setup from "../setup";
 import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
+import makeServer from "../setup/server";
+import { WebhookFormPage } from "../pages/Dashboard/WebhookForm";
 
-test.describe.skip("Webhook", () => {
-  let dashboard: DashboardPage, toolbar: ToolbarPage;
+let hookPath = "http://localhost:9090/hook";
+
+// clear server data
+async function clearServerData({ request }) {
+  // clear stored data in server
+  await request.get(hookPath + "/clear");
+
+  // ensure stored message count is 0
+  const response = await request.get(hookPath + "/count");
+  expect(await response.json()).toBe(0);
+}
+
+async function verifyHookTrigger(count: number, value: string, request) {
+  let response = await request.get(hookPath + "/count");
+  expect(await response.json()).toBe(count);
+
+  if (count) {
+    response = await request.get(hookPath + "/last");
+    console.log(await response.json());
+    expect((await response.json()).Title).toBe(value);
+  }
+}
+
+test.describe("Webhook", () => {
+  let dashboard: DashboardPage, toolbar: ToolbarPage, webhook: WebhookFormPage;
   let context: any;
 
+  test.beforeAll(async () => {
+    // start a server locally for webhook tests
+    await makeServer();
+  });
+
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
     toolbar = dashboard.grid.toolbar;
+    webhook = dashboard.webhookForm;
   });
 
-  test("CRUD", async () => {
+  test("CRUD", async ({ request }) => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: "Team & Auth" });
     await dashboard.treeView.createTable({ title: "Test" });
 
-    await toolbar.clickActions();
-    await toolbar.actions.click("Webhooks");
+    // after insert hook
+    await webhook.create({
+      title: "hook-1",
+      event: "After Insert",
+    });
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await verifyHookTrigger(1, "Poole", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await verifyHookTrigger(1, "Poole", request);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(1, "Poole", request);
+
+    // after update hook
+    await webhook.create({
+      title: "hook-2",
+      event: "After Update",
+    });
+
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await verifyHookTrigger(1, "Poole", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await verifyHookTrigger(2, "Delaware", request);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(2, "Delaware", request);
+
+    // after delete hook
+    await webhook.create({
+      title: "hook-3",
+      event: "After Delete",
+    });
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await verifyHookTrigger(1, "Poole", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await verifyHookTrigger(2, "Delaware", request);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(3, "Delaware", request);
+
+    // modify webhook
+    await webhook.open({ index: 0 });
+    await webhook.configureWebhook({
+      title: "hook-1-modified",
+      event: "After Delete",
+    });
+    await webhook.save();
+    await webhook.close();
+    await webhook.open({ index: 1 });
+    await webhook.configureWebhook({
+      title: "hook-2-modified",
+      event: "After Delete",
+    });
+    await webhook.save();
+    await webhook.close();
+
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await verifyHookTrigger(0, "Poole", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await verifyHookTrigger(0, "Delaware", request);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(3, "Delaware", request);
+
+    // delete webhook
+    await webhook.delete({ index: 0 });
+    await webhook.delete({ index: 0 });
+    await webhook.delete({ index: 0 });
+
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await verifyHookTrigger(0, "", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await verifyHookTrigger(0, "", request);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(0, "", request);
+  });
 
-    await dashboard.webhookForm.create({
-      title: "Test",
-      url: "https://example.com",
+  test("Conditional webhooks", async ({ request }) => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.createTable({ title: "Test" });
+
+    // after insert hook
+    await webhook.create({
+      title: "hook-1",
       event: "After Insert",
     });
+    // after insert hook
+    await webhook.create({
+      title: "hook-2",
+      event: "After Update",
+    });
+    // after insert hook
+    await webhook.create({
+      title: "hook-3",
+      event: "After Delete",
+    });
+
+    await webhook.open({ index: 0 });
+    await webhook.addCondition({
+      column: "Title",
+      operator: "is like",
+      value: "Poole",
+      save: true,
+    });
+
+    await webhook.open({ index: 1 });
+    await webhook.addCondition({
+      column: "Title",
+      operator: "is like",
+      value: "Poole",
+      save: true,
+    });
 
-    await dashboard.webhookForm.addCondition();
+    await webhook.open({ index: 2 });
+    await webhook.addCondition({
+      column: "Title",
+      operator: "is like",
+      value: "Poole",
+      save: true,
+    });
+
+    // verify
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await dashboard.grid.addNewRow({
+      index: 1,
+      columnHeader: "Title",
+      value: "Delaware",
+    });
+    await verifyHookTrigger(1, "Poole", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await dashboard.grid.editRow({ index: 1, value: "Poole" });
+    await verifyHookTrigger(2, "Poole", request);
+    await dashboard.grid.deleteRow(1);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(3, "Poole", request);
+
+    // Delete condition
+    await webhook.open({ index: 2 });
+    await webhook.deleteCondition({ save: true });
+    await webhook.open({ index: 1 });
+    await webhook.deleteCondition({ save: true });
+    await webhook.open({ index: 0 });
+    await webhook.deleteCondition({ save: true });
+
+    await clearServerData({ request });
+    await dashboard.grid.addNewRow({
+      index: 0,
+      columnHeader: "Title",
+      value: "Poole",
+    });
+    await dashboard.grid.addNewRow({
+      index: 1,
+      columnHeader: "Title",
+      value: "Delaware",
+    });
+    await verifyHookTrigger(2, "Delaware", request);
+    await dashboard.grid.editRow({ index: 0, value: "Delaware" });
+    await dashboard.grid.editRow({ index: 1, value: "Poole" });
+    await verifyHookTrigger(4, "Poole", request);
+    await dashboard.grid.deleteRow(1);
+    await dashboard.grid.deleteRow(0);
+    await verifyHookTrigger(6, "Delaware", request);
   });
 });