From 2a040308db7b4ea357da04e74834105e6346dabc Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Fri, 7 Jan 2022 07:33:01 +0100 Subject: [PATCH] =?UTF-8?q?chore(bubbles):=20=E2=9C=85=20Add=20e2e=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graph/BlockNode/StepNode/StepNode.tsx | 11 +-- .../StepNode/TextEditor/TextEditor.tsx | 1 + .../BlockNode/StepNode/TextEditor/ToolBar.tsx | 30 ++++--- apps/builder/cypress/tests/bubbles.ts | 78 +++++++++++++++++++ apps/builder/services/publicTypebot.tsx | 2 +- apps/builder/services/typebots.ts | 3 + 6 files changed, 107 insertions(+), 18 deletions(-) create mode 100644 apps/builder/cypress/tests/bubbles.ts diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx index 2a7592f88..c6b2fff7e 100644 --- a/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx +++ b/apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx @@ -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(undefined) + const [isEditing, setIsEditing] = useState( + 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) ? ( { {...props} > - } - /> - } - /> - } - /> + + } + /> + + + } + /> + + + } + /> + } /> ) diff --git a/apps/builder/cypress/tests/bubbles.ts b/apps/builder/cypress/tests/bubbles.ts new file mode 100644 index 000000000..f25ff5a26 --- /dev/null +++ b/apps/builder/cypress/tests/bubbles.ts @@ -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) +} diff --git a/apps/builder/services/publicTypebot.tsx b/apps/builder/services/publicTypebot.tsx index cda148fc1..55a8aeb96 100644 --- a/apps/builder/services/publicTypebot.tsx +++ b/apps/builder/services/publicTypebot.tsx @@ -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 diff --git a/apps/builder/services/typebots.ts b/apps/builder/services/typebots.ts index 97d1e9638..12033a450 100644 --- a/apps/builder/services/typebots.ts +++ b/apps/builder/services/typebots.ts @@ -211,3 +211,6 @@ export const parseNewTypebot = ({ settings, } } + +export const isStepText = (step: Step): step is TextStep => + step.type === StepType.TEXT