✅ Add E2E tests for toolbar zoom controls

[sasamuku]

User description

Related Issue

Add E2E tests for toolbar zoom controls.

Testing

Other Information

---

PR Type

Tests, Enhancement

---

Description

• Added E2E tests for toolbar zoom controls.

• Enhanced accessibility with aria-label attributes.

• Verified zoom in/out functionality with Playwright tests.

---

Changes walkthrough 📝

	Relevant files
Tests	toolbar.test.ts Added E2E tests for toolbar functionality                                frontend/packages/e2e/tests/e2e/toolbar.test.ts Added E2E tests for toolbar visibility. Verified zoom in and zoom out functionality. Utilized Playwright for testing toolbar behavior. +44/-0
Enhancement	DesktopToolbar.tsx Added `aria-label` for desktop toolbar                                      frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/DesktopToolbar.tsx Added aria-label for desktop toolbar. Improved accessibility for toolbar component. +1/-1      ZoomControls.tsx Added `aria-label` for zoom controls                                          frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ZoomControls/ZoomControls.tsx Added aria-label for zoom in/out buttons. Enhanced accessibility for zoom controls. +10/-2

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 49a4744

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[qodo-merge-pro-for-open-source]

CI Feedback 🧐

(Feedback updated until commit e19d54a)

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: run-e2e / e2e-test

Failed stage: Run e2e tests [❌]

Failed test name: tests/vrt/vrt.test.ts › top

Failure summary: The action failed due to a Visual Regression Test (VRT) failure: The test 'top' in tests/vrt/vrt.test.ts failed because the screenshot comparison did not match the expected result The test was retried 2 times but continued to fail 6 other tests passed successfully, but this single VRT failure caused the entire check to fail The failure indicates that there were visual differences between the expected and actual UI appearance

