test: add e2e tests for roadmap and case studies page#5066
test: add e2e tests for roadmap and case studies page#5066anushkaaaaaaaa wants to merge 3 commits intoasyncapi:masterfrom
Conversation
anushkaaaaaaaa
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdds new Cypress E2E tests for RoadmapPage and CaseStudiesPage, a BasePage superclass, updated page objects (Roadmap, CaseStudies, Home), a fixture for case study resource links, and a helper to iterate/verify links. Tests use page objects, fixtures, and indexed verification. Changes
Sequence Diagram(s)sequenceDiagram
participant Test as Cypress Test
participant Page as PageObject (Roadmap/CaseStudies)
participant App as Browser/App UI
participant Fixture as Fixture/Helpers
Test->>Page: instantiate and call visit()
Page->>App: navigate to /roadmap or /casestudies
Test->>Page: call verifyHeader(), verifyCommunityLink(), verifyTooltip(index) / verifyCardsLink()
Page->>App: query DOM (headings, links, tooltips, cards)
Test->>Fixture: load caseStudiesLinks.json
Test->>Fixture: call verifyLinks(links, verifyFn)
Fixture->>Page: invoke verifyResourceLink(href) for each entry
Page->>App: assert anchor hrefs and visibility
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5066 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 796 796
Branches 146 146
=========================================
Hits 796 796 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5066--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@cypress/pages/CaseStudiesPage.js`:
- Around line 20-28: The href assertion in verifyCardLink is brittle because
have.attr(..., cardUrl) fails when the DOM returns a leading-slash path or a
full absolute URL; update verifyCardLink to retrieve the anchor href and assert
it includes the expected cardUrl (or normalize by stripping origin/leading
slash) instead of exact equality—locate the verifyCardLink method and replace
the final .should('have.attr', 'href', cardUrl) with a resilient check that uses
include (or a normalized comparison) so both "/casestudies/..." and
"https://.../casestudies/..." pass.
In `@cypress/pages/RoadmapPage.js`:
- Around line 27-29: The verifyTooltip(index) helper currently asserts
visibility on all tooltips; update it to assert only the tooltip corresponding
to the hovered icon by selecting the same index for the tooltip element (use the
same index argument with the '[data-testid="InlineHelp"]' selector, e.g., call
.eq(index) before .should('be.visible')). This ensures the hover assertion
targets the specific tooltip shown by the earlier
cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover') call.
In `@cypress/RoadmapPage.cy.js`:
- Around line 15-17: The test title says it verifies navigation but only calls
roadmapPage.verifyCommunityLink() without performing a click or asserting the
URL; either rename the test to reflect a non-navigation check or update the test
to perform the navigation and assertion by invoking the click and URL assertion
(e.g., add a call to a click method such as roadmapPage.clickCommunityLink() or
implement the click inside verifyCommunityLink(), then assert
cy.url().should('include', '/community') or the expected path). Ensure the
chosen change updates the test name if you keep it as a non-navigation check or
implements both the click and URL assertion when keeping the current name.
🧹 Nitpick comments (1)
cypress/casestudies.cy.js (1)
39-41: Use the label field to strengthen link validation.
Right now labels are unused; asserting the link text reduces false positives if duplicate hrefs exist.✅ Suggested enhancement
- it('Verifies all Links under Resources work', () => { - verifyLinks(links, (href, label) => casestudiespage.verifyResourceLink(href), 'href', 'label'); - }); + it('Verifies all Links under Resources work', () => { + verifyLinks( + links, + (href, label) => { + casestudiespage.verifyResourceLink(href); + cy.contains('a', label).should('have.attr', 'href', href); + }, + 'href', + 'label' + ); + });
| verifyCardLink(cardName, cardUrl, index = 0) { | ||
| cy.get('[data-testid="CaseStudyCard-main"]') | ||
| .eq(index) | ||
| .within(() => { | ||
| cy.get(`img[alt*="${cardName.split(' ')[0]}"]`).should('exist'); | ||
| }) | ||
| .closest('a') | ||
| .should('have.attr', 'href', cardUrl); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find test files that call verifyCardLink
rg "verifyCardLink" --type js -B 2 -A 2Repository: asyncapi/website
Length of output: 1169
🏁 Script executed:
# Look at the CaseStudyCard component to see how href is rendered
fd "CaseStudyCard" --type fRepository: asyncapi/website
Length of output: 88
🏁 Script executed:
# Check the CaseStudiesPage.js file to understand the context better
cat -n cypress/pages/CaseStudiesPage.js | head -50Repository: asyncapi/website
Length of output: 1499
🏁 Script executed:
cat -n components/CaseStudyCard.tsxRepository: asyncapi/website
Length of output: 1652
🏁 Script executed:
# Check for Next.js config and any route handling
fd "next.config" -o "middleware" -o "routes" --type f | head -20Repository: asyncapi/website
Length of output: 199
🏁 Script executed:
# Search for other href patterns in the codebase to see if leading slashes are used
rg "href=" --type tsx --type jsx -o | sort | uniq | head -30Repository: asyncapi/website
Length of output: 87
🏁 Script executed:
# Check if there's any Link component wrapper or routing transformation
rg "next/link" -A 3 -B 1 --type tsx --type jsx | head -50Repository: asyncapi/website
Length of output: 87
🏁 Script executed:
# Search for href patterns more broadly
rg "href=" -A 1 -B 1 | grep -E "href=.*casestudies|href=.*/" | head -20Repository: asyncapi/website
Length of output: 2007
🏁 Script executed:
# Check for Next.js configuration
find . -name "next.config*" -o -name "tsconfig.json" | head -10Repository: asyncapi/website
Length of output: 93
🏁 Script executed:
# Check what actual href values are being used in the codebase
rg "href=" -o | sort | uniq -c | sort -rn | head -20Repository: asyncapi/website
Length of output: 1006
🏁 Script executed:
# Check for any routing middleware or href transformation
rg "casestudies" -B 2 -A 2 | head -40Repository: asyncapi/website
Length of output: 2844
🏁 Script executed:
# Look at the test file itself to see if there are any patterns of href matching failures
fd "casestud.*\.cy\." -o "casestud.*spec\."Repository: asyncapi/website
Length of output: 211
🏁 Script executed:
# Search for any href-related test utilities or assertions
rg "have\.attr.*href" | head -15Repository: asyncapi/website
Length of output: 484
Make card href assertion resilient to leading slash / absolute URLs.
The exact have.attr(..., cardUrl) assertion can fail if the DOM renders /casestudies/... or a full origin. Prefer an include check for stability.
🔧 Suggested fix
- .should('have.attr', 'href', cardUrl);
+ .should('have.attr', 'href')
+ .and('include', cardUrl);🤖 Prompt for AI Agents
In `@cypress/pages/CaseStudiesPage.js` around lines 20 - 28, The href assertion in
verifyCardLink is brittle because have.attr(..., cardUrl) fails when the DOM
returns a leading-slash path or a full absolute URL; update verifyCardLink to
retrieve the anchor href and assert it includes the expected cardUrl (or
normalize by stripping origin/leading slash) instead of exact equality—locate
the verifyCardLink method and replace the final .should('have.attr', 'href',
cardUrl) with a resilient check that uses include (or a normalized comparison)
so both "/casestudies/..." and "https://.../casestudies/..." pass.
| verifyTooltip(index) { | ||
| cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover'); | ||
| cy.get('[data-testid="InlineHelp"]').should('be.visible'); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "RoadmapPage.js" | head -20Repository: asyncapi/website
Length of output: 90
🏁 Script executed:
cat -n cypress/pages/RoadmapPage.js | head -50Repository: asyncapi/website
Length of output: 997
🏁 Script executed:
rg "InlineHelp" cypress/pages/RoadmapPage.js -nRepository: asyncapi/website
Length of output: 206
🏁 Script executed:
rg "data-testid" cypress/pages/RoadmapPage.js -B2 -A2 | head -100Repository: asyncapi/website
Length of output: 396
🏁 Script executed:
rg "verifyTooltip" cypress/ -B2 -A2 | head -50Repository: asyncapi/website
Length of output: 652
🏁 Script executed:
rg "InlineHelp" cypress/ -lRepository: asyncapi/website
Length of output: 88
🏁 Script executed:
cat -n cypress/RoadmapPage.cy.jsRepository: asyncapi/website
Length of output: 1021
Scope tooltip visibility to the hovered index.
cy.get('[data-testid="InlineHelp"]').should('be.visible') asserts all tooltips without targeting the specific index, which can be flaky or mask a wrong tooltip. The method receives an index parameter and correctly targets the specific icon at that index, but the visibility assertion should match. Target the tooltip at the same index.
🔧 Suggested fix
verifyTooltip(index) {
cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover');
- cy.get('[data-testid="InlineHelp"]').should('be.visible');
+ cy.get('[data-testid="InlineHelp"]').eq(index).should('be.visible');
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| verifyTooltip(index) { | |
| cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover'); | |
| cy.get('[data-testid="InlineHelp"]').should('be.visible'); | |
| verifyTooltip(index) { | |
| cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover'); | |
| cy.get('[data-testid="InlineHelp"]').eq(index).should('be.visible'); | |
| } |
🤖 Prompt for AI Agents
In `@cypress/pages/RoadmapPage.js` around lines 27 - 29, The verifyTooltip(index)
helper currently asserts visibility on all tooltips; update it to assert only
the tooltip corresponding to the hovered icon by selecting the same index for
the tooltip element (use the same index argument with the
'[data-testid="InlineHelp"]' selector, e.g., call .eq(index) before
.should('be.visible')). This ensures the hover assertion targets the specific
tooltip shown by the earlier
cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover') call.
| it('User clicks on the community page link and verifies navigation', () => { | ||
| roadmapPage.verifyCommunityLink(); | ||
| }); |
There was a problem hiding this comment.
Test name claims navigation, but no click/navigation is performed.
Either update the test name or add the click + URL assertion.
✏️ Suggested rename (minimal change)
- it('User clicks on the community page link and verifies navigation', () => {
+ it('User verifies the community page link URL', () => {
roadmapPage.verifyCommunityLink();
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| it('User clicks on the community page link and verifies navigation', () => { | |
| roadmapPage.verifyCommunityLink(); | |
| }); | |
| it('User verifies the community page link URL', () => { | |
| roadmapPage.verifyCommunityLink(); | |
| }); |
🤖 Prompt for AI Agents
In `@cypress/RoadmapPage.cy.js` around lines 15 - 17, The test title says it
verifies navigation but only calls roadmapPage.verifyCommunityLink() without
performing a click or asserting the URL; either rename the test to reflect a
non-navigation check or update the test to perform the navigation and assertion
by invoking the click and URL assertion (e.g., add a call to a click method such
as roadmapPage.clickCommunityLink() or implement the click inside
verifyCommunityLink(), then assert cy.url().should('include', '/community') or
the expected path). Ensure the chosen change updates the test name if you keep
it as a non-navigation check or implements both the click and URL assertion when
keeping the current name.
2 participants
Description
I have added E2E tests using Cypress for Roadmap Page and Case Studies Page to ensure functionality and correct rendering.
Related issue(s)
Summary by CodeRabbit