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 ( - + void - onZoomOut: () => void + onZoomInClick: () => void + onZoomOutClick: () => void } -export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => ( +export const ZoomButtons = ({ + onZoomInClick: onZoomIn, + onZoomOutClick: onZoomOut, +}: Props) => ( ( > } - 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} /> -)) +) 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 }) => {