2
0

chore(bubbles): Add e2e tests

This commit is contained in:
Baptiste Arnaud
2022-01-07 07:33:01 +01:00
parent 6fe27bd8ea
commit 2a040308db
6 changed files with 107 additions and 18 deletions

View File

@ -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'
@ -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,
@ -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(
@ -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}

View File

@ -87,6 +87,7 @@ export const TextEditor = ({
edge: 'end',
})
},
'aria-label': 'Text editor',
}}
initialValue={
initialValue.length === 0

View File

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