chore(inputs): ✅ Add Button targets e2e tests

apps/builder/components/board/Board.tsx

@@ -16,8 +16,8 @@ export const Board = () => {
         <StepTypesList />
         <GraphProvider>
           <Graph flex="1" />
-          {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
           <BoardMenuButton pos="absolute" right="20px" top="20px" />
+          {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
         </GraphProvider>
       </DndContext>
     </Flex>

apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json

@@ -0,0 +1,130 @@
+{
+  "id": "typebot4",
+  "createdAt": "2022-01-12T08:20:11.572Z",
+  "updatedAt": "2022-01-12T08:20:11.572Z",
+  "name": "My typebot",
+  "ownerId": "ckyb9vs110792li1az8bve32o",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "blocks": {
+    "byId": {
+      "iE81k3ViAne3mfPEWeZJcq": {
+        "id": "iE81k3ViAne3mfPEWeZJcq",
+        "title": "Start",
+        "stepIds": ["fLNNAAtRkrw7GG5iqCCdYx"],
+        "graphCoordinates": { "x": 0, "y": 0 }
+      },
+      "bcs6TWbHd9inLRDyGZaX7SD": {
+        "id": "bcs6TWbHd9inLRDyGZaX7SD",
+        "title": "Block #2",
+        "graphCoordinates": { "x": 362, "y": 202 },
+        "stepIds": ["sdExhY2LZ6VZ69s2WFmBcZg"]
+      },
+      "bgjJd4KTrHSy2GD7AfCPECR": {
+        "id": "bgjJd4KTrHSy2GD7AfCPECR",
+        "title": "Block #3",
+        "graphCoordinates": { "x": 846, "y": 186 },
+        "stepIds": ["sgwvBXuNbZ16vvJK7rAA8Gw"]
+      },
+      "bkLYB73fk4GePgqDLnUHy1t": {
+        "id": "bkLYB73fk4GePgqDLnUHy1t",
+        "title": "Block #4",
+        "graphCoordinates": { "x": 851, "y": 498 },
+        "stepIds": ["sbE2QKjYNXwrBexFgYrkMcn"]
+      }
+    },
+    "allIds": [
+      "iE81k3ViAne3mfPEWeZJcq",
+      "bcs6TWbHd9inLRDyGZaX7SD",
+      "bgjJd4KTrHSy2GD7AfCPECR",
+      "bkLYB73fk4GePgqDLnUHy1t"
+    ]
+  },
+  "steps": {
+    "byId": {
+      "fLNNAAtRkrw7GG5iqCCdYx": {
+        "id": "fLNNAAtRkrw7GG5iqCCdYx",
+        "type": "start",
+        "label": "Start",
+        "blockId": "iE81k3ViAne3mfPEWeZJcq",
+        "target": { "blockId": "bcs6TWbHd9inLRDyGZaX7SD" }
+      },
+      "sdExhY2LZ6VZ69s2WFmBcZg": {
+        "id": "sdExhY2LZ6VZ69s2WFmBcZg",
+        "blockId": "bcs6TWbHd9inLRDyGZaX7SD",
+        "type": "choice input",
+        "options": {
+          "itemIds": [
+            "rFcixXR7vVXDeUuWajc7gR",
+            "1Ksnvcvtpn358jX5rtEfKa",
+            "8PLMwgYdaEzG6FAvCo46L8"
+          ]
+        },
+        "target": { "blockId": "bkLYB73fk4GePgqDLnUHy1t" }
+      },
+      "sgwvBXuNbZ16vvJK7rAA8Gw": {
+        "id": "sgwvBXuNbZ16vvJK7rAA8Gw",
+        "blockId": "bgjJd4KTrHSy2GD7AfCPECR",
+        "type": "text",
+        "content": {
+          "html": "<div>I love burgers!</div>",
+          "richText": [
+            { "type": "p", "children": [{ "text": "I love burgers!" }] }
+          ],
+          "plainText": "I love burgers!"
+        }
+      },
+      "sbE2QKjYNXwrBexFgYrkMcn": {
+        "id": "sbE2QKjYNXwrBexFgYrkMcn",
+        "blockId": "bkLYB73fk4GePgqDLnUHy1t",
+        "type": "text",
+        "content": {
+          "html": "<div>Cool!</div>",
+          "richText": [{ "type": "p", "children": [{ "text": "Cool!" }] }],
+          "plainText": "Cool!"
+        }
+      }
+    },
+    "allIds": [
+      "fLNNAAtRkrw7GG5iqCCdYx",
+      "sdExhY2LZ6VZ69s2WFmBcZg",
+      "sgwvBXuNbZ16vvJK7rAA8Gw",
+      "sbE2QKjYNXwrBexFgYrkMcn"
+    ]
+  },
+  "choiceItems": {
+    "byId": {
+      "rFcixXR7vVXDeUuWajc7gR": {
+        "id": "rFcixXR7vVXDeUuWajc7gR",
+        "stepId": "sdExhY2LZ6VZ69s2WFmBcZg",
+        "content": "Burgers",
+        "target": { "blockId": "bgjJd4KTrHSy2GD7AfCPECR" }
+      },
+      "1Ksnvcvtpn358jX5rtEfKa": {
+        "id": "1Ksnvcvtpn358jX5rtEfKa",
+        "stepId": "sdExhY2LZ6VZ69s2WFmBcZg",
+        "content": "Hot dogs"
+      },
+      "8PLMwgYdaEzG6FAvCo46L8": {
+        "id": "8PLMwgYdaEzG6FAvCo46L8",
+        "stepId": "sdExhY2LZ6VZ69s2WFmBcZg",
+        "content": "Carpaccio"
+      }
+    },
+    "allIds": [
+      "rFcixXR7vVXDeUuWajc7gR",
+      "1Ksnvcvtpn358jX5rtEfKa",
+      "8PLMwgYdaEzG6FAvCo46L8"
+    ]
+  },
+  "theme": {
+    "general": {
+      "font": "Open Sans",
+      "background": { "type": "None", "content": "#ffffff" }
+    }
+  },
+  "settings": {
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null
+}

apps/builder/cypress/plugins/data.ts

@@ -0,0 +1 @@
+export const userIds = ['user1', 'user2']

apps/builder/cypress/plugins/database.ts

@@ -1,6 +1,7 @@
 import { InputStepType, PublicTypebot, Typebot } from 'models'
 import { Plan, PrismaClient } from 'db'
 import { parseTestTypebot } from './utils'
+import { userIds } from './data'
 
 const prisma = new PrismaClient()
 
@@ -21,9 +22,9 @@ export const createTypebot = (typebot: Typebot) =>
 const createUsers = () =>
   prisma.user.createMany({
     data: [
-      { id: 'test1', email: 'test1@gmail.com', emailVerified: new Date() },
+      { id: userIds[0], email: 'test1@gmail.com', emailVerified: new Date() },
       {
-        id: 'test2',
+        id: userIds[1],
         email: 'test2@gmail.com',
         emailVerified: new Date(),
         plan: Plan.PRO,
@@ -34,15 +35,15 @@ const createUsers = () =>
 
 const createFolders = () =>
   prisma.dashboardFolder.createMany({
-    data: [{ ownerId: 'test2', name: 'Folder #1', id: 'folder1' }],
+    data: [{ ownerId: userIds[1], name: 'Folder #1', id: 'folder1' }],
   })
 
 const createTypebots = async () => {
   const typebot2 = {
     ...parseTestTypebot({
       id: 'typebot2',
       name: 'Typebot #2',
-      ownerId: 'test2',
+      ownerId: userIds[1],
       blocks: {
         byId: {
           block1: {
@@ -72,7 +73,7 @@ const createTypebots = async () => {
         ...parseTestTypebot({
           id: 'typebot1',
           name: 'Typebot #1',
-          ownerId: 'test2',
+          ownerId: userIds[1],
           blocks: { byId: {}, allIds: [] },
           steps: { byId: {}, allIds: [] },
         }),
@@ -129,3 +130,6 @@ const parseTypebotToPublicTypebot = (
   publicId: typebot.publicId,
   choiceItems: typebot.choiceItems,
 })
+
+export const loadRawTypebotInDatabase = (typebot: Typebot) =>
+  prisma.typebot.create({ data: { ...typebot, ownerId: userIds[1] } as any })

apps/builder/cypress/plugins/index.ts

@@ -3,7 +3,7 @@ import {
   FacebookSocialLogin,
   GoogleSocialLogin,
 } from 'cypress-social-logins/src/Plugins'
-import { createTypebot, seedDb } from './database'
+import { createTypebot, loadRawTypebotInDatabase, seedDb } from './database'
 /// <reference types="cypress" />
 
 /**
@@ -17,6 +17,7 @@ const handler = (on: any) => {
     GitHubSocialLogin: GitHubSocialLogin,
     seed: seedDb,
     createTypebot,
+    loadRawTypebotInDatabase,
   })
 }
 

apps/builder/cypress/support/commands.ts

@@ -12,6 +12,12 @@ Cypress.Commands.add('signIn', (email: string) => {
   })
 })
 
+Cypress.Commands.add('loadTypebotFixtureInDatabase', (path: string) => {
+  return cy.fixture(path).then((typebot) => {
+    cy.task('loadRawTypebotInDatabase', typebot)
+  })
+})
+
 Cypress.Commands.add(
   'mouseMoveBy',
   {

apps/builder/cypress/support/index.ts

@@ -20,6 +20,7 @@ declare global {
     interface Chainable {
       signOut(): Chainable<any>
       signIn(email: string): Chainable<any>
+      loadTypebotFixtureInDatabase(path: string): Chainable<any>
       mouseMoveBy(
         x: number,
         y: number,

apps/builder/cypress/tests/account.ts

@@ -1,3 +1,5 @@
+import { userIds } from 'cypress/plugins/data'
+
 describe('Dashboard page', () => {
   before(() => {
     cy.intercept({
@@ -33,7 +35,7 @@ describe('Dashboard page', () => {
       .should('have.attr', 'src')
       .should(
         'include',
-        'https://s3.eu-west-3.amazonaws.com/typebot/test1/avatar'
+        `https://s3.eu-west-3.amazonaws.com/typebot/${userIds[0]}/avatar`
       )
     cy.findByRole('button', { name: 'Save' }).should('exist').click()
     cy.wait('@getUpdatedSession')
@@ -43,7 +45,7 @@ describe('Dashboard page', () => {
       .should('have.attr', 'src')
       .should(
         'include',
-        'https://s3.eu-west-3.amazonaws.com/typebot/test1/avatar'
+        `https://s3.eu-west-3.amazonaws.com/typebot/${userIds[0]}/avatar`
       )
     cy.findByRole('button', { name: 'Save' }).should('not.exist')
   })

apps/builder/cypress/tests/bubbles.ts

@@ -1,3 +1,4 @@
+import { userIds } from 'cypress/plugins/data'
 import {
   parseTestTypebot,
   preventUserFromRefreshing,
@@ -12,7 +13,7 @@ describe('Text bubbles', () => {
       parseTestTypebot({
         id: 'typebot3',
         name: 'Typebot #3',
-        ownerId: 'test2',
+        ownerId: userIds[1],
         steps: {
           byId: {
             step1: {

apps/builder/cypress/tests/inputs.ts

@@ -1,3 +1,4 @@
+import { userIds } from 'cypress/plugins/data'
 import {
   parseTestTypebot,
   preventUserFromRefreshing,
@@ -213,7 +214,7 @@ describe('Button input', () => {
     cy.signOut()
   })
 
-  it('Can edit choice items', () => {
+  it.only('Can edit choice items', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByDisplayValue('Click to edit').type('Item 1{enter}')
@@ -249,7 +250,15 @@ describe('Button input', () => {
   })
 
   it('Single choice targets should work', () => {
-    //TO-DO
+    cy.loadTypebotFixtureInDatabase('typebots/singleChoiceTarget.json')
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot4/edit')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody().findByRole('button', { name: 'Burgers' }).click()
+    getIframeBody().findByText('I love burgers!').should('exist')
+    cy.findByRole('button', { name: 'Restart' }).click()
+    getIframeBody().findByRole('button', { name: 'Carpaccio' }).click()
+    getIframeBody().findByText('Cool!').should('exist')
   })
 })
 
@@ -259,7 +268,7 @@ const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
     parseTestTypebot({
       id: 'typebot3',
       name: 'Typebot #3',
-      ownerId: 'test2',
+      ownerId: userIds[1],
       steps: {
         byId: {
           step1: {