test: add e2e tests for docs and tools pages

[anushkaaaaaaaa]

Description

I have added E2E tests for the Docs Page and Tools Page in this PR using Cypress to ensure proper functionality and rendering. These tests cover key aspects such as-:

• Docs Page & Tools Page: Verifying critical user flows.

Related issue(s)

• Implement E2E UI tests for the website critical flows #3671

Summary by CodeRabbit

• Tests
  • Added end-to-end suites for documentation and tools pages covering navigation, section/subsection checks, and card/link verification.
• Tests / Helpers
  • Added shared page-object helpers to streamline navigation, header and link verification across tests.
• Tests / Fixtures
  • Added structured fixtures for documentation sections and tooling resources to drive UI tests.
• Chores
  • Increased E2E command timeout and updated meeting and video entries in site configuration.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a70aaf4
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69197a85266fb700085fe6ba
😎 Deploy Preview	https://deploy-preview-4210--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Rate limit exceeded

@anushkaaaaaaaa has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 17 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between ceb10da and a70aaf4.

📒 Files selected for processing (1)

• markdown/docs/community/020-governance-and-policies/travel-guide.md (1 hunks)

Walkthrough

Added Cypress E2E tests, page objects, and fixtures for Docs and Tools pages; introduced two BasePage classes; increased Cypress defaultCommandTimeout from 8000ms to 15000ms; removed two meeting entries and updated newsroom videos in config JSONs.

Changes

Cohort / File(s)	Summary
Cypress config cypress.config.js	Increased defaultCommandTimeout from 8000 to 15000 ms.
Docs tests & fixture cypress/docspage.cy.js, cypress/fixtures/docsSections.json	New Docs E2E suite driven by docsSections.json; initializes page objects, verifies sidebar subsections, navigates sections, and asserts card links.
Tools tests & fixtures / config cypress/toolspage.cy.js, cypress/fixtures/toolsData.json, config/tools-automated.json	New Tools E2E suite that loads tool data (config/tools-automated.json), visits Tools page, and verifies Website/Github/Docs links per fixture entries.
Docs page objects & base cypress/pages/DocsPage.js, cypress/pages/basepagedocs.js	DocsPage now extends BasePage (basepagedocs); adds visit, header, section navigation, subsection verification, and card-link assertion helpers.
Tools page objects & base cypress/pages/ToolsPage.js, cypress/pages/BasePageTools.js	ToolsPage now extends BasePageTools; adds visit, header verification, typed link verification helpers. BasePageTools provides visit, header, and link helper methods.
Site config updates config/meetings.json, config/newsroom_videos.json	Removed two trailing meeting entries from meetings.json; removed one video entry and appended a new video entry in newsroom_videos.json.

Sequence Diagram(s)

sequenceDiagram
    participant Runner as Test Runner
    participant Home as HomePage
    participant Docs as DocsPage (BasePage)
    participant Fixture as docsSections.json

    Runner->>Home: init & navigate to home
    Runner->>Docs: visitDocsPage()
    Runner->>Fixture: load docsSections.json
    loop subsections
        Runner->>Docs: verifyConceptSubsection(href,label)
    end
    loop sections
        Runner->>Docs: goTo<Section>Section()
        Docs->>Docs: navigateToSection(label, href)
        Runner->>Docs: verifyCardLinks(href)
    end

Loading

sequenceDiagram
    participant Runner as Test Runner
    participant Home as HomePage
    participant Tools as ToolsPage (BasePageTools)
    participant Fixture as toolsData.json

    Runner->>Home: init & navigate to home
    Runner->>Tools: visitToolsPage()
    Runner->>Fixture: load toolsData.json (or config/tools-automated.json)
    loop categories
        loop linkType in [WebsiteLinks, GithubLinks, DocsLinks]
            Runner->>Tools: verifyToolLink(href, heading, linkType)
            Tools->>Tools: getLink / getHeaderText -> assert visibility & href
        end
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Check consistency between BasePage methods (basepagedocs vs BasePageTools) and their usage in DocsPage.js / ToolsPage.js.
• Validate fixture shapes (href, heading, array keys) against test expectations in docspage.cy.js and toolspage.cy.js.
• Inspect cypress/docspage.cy.js for an accidental nested test block and ensure Cypress best practices (no nested it).

