feat(results): ⚡️ Improve logs details

apps/viewer/playwright/fixtures/typebots/webhook.json

@@ -0,0 +1,130 @@
+{
+  "id": "cl26li8fl0407iez0w2tlw8fn",
+  "createdAt": "2022-04-19T20:25:30.417Z",
+  "updatedAt": "2022-04-19T20:40:48.366Z",
+  "icon": null,
+  "name": "My typebot",
+  "ownerId": "proUser",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "blocks": [
+    {
+      "id": "cl26li8fj0000iez05x7razkg",
+      "steps": [
+        {
+          "id": "cl26li8fj0001iez0bqfraw9h",
+          "type": "start",
+          "label": "Start",
+          "blockId": "cl26li8fj0000iez05x7razkg",
+          "outgoingEdgeId": "cl26liqj6000g2e6ed2cwkvse"
+        }
+      ],
+      "title": "Start",
+      "graphCoordinates": { "x": 0, "y": 0 }
+    },
+    {
+      "id": "cl26lidjz000a2e6etf4v03hv",
+      "steps": [
+        {
+          "id": "cl26lidk4000b2e6es2fos0nl",
+          "type": "choice input",
+          "items": [
+            {
+              "id": "cl26lidk5000c2e6e39wyc7wq",
+              "type": 0,
+              "stepId": "cl26lidk4000b2e6es2fos0nl",
+              "content": "Send success webhook"
+            }
+          ],
+          "blockId": "cl26lidjz000a2e6etf4v03hv",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false }
+        },
+        {
+          "id": "cl26lip76000e2e6ebmph843a",
+          "type": "Webhook",
+          "blockId": "cl26lidjz000a2e6etf4v03hv",
+          "options": {
+            "isCustomBody": false,
+            "isAdvancedConfig": false,
+            "variablesForTest": [],
+            "responseVariableMapping": []
+          },
+          "webhookId": "success-webhook"
+        },
+        {
+          "id": "cl26m0pdz00042e6ebjdoclaa",
+          "blockId": "cl26lidjz000a2e6etf4v03hv",
+          "type": "choice input",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+          "items": [
+            {
+              "id": "cl26m0pdz00052e6ecmxwfz44",
+              "stepId": "cl26m0pdz00042e6ebjdoclaa",
+              "type": 0,
+              "content": "Send failed webhook"
+            }
+          ]
+        },
+        {
+          "id": "cl26m0w9b00072e6eld1ei291",
+          "blockId": "cl26lidjz000a2e6etf4v03hv",
+          "type": "Webhook",
+          "options": {
+            "responseVariableMapping": [],
+            "variablesForTest": [],
+            "isAdvancedConfig": false,
+            "isCustomBody": false
+          },
+          "webhookId": "failed-webhook"
+        }
+      ],
+      "title": "Group #1",
+      "graphCoordinates": { "x": 386, "y": 117 }
+    }
+  ],
+  "variables": [
+    { "id": "vcl26lzmg100012e6e9rn57c3o", "name": "var1" },
+    { "id": "vcl26lzo7q00022e6edw3pe7lf", "name": "var2" },
+    { "id": "vcl26lzq6s00032e6ecuhh80qz", "name": "var3" }
+  ],
+  "edges": [
+    {
+      "id": "cl26liqj6000g2e6ed2cwkvse",
+      "to": { "blockId": "cl26lidjz000a2e6etf4v03hv" },
+      "from": {
+        "stepId": "cl26li8fj0001iez0bqfraw9h",
+        "blockId": "cl26li8fj0000iez05x7razkg"
+      }
+    }
+  ],
+  "theme": {
+    "chat": {
+      "inputs": {
+        "color": "#303235",
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostAvatar": {
+        "url": "https://avatars.githubusercontent.com/u/16015833?v=4",
+        "isEnabled": true
+      },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
+  },
+  "settings": {
+    "general": {
+      "isBrandingEnabled": true,
+      "isInputPrefillEnabled": true,
+      "isNewResultOnRefreshEnabled": false
+    },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null,
+  "customDomain": null
+}

apps/viewer/playwright/services/database.ts

@@ -6,6 +6,7 @@ import {
   SmtpCredentialsData,
   Step,
   Typebot,
+  Webhook,
 } from 'models'
 import { PrismaClient } from 'db'
 import { readFileSync } from 'fs'
@@ -36,12 +37,13 @@ export const createUser = () =>
     },
   })
 
-export const createWebhook = (typebotId: string) =>
+export const createWebhook = (typebotId: string, webhook?: Partial<Webhook>) =>
   prisma.webhook.create({
     data: {
       id: 'webhook1',
-      typebotId: typebotId,
+      typebotId,
       method: 'GET',
+      ...webhook,
     },
   })
 

apps/viewer/playwright/tests/sendEmail.spec.ts

@@ -42,4 +42,7 @@ test('should send an email', async ({ page }) => {
   await expect(
     page.locator('text="<baptiste.arnaud95@gmail.com>" >> nth=0')
   ).toBeVisible()
+  await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
+  await page.click('text="See logs"')
+  await expect(page.locator('text="Email successfully sent"')).toBeVisible()
 })

apps/viewer/playwright/tests/webhook.spec.ts

@@ -0,0 +1,45 @@
+import test, { expect } from '@playwright/test'
+import { createWebhook, importTypebotInDatabase } from '../services/database'
+import cuid from 'cuid'
+import path from 'path'
+import { typebotViewer } from '../services/selectorUtils'
+import { HttpMethod } from 'models'
+
+test('should execute webhooks properly', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../fixtures/typebots/webhook.json'),
+    { id: typebotId, publicId: `${typebotId}-public` }
+  )
+  await createWebhook(typebotId, {
+    id: 'success-webhook',
+    url: 'https://webhook.site/912bafb0-b92f-4be8-ae6a-186b5879a17a',
+    method: HttpMethod.POST,
+  })
+  await createWebhook(typebotId, {
+    id: 'failed-webhook',
+    url: 'https://webhook.site/8be94c01-141e-4792-b3c6-cf45137481d6',
+    method: HttpMethod.POST,
+  })
+
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page).locator('text=Send success webhook').click()
+  await page.waitForResponse(
+    (resp) =>
+      resp.request().url().includes(`/api/typebots/${typebotId}/blocks`) &&
+      resp.status() === 200
+  )
+  await typebotViewer(page).locator('text=Send failed webhook').click()
+  await page.waitForResponse(
+    async (resp) =>
+      resp.request().url().includes(`/api/typebots/${typebotId}/blocks`) &&
+      resp.status() === 200 &&
+      (await resp.json()).statusCode === 500
+  )
+  await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
+  await page.click('text="See logs"')
+  await expect(
+    page.locator('text="Webhook successfuly executed."')
+  ).toBeVisible()
+  await expect(page.locator('text="Webhook returned an error"')).toBeVisible()
+})