2
0

feat(bubbles): Add image bubble

This commit is contained in:
Baptiste Arnaud
2022-01-20 16:14:47 +01:00
parent c43fd1d386
commit 2d178978ef
33 changed files with 848 additions and 142 deletions

View File

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

View File

@ -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)
})
})
})

View File

@ -1,43 +1,15 @@
import { userIds } from 'cypress/plugins/data'
import {
parseTestTypebot,
preventUserFromRefreshing,
} from 'cypress/plugins/utils'
import { BubbleStepType } from 'models'
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')
cy.task(
'createTypebot',
parseTestTypebot({
id: 'typebot3',
name: 'Typebot #3',
ownerId: userIds[1],
steps: {
byId: {
step1: {
id: 'step1',
blockId: 'block1',
type: BubbleStepType.TEXT,
content: { html: '', plainText: '', richText: [] },
},
},
allIds: ['step1'],
},
blocks: {
byId: {
block1: {
id: 'block1',
graphCoordinates: { x: 400, y: 200 },
title: 'Block #1',
stepIds: ['step1'],
},
},
allIds: ['block1'],
},
})
)
createTypebotWithStep({
type: BubbleStepType.TEXT,
content: { html: '', plainText: '', richText: [] },
} as Omit<Step, 'id' | 'blockId'>)
cy.signOut()
})
@ -78,11 +50,3 @@ describe('Text bubbles', () => {
.should('contain.text', 'Underlined text')
})
})
const getIframeBody = () => {
return cy
.get('#typebot-iframe')
.its('0.contentDocument.body')
.should('not.be.empty')
.then(cy.wrap)
}

View File

@ -1,7 +1,7 @@
import path from 'path'
import { parse } from 'papaparse'
describe('ResultsPage', () => {
describe('Results page', () => {
beforeEach(() => {
cy.intercept({ url: '/api/typebots/typebot2/results*', method: 'GET' }).as(
'getResults'
@ -35,7 +35,7 @@ describe('ResultsPage', () => {
cy.findByText('content50').should('not.exist')
cy.findByText('content199').should('exist')
cy.findByTestId('table-wrapper').scrollTo('bottom')
cy.findByText('content149').should('exist')
cy.findByText('content149', { timeout: 10000 }).should('exist')
cy.findByTestId('table-wrapper').scrollTo('bottom')
cy.findByText('content99').should('exist')
cy.findByTestId('table-wrapper').scrollTo('bottom')