Possibly related PRs

• chore: update tools.json #4332 — Updates config/tools-automated.json which is consumed by the new Tools tests (strong code-level connection).
• ci: add ci workflows #4227 — Adds CI workflow step to run Cypress E2E tests (enables execution of the newly added tests).
• feat: initial cypress setup #4134 — Earlier Cypress setup and scaffolding that this change builds upon (overlaps with cypress config and tests).

Suggested reviewers

• derberg
• sambhavgupta0705
• akshatnema
• devilkiller-ag
• vishvamsinh28
• TRohit20

Poem

🐰 I hopped through fixtures, links, and page,

Clicked headers, subsections, danced on stage,
Base pages tidy, assertions in queue,
Timeouts stretched longer — tests sprint through! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'test: add e2e tests for docs and tools pages' directly and clearly summarizes the main change—adding end-to-end tests for two specific pages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b9c3673) to head (a70aaf4).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4210   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          799       799           
  Branches       146       146           
=========================================
  Hits           799       799           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 6

🧹 Nitpick comments (5)

cypress/docspage.cy.js (2)

14-14: Update test suite description to reflect actual test scope.

The describe block is titled "Concepts section" but the test actually navigates through Concepts, Tutorials, and Tools sections. Consider updating to "Documentation sections" or similar.