Relevant error logs: 1: ##[group]Operating System 2: Ubuntu ... 189: Scope: all 11 workspace projects 190: Lockfile is up to date, resolution step is skipped 191: Progress: resolved 1, reused 0, downloaded 0, added 0 192: Packages: +1440 193: ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 194: Progress: resolved 1440, reused 1289, downloaded 0, added 0 195: Progress: resolved 1440, reused 1420, downloaded 0, added 516 196: Progress: resolved 1440, reused 1420, downloaded 0, added 1440, done 197: WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/packages/cli/dist-cli/bin/cli.js' ... 202: + @turbo/gen 2.1.2 203: + syncpack 13.0.0 204: + turbo 2.1.2 205: frontend/apps/docs postinstall$ fumadocs-mdx 206: frontend/apps/docs postinstall: [MDX] types generated 207: frontend/apps/docs postinstall: Done 208: frontend/apps/erd-web postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm 209: frontend/apps/erd-web postinstall: Done 210: WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/@liam-hq/cli/dist-cli/bin/cli.js' ... 1455: PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin 1456: URL: https://liam-erd-hkt2t1l9u-route-06-core.vercel.app 1457: ##[endgroup] 1458: > @liam-hq/e2e@0.0.0 test:e2e /home/runner/work/liam/liam/frontend/packages/e2e 1459: > playwright test 1460: Running 7 tests using 1 worker 1461: ······××F 1462: 1) [chromium] › tests/vrt/vrt.test.ts:26:5 › top ───────────────────────────────────────────────── 1463: Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m ... 1494: ──────────────────────────────────────────────────────────────────────────────────────────────── 1495: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1496: test-results/vrt-vrt-top-chromium/top-1-actual.png 1497: ──────────────────────────────────────────────────────────────────────────────────────────────── 1498: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1499: test-results/vrt-vrt-top-chromium/top-1-diff.png 1500: ──────────────────────────────────────────────────────────────────────────────────────────────── 1501: Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── 1502: Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m ... 1538: test-results/vrt-vrt-top-chromium-retry1/top-1-diff.png 1539: ──────────────────────────────────────────────────────────────────────────────────────────────── 1540: attachment #4: trace (application/zip) ───────────────────────────────────────────────────────── 1541: test-results/vrt-vrt-top-chromium-retry1/trace.zip 1542: Usage: 1543: pnpm exec playwright show-trace test-results/vrt-vrt-top-chromium-retry1/trace.zip 1544: ──────────────────────────────────────────────────────────────────────────────────────────────── 1545: Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── 1546: Error: �[2mexpect(�[22m�[31mpage�[39m�[2m).�[22mtoHaveScreenshot�[2m(�[22m�[32mexpected�[39m�[2m)�[22m ... 1576: tests/vrt/vrt.test.ts-snapshots/top-1-chromium-linux.png 1577: ──────────────────────────────────────────────────────────────────────────────────────────────── 1578: attachment #2: top-1-actual.png (image/png) ──────────────────────────────────────────────────── 1579: test-results/vrt-vrt-top-chromium-retry2/top-1-actual.png 1580: ──────────────────────────────────────────────────────────────────────────────────────────────── 1581: attachment #3: top-1-diff.png (image/png) ────────────────────────────────────────────────────── 1582: test-results/vrt-vrt-top-chromium-retry2/top-1-diff.png 1583: ──────────────────────────────────────────────────────────────────────────────────────────────── 1584: 1 failed 1585: [chromium] › tests/vrt/vrt.test.ts:26:5 › top ────────────────────────────────────────────────── 1586: 6 passed (32.6s) 1587: ELIFECYCLE  Command failed with exit code 1. 1588: ##[error]Process completed with exit code 1.

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Test Coverage The zoom tests only verify a single zoom in/out click. Consider adding tests for edge cases like maximum/minimum zoom levels and multiple clicks. test('Zoom in button should increase zoom level', async ({ page }) => { const toolbar = page.getByRole('toolbar', { name: 'Desktop toolbar' }) const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]') const zoomLevelBefore = await zoomLevelText.textContent() const zoomInButton = toolbar.getByRole('button', { name: 'Zoom in' }) 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.getByRole('toolbar', { name: 'Desktop toolbar' }) const zoomLevelText = toolbar.locator('span[class*="zoomLevelText"]') const zoomLevelBefore = await zoomLevelText.textContent() const zoomOutButton = toolbar.getByRole('button', { name: 'Zoom out' }) await zoomOutButton.click() const zoomLevelAfter = await zoomLevelText.textContent() expect(Number.parseInt(zoomLevelBefore)).toBeGreaterThan( Number.parseInt(zoomLevelAfter), ) }) Error Handling The cookie button click has a catch block that silently ignores errors. Consider adding proper error handling or test assertions for when the cookie button is not present. await cookieButton.click({ timeout: 1000, force: true }).catch(() => {})

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add numeric validation safeguards Add validation that zoom level text contains only numeric values before parsing to prevent potential NaN issues frontend/packages/e2e/tests/e2e/toolbar.test.ts [26-28] -expect(Number.parseInt(zoomLevelBefore)).toBeLessThan( - Number.parseInt(zoomLevelAfter), -) +const beforeLevel = Number.parseInt(zoomLevelBefore?.replace(/[^0-9]/g, '') || '0'); +const afterLevel = Number.parseInt(zoomLevelAfter?.replace(/[^0-9]/g, '') || '0'); +expect(beforeLevel).toBeLessThan(afterLevel); Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The suggestion adds important input sanitization to prevent potential NaN issues when parsing zoom levels. This makes the test more robust by handling edge cases where non-numeric characters might be present.	Medium
General	Improve error handling robustness Add error handling and retry logic for the cookie button click to make the test more resilient. The current force:true approach could mask underlying issues. frontend/packages/e2e/tests/e2e/toolbar.test.ts [8] -await cookieButton.click({ timeout: 1000, force: true }).catch(() => {}) +try { + await cookieButton.click({ timeout: 1000 }); +} catch (e) { + console.warn('Cookie button not found or not clickable, continuing test...'); +} Apply this suggestion Suggestion importance[1-10]: 7 __ Why: The suggestion improves test reliability by adding proper error handling and logging instead of silently catching errors. This helps with debugging test failures and makes the test behavior more explicit.	Medium

[MH4GF]

LGTM! but I wrote some comments.

[MH4GF]

This looks like it should only be run once at the beginning of every test.

ref: Global setup and teardown | Playwright

Of course, it can be handled by another PR.

[sasamuku]

I think so, I'll do by another PR👍