perf(e2e): ⚡️ Migrate to Playwright

baptisteArno · Jan 28, 2022 · 73f277f · 73f277f · vercel · Jan 28, 2022
1 parent c5aaa32
commit 73f277f
Show file tree

Hide file tree

Showing 145 changed files with 3,104 additions and 2,346 deletions.
diff --git a/.env.example b/.env.example
@@ -37,3 +37,6 @@ STRIPE_WEBHOOK_SECRET=
 
 # (Optional) Used for GIF search
 NEXT_PUBLIC_GIPHY_API_KEY=
+
+# (Optional) for e2e tests
+GOOGLE_REFRESH_TOKEN_TEST=
diff --git a/apps/builder/.github/workflows/playwright.yml b/apps/builder/.github/workflows/playwright.yml
@@ -0,0 +1,26 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '14.x'
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v2
+      if: always()
+      with:
+        name: playwright-test-results
+        path: test-results/
diff --git a/apps/builder/.gitignore b/apps/builder/.gitignore
@@ -1,3 +1,10 @@
 cypress/videos
 cypress/screenshots
-cypress/downloads
+cypress/downloads
+node_modules/
+test-results/
+playwright-report/
+
+authenticatedState.json
+
+.env
diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
@@ -286,3 +286,14 @@ export const WebhookIcon = (props: IconProps) => (
     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
   </Icon>
 )
+
+export const GripIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <circle cx="12" cy="9" r="1"></circle>
+    <circle cx="19" cy="9" r="1"></circle>
+    <circle cx="5" cy="9" r="1"></circle>
+    <circle cx="12" cy="15" r="1"></circle>
+    <circle cx="19" cy="15" r="1"></circle>
+    <circle cx="5" cy="15" r="1"></circle>
+  </Icon>
+)
diff --git a/apps/builder/assets/styles/custom.css b/apps/builder/assets/styles/custom.css
@@ -0,0 +1,3 @@
+.grabbing * {
+  cursor: grabbing !important;
+}
diff --git a/apps/builder/components/board/Board.tsx b/apps/builder/components/board/Board.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import React from 'react'
 import Graph from './graph/Graph'
-import { DndContext } from 'contexts/DndContext'
+import { StepDndContext } from 'contexts/StepDndContext'
 import { StepTypesList } from './StepTypesList'
 import { PreviewDrawer } from './preview/PreviewDrawer'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
