✅add navigation test

[MH4GF]

User description

First, I added only the show mode test. Other patterns will be added later!

---

PR Type

Tests, Enhancement

---

Description

• Added E2E tests for navigation and URL parameter handling.

  • Includes tests for showMode changes and browser history navigation.
  • Skipped tests for table selection and hiding scenarios.

• Improved accessibility by adding aria-labels to key components.

  • Enhanced TableNameMenuButton, VisibilityButton, and SidebarTrigger.

---

Changes walkthrough 📝

	Relevant files
Tests	navigation.test.ts Add E2E tests for navigation and URL handling                        frontend/packages/e2e/tests/e2e/navigation.test.ts Added E2E tests for navigation and URL parameter handling. Implemented tests for showMode changes and browser history navigation. Added helper function for visibility checks in accounts table. Skipped tests for table selection and hiding scenarios. +86/-0
Enhancement	TableNameMenuButton.tsx Add aria-label to TableNameMenuButton                                        frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx Added aria-label to improve accessibility for menu buttons. Enhanced semantic clarity for assistive technologies. +1/-0      VisibilityButton.tsx Add aria-label to VisibilityButton                                              frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx Added aria-label to toggle visibility buttons. Improved accessibility for visibility toggle actions. +5/-1      Sidebar.tsx Add aria-label to Sidebar toggle button                                    frontend/packages/ui/src/components/Sidebar/Sidebar.tsx Added aria-label to sidebar toggle button. Improved accessibility for sidebar interaction. +1/-0

---

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: aa85cc7

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
test-liam-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2025 5:24am

[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 Several test cases are marked as skipped. Consider implementing these tests to ensure complete coverage of navigation functionality, especially for table selection and hiding scenarios. test.skip('selecting a table should update active parameter', async () => {}) test.skip('hiding a table should update hidden parameter', async () => {})

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

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Add initial state verification Add assertions to verify the initial state before running the navigation tests. Check that the username column is hidden by default before changing showMode. frontend/packages/e2e/tests/e2e/navigation.test.ts [47-54] test('should handle back/forward navigation with showMode changes', async ({ page, }) => { // Initial state const showModeButton = page.getByRole('button', { name: 'Show Mode' }) + await expectUserTableColumnInAccountsTableVisibility(page, 'hidden') // Change to ALL_FIELDS await showModeButton.click() [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: Adding initial state verification is crucial for test reliability as it ensures the test starts from a known state and validates the default behavior before proceeding with state changes.	Medium
Possible issue	Add navigation error handling Add error handling and timeout configuration for navigation operations to make tests more robust against slow responses. frontend/packages/e2e/tests/e2e/navigation.test.ts [67-70] // Go back -await page.goBack() +await Promise.all([ + page.waitForNavigation({ timeout: 5000 }), + page.goBack() +]); await expect(page).toHaveURL(/.*showMode=ALL_FIELDS/) await expectUserTableColumnInAccountsTableVisibility(page, 'visible') Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding timeout configuration and proper navigation handling makes the tests more robust against slow responses and network issues, reducing flaky test behavior.	Medium

[sasamuku]

LGTM ✨