feat(inputs): ✨ Add Set variable step

2022-01-14 07:49:24 +01:00
parent 13f72f5ff7
commit 4ccb7bca49
55 changed files with 1024 additions and 223 deletions
--- a/apps/builder/cypress/fixtures/typebots/logic/setVariable.json
+++ b/apps/builder/cypress/fixtures/typebots/logic/setVariable.json
@ -0,0 +1,129 @@
+{
+  "id": "typebot4",
+  "createdAt": "2022-01-13T08:10:06.705Z",
+  "updatedAt": "2022-01-13T08:10:06.705Z",
+  "name": "My typebot",
+  "ownerId": "ckybcurfh1612li1a62gqojvj",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "blocks": {
+    "byId": {
+      "eXpkU5dMsjRPeY3WverF45": {
+        "id": "eXpkU5dMsjRPeY3WverF45",
+        "title": "Start",
+        "stepIds": ["vWwzs6EmChn2PJcJQMr2gT"],
+        "graphCoordinates": { "x": 0, "y": 0 }
+      },
+      "b87iNgPqGvKrybzHcTD4Sze": {
+        "id": "b87iNgPqGvKrybzHcTD4Sze",
+        "title": "Block #4",
+        "stepIds": ["s8a2ASVaM3PoaD3y9amHrtT", "sc7FNu4BUCmmhmP14hk2Hij"],
+        "graphCoordinates": { "x": 584, "y": 389 }
+      },
+      "bg22czQixaBBY8M8LJ9wEm1": {
+        "id": "bg22czQixaBBY8M8LJ9wEm1",
+        "title": "Block #3",
+        "stepIds": ["set-var-1", "set-var-2"],
+        "graphCoordinates": { "x": 581, "y": 97 }
+      },
+      "bvGtcdRjZtbbaimKyUD3NAW": {
+        "id": "bvGtcdRjZtbbaimKyUD3NAW",
+        "title": "Block #2",
+        "stepIds": ["sgFoKA5Y4MXBkqFzCGCWGeg", "number-step"],
+        "graphCoordinates": { "x": 190, "y": 222 }
+      }
+    },
+    "allIds": [
+      "eXpkU5dMsjRPeY3WverF45",
+      "bvGtcdRjZtbbaimKyUD3NAW",
+      "bg22czQixaBBY8M8LJ9wEm1",
+      "b87iNgPqGvKrybzHcTD4Sze"
+    ]
+  },
+  "steps": {
+    "byId": {
+      "vWwzs6EmChn2PJcJQMr2gT": {
+        "id": "vWwzs6EmChn2PJcJQMr2gT",
+        "type": "start",
+        "label": "Start",
+        "target": { "blockId": "bvGtcdRjZtbbaimKyUD3NAW" },
+        "blockId": "eXpkU5dMsjRPeY3WverF45"
+      },
+      "set-var-2": {
+        "id": "set-var-2",
+        "type": "Set variable",
+        "target": { "blockId": "b87iNgPqGvKrybzHcTD4Sze" },
+        "blockId": "bg22czQixaBBY8M8LJ9wEm1"
+      },
+      "s8a2ASVaM3PoaD3y9amHrtT": {
+        "id": "s8a2ASVaM3PoaD3y9amHrtT",
+        "type": "text",
+        "blockId": "b87iNgPqGvKrybzHcTD4Sze",
+        "content": {
+          "html": "<div>Total: {{Total}}</div>",
+          "richText": [
+            { "type": "p", "children": [{ "text": "Total: {{Total}}" }] }
+          ],
+          "plainText": "Total: {{Total}}"
+        }
+      },
+      "sgFoKA5Y4MXBkqFzCGCWGeg": {
+        "id": "sgFoKA5Y4MXBkqFzCGCWGeg",
+        "type": "text",
+        "blockId": "bvGtcdRjZtbbaimKyUD3NAW",
+        "content": {
+          "html": "<div>1000 * ?</div>",
+          "richText": [{ "type": "p", "children": [{ "text": "1000 * ?" }] }],
+          "plainText": "1000 * ?"
+        }
+      },
+      "number-step": {
+        "id": "number-step",
+        "type": "number input",
+        "target": { "blockId": "bg22czQixaBBY8M8LJ9wEm1" },
+        "blockId": "bvGtcdRjZtbbaimKyUD3NAW"
+      },
+      "set-var-1": {
+        "id": "set-var-1",
+        "blockId": "bg22czQixaBBY8M8LJ9wEm1",
+        "type": "Set variable"
+      },
+      "sc7FNu4BUCmmhmP14hk2Hij": {
+        "id": "sc7FNu4BUCmmhmP14hk2Hij",
+        "blockId": "b87iNgPqGvKrybzHcTD4Sze",
+        "type": "text",
+        "content": {
+          "html": "<div>Custom var: {{Custom var}}</div>",
+          "richText": [
+            {
+              "type": "p",
+              "children": [{ "text": "Custom var: {{Custom var}}" }]
+            }
+          ],
+          "plainText": "Custom var: {{Custom var}}"
+        }
+      }
+    },
+    "allIds": [
+      "vWwzs6EmChn2PJcJQMr2gT",
+      "s8a2ASVaM3PoaD3y9amHrtT",
+      "set-var-2",
+      "sgFoKA5Y4MXBkqFzCGCWGeg",
+      "number-step",
+      "set-var-1",
+      "sc7FNu4BUCmmhmP14hk2Hij"
+    ]
+  },
+  "choiceItems": { "byId": {}, "allIds": [] },
+  "variables": { "byId": {}, "allIds": [] },
+  "theme": {
+    "general": {
+      "font": "Open Sans",
+      "background": { "type": "None", "content": "#ffffff" }
+    }
+  },
+  "settings": {
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null
+}
--- a/apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json
+++ b/apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json
@ -126,5 +126,6 @@
  "settings": {
    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
  },
+  "variables": { "byId": {}, "allIds": [] },
  "publicId": null
 }
