🛠️ Adapt Cypress to Turbo Repo

apps/builder/.gitignore

@@ -0,0 +1,2 @@
+cypress/videos
+cypress/screenshots

apps/builder/components/board/Board.tsx

@@ -1,13 +1,13 @@
 import { Flex } from '@chakra-ui/react'
 import React from 'react'
-import StepsList from './StepTypesList'
 import Graph from './graph/Graph'
 import { DndContext } from 'contexts/DndContext'
+import StepTypesList from './StepTypesList'
 
 export const Board = () => (
   <Flex flex="1" pos="relative" bgColor="gray.50">
     <DndContext>
-      <StepsList />
+      <StepTypesList />
       <Graph />
     </DndContext>
   </Flex>

apps/builder/components/board/graph/Graph.tsx

@@ -10,7 +10,6 @@ import { StartBlockNode } from './BlockNode/StartBlockNode'
 const Graph = () => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useDnd()
-  const graphRef = useRef<HTMLDivElement | null>(null)
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
   const { typebot } = useTypebot()
   const {
@@ -59,8 +58,8 @@ const Graph = () => {
     addNewBlock({
       step: draggedStep,
       type: draggedStepType,
-      x: e.x - graphPosition.x - blockWidth / 3,
-      y: e.y - graphPosition.y - 20,
+      x: e.clientX - graphPosition.x - blockWidth / 3,
+      y: e.clientY - graphPosition.y - 20,
     })
     setDraggedStep(undefined)
     setDraggedStepType(undefined)
@@ -69,11 +68,10 @@ const Graph = () => {
 
   if (!typebot) return <></>
   return (
-    <Flex ref={graphContainerRef} pos="relative" flex="1" h="full">
+    <Flex ref={graphContainerRef} flex="1" h="full">
       <Flex
-        ref={graphRef}
         flex="1"
-        h="full"
+        boxSize={'200px'}
         style={{
           transform,
         }}

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -85,7 +85,7 @@ export const TypebotButton = ({
       mb={6}
       rounded="lg"
       whiteSpace="normal"
-      data-testid="typebot-button"
+      data-testid={`typebot-button-${typebot.id}`}
       opacity={isDragging ? 0.2 : 1}
       ref={setNodeRef}
       {...listeners}

apps/builder/cypress.json

@@ -3,5 +3,6 @@
   "chromeWebSecurity": false,
   "integrationFolder": "cypress/tests",
   "viewportWidth": 1400,
-  "viewportHeight": 800
+  "viewportHeight": 800,
+  "video": false
 }

apps/builder/cypress/plugins/database.ts

@@ -1,5 +1,5 @@
 import { PrismaClient } from '.prisma/client'
-import { StartBlock, StepType } from 'bot-engine'
+import { Block, StartBlock, StepType } from 'bot-engine'
 
 const prisma = new PrismaClient()
 
@@ -37,11 +37,42 @@ const createTypebots = () => {
         label: 'Start',
       },
     ],
-    title: 'Start',
+    title: 'Home',
   }
-  prisma.typebot.createMany({
+  const blocks: Block[] = [
+    {
+      id: 'block1',
+      title: 'Block1',
+      graphCoordinates: { x: 150, y: 150 },
+      steps: [
+        { id: 'step1', blockId: 'block1', type: StepType.TEXT, content: '' },
+        {
+          id: 'step2',
+          blockId: 'block1',
+          type: StepType.DATE_PICKER,
+          content: '',
+        },
+      ],
+    },
+    {
+      id: 'block2',
+      title: 'Block2',
+      graphCoordinates: { x: 300, y: 300 },
+      steps: [
+        { id: 'step1', blockId: 'block2', type: StepType.TEXT, content: '' },
+      ],
+    },
+  ]
+  return prisma.typebot.createMany({
     data: [
       { id: 'typebot1', name: 'Typebot #1', ownerId: 'test2', startBlock },
+      {
+        id: 'typebot2',
+        name: 'Typebot #2',
+        ownerId: 'test2',
+        startBlock,
+        blocks,
+      },
     ],
   })
 }

apps/builder/cypress/tests/auth.ts

@@ -1,104 +0,0 @@
-describe('SignIn page', () => {
-  beforeEach(() => {
-    cy.signOut()
-  })
-
-  it('can continue with Google', () => {
-    cy.visit('/signin')
-    const username = Cypress.env('GOOGLE_USER')
-    const password = Cypress.env('GOOGLE_PW')
-    const loginUrl = Cypress.env('SITE_NAME')
-    const cookieName = Cypress.env('COOKIE_NAME')
-    exectueSocialLogin(
-      'GoogleSocialLogin',
-      username,
-      password,
-      loginUrl,
-      cookieName
-    )
-  })
-
-  it('can continue with GitHub', () => {
-    cy.visit('/signin')
-    const username = Cypress.env('GITHUB_USER')
-    const password = Cypress.env('GITHUB_PW')
-    const loginUrl = Cypress.env('SITE_NAME')
-    const cookieName = Cypress.env('COOKIE_NAME')
-    exectueSocialLogin(
-      'GitHubSocialLogin',
-      username,
-      password,
-      loginUrl,
-      cookieName
-    )
-  })
-
-  it('can continue with Facebook', () => {
-    cy.visit('/signin')
-    const username = Cypress.env('FACEBOOK_USER')
-    const password = Cypress.env('FACEBOOK_PW')
-    const loginUrl = Cypress.env('SITE_NAME')
-    const cookieName = Cypress.env('COOKIE_NAME')
-    exectueSocialLogin(
-      'FacebookSocialLogin',
-      username,
-      password,
-      loginUrl,
-      cookieName,
-      [
-        'button[data-testid="cookie-policy-dialog-manage-button"]',
-        'button[data-testid="cookie-policy-manage-dialog-accept-button"]',
-      ]
-    )
-  })
-
-  // We don't test email sign in because disabling email sending is not straightforward
-})
-
-const exectueSocialLogin = (
-  task: 'FacebookSocialLogin' | 'GoogleSocialLogin' | 'GitHubSocialLogin',
-  username: string,
-  password: string,
-  loginUrl: string,
-  cookieName: string,
-  trackingConsentSelectors?: string[]
-) => {
-  const selectorId =
-    task === 'FacebookSocialLogin'
-      ? 'facebook'
-      : task === 'GoogleSocialLogin'
-      ? 'google'
-      : 'github'
-  const socialLoginOptions = {
-    username,
-    password,
-    loginUrl,
-    headless: true,
-    logs: true,
-    isPopup: false,
-    loginSelector: `[data-testid="${selectorId}"]`,
-    postLoginSelector: `[data-testid="authenticated"]`,
-    trackingConsentSelectors,
-  }
-
-  cy.task(task, socialLoginOptions).then(({ cookies }: any) => {
-    const cookie = cookies
-      .filter((cookie: any) => cookie.name === cookieName)
-      .pop()
-    if (cookie) {
-      cy.setCookie(cookie.name, cookie.value, {
-        domain: cookie.domain,
-        expiry: cookie.expires,
-        httpOnly: cookie.httpOnly,
-        path: cookie.path,
-        secure: cookie.secure,
-      })
-
-      Cypress.Cookies.defaults({
-        preserve: cookieName,
-      })
-    }
-    cy.visit('/typebots')
-    cy.findByRole('button', { name: 'Create a folder' }).should('exist')
-  })
-}

apps/builder/cypress/tests/board.ts

@@ -3,8 +3,10 @@ describe('BoardPage', () => {
     cy.task('seed')
     cy.signOut()
   })
+
   it('steps should be droppable', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot1')
+    // Can't find an easy way to implement this
   })
 })

apps/builder/cypress/tests/dashboard.ts

@@ -29,11 +29,11 @@ describe('Dashboard page', () => {
   it('should be droppable', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots')
-    cy.findByTestId('typebot-button').mouseMoveBy(-100, 0, {
+    cy.findByTestId('typebot-button-typebot1').mouseMoveBy(-100, 0, {
       delay: 120,
     })
     cy.visit('/typebots/folders/folder1')
-    cy.findByTestId('typebot-button').mouseMoveBy(-300, -100, {
+    cy.findByTestId('typebot-button-typebot1').mouseMoveBy(-300, -100, {
       delay: 120,
     })
     cy.visit('/typebots')

apps/builder/cypress/tsconfig.json

@@ -9,6 +9,7 @@
     "isolatedModules": false,
     "allowJs": true,
     "noEmit": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "jsx": "react"
   }
 }

apps/builder/package.json

@@ -2,7 +2,7 @@
   "name": "builder",
   "version": "0.1.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",