@@ -12,14 +12,14 @@ export const Board = () => {
   const { rightPanel } = useEditor()
   return (
     <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
-      <DndContext>
+      <StepDndContext>
         <StepTypesList />
         <GraphProvider>
           <Graph flex="1" />
           <BoardMenuButton pos="absolute" right="40px" top="20px" />
           {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
         </GraphProvider>
-      </DndContext>
+      </StepDndContext>
     </Flex>
   )
 }
diff --git a/apps/builder/components/board/StepTypesList/StepCard.tsx b/apps/builder/components/board/StepTypesList/StepCard.tsx
@@ -1,6 +1,6 @@
 import { Flex, HStack, StackProps, Text } from '@chakra-ui/react'
 import { StepType, DraggableStepType } from 'models'
-import { useDnd } from 'contexts/DndContext'
+import { useStepDnd } from 'contexts/StepDndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
 import { StepTypeLabel } from './StepTypeLabel'
@@ -12,7 +12,7 @@ export const StepCard = ({
   type: DraggableStepType
   onMouseDown: (e: React.MouseEvent, type: DraggableStepType) => void
 }) => {
-  const { draggedStepType } = useDnd()
+  const { draggedStepType } = useStepDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
 
   useEffect(() => {

diff --git a/apps/builder/components/board/StepTypesList/StepTypesList.tsx b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
@@ -13,12 +13,12 @@ import {
   IntegrationStepType,
   LogicStepType,
 } from 'models'
-import { useDnd } from 'contexts/DndContext'
+import { useStepDnd } from 'contexts/StepDndContext'
 import React, { useState } from 'react'
 import { StepCard, StepCardOverlay } from './StepCard'
 
 export const StepTypesList = () => {
-  const { setDraggedStepType, draggedStepType } = useDnd()
+  const { setDraggedStepType, draggedStepType } = useStepDnd()
   const [position, setPosition] = useState({
     x: 0,
     y: 0,

diff --git a/apps/builder/components/board/graph/BlockNode/BlockNode.tsx b/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
@@ -8,7 +8,7 @@ import {
 import React, { useEffect, useMemo, useState } from 'react'
 import { Block } from 'models'
 import { useGraph } from 'contexts/GraphContext'
-import { useDnd } from 'contexts/DndContext'
+import { useStepDnd } from 'contexts/StepDndContext'
 import { StepsList } from './StepsList'
 import { filterTable, isDefined } from 'utils'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
@@ -22,8 +22,8 @@ type Props = {
 export const BlockNode = ({ block }: Props) => {
   const { connectingIds, setConnectingIds, previewingEdgeId } = useGraph()
   const { typebot, updateBlock } = useTypebot()
-  const { setMouseOverBlockId } = useDnd()
-  const { draggedStep, draggedStepType } = useDnd()
+  const { setMouseOverBlockId } = useStepDnd()
+  const { draggedStep, draggedStepType } = useStepDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
   const isPreviewing = useMemo(() => {

diff --git a/...builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemsList.tsx b/...builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemsList.tsx
@@ -1,5 +1,5 @@
 import { Flex, Portal, Stack, Text, useEventListener } from '@chakra-ui/react'
-import { useDnd } from 'contexts/DndContext'
+import { useStepDnd } from 'contexts/StepDndContext'
 import { Coordinates } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext'
 import { ChoiceInputStep, ChoiceItem } from 'models'
@@ -19,7 +19,7 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
     mouseOverBlockId,
     setDraggedChoiceItem,
     setMouseOverBlockId,
-  } = useDnd()
+  } = useStepDnd()
   const showSortPlaceholders = useMemo(
     () => mouseOverBlockId === step.blockId && draggedChoiceItem,
     [draggedChoiceItem, mouseOverBlockId, step.blockId]

diff --git a/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/VideoUploadContent.tsx b/apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/VideoUploadContent.tsx
@@ -28,7 +28,6 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
         placeholder="Paste the video link..."
         initialValue={content?.url ?? ''}
         onChange={handleUrlChange}
-        delay={100}
       />
       <Text fontSize="sm" color="gray.400" textAlign="center">
         Works with Youtube, Vimeo and others

diff --git a/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx b/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
@@ -31,13 +31,12 @@ export const ChoiceInputSettingsBody = ({
       />
       {options?.isMultipleChoice && (
         <Stack>
-          <FormLabel mb="0" htmlFor="send">
+          <FormLabel mb="0" htmlFor="button">
             Button label:
           </FormLabel>
           <DebouncedInput
-            id="send"
+            id="button"
             initialValue={options?.buttonLabel ?? 'Send'}
-            delay={100}
             onChange={handleButtonLabelChange}
           />
         </Stack>

diff --git a/...lockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx b/...lockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
@@ -40,7 +40,6 @@ export const ComparisonItem = ({
       />
       {item.comparisonOperator !== ComparisonOperators.IS_SET && (
         <InputWithVariableButton
-          delay={100}
           initialValue={item.value ?? ''}
           onChange={handleChangeValue}
           placeholder="Type a value..."

diff --git a/...ode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx b/...ode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ConditonSettingsBody.tsx
@@ -21,6 +21,7 @@ export const ConditionSettingsBody = ({
 
   return (
     <TableList<Comparison>
+      initialItems={options.comparisons}
       onItemsChange={handleComparisonsChange}
       Item={ComparisonItem}
       ComponentBetweenItems={() => (

diff --git a/...ts/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx b/...ts/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
@@ -49,7 +49,6 @@ export const DateInputSettingsBody = ({
           <DebouncedInput
             id="from"
             initialValue={options.labels.from}
-            delay={100}
             onChange={handleFromChange}
           />
         </Stack>
@@ -62,7 +61,6 @@ export const DateInputSettingsBody = ({
           <DebouncedInput
             id="to"
             initialValue={options.labels.to}
-            delay={100}
             onChange={handleToChange}
           />
         </Stack>
@@ -74,7 +72,6 @@ export const DateInputSettingsBody = ({
         <DebouncedInput
           id="button"
           initialValue={options.labels.button}
-          delay={100}
           onChange={handleButtonLabelChange}
         />
       </Stack>

diff --git a/...s/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx b/...s/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
@@ -29,7 +29,6 @@ export const EmailInputSettingsBody = ({
         <DebouncedInput
           id="placeholder"
           initialValue={options.labels.placeholder}
-          delay={100}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -40,7 +39,6 @@ export const EmailInputSettingsBody = ({
         <DebouncedInput
           id="button"
           initialValue={options.labels.button}
-          delay={100}
           onChange={handleButtonLabelChange}
         />
       </Stack>

diff --git a/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx b/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
@@ -51,7 +51,6 @@ export const GoogleAnalyticsSettings = ({
           id="tracking-id"
           initialValue={options?.trackingId ?? ''}
           placeholder="G-123456..."
-          delay={100}
           onChange={handleTrackingIdChange}
         />
       </Stack>
@@ -63,7 +62,6 @@ export const GoogleAnalyticsSettings = ({
           id="category"
           initialValue={options?.category ?? ''}
           placeholder="Example: Typebot"
-          delay={100}
           onChange={handleCategoryChange}
         />
       </Stack>
@@ -75,7 +73,6 @@ export const GoogleAnalyticsSettings = ({
           id="action"
           initialValue={options?.action ?? ''}
           placeholder="Example: Submit email"
-          delay={100}
           onChange={handleActionChange}
         />
       </Stack>
@@ -98,7 +95,6 @@ export const GoogleAnalyticsSettings = ({
                 id="label"
                 initialValue={options?.label ?? ''}
                 placeholder="Example: Campaign Z"
-                delay={100}
                 onChange={handleLabelChange}
               />
             </Stack>

diff --git a/...pNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx b/...pNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx
@@ -149,7 +149,7 @@ const ActionOptions = ({
     case GoogleSheetsAction.INSERT_ROW:
       return (
         <TableList<Cell>
-          initialItems={options.cellsToInsert}
+          initialItems={options.cellsToInsert ?? { byId: {}, allIds: [] }}
           onItemsChange={handleInsertColumnsChange}
           Item={UpdatingCellItem}
           addLabel="Add a value"
@@ -167,7 +167,7 @@ const ActionOptions = ({
           />
           <Text>Cells to update</Text>
           <TableList<Cell>
-            initialItems={options.cellsToUpsert}
+            initialItems={options.cellsToUpsert ?? { byId: {}, allIds: [] }}
             onItemsChange={handleUpsertColumnsChange}
             Item={UpdatingCellItem}
             addLabel="Add a value"
@@ -186,7 +186,7 @@ const ActionOptions = ({
           />
           <Text>Cells to extract</Text>
           <TableList<ExtractingCell>
-            initialItems={options.cellsToExtract}
+            initialItems={options.cellsToExtract ?? { byId: {}, allIds: [] }}
             onItemsChange={handleExtractingCellsChange}
             Item={ExtractingCellItem}
             addLabel="Add a value"

diff --git a/...ckNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx b/...ckNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SheetsDropdown.tsx
@@ -30,8 +30,8 @@ export const SheetsDropdown = ({
       selectedItem={currentSheet?.name}
       items={(sheets ?? []).map((s) => s.name)}
       onValueChange={handleSpreadsheetSelect}
-      placeholder={isLoading ? 'Loading...' : 'Select the sheet'}
-      isDisabled={isLoading}
+      placeholder={'Select the sheet'}
+      isLoading={isLoading}
     />
   )
 }
diff --git a/...e/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx b/...e/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
@@ -28,8 +28,8 @@ export const SpreadsheetsDropdown = ({
       selectedItem={currentSpreadsheet?.name}
       items={(spreadsheets ?? []).map((s) => s.name)}
       onValueChange={handleSpreadsheetSelect}
-      placeholder={isLoading ? 'Loading...' : 'Search for spreadsheet'}
-      isDisabled={isLoading}
+      placeholder={'Search for spreadsheet'}
+      isLoading={isLoading}
     />
   )
 }
diff --git a/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx b/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
@@ -37,7 +37,6 @@ export const NumberInputSettingsBody = ({
         <DebouncedInput
           id="placeholder"
           initialValue={options.labels.placeholder}
-          delay={100}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -48,7 +47,6 @@ export const NumberInputSettingsBody = ({
         <DebouncedInput
           id="button"
           initialValue={options?.labels?.button ?? 'Send'}
-          delay={100}
           onChange={handleButtonLabelChange}
         />
       </Stack>

diff --git a/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx b/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
@@ -29,7 +29,6 @@ export const PhoneNumberSettingsBody = ({
         <DebouncedInput
           id="placeholder"
           initialValue={options.labels.placeholder}
-          delay={100}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -40,7 +39,6 @@ export const PhoneNumberSettingsBody = ({
         <DebouncedInput
           id="button"
           initialValue={options.labels.button}
-          delay={100}
           onChange={handleButtonLabelChange}
         />
       </Stack>

diff --git a/...ponents/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx b/...ponents/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/RedirectSettings.tsx
@@ -1,6 +1,7 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
 import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
 import { RedirectOptions } from 'models'
 import React from 'react'
 
@@ -21,11 +22,10 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
         <FormLabel mb="0" htmlFor="tracking-id">
           Url:
         </FormLabel>
-        <DebouncedInput
+        <InputWithVariableButton
           id="tracking-id"
           initialValue={options.url ?? ''}
           placeholder="Type a URL..."
-          delay={100}
           onChange={handleUrlChange}
         />
       </Stack>

diff --git a/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx b/.../board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx
@@ -37,7 +37,6 @@ export const SetVariableSettingsBody = ({
         <DebouncedTextarea
           id="expression"
           initialValue={options.expressionToEvaluate ?? ''}
-          delay={100}
           onChange={handleExpressionChange}
         />
       </Stack>

diff --git a/...ts/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx b/...ts/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
@@ -38,7 +38,6 @@ export const TextInputSettingsBody = ({
         <DebouncedInput
           id="placeholder"
           initialValue={options.labels.placeholder}
-          delay={100}
           onChange={handlePlaceholderChange}
         />
       </Stack>
@@ -49,7 +48,6 @@ export const TextInputSettingsBody = ({
         <DebouncedInput
           id="button"
           initialValue={options.labels.button}
-          delay={100}
           onChange={handleButtonLabelChange}
         />
       </Stack>