--- a/apps/builder/cypress/plugins/database.ts
+++ b/apps/builder/cypress/plugins/database.ts
@ -129,6 +129,7 @@ const parseTypebotToPublicTypebot = (
  settings: typebot.settings,
  publicId: typebot.publicId,
  choiceItems: typebot.choiceItems,
+  variables: typebot.variables,
 })

 export const loadRawTypebotInDatabase = (typebot: Typebot) =>
--- a/apps/builder/cypress/plugins/utils.ts
+++ b/apps/builder/cypress/plugins/utils.ts
@ -74,6 +74,7 @@ export const parseTestTypebot = ({
    publicId: null,
    publishedTypebotId: null,
    updatedAt: new Date(),
+    variables: { byId: {}, allIds: [] },
  }
 }

--- a/apps/builder/cypress/support/index.ts
+++ b/apps/builder/cypress/support/index.ts
@ -45,6 +45,14 @@ Cypress.on('uncaught:exception', (err) => {
  }
 })

+export const getIframeBody = () => {
+  return cy
+    .get('#typebot-iframe')
+    .its('0.contentDocument.body')
+    .should('not.be.empty')
+    .then(cy.wrap)
+}
+
 // Import commands.js using ES2015 syntax:
 import '@testing-library/cypress/add-commands'
 import 'cypress-file-upload'
--- a/apps/builder/cypress/tests/inputs.ts
+++ b/apps/builder/cypress/tests/inputs.ts
@ -3,6 +3,7 @@ import {
  parseTestTypebot,
  preventUserFromRefreshing,
 } from 'cypress/plugins/utils'
+import { getIframeBody } from 'cypress/support'
 import { InputStep, InputStepType } from 'models'

 describe('Text input', () => {
@ -214,7 +215,7 @@ describe('Button input', () => {
    cy.signOut()
  })

-  it.only('Can edit choice items', () => {
+  it('Can edit choice items', () => {
    cy.signIn('test2@gmail.com')
    cy.visit('/typebots/typebot3/edit')
    cy.findByDisplayValue('Click to edit').type('Item 1{enter}')
@ -275,11 +276,11 @@ const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
            ...step,
            id: 'step1',
            blockId: 'block1',
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
            options:
              step.type === InputStepType.CHOICE
-                ? { itemIds: ['item1'] }
+                ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  //@ts-ignore
+                  { itemIds: ['item1'] }
                : undefined,
          },
        },
@ -306,11 +307,3 @@ const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
    })
  )
 }
-
-const getIframeBody = () => {
-  return cy
-    .get('#typebot-iframe')
-    .its('0.contentDocument.body')
-    .should('not.be.empty')
-    .then(cy.wrap)
-}
--- a/apps/builder/cypress/tests/logic.ts
+++ b/apps/builder/cypress/tests/logic.ts
@ -0,0 +1,45 @@
+import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { getIframeBody } from 'cypress/support'
+
+describe('Set variables', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  afterEach(() => {
+    cy.window().then((win) => {
+      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    })
+  })
+
+  it('options should work', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/logic/setVariable.json')
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot4/edit')
+    cy.findByTestId('step-number-step').click()
+    createNewVar('Num')
+    cy.findByTestId('step-set-var-1').click()
+    createNewVar('Total')
+    cy.findByRole('textbox', { name: 'Value / Expression:' }).type(
+      '1000 * {{Num}}',
+      { parseSpecialCharSequences: false }
+    )
+    cy.findByTestId('step-set-var-2').click()
+    createNewVar('Custom var')
+    cy.findByRole('textbox', { name: 'Value / Expression:' }).type(
+      'Custom value'
+    )
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody()
+      .findByPlaceholderText('Type your answer...')
+      .type('365{enter}')
+    getIframeBody().findByText('Total: 365000').should('exist')
+    getIframeBody().findByText('Custom var: Custom value')
+  })
+})
+
+const createNewVar = (name: string) => {
+  cy.findByTestId('variables-input').type(name)
+  cy.findByRole('menuitem', { name: `Create "${name}"` }).click()
+}