feat(bubbles): ✨ Add image bubble

2022-01-20 16:14:47 +01:00
parent c43fd1d386
commit 2d178978ef
33 changed files with 848 additions and 142 deletions
--- a/apps/builder/cypress/tests/bubbles/image.ts
+++ b/apps/builder/cypress/tests/bubbles/image.ts
@ -0,0 +1,86 @@
+import { createTypebotWithStep } from 'cypress/plugins/data'
+import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { getIframeBody } from 'cypress/support'
+import { BubbleStepType, Step } from 'models'
+
+const unsplashImageSrc =
+  'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+
+describe('Image bubbles', () => {
+  before(() => {
+    cy.intercept({
+      url: 'https://s3.eu-west-3.amazonaws.com/typebot',
+      method: 'POST',
+    }).as('postImage')
+  })
+  afterEach(() => {
+    cy.window().then((win) => {
+      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    })
+  })
+  describe('Content settings', () => {
+    beforeEach(() => {
+      cy.task('seed')
+      createTypebotWithStep({
+        type: BubbleStepType.IMAGE,
+      } as Omit<Step, 'id' | 'blockId'>)
+      cy.signOut()
+      cy.signIn('test2@gmail.com')
+      cy.visit('/typebots/typebot3/edit')
+      cy.findByText('Click to edit...').click()
+    })
+
+    it('upload image file correctly', () => {
+      cy.findByTestId('file-upload-input').attachFile('avatar.jpg')
+      cy.wait('@postImage')
+      cy.findByRole('img')
+        .should('have.attr', 'src')
+        .should(
+          'include',
+          `https://s3.eu-west-3.amazonaws.com/typebot/typebots/typebot3/avatar.jpg`
+        )
+    })
+
+    it('should import image links correctly', () => {
+      cy.findByRole('button', { name: 'Embed link' }).click()
+      cy.findByPlaceholderText('Paste the image link...')
+        .clear()
+        .type(unsplashImageSrc)
+      cy.findByRole('button', { name: 'Embed image' }).click()
+      cy.findByRole('img')
+        .should('have.attr', 'src')
+        .should('include', unsplashImageSrc)
+    })
+
+    it.only('should import giphy gifs correctly', () => {
+      cy.findByRole('button', { name: 'Giphy' }).click()
+      cy.findAllByRole('img').eq(3).click()
+      cy.findAllByRole('img')
+        .first()
+        .should('have.attr', 'src')
+        .should('contain', `giphy.com/media`)
+    })
+  })
+  describe('Preview', () => {
+    beforeEach(() => {
+      cy.task('seed')
+      createTypebotWithStep({
+        type: BubbleStepType.IMAGE,
+        content: {
+          url: unsplashImageSrc,
+        },
+      } as Omit<Step, 'id' | 'blockId'>)
+      cy.signOut()
+      cy.signIn('test2@gmail.com')
+      cy.visit('/typebots/typebot3/edit')
+    })
+
+    it('should display correctly', () => {
+      cy.findByRole('button', { name: 'Preview' }).click()
+      getIframeBody()
+        .findByRole('img')
+        .should('have.attr', 'src')
+        .should('eq', unsplashImageSrc)
+    })
+  })
+})
--- a/apps/builder/cypress/tests/bubbles/text.ts
+++ b/apps/builder/cypress/tests/bubbles/text.ts
@ -0,0 +1,52 @@
+import { createTypebotWithStep } from 'cypress/plugins/data'
+import { preventUserFromRefreshing } from 'cypress/plugins/utils'
+import { getIframeBody } from 'cypress/support'
+import { BubbleStepType, Step } from 'models'
+
+describe('Text bubbles', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    createTypebotWithStep({
+      type: BubbleStepType.TEXT,
+      content: { html: '', plainText: '', richText: [] },
+    } as Omit<Step, 'id' | 'blockId'>)
+    cy.signOut()
+  })
+
+  afterEach(() => {
+    cy.window().then((win) => {
+      win.removeEventListener('beforeunload', preventUserFromRefreshing)
+    })
+  })
+
+  it('rich text features should work', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot3/edit')
+    cy.findByTestId('bold-button').click()
+    cy.findByRole('textbox', { name: 'Text editor' }).type('Bold text{enter}')
+    cy.findByTestId('bold-button').click()
+    cy.findByTestId('italic-button').click()
+    cy.findByRole('textbox', { name: 'Text editor' }).type('Italic text{enter}')
+    cy.findByTestId('italic-button').click()
+    cy.findByTestId('underline-button').click()
+    cy.findByRole('textbox', { name: 'Text editor' }).type(
+      'Underlined text{enter}'
+    )
+    cy.findByTestId('bold-button').click()
+    cy.findByTestId('italic-button').click()
+    cy.findByRole('textbox', { name: 'Text editor' }).type('Everything text')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody()
+      .get('span.slate-bold')
+      .should('exist')
+      .should('contain.text', 'Bold text')
+    getIframeBody()
+      .get('span.slate-italic')
+      .should('exist')
+      .should('contain.text', 'Italic text')
+    getIframeBody()
+      .get('span.slate-underline')
+      .should('exist')
+      .should('contain.text', 'Underlined text')
+  })
+})