fix(results): 🐛 Display results for blocks w/ multiple inputs

2022-03-10 09:25:44 +01:00
parent 7e61ab19eb
commit 4767cdc542
7 changed files with 437 additions and 231 deletions
--- a/apps/viewer/playwright/fixtures/typebots/hugeBlock.json
+++ b/apps/viewer/playwright/fixtures/typebots/hugeBlock.json
@ -0,0 +1,155 @@
+{
+  "id": "cl0jrltqx0037601agzjiy7t4",
+  "createdAt": "2022-03-09T16:17:51.321Z",
+  "updatedAt": "2022-03-09T16:19:07.037Z",
+  "name": "My typebot",
+  "ownerId": "cl0cfi60r0000381a2bft9yis",
+  "publishedTypebotId": "dm12bh6hmEQemywn86osJD",
+  "folderId": null,
+  "blocks": [
+    {
+      "id": "dqork4dJJZk3RgKYavBpRE",
+      "steps": [
+        {
+          "id": "u7Px8eD9MWXNJEBwxQwJCF",
+          "type": "start",
+          "label": "Start",
+          "blockId": "dqork4dJJZk3RgKYavBpRE",
+          "outgoingEdgeId": "b3XsreaqtWt4CrZZmCKDpa"
+        }
+      ],
+      "title": "Start",
+      "graphCoordinates": { "x": 0, "y": 0 }
+    },
+    {
+      "id": "2Vrpgk5VP9BUo3vKtM5kws",
+      "steps": [
+        {
+          "id": "s6GezsfD612D1naKwvhDFgA",
+          "type": "text",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "content": {
+            "html": "<div>Hi what&#x27;s your name?</div>",
+            "richText": [
+              { "type": "p", "children": [{ "text": "Hi what's your name?" }] }
+            ],
+            "plainText": "Hi what's your name?"
+          }
+        },
+        {
+          "id": "sq3mPXUrugs5t6FoME3T4t4",
+          "type": "text input",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "options": {
+            "isLong": false,
+            "labels": {
+              "button": "Send",
+              "placeholder": "Type your answer..."
+            },
+            "variableId": "93BD32WVM5JEQ1nmWtr2S5"
+          }
+        },
+        {
+          "id": "s57hbzfpG2sVvXefznVhbVB",
+          "type": "text",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "content": {
+            "html": "<div>How old are you?</div>",
+            "richText": [
+              { "type": "p", "children": [{ "text": "How old are you?" }] }
+            ],
+            "plainText": "How old are you?"
+          }
+        },
+        {
+          "id": "s4fFn3s7nouQk88iJ3oLgx6",
+          "type": "number input",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "options": {
+            "labels": { "button": "Send", "placeholder": "Type a number..." }
+          }
+        },
+        {
+          "id": "scR6MewJwkPNJzABYG8NEA4",
+          "type": "text",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "content": {
+            "html": "<div>Cool!</div>",
+            "richText": [{ "type": "p", "children": [{ "text": "Cool!" }] }],
+            "plainText": "Cool!"
+          }
+        },
+        {
+          "id": "s5fo1s8UTyHQ7CfqC6MRxyW",
+          "type": "text",
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "content": {
+            "html": "<div>Do you eat pizza?</div>",
+            "richText": [
+              { "type": "p", "children": [{ "text": "Do you eat pizza?" }] }
+            ],
+            "plainText": "Do you eat pizza?"
+          }
+        },
+        {
+          "id": "sxn8UjQ2MjEMuRjhkh7LWws",
+          "type": "choice input",
+          "items": [
+            {
+              "id": "wGKXMr4mfySw1HNThND2Xd",
+              "type": 0,
+              "stepId": "sxn8UjQ2MjEMuRjhkh7LWws",
+              "content": "Yes"
+            },
+            {
+              "id": "qzqzVqMeo6TDUdMYckLZmf",
+              "type": 0,
+              "stepId": "sxn8UjQ2MjEMuRjhkh7LWws",
+              "content": "No"
+            }
+          ],
+          "blockId": "2Vrpgk5VP9BUo3vKtM5kws",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false }
+        }
+      ],
+      "title": "Block #1",
+      "graphCoordinates": { "x": 386, "y": 108 }
+    }
+  ],
+  "variables": [{ "id": "93BD32WVM5JEQ1nmWtr2S5", "name": "Name" }],
+  "edges": [
+    {
+      "id": "b3XsreaqtWt4CrZZmCKDpa",
+      "to": { "blockId": "2Vrpgk5VP9BUo3vKtM5kws" },
+      "from": {
+        "stepId": "u7Px8eD9MWXNJEBwxQwJCF",
+        "blockId": "dqork4dJJZk3RgKYavBpRE"
+      }
+    }
+  ],
+  "theme": {
+    "chat": {
+      "inputs": {
+        "color": "#303235",
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
+  },
+  "settings": {
+    "general": {
+      "isBrandingEnabled": 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": "my-typebot-zjiy7t4",
+  "customDomain": null
+}
--- a/apps/viewer/playwright/tests/hugeBlock.spec.ts
+++ b/apps/viewer/playwright/tests/hugeBlock.spec.ts
@ -0,0 +1,23 @@
+import test, { expect } from '@playwright/test'
+import path from 'path'
+import { importTypebotInDatabase } from '../services/database'
+import { typebotViewer } from '../services/selectorUtils'
+import { generate } from 'short-uuid'
+
+test('should work as expected', async ({ page }) => {
+  const typebotId = generate()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../fixtures/typebots/hugeBlock.json'),
+    { id: typebotId, publicId: `${typebotId}-public` }
+  )
+  await page.goto(`/${typebotId}-public`)
+  await typebotViewer(page).locator('input').fill('Baptiste')
+  await typebotViewer(page).locator('input').press('Enter')
+  await typebotViewer(page).locator('input').fill('26')
+  await typebotViewer(page).locator('input').press('Enter')
+  await typebotViewer(page).locator('button >> text=Yes').click()
+  await page.goto(`http://localhost:3000/typebots/${typebotId}/results`)
+  await expect(page.locator('text=Baptiste')).toBeVisible()
+  await expect(page.locator('text=26')).toBeVisible()
+  await expect(page.locator('text=Yes')).toBeVisible()
+})