✅ Add E2E tests for toolbar zoom controls

frontend/packages/e2e/tests/e2e/toolbar.test.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+  const cookieButton = page.getByRole('button', {
+    name: 'Accept All Cookies',
+  })
+  await cookieButton.click({ timeout: 1000, force: true }).catch(() => {})
+})
+
+test('Desktop toolbar should be visible', async ({ page }) => {
+  const toolbar = page.locator('div[role="toolbar"][class*="DesktopToolbar"]')
+  await expect(toolbar).toBeVisible()
+})
+
+test('Zoom in button should increase zoom level', async ({ page }) => {
+  const toolbar = page.locator('div[role="toolbar"][class*="DesktopToolbar"]')
+  const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]')
+
+  const zoomLevelBefore = await zoomLevelText.textContent()
+
+  const zoomInButton = toolbar.getByTestId('zoom-in-button')
+  await zoomInButton.click()
+
+  const zoomLevelAfter = await zoomLevelText.textContent()
+  expect(Number.parseInt(zoomLevelBefore)).toBeLessThan(
+    Number.parseInt(zoomLevelAfter),
+  )
+})
+
+test('Zoom out button should decrease zoom level', async ({ page }) => {
+  const toolbar = page.locator('div[role="toolbar"][class*="DesktopToolbar"]')
+  const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]')
+
+  const zoomLevelBefore = await zoomLevelText.textContent()
+
+  const zoomOutButton = toolbar.getByTestId('zoom-out-button')
+  await zoomOutButton.click()
+
+  const zoomLevelAfter = await zoomLevelText.textContent()
+  expect(Number.parseInt(zoomLevelBefore)).toBeGreaterThan(
+    Number.parseInt(zoomLevelAfter),
+  )
+})

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ZoomControls/ZoomControls.tsx

@@ -42,13 +42,21 @@ export const ZoomControls: FC = () => {
   return (
     <div className={styles.wrapper}>
       <ToolbarButton asChild onClick={handleClickZoomOut}>
-        <IconButton icon={<Minus />} tooltipContent="Zoom Out" />
+        <IconButton
+          icon={<Minus />}
+          tooltipContent="Zoom Out"
+          data-testid="zoom-out-button"
+        />
       </ToolbarButton>
       <span className={styles.zoomLevelText}>
         {Math.floor(zoomLevel * 100)}%
       </span>
       <ToolbarButton asChild onClick={handleClickZoomIn}>
-        <IconButton icon={<Plus />} tooltipContent="Zoom In" />
+        <IconButton
+          icon={<Plus />}
+          tooltipContent="Zoom In"
+          data-testid="zoom-in-button"
+        />
       </ToolbarButton>
     </div>
   )