-describe('Concepts section', () => {
+describe('Documentation sections', () => {

---

15-19: Consider expanding test coverage for each section.

The test navigates to Concepts, Tutorials, and Tools sections but only verifies subsections for Concepts. Consider adding verification for Tutorials and Tools sections as well.

cypress/toolspage.cy.js (2)

15-15: Fix formatting: Remove extra space in template literal.

There's an extra space at the beginning of the template literal that should be removed for consistent formatting.

-    describe(` ${sectionName} section`, () => {
+    describe(`${sectionName} section`, () => {

---

16-32: Consider splitting test into separate cases for better granularity.

The current test verifies all link types (website, GitHub, docs) in a single test case. While this works, consider splitting into separate test cases for better error isolation and more descriptive test results.

-      it('User verifies card Links', () => {
-        const websiteLinks = linksData.WebsiteLinks || [];
-        const githubLinks = linksData.GithubLinks || [];
-        const docsLinks = linksData.DocsLinks || [];
-
-        websiteLinks.forEach((link) => {
-          toolsPage.verifyWebsiteLinks(link.href, link.heading);
-        });
-
-        githubLinks.forEach((link) => {
-          toolsPage.verifyGithubLinks(link.href, link.heading);
-        });
-
-        docsLinks.forEach((link) => {
-          toolsPage.verifyDocsLinks(link.href, link.heading);
-        });
-      });
+      it('verifies website links', () => {
+        const websiteLinks = linksData.WebsiteLinks || [];
+        websiteLinks.forEach((link) => {
+          toolsPage.verifyWebsiteLinks(link.href, link.heading);
+        });
+      });
+
+      it('verifies GitHub links', () => {
+        const githubLinks = linksData.GithubLinks || [];
+        githubLinks.forEach((link) => {
+          toolsPage.verifyGithubLinks(link.href, link.heading);
+        });
+      });
+
+      it('verifies documentation links', () => {
+        const docsLinks = linksData.DocsLinks || [];
+        docsLinks.forEach((link) => {
+          toolsPage.verifyDocsLinks(link.href, link.heading);
+        });
+      });

cypress/pages/DocsPage.js (1)

19-22: Consider adding error handling for missing elements.

The method assumes the elements exist. Consider adding assertions to verify element existence before interacting with them.

 verifyConceptSubsection({ href, label, heading }) {
+   cy.get(`a[href="${href}"] span`).should('exist');
    cy.get(`a[href="${href}"] span`).contains(label).click();
+   cy.get('h1').should('exist');
    cy.get('h1').should('contain.text', heading);
  }

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e269c27 and fe803af.

📒 Files selected for processing (8)

• cypress.config.js (1 hunks)
• cypress/docspage.cy.js (1 hunks)
• cypress/fixtures/docsSections.json (1 hunks)
• cypress/fixtures/toolsData.json (1 hunks)
• cypress/pages/DocsPage.js (1 hunks)
• cypress/pages/ToolsPage.js (1 hunks)
• cypress/pages/homepage.js (2 hunks)
• cypress/toolspage.cy.js (1 hunks)

⏰ Context from checks skipped due to timeout of 180000ms (6)

• GitHub Check: Redirect rules - asyncapi-website
• GitHub Check: Header rules - asyncapi-website
• GitHub Check: Pages changed - asyncapi-website
• GitHub Check: Test NodeJS PR - windows-latest
• GitHub Check: Lighthouse CI
• GitHub Check: Test NodeJS PR - macos-13

🔇 Additional comments (10)

cypress/fixtures/docsSections.json (2)

34-37: Verify heading consistency for AsyncAPI Document entry.

The entry for "AsyncAPI Document" has a heading of "Introduction" which may not match the actual page heading. Please verify this mapping is correct.

---

1-91: Well-structured test data with comprehensive coverage.

The fixture provides good coverage of documentation sections including concepts, tutorials, and tools. The consistent structure with href, label, and heading properties will support maintainable test automation.

cypress/fixtures/toolsData.json (1)

1-677: Comprehensive tool categorization with good structure.

The fixture provides excellent coverage of the AsyncAPI ecosystem tools with well-organized categories and consistent link structure. This will enable thorough testing of the tools page.

cypress.config.js (1)

4-4: Appropriate timeout increase for comprehensive E2E tests.

The increased command timeout to 15 seconds is well-suited for the new docs and tools page tests, which may involve multiple page navigations and interactions.

cypress/pages/homepage.js (2)

1-2: Clean imports for new page objects.

The new imports for ToolsPage and DocsPage are properly added to support the navigation methods.

---

26-34: Well-implemented navigation methods following established patterns.

Both goToToolsPage() and goToDocsPage() methods follow the existing code patterns, use appropriate selectors, and return page object instances for method chaining.

cypress/docspage.cy.js (1)

7-12: Good test setup with page objects and fixtures.

The beforeEach setup properly initializes page objects, navigates to the docs page, and loads fixture data for comprehensive testing.

cypress/toolspage.cy.js (1)

1-35: LGTM! Well-structured E2E test implementation.

The test file follows good practices:

• Uses page object pattern for maintainability
• Leverages fixtures for test data
• Handles empty arrays gracefully with fallback
• Proper setup in beforeEach hook

cypress/pages/DocsPage.js (2)

8-8: Excellent flaky test fix!

The visibility assertion after clicking is a great practice to ensure the element is properly loaded before proceeding.

---

1-25: LGTM! Clean page object implementation.

The DocsPage class follows good page object model practices:

• Uses data-testid for reliable element selection
• Includes proactive flaky test fixes
• Clean method signatures with destructured parameters
• Consistent naming conventions

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

cypress/pages/DocsPage.js (2)

6-10: Consider simplifying the complex selector chain

The selector chain is quite complex and may be brittle. Consider breaking it down or adding intermediate checks for better maintainability.

 verifyCardLinks(href){
-  cy.get(
-    `[href="${href}"] [data-testid="Docs-div-contents"] [data-testid="Paragraph-test"]`
-  ).should('have.attr', 'data-testid', 'Paragraph-test');
+  cy.get(`[href="${href}"]`)
+    .find('[data-testid="Docs-div-contents"]')
+    .find('[data-testid="Paragraph-test"]')
+    .should('exist');
 }

---

17-39: Consider refactoring repetitive navigation methods

While the current implementation is clear, the repetitive navigation methods could potentially be refactored for better maintainability.

Consider a more DRY approach:

+  navigateToSection(section, href) {
+    cy.get(`a[href="${href}"] span`).contains(section).click();
+  }
+
-  goToTutorialsSection() {
-    cy.get('a[href="/docs/tutorials"] span').contains('Tutorials').click();
-  }
-
-  goToToolsSection() {
-    cy.get('a[href="/docs/tools"] span').contains('Tools').click();
-  }
+  goToTutorialsSection() {
+    this.navigateToSection('Tutorials', '/docs/tutorials');
+  }
+
+  goToToolsSection() {
+    this.navigateToSection('Tools', '/docs/tools');
+  }

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e1ca0d4 and 3fc1c3f.

📒 Files selected for processing (4)

• cypress/docspage.cy.js (1 hunks)
• cypress/fixtures/docsSections.json (1 hunks)
• cypress/pages/DocsPage.js (1 hunks)
• cypress/pages/ToolsPage.js (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• cypress/fixtures/docsSections.json

🚧 Files skipped from review as they are similar to previous changes (1)

• cypress/pages/ToolsPage.js

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: anshgoyalevil
PR: asyncapi/website#3557
File: tests/fixtures/markdown/check-edit-links-data.js:3-11
Timestamp: 2025-01-19T04:51:41.255Z
Learning: In the AsyncAPI website repository, the test data in `tests/fixtures/markdown/check-edit-links-data.js` intentionally includes inconsistent paths (with and without 'docs' prefix) to verify the script's ability to normalize and handle ambiguous path structures.

Learnt from: asyncapi-bot
PR: asyncapi/website#0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch

cypress/docspage.cy.js (5)

Learnt from: anshgoyalevil
PR: asyncapi/website#3557
File: tests/fixtures/markdown/check-edit-links-data.js:3-11
Timestamp: 2025-01-19T04:51:41.255Z
Learning: In the AsyncAPI website repository, the test data in `tests/fixtures/markdown/check-edit-links-data.js` intentionally includes inconsistent paths (with and without 'docs' prefix) to verify the script's ability to normalize and handle ambiguous path structures.

Learnt from: akshatnema
PR: asyncapi/website#3423
File: tests/index.test.js:2-7
Timestamp: 2025-01-18T08:44:43.614Z
Learning: In the AsyncAPI website project, JavaScript test files must include the .ts extension when importing TypeScript files (e.g., `require('../scripts/build-rss.ts')`). This is a project-specific requirement enforced by the linting rules and build setup, even though it differs from typical Node.js behavior.

Learnt from: vishvamsinh28
PR: asyncapi/website#3378
File: tests/markdown/check-markdown.test.js:133-138
Timestamp: 2024-11-29T17:36:09.783Z
Learning: When testing the 'main' function in 'check-markdown.test.js', it's acceptable to simply ensure it doesn't throw any errors, as the functions it calls are already tested elsewhere.

Learnt from: akshatnema
PR: asyncapi/website#3101
File: tests/fixtures/rssData.js:1-57
Timestamp: 2024-11-01T13:32:15.472Z
Learning: In the `tests/fixtures/rssData.js` file of the `@asyncapi/website` project, tests for edge cases such as empty strings for title or excerpt, very long text content, international characters (UTF-8), or malformed URLs in `slug` or `cover` are not necessary because these cases will not occur.

Learnt from: akshatnema
PR: asyncapi/website#3101
File: tests/build-rss.test.js:25-27
Timestamp: 2024-11-01T09:55:20.531Z
Learning: In `tests/build-rss.test.js`, replacing `jest.resetModules()` with `jest.resetAllMocks()` in the `afterEach()` block causes errors. It is necessary to use `jest.resetModules()` to reset the module registry between tests in this file.

cypress/pages/DocsPage.js (1)

Learnt from: anshgoyalevil
PR: asyncapi/website#3557
File: tests/fixtures/markdown/check-edit-links-data.js:3-11
Timestamp: 2025-01-19T04:51:41.255Z
Learning: In the AsyncAPI website repository, the test data in `tests/fixtures/markdown/check-edit-links-data.js` intentionally includes inconsistent paths (with and without 'docs' prefix) to verify the script's ability to normalize and handle ambiguous path structures.

🔇 Additional comments (7)

cypress/docspage.cy.js (3)

1-2: LGTM: Clean page object imports

The imports follow the established page object pattern correctly.

---

7-12: LGTM: Well-structured test setup

The beforeEach hook properly initializes page objects and loads fixture data for parameterized testing.

---

14-31: LGTM: Comprehensive sidebar navigation test

The test effectively covers navigation through all main sidebar sections and uses fixture data for subsection verification.

cypress/pages/DocsPage.js (4)

1-4: LGTM: Clean page object class structure

The class follows good page object pattern principles with a descriptive navigation method.

---

12-15: LGTM: Good flaky test fix with visibility check

The added visibility assertion helps ensure the element is properly loaded before proceeding, which is a good practice for preventing flaky tests.

---

41-45: LGTM: Well-structured subsection verification

The method effectively verifies both navigation and content using the fixture data structure.

---

47-48: LGTM: Proper module export

Clean default export following ES6 module standards.

[coderabbitai]

⚠️ Potential issue

Fix test structure: Move test case inside describe block

The second test case is outside the describe block, which breaks the test suite structure and may cause issues with test organization and reporting.

Apply this fix to move the test case inside the describe block:

 });
+
+  it('User verifies Card Links present on the Docs Page', function() {
+    const cards=[
+      {href:"/docs/concepts"},
+      {href:"/docs/tutorials"},
+      {href:"/docs/guides"},
+      {href:"/docs/tools"},
+      {href:"/docs/reference"},
+      {href:"/docs/migration"},
+      {href:"/docs/community"},
+      {href:"/docs/reference/specification/v3.0.0-explorer"}
+    ]
+
+    cards.forEach((card)=>{
+      docsPage.verifyCardLinks(card.href);
+    })
+  });
 });
-
-
-it('User verifies Card Links present on the Docs Page', function() {
- const cards=[
-  {href:"/docs/concepts"},
-  {href:"/docs/tutorials"},
-  {href:"/docs/guides"},
-  {href:"/docs/tools"},
-  {href:"/docs/reference"},
-  {href:"/docs/migration"},
-  {href:"/docs/community"},
-  {href:"/docs/reference/specification/v3.0.0-explorer"}
-
- ]
-
- cards.forEach((card)=>{
-  docsPage.verifyCardLinks(card.href);
- })
-});

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In cypress/docspage.cy.js around lines 34 to 50, the test case 'User verifies
Card Links present on the Docs Page' is currently defined outside of any
describe block, which disrupts test suite structure. To fix this, move the
entire it block inside the existing describe block that groups related tests,
ensuring proper test organization and reporting.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4210--asyncapi-website.netlify.app/

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

cypress/pages/ToolsPage.js (1)

12-14: Remove redundant wrapper method.

The verifyHeader() method only delegates to verifyPageLoaded() without adding any logic. Consider removing it and calling verifyPageLoaded() directly, or add a comment if it's intended for future expansion.

Apply this diff if no future expansion is planned:

- verifyHeader() {
-   this.verifyPageLoaded();
- }
-

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a1e80a and abada81.

📒 Files selected for processing (3)

• cypress/docspage.cy.js (1 hunks)
• cypress/pages/DocsPage.js (1 hunks)
• cypress/pages/ToolsPage.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• cypress/docspage.cy.js
• cypress/pages/DocsPage.js

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: cypress-run
• GitHub Check: Test NodeJS PR - windows-latest

🔇 Additional comments (2)

cypress/pages/ToolsPage.js (2)

1-6: LGTM! Clean page object implementation.

The class structure and navigation method follow good Cypress page object patterns.

---

27-37: Good refactoring to eliminate code duplication.

The wrapper methods effectively delegate to verifyToolLink(), eliminating the duplicate code that was flagged in previous reviews while maintaining a clean API for each link type.

Based on learnings (past review comments).

[anushkaaaaaaaa]

@anushkaaaaaaaa did you have a look at coderabbit's comments

yes i did, but today after i updated the branch some new changes were added after which it generated some more comments which i have addressed as well

[sambhavgupta0705]

LGTM!!

[TRohit20]

LGTM!

[sambhavgupta0705]

lgtm

[TRohit20]

LGTM