feat(integration): ✨ Add webhooks

apps/builder/cypress/tests/bubbles/image.ts

@@ -52,7 +52,7 @@ describe('Image bubbles', () => {
         .should('include', unsplashImageSrc)
     })
 
-    it.only('should import giphy gifs correctly', () => {
+    it('should import giphy gifs correctly', () => {
       cy.findByRole('button', { name: 'Giphy' }).click()
       cy.findAllByRole('img').eq(3).click()
       cy.findAllByRole('img')

apps/builder/cypress/tests/integrations/webhooks.ts

@@ -0,0 +1,96 @@
+import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { getIframeBody } from 'cypress/support'
+
+describe('Webhook step', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  afterEach(() => {
+    cy.window().then((win) => {
+      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    })
+  })
+
+  describe('Configuration', () => {
+    it('configuration is working', () => {
+      cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
+      cy.signIn('test2@gmail.com')
+      cy.visit('/typebots/typebot4/edit')
+      cy.findByText('Configure...').click()
+      cy.findByRole('button', { name: 'GET' }).click()
+      cy.findByRole('menuitem', { name: 'POST' }).click({ force: true })
+      cy.findByPlaceholderText('Your Webhook URL...').type(
+        `${Cypress.env('SITE_NAME')}/api/mock/webhook`
+      )
+
+      cy.findByRole('button', { name: 'Query params' }).click()
+      cy.findByRole('textbox', { name: 'Key:' }).type('firstParam')
+      cy.findByRole('textbox', { name: 'Value:' }).type('{{secret 1}}', {
+        parseSpecialCharSequences: false,
+      })
+      cy.findByRole('button', { name: 'Add a param' }).click()
+      cy.findAllByRole('textbox', { name: 'Key:' }).last().type('secondParam')
+      cy.findAllByRole('textbox', { name: 'Value:' })
+        .last()
+        .type('{{secret 2}}', {
+          parseSpecialCharSequences: false,
+        })
+
+      cy.findByRole('button', { name: 'Headers' }).click()
+      cy.findAllByRole('textbox', { name: 'Key:' })
+        .last()
+        .type('Custom-Typebot')
+      cy.findAllByRole('textbox', { name: 'Value:' })
+        .last()
+        .type('{{secret 3}}', {
+          parseSpecialCharSequences: false,
+        })
+
+      cy.findByRole('button', { name: 'Body' }).click()
+      cy.findByTestId('code-editor').type('{ "customField": "{{secret 4}}" }', {
+        parseSpecialCharSequences: false,
+        waitForAnimations: false,
+      })
+
+      cy.findByRole('button', { name: 'Variable values for test' }).click()
+      addTestVariable('secret 1', 'secret1')
+      cy.findByRole('button', { name: 'Add an entry' }).click()
+      addTestVariable('secret 2', 'secret2')
+      cy.findByRole('button', { name: 'Add an entry' }).click()
+      addTestVariable('secret 3', 'secret3')
+      cy.findByRole('button', { name: 'Add an entry' }).click()
+      addTestVariable('secret 4', 'secret4')
+
+      cy.findByRole('button', { name: 'Test the request' }).click()
+
+      cy.findAllByTestId('code-editor')
+        .should('have.length', 2)
+        .last()
+        .should('contain.text', '"statusCode": 200')
+
+      cy.findByRole('button', { name: 'Save in variables' }).click()
+      cy.findByPlaceholderText('Select the data').click()
+      cy.findByRole('menuitem', { name: 'data[0].name' }).click()
+    })
+  })
+  describe('Preview', () => {
+    it('should correctly send the request', () => {
+      cy.loadTypebotFixtureInDatabase(
+        'typebots/integrations/webhookPreview.json'
+      )
+      cy.signIn('test2@gmail.com')
+      cy.visit('/typebots/typebot4/edit')
+      cy.findByRole('button', { name: 'Preview' }).click()
+      getIframeBody().findByRole('button', { name: 'Go' }).click()
+      getIframeBody().findByText('His name is John').should('exist')
+    })
+  })
+})
+
+const addTestVariable = (name: string, value: string) => {
+  cy.findAllByTestId('variables-input').last().click()
+  cy.findByRole('menuitem', { name }).click()
+  cy.findAllByRole('textbox', { name: 'Test value:' }).last().type(value)
+}

apps/builder/cypress/tests/logic/condition.ts

@@ -22,14 +22,14 @@ describe('Condition step', () => {
 
     cy.findByTestId('variables-input').click()
     cy.findByRole('menuitem', { name: 'Age' }).click()
-    cy.findByRole('button', { name: 'Equal to' }).click()
+    cy.findByRole('button', { name: 'Select an operator' }).click()
     cy.findByRole('menuitem', { name: 'Greater than' }).click()
     cy.findByPlaceholderText('Type a value...').type('80')
 
     cy.findByRole('button', { name: 'Add a comparison' }).click()
     cy.findAllByTestId('variables-input').last().click()
     cy.findByRole('menuitem', { name: 'Age' }).click()
-    cy.findByRole('button', { name: 'Equal to' }).click()
+    cy.findByRole('button', { name: 'Select an operator' }).click()
     cy.findByRole('menuitem', { name: 'Less than' }).click()
     cy.findAllByPlaceholderText('Type a value...').last().type('100')
 
@@ -37,7 +37,7 @@ describe('Condition step', () => {
 
     cy.findByTestId('variables-input').click()
     cy.findByRole('menuitem', { name: 'Age' }).click()
-    cy.findByRole('button', { name: 'Equal to' }).click()
+    cy.findByRole('button', { name: 'Select an operator' }).click()
     cy.findByRole('menuitem', { name: 'Greater than' }).click()
     cy.findByPlaceholderText('Type a value...').type('20')