Skip to content

Commit

Permalink
chore(bubbles): ✅ Add e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
baptisteArno committed Jan 7, 2022
1 parent 6fe27bd commit 2a04030
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useMemo, useState } from 'react'
import { Block, Step, StepType } from 'models'
import { Block, Step } from 'models'
import { SourceEndpoint } from './SourceEndpoint'
import { useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
Expand All @@ -19,6 +19,7 @@ import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { StepNodeContextMenu } from './RightClickMenu'
import { SettingsPopoverContent } from './SettingsPopoverContent'
import { isStepText } from 'services/typebots'

export const StepNode = ({
step,
Expand All @@ -41,7 +42,9 @@ export const StepNode = ({
const [isConnecting, setIsConnecting] = useState(false)
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
const [isEditing, setIsEditing] = useState<boolean | undefined>(undefined)
const [isEditing, setIsEditing] = useState<boolean>(
isStepText(step) && step.content.plainText === ''
)

useEffect(() => {
setIsConnecting(
Expand Down Expand Up @@ -139,9 +142,7 @@ export const StepNode = ({
connectingIds?.target?.blockId,
])

return step.type === StepType.TEXT &&
(isEditing ||
(isEditing === undefined && step.content.plainText === '')) ? (
return isEditing && isStepText(step) ? (
<TextEditor
stepId={step.id}
initialValue={step.content.richText}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export const TextEditor = ({
edge: 'end',
})
},
'aria-label': 'Text editor',
}}
initialValue={
initialValue.length === 0
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,24 @@ export const ToolBar = (props: StackProps) => {
{...props}
>
<Button size="sm">Variables</Button>
<MarkToolbarButton
type={getPluginType(editor, MARK_BOLD)}
icon={<BoldIcon />}
/>
<MarkToolbarButton
type={getPluginType(editor, MARK_ITALIC)}
icon={<ItalicIcon />}
/>
<MarkToolbarButton
type={getPluginType(editor, MARK_UNDERLINE)}
icon={<UnderlineIcon />}
/>
<span data-testid="bold-button">
<MarkToolbarButton
type={getPluginType(editor, MARK_BOLD)}
icon={<BoldIcon />}
/>
</span>
<span data-testid="italic-button">
<MarkToolbarButton
type={getPluginType(editor, MARK_ITALIC)}
icon={<ItalicIcon />}
/>
</span>
<span data-testid="underline-button">
<MarkToolbarButton
type={getPluginType(editor, MARK_UNDERLINE)}
icon={<UnderlineIcon />}
/>
</span>
<LinkToolbarButton icon={<LinkIcon />} />
</HStack>
)
Expand Down
78 changes: 78 additions & 0 deletions apps/builder/cypress/tests/bubbles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { parseTestTypebot } from 'cypress/plugins/utils'
import { StepType } from 'models'

describe('Text bubbles', () => {
beforeEach(() => {
cy.task('seed')
cy.task(
'createTypebot',
parseTestTypebot({
id: 'typebot3',
name: 'Typebot #3',
ownerId: 'test2',
steps: {
byId: {
step1: {
id: 'step1',
blockId: 'block1',
type: StepType.TEXT,
content: { html: '', plainText: '', richText: [] },
},
},
allIds: ['step1'],
},
blocks: {
byId: {
block1: {
id: 'block1',
graphCoordinates: { x: 400, y: 200 },
title: 'Block #1',
stepIds: ['step1'],
},
},
allIds: ['block1'],
},
})
)
cy.signOut()
})

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

const getIframeBody = () => {
return cy
.get('#typebot-iframe')
.its('0.contentDocument.body')
.should('not.be.empty')
.then(cy.wrap)
}
2 changes: 1 addition & 1 deletion apps/builder/services/publicTypebot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,5 +83,5 @@ const blockContainsInput = (
stepIsInput(typebot.steps.byId[stepId])
)

const stepIsInput = (step: Step): step is InputStep =>
export const stepIsInput = (step: Step): step is InputStep =>
step.type === StepType.TEXT_INPUT
3 changes: 3 additions & 0 deletions apps/builder/services/typebots.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,3 +211,6 @@ export const parseNewTypebot = ({
settings,
}
}

export const isStepText = (step: Step): step is TextStep =>
step.type === StepType.TEXT

0 comments on commit 2a04030

Please sign in to comment.