feat(integration): 🚸 Easy webhook config

apps/builder/playwright/fixtures/typebots/integrations/webhook.json

@@ -62,7 +62,12 @@
           "id": "soSmiE7zyb3WF77GxFxAjYX",
           "blockId": "8XnDM1QsqPms4LQHh8q3Jo",
           "type": "Webhook",
-          "options": { "responseVariableMapping": [], "variablesForTest": [] },
+          "options": {
+            "responseVariableMapping": [],
+            "variablesForTest": [],
+            "isAdvancedConfig": false,
+            "isCustomBody": false
+          },
           "webhookId": "webhook1"
         }
       ]

apps/builder/playwright/services/database.ts

@@ -5,6 +5,7 @@ import {
   PublicTypebot,
   Step,
   Typebot,
+  Webhook,
 } from 'models'
 import { CollaborationType, DashboardFolder, PrismaClient, User } from 'db'
 import { readFileSync } from 'fs'
@@ -19,6 +20,7 @@ export const teardownDatabase = async () => {
   await prisma.user.deleteMany({
     where: { id: { in: ['freeUser', 'proUser'] } },
   })
+  await prisma.webhook.deleteMany()
   await prisma.credentials.deleteMany(ownerFilter)
   await prisma.dashboardFolder.deleteMany(ownerFilter)
   return prisma.typebot.deleteMany(ownerFilter)
@@ -37,8 +39,17 @@ export const createUsers = () =>
     ],
   })
 
-export const createWebhook = (typebotId: string) =>
-  prisma.webhook.create({ data: { method: 'GET', typebotId, id: 'webhook1' } })
+export const createWebhook = async (
+  typebotId: string,
+  webhookProps?: Partial<Webhook>
+) => {
+  try {
+    await prisma.webhook.delete({ where: { id: 'webhook1' } })
+  } catch {}
+  return prisma.webhook.create({
+    data: { method: 'GET', typebotId, id: 'webhook1', ...webhookProps },
+  })
+}
 
 export const createCollaboration = (
   userId: string,

apps/builder/playwright/tests/integrations/webhook.spec.ts

@@ -2,11 +2,31 @@ import test, { expect, Page } from '@playwright/test'
 import { createWebhook, importTypebotInDatabase } from '../../services/database'
 import path from 'path'
 import { generate } from 'short-uuid'
-
-const typebotId = generate()
+import { HttpMethod } from 'models'
 
 test.describe('Webhook step', () => {
-  test('its configuration should work', async ({ page }) => {
+  test('easy configuration should work', async ({ page }) => {
+    const typebotId = generate()
+    await importTypebotInDatabase(
+      path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
+      {
+        id: typebotId,
+      }
+    )
+    await createWebhook(typebotId, { method: HttpMethod.POST })
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.click('text=Configure...')
+    await page.fill(
+      'input[placeholder="Your Webhook URL..."]',
+      `${process.env.PLAYWRIGHT_BUILDER_TEST_BASE_URL}/api/mock/webhook-easy-config`
+    )
+    await page.click('text=Test the request')
+    await expect(page.locator('div[role="textbox"] >> nth=-1')).toContainText(
+      '"statusCode": 200'
+    )
+  })
+  test('Generated body should work', async ({ page }) => {
+    const typebotId = generate()
     await importTypebotInDatabase(
       path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
       {
@@ -17,12 +37,38 @@ test.describe('Webhook step', () => {
 
     await page.goto(`/typebots/${typebotId}/edit`)
     await page.click('text=Configure...')
+    await page.fill(
+      'input[placeholder="Your Webhook URL..."]',
+      `${process.env.PLAYWRIGHT_BUILDER_TEST_BASE_URL}/api/mock/webhook-easy-config`
+    )
+    await page.click('text=Advanced configuration')
     await page.click('text=GET')
     await page.click('text=POST')
+
+    await page.click('text=Test the request')
+    await expect(page.locator('div[role="textbox"] >> nth=-1')).toContainText(
+      '"message": "This is a sample result, it has been generated ⬇️"'
+    )
+  })
+  test('its configuration should work', async ({ page }) => {
+    const typebotId = generate()
+    await importTypebotInDatabase(
+      path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
+      {
+        id: typebotId,
+      }
+    )
+    await createWebhook(typebotId)
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.click('text=Configure...')
     await page.fill(
       'input[placeholder="Your Webhook URL..."]',
       `${process.env.PLAYWRIGHT_BUILDER_TEST_BASE_URL}/api/mock/webhook`
     )
+    await page.click('text=Advanced configuration')
+    await page.click('text=GET')
+    await page.click('text=POST')
 
     await page.click('text=Query params')
     await page.click('text=Add a param')
@@ -45,6 +91,7 @@ test.describe('Webhook step', () => {
     )
 
     await page.click('text=Body')
+    await page.click('text=Custom body')
     await page.fill('div[role="textbox"]', '{ "customField": "{{secret 4}}" }')
 
     await page.click('text=Variable values for test')