From 1f44e8f31fe54dc1f68dcbbc90fbc06501d6a683 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sun, 6 Nov 2022 10:21:20 +0100
Subject: [PATCH] :bug: (editor) Fix bug preventing user to manually zoom in /
 out

Closes #156
---
 apps/builder/components/shared/Graph/Graph.tsx | 10 +++++-----
 .../components/shared/Graph/ZoomButtons.tsx    | 14 ++++++++------
 apps/builder/playwright/tests/editor.spec.ts   | 18 +++++++++++++++++-
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/builder/components/shared/Graph/Graph.tsx b/apps/builder/components/shared/Graph/Graph.tsx
index fe279728e..e24099c7b 100644
--- a/apps/builder/components/shared/Graph/Graph.tsx
+++ b/apps/builder/components/shared/Graph/Graph.tsx
@@ -179,20 +179,20 @@ export const Graph = ({
   useEventListener('click', handleClick, editorContainerRef.current)
   useEventListener('mousemove', handleMouseMove)
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const zoomIn = useCallback(() => zoom(zoomButtonsScaleBlock), [])
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const zoomOut = useCallback(() => zoom(-zoomButtonsScaleBlock), [])
+  const zoomIn = () => zoom(zoomButtonsScaleBlock)
+
+  const zoomOut = () => zoom(-zoomButtonsScaleBlock)
 
   return (
     <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
       <Flex ref={graphContainerRef} position="relative" {...props}>
-        <ZoomButtons onZoomIn={zoomIn} onZoomOut={zoomOut} />
+        <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
         <Flex
           flex="1"
           w="full"
           h="full"
           position="absolute"
+          data-testid="graph"
           style={{
             transform,
           }}
diff --git a/apps/builder/components/shared/Graph/ZoomButtons.tsx b/apps/builder/components/shared/Graph/ZoomButtons.tsx
index 014617d99..6e011f156 100644
--- a/apps/builder/components/shared/Graph/ZoomButtons.tsx
+++ b/apps/builder/components/shared/Graph/ZoomButtons.tsx
@@ -1,13 +1,15 @@
 import { Stack, IconButton } from '@chakra-ui/react'
 import { PlusIcon, MinusIcon } from 'assets/icons'
-import { memo } from 'react'
 import { headerHeight } from '../TypebotHeader'
 
 type Props = {
-  onZoomIn: () => void
-  onZoomOut: () => void
+  onZoomInClick: () => void
+  onZoomOutClick: () => void
 }
-export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
+export const ZoomButtons = ({
+  onZoomInClick: onZoomIn,
+  onZoomOutClick: onZoomOut,
+}: Props) => (
   <Stack
     pos="fixed"
     top={`calc(${headerHeight}px + 70px)`}
@@ -20,7 +22,7 @@ export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
   >
     <IconButton
       icon={<PlusIcon />}
-      aria-label={'Zoom out'}
+      aria-label={'Zoom in'}
       size="sm"
       onClick={onZoomIn}
       bgColor="white"
@@ -35,4 +37,4 @@ export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
       borderTopRadius={0}
     />
   </Stack>
-))
+)
diff --git a/apps/builder/playwright/tests/editor.spec.ts b/apps/builder/playwright/tests/editor.spec.ts
index 1a765ca76..7d756cdc1 100644
--- a/apps/builder/playwright/tests/editor.spec.ts
+++ b/apps/builder/playwright/tests/editor.spec.ts
@@ -108,7 +108,7 @@ test('Drag and drop blocks and items should work', async ({ page }) => {
     'Item 3'
   )
 })
-test('Undo / Redo buttons should work', async ({ page }) => {
+test('Undo / Redo and Zoom buttons should work', async ({ page }) => {
   const typebotId = cuid()
   await createTypebots([
     {
@@ -132,6 +132,22 @@ test('Undo / Redo buttons should work', async ({ page }) => {
   await expect(page.locator('text="Group #1"')).toBeVisible()
   await page.click('button[aria-label="Redo"]')
   await expect(page.locator('text="Group #1"')).toBeHidden()
+  await page.getByRole('button', { name: 'Zoom in' }).click()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(1\.2\);$/
+  )
+  await page.getByRole('button', { name: 'Zoom in' }).click()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(1\.4\);$/
+  )
+  await page.getByRole('button', { name: 'Zoom out' }).dblclick()
+  await page.getByRole('button', { name: 'Zoom out' }).dblclick()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(0\.6\);$/
+  )
 })
 
 test('Rename and icon change should work', async ({ page }) => {