Conversation
- Included new tests for loading and navigating Vite plugin documentation pages. - Updated existing tests to verify the presence of Vite plugin links and titles in the documentation navigation. - Enhanced accessibility tests by adding Vite plugin routes to ensure proper landmarks. This update improves test coverage for the Vite plugin documentation, ensuring users have a seamless experience navigating the relevant pages.
- Updated test definitions in `docs-switcher.test.ts` and `vite-plugin-viteconfig.test.ts` to enhance code clarity by formatting parameters across multiple lines. - Ensured consistent formatting for expect statements to improve maintainability and readability of the test code. This change aims to streamline the test code structure, making it easier for future developers to understand and modify the tests.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdded Playwright test coverage for new Vite plugin documentation pages. Changes include expanding A11y smoke tests with new routes, adding navigation tests for the Vite plugin pages, introducing a comprehensive documentation switcher UI test suite, and adding specific tests validating the Vite config documentation page. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
the
tests
- Updated tests in `docs-switcher.test.ts` to accommodate both tab and button switcher implementations, ensuring at least one is present. - Improved visibility checks for switcher elements and their selected states, regardless of their role. - Added keyboard navigation support for both tabs and buttons, enhancing accessibility. - Verified ARIA attributes for switcher elements to ensure compliance with accessibility standards. These changes improve the robustness of the tests and ensure a consistent user experience across different switcher implementations.
- Added helper functions to streamline tab and button checks for the documentation switcher. - Updated tests to ensure the switcher displays correctly on the docs root page and verifies the presence of both arkenv and vite-plugin options. - Improved assertions for content visibility and accessibility, including checks for aria-selected attributes. - Refined navigation tests to confirm correct content loading and switching between sections without console errors.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
tooling/playwright-www/tests/docs-switcher.test.ts (2)
5-16: Use proper Playwright types instead ofany.The
pageparameter should be typed asPagefrom@playwright/testfor better type safety and IDE support.Apply this diff to improve the typing:
+import type { Page } from "@playwright/test"; + // Helper function to check if switcher exists and get tabs -async function getSwitcherTabs(page: any) { +async function getSwitcherTabs(page: Page) { const tablist = page.locator('[role="tablist"]'); const tablistCount = await tablist.count();
19-28: Use proper Playwright types instead ofany.The
tabsparameter should be typed asLocatorfrom@playwright/test.Apply this diff to improve the typing:
+import type { Locator } from "@playwright/test"; + // Helper function to find a tab by text -async function findTabByText(tabs: any, tabCount: number, searchText: string) { +async function findTabByText(tabs: Locator, tabCount: number, searchText: string) { for (let i = 0; i < tabCount; i++) { const tab = tabs.nth(i); const text = await tab.textContent();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
tooling/playwright-www/tests/a11y.test.ts(1 hunks)tooling/playwright-www/tests/docs-navigation.test.ts(3 hunks)tooling/playwright-www/tests/docs-switcher.test.ts(1 hunks)tooling/playwright-www/tests/vite-plugin-viteconfig.test.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-09T17:37:19.650Z
Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 132
File: packages/arkenv/README.md:13-14
Timestamp: 2025-09-09T17:37:19.650Z
Learning: For yamcodes/arkenv project: Runtime support documentation should link to specific examples: Node.js (examples/basic), Bun (examples/with-bun), Vite (examples/with-vite-react-ts).
Applied to files:
tooling/playwright-www/tests/vite-plugin-viteconfig.test.tstooling/playwright-www/tests/a11y.test.tstooling/playwright-www/tests/docs-navigation.test.ts
🧬 Code graph analysis (3)
tooling/playwright-www/tests/vite-plugin-viteconfig.test.ts (2)
tooling/playwright-www/tests/utils/console-errors.ts (1)
assertNoConsoleErrors(62-110)tooling/playwright-www/tests/examples.test.ts (1)
test(4-94)
tooling/playwright-www/tests/docs-navigation.test.ts (4)
tooling/playwright-www/tests/examples.test.ts (1)
test(4-94)tooling/playwright-www/tests/integrations.test.ts (1)
test(4-166)tooling/playwright-www/tests/quickstart.test.ts (3)
test(4-186)page(18-34)page(44-51)tooling/playwright-www/tests/homepage.test.ts (1)
test(4-208)
tooling/playwright-www/tests/docs-switcher.test.ts (1)
tooling/playwright-www/tests/utils/console-errors.ts (1)
assertNoConsoleErrors(62-110)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-e2e (a11y)
🔇 Additional comments (12)
tooling/playwright-www/tests/a11y.test.ts (1)
18-19: LGTM! Proper a11y coverage for new Vite plugin pages.The addition of these routes extends accessibility testing to the new Vite plugin documentation pages, ensuring they meet the same a11y standards as existing docs pages.
tooling/playwright-www/tests/docs-navigation.test.ts (3)
58-74: LGTM! Consistent test coverage for vite-plugin pages.The test follows the established pattern for other documentation sections (integrations, how-to), ensuring vite-plugin pages load correctly and have proper structure.
146-150: LGTM! Proper page title validation for vite-plugin docs.The expected titles are clear and consistent with the naming convention used for other documentation pages.
201-202: LGTM! Console error checks extended to vite-plugin pages.Ensures the new vite-plugin documentation pages don't introduce console errors, maintaining the same quality standards as existing docs.
tooling/playwright-www/tests/vite-plugin-viteconfig.test.ts (4)
5-11: LGTM! Solid foundational page load test.Verifies the page loads and displays the correct heading, establishing a baseline for the other tests.
25-47: LGTM! Comprehensive code example validation.Good use of
.first()to handle syntax-highlighted code blocks that may have multiple matching elements. The test ensures all key import statements and code patterns are present.
79-97: LGTM! Thorough external link validation with defensive coding.The conditional logic properly handles cases where the link might not be present, and the security attributes (target, rel) are correctly validated when the link exists.
99-112: LGTM! Flexible text matching for syntax-highlighted code.Using flexible text selectors is appropriate here since code blocks with syntax highlighting can have complex DOM structures that make exact matching unreliable.
tooling/playwright-www/tests/docs-switcher.test.ts (4)
31-72: LGTM! Robust switcher detection with fallback logic.The test handles multiple switcher implementations (tablist vs buttons/links) and includes fallback navigation to verify functionality when the switcher UI is not present. This defensive approach ensures the tests remain stable across UI changes.
138-169: LGTM! Proper validation of default section with accessibility checks.The test verifies both the content display and ARIA attributes, ensuring the default arkenv section is properly selected and accessible.
300-313: LGTM! Defensive handling of conditionally visible content.Good use of
.toHaveCount(1)instead of visibility check at Line 312, accounting for elements that may be hidden on certain viewports (md:hidden class).
382-415: LGTM! Comprehensive keyboard navigation testing.Excellent coverage of keyboard accessibility, testing focus management, arrow key navigation, and Enter key activation. This ensures the switcher is fully keyboard-accessible.
1 participant
Closes #384.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.