test: add BlogPage class and tests #4551
Conversation
anushkaaaaaaaa
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg 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. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a new Cypress E2E test file for the blog page and extends the BlogPage page-object with navigation, verification, filtering, and post-interaction helper methods; a minor whitespace edit in an existing homepage test was also made. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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 |
asyncapi-bot
requested review from
CBID2,
ashmitjsg,
bandantonio and
vishvamsinh28
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4551 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 798 798
Branches 146 146
=========================================
Hits 798 798 ☔ 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-4551--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: 5
🧹 Nitpick comments (1)
cypress/pages/blog.js (1)
38-43: Add visibility check for consistency.Unlike
verifyBlogPostsVisible, this method only checks that posts exist but doesn't verify they're actually visible to the user. This inconsistency could mask UI issues where posts exist in the DOM but aren't rendered.verifyFilteredPostsVisible() { - cy.get('[data-testid="BlogPostItem-Link"]').should( - 'have.length.greaterThan', - 0, - ); + cy.get('[data-testid="BlogPostItem-Link"]') + .should('have.length.greaterThan', 0) + .should('be.visible'); }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cypress/blog.cy.js(1 hunks)cypress/pages/blog.js(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
📚 Learning: 2024-11-01T13:32:15.472Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/pages/blog.jscypress/blog.cy.js
📚 Learning: 2024-11-01T09:55:20.531Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blog.cy.js
🪛 GitHub Actions: Run Cypress E2E Tests
cypress/pages/blog.js
[error] 72-72: Test helper failed: cy.contains(h5, /Monthly Community Update/i) could not locate the element in the DOM. This is used by BlogPage.verifyPostLinkAndClick.
cypress/blog.cy.js
[error] 37-37: Cypress test failed. Timed out retrying after 8000ms: cy.contains(h5, /Monthly Community Update/i) did not find a matching element in the Blog Page Tests. See test at blog.cy.js:37 and related page code at cypress/pages/blog.js:72.
⏰ 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). (5)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (2)
cypress/blog.cy.js (1)
35-42: Fix the type mismatch between test expectation and blog post metadata.This test fails because it filters by type "Strategy" but then searches for a post that's tagged as "Communication". The blog post
markdown/blog/2025-september-summary.mdhastype: Communication, nottype: Strategy, so it won't appear in the filtered results andcy.contains('h5', /Monthly Community Update/i)cannot find it.Update the test to either:
- Change the filter to match the post's actual type:
blog.filterByType('Communication');- Or update the blog post's frontmatter to use
type: StrategyThe post title and URL are correct; only the type filter is misaligned.
Likely an incorrect or invalid review comment.
cypress/pages/blog.js (1)
69-74: Review comment is based on incorrect assumptions—the DOM structure matches the test expectations.The test selector is correct. BlogPostItem renders blog titles as
<h5>elements (viaHeadingLevel.h5) nested within a Next.js<Link>component, which produces an<a>tag. The Cypress selectorcy.contains('h5', titlePattern).closest('a')should successfully find the heading and its parent anchor. The pipeline failure is not due to incorrect heading levels or nesting structure.Likely an incorrect or invalid review comment.
| filterByType(type) { | ||
| cy.get('[data-testid="Select-form"]').eq(1).select(type); | ||
| } | ||
|
|
||
| filterByAuthor(author) { | ||
| cy.get('[data-testid="Select-form"]').eq(2).select(author); | ||
| } | ||
|
|
||
| filterByTag(tag) { | ||
| cy.get('[data-testid="Select-form"]').eq(3).select(tag); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Replace fragile .eq() selectors with more specific data attributes.
Using .eq(1), .eq(2), and .eq(3) to target filter dropdowns is brittle. If the order of select elements changes or new selects are added, these tests will break.
Recommend adding specific data-testid attributes to each filter dropdown in the UI:
data-testid="Filter-type"for type filterdata-testid="Filter-author"for author filterdata-testid="Filter-tag"for tag filter
Then update the methods:
filterByType(type) {
- cy.get('[data-testid="Select-form"]').eq(1).select(type);
+ cy.get('[data-testid="Filter-type"]').select(type);
}
filterByAuthor(author) {
- cy.get('[data-testid="Select-form"]').eq(2).select(author);
+ cy.get('[data-testid="Filter-author"]').select(author);
}
filterByTag(tag) {
- cy.get('[data-testid="Select-form"]').eq(3).select(tag);
+ cy.get('[data-testid="Filter-tag"]').select(tag);
}Run this script to locate where these Select components are rendered:
🏁 Script executed:
#!/bin/bash
# Find Select components with data-testid="Select-form"
rg -nP --type=js --type=jsx --type=ts --type=tsx 'data-testid.*Select-form' -C5 -g '!node_modules' -g '!dist' -g '!cypress'Length of output: 27
I'll adjust the search command to avoid the unrecognized file type error and locate the Select components in the codebase.
🏁 Script executed:
#!/bin/bash
# Find Select components with data-testid="Select-form" - avoid problematic file type
rg -nP 'data-testid.*Select-form' -C5 -g '!node_modules' -g '!dist' -g '!cypress'Length of output: 2042
🏁 Script executed:
#!/bin/bash
# Also check if Filter-type, Filter-author, Filter-tag attributes already exist
rg -nP 'data-testid.*Filter-(type|author|tag)' -C3 -g '!node_modules' -g '!dist'Length of output: 0
🏁 Script executed:
#!/bin/bash
# Find all Select component instances in the blog context
rg -nP '<select|Select' -C3 -g '!node_modules' -g '!dist' -g '!cypress' | head -100Length of output: 8811
I need to locate the blog page component and verify how the Select components are rendered in the filter context.
🏁 Script executed:
#!/bin/bash
# Find blog page component - look for pages or components related to blog
fd -e tsx -e ts -e jsx -e js 'blog' -g '!node_modules' -g '!dist' -g '!cypress' | head -20Length of output: 207
🏁 Script executed:
#!/bin/bash
# Check if Select component accepts props like data-testid or if it's hardcoded
cat components/form/Select.tsxLength of output: 1565
🏁 Script executed:
#!/bin/bash
# Search for where Select component is used in blog context
rg -nP 'import.*Select|<Select' -C3 -g '!node_modules' -g '!dist' -g '!cypress' | grep -i blogLength of output: 0
I found that the Select component has data-testid='Select-form' hardcoded with no way to customize it. Let me locate the blog filter component:
🏁 Script executed:
#!/bin/bash
# Search for files in pages or components directories
find . -path ./node_modules -prune -o -path ./dist -prune -o -path ./cypress -prune -o -type f \( -name "*blog*" -o -name "*filter*" \) -print 2>/dev/nullLength of output: 1960
🏁 Script executed:
#!/bin/bash
# Look for the blog page component in pages directory
rg -nP 'filterByType|filterByAuthor|filterByTag' -g '!node_modules' -g '!dist'Length of output: 547
🏁 Script executed:
#!/bin/bash
# Find all Select component usage to see patterns
rg -nP '<Select' -B5 -A5 -g '!node_modules' -g '!dist' -g '!cypress'Length of output: 2932
Let me check the Filter component and find the blog page component:
🏁 Script executed:
#!/bin/bash
# Check the Filter.tsx component
cat components/navigation/Filter.tsxLength of output: 2385
🏁 Script executed:
#!/bin/bash
# Find the blog page (pages directory)
find . -path ./node_modules -prune -o -path ./dist -prune -o -type f -path "*/pages/*" -name "*" -print 2>/dev/null | grep -i blogLength of output: 46
🏁 Script executed:
#!/bin/bash
# Look for pages/blog directory
ls -la pages/ 2>/dev/null | head -20Length of output: 847
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
cypress/pages/blog.js (1)
51-61: Fragile positional selectors still present.The
.eq(1),.eq(2), and.eq(3)selectors remain brittle, as noted in previous reviews. If the order of select elements changes, these tests will break. The previous review provided a detailed analysis showing that fixing this requires modifying the Select component API to accept customdata-testidvalues.Consider prioritizing the recommended refactor from the previous review to improve test reliability.
🧹 Nitpick comments (1)
cypress/pages/blog.js (1)
63-68: Consider separating verification from action for clearer test debugging.
verifyPostLinkAndClickcombines both assertion and action. While functional, splitting this into separateverifyPostLinkandclickPostmethods would make test failures easier to debug and follow the single responsibility principle more closely.Example refactor:
- verifyPostLinkAndClick(titlePattern, expectedHref) { - cy.contains('h5', titlePattern) - .closest('a') - .should('have.attr', 'href', expectedHref) - .click(); - } + verifyPostLink(titlePattern, expectedHref) { + cy.contains('h5', titlePattern) + .closest('a') + .should('have.attr', 'href', expectedHref); + } + + clickPost(titlePattern) { + cy.contains('h5', titlePattern) + .closest('a') + .click(); + }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
cypress/pages/blog.js(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
cypress/pages/blog.js
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
cypress/pages/blog.js
📚 Learning: 2024-11-01T13:32:15.472Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/pages/blog.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). (3)
- GitHub Check: cypress-run
- GitHub Check: Test NodeJS PR - windows-latest
- GitHub Check: Test NodeJS PR - macos-13
anushkaaaaaaaa
force-pushed
the
BlogPage
branch
4 times, most recently
from
0305f6f to
e05eb44
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
cypress/blog.cy.js (1)
49-56: Refactor to avoid dependence on specific blog content.These tests rely on specific authors ("Akshat Nema"), tags ("Avro"), and post titles existing in the blog. This makes them brittle and prone to failure when content changes.
As noted in the previous review, consider using fixtures to mock blog data or making assertions generic to verify structure without hardcoded content.
Also applies to: 63-70
🧹 Nitpick comments (1)
cypress/blog.cy.js (1)
3-71: Consider adding edge case tests.The current test suite covers happy paths well. To further improve robustness, consider adding tests for:
- Filters that return no results
- Applying multiple filters simultaneously (e.g., type + author)
- Filter state after navigation back to the blog page
These additions would help catch regressions in filter logic and user experience edge cases.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
cypress/blog.cy.js(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2024-11-01T13:32:15.472Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blog.cy.js
📚 Learning: 2025-01-19T04:51:41.255Z
Learnt from: anshgoyalevil
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blog.cy.js
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
cypress/blog.cy.js
📚 Learning: 2025-02-16T12:57:24.575Z
Learnt from: anshgoyalevil
Repo: asyncapi/website PR: 0
File: :0-0
Timestamp: 2025-02-16T12:57:24.575Z
Learning: Tests failing after dependency upgrades indicate potential breaking changes and might require code changes rather than test modifications to support newer versions.
Applied to files:
cypress/blog.cy.js
📚 Learning: 2024-11-01T09:55:20.531Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blog.cy.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). (1)
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (2)
cypress/blog.cy.js (2)
1-8: Good test structure with page object pattern.The setup follows Cypress best practices: page object instantiation and
beforeEachhook for navigation ensure test isolation and maintainability.
10-33: Excellent coverage of core blog functionality.These tests verify essential features (header, links, RSS, filter controls) without depending on specific blog content, making them resilient to content changes. The clear filters test appropriately sets up state before verifying the clear action.
cypress/blogpage.cy.js
Outdated
| blog.verifyRSSImage(); | ||
| }); | ||
|
|
||
| it('User verifies clear filters button works', () => { |
There was a problem hiding this comment.
Please review all the naming. test names should not start with phrases like user verifies
|
FYI: #4533 (review) |
There was a problem hiding this comment.
Pull request overview
This PR adds end-to-end Cypress tests for the blog page functionality, implementing a page object model pattern to test various blog page features including navigation, filtering, and post interactions.
Key Changes:
- Introduced a new
BlogPageclass with methods for interacting with blog page elements - Added comprehensive test suite covering header verification, RSS links, filter controls, and post navigation
- Implemented tests for type, author, and tag filtering with post verification
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| cypress/pages/blog.js | New page object class containing methods for blog page interactions including filters, navigation, and element verification |
| cypress/blog.cy.js | New test suite with 10 test cases covering blog page functionality including filtering, navigation, and content verification |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…tering, and post viewing.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
cypress/blogpage.cy.js (1)
35-42: Remove hardcoded blog post content from test.This test still relies on a specific blog post existing with exact title and URL, making it brittle. Past reviews flagged this as addressed, but the hardcoded values remain. If the post is removed, renamed, or the URL changes, the test will fail.
🔎 Recommended refactor to use generic assertions
- it('User filters by type, verifies specific post link, and checks post header', () => { - blog.filterByType('Communication'); - blog.verifyPostLinkAndClick( - /How TransferGo Adopted AsyncAPI/i, - '/blog/transfergo-asyncapi-story', - ); - blog.verifyPostHeader('How TransferGo adopted AsyncAPI'); + it('should navigate to specific post when filtering by type and clicking post', () => { + blog.filterByType('Communication'); + blog.verifyFilteredPostsVisible(); + blog.clickFirstVisiblePost(); + blog.verifyPostDetailPageLoaded(); });This approach matches the pattern used successfully in tests at lines 44-54 and 56-66.
🧹 Nitpick comments (1)
cypress/pages/BlogPage.js (1)
108-108: Remove extra blank line before closing brace.Minor formatting inconsistency.
} - }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cypress/blogpage.cy.jscypress/pages/BlogPage.js
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2024-11-01T13:32:15.472Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blogpage.cy.js
📚 Learning: 2025-01-19T04:51:41.255Z
Learnt from: anshgoyalevil
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blogpage.cy.js
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
cypress/blogpage.cy.js
📚 Learning: 2025-12-23T06:30:43.275Z
Learnt from: katara-Jayprakash
Repo: asyncapi/website PR: 4760
File: components/layout/GenericPostLayout.tsx:50-52
Timestamp: 2025-12-23T06:30:43.275Z
Learning: In the asyncapi/website repository, `GenericPostLayout` (components/layout/GenericPostLayout.tsx) is used for rendering about pages, not blog posts, even though it accepts a post typed as `IPosts['blog'][number]`. The type is reused for convenience. Blog posts use `BlogLayout.tsx` instead. When reviewing EditPageButton usage in GenericPostLayout, `contentType='about'` is the correct value.
Applied to files:
cypress/blogpage.cy.jscypress/pages/BlogPage.js
📚 Learning: 2024-10-23T09:13:57.844Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3298
File: .coderrabbit.yml:2-2
Timestamp: 2024-10-23T09:13:57.844Z
Learning: When a user prefers detailed reviews including nitpicks, set `reviews.profile` to `"assertive"` in the `.coderrabbit.yml` configuration file.
Applied to files:
cypress/blogpage.cy.js
📚 Learning: 2024-11-01T09:55:20.531Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/blogpage.cy.js
…on, verification, and filtering.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
cypress/pages/BlogPage.js (1)
10-12: Remove duplicate method (still present from previous review).
verifyHeader()andverifyPageLoaded()perform identical checks. This duplication was flagged in the previous review but remains unaddressed.🔎 Consolidation already proposed in prior review
- verifyHeader() { - cy.contains('h1', 'Welcome to our blog!').should('be.visible'); - } - verifyPageLoaded() { cy.contains('h1', 'Welcome to our blog!').should('be.visible'); }Update test files to use
verifyPageLoaded()instead ofverifyHeader().
🧹 Nitpick comments (2)
cypress/pages/BlogPage.js (2)
55-65: Consider using data-testid for filter selectors.Text-based selectors (
cy.contains('select', 'Filter by...')) are more readable than the previous index-based approach but remain brittle to text changes or i18n updates. For consistency withverifyFilteredPostsVisible()(line 37) and better maintainability, consider addingdata-testidattributes to filter dropdowns.Example approach
If filter dropdowns were given unique test IDs:
filterByType(type) { cy.get('[data-testid="blog-filter-type"]').select(type); }This would require adding a
testIdprop to theSelectcomponent used in filters.
80-98: Consolidate redundant option queries.Both
filterByFirstAvailableAuthor()andfilterByFirstAvailableTag()query options twice: once at line 82/92 for length assertion, then again at line 83/93 for filtering. This can be consolidated into a single query.🔎 Streamlined approach
filterByFirstAvailableAuthor() { cy.get('[data-testid="BlogPostItem-Link"]', { timeout: 10000 }).should('have.length.greaterThan', 0); - cy.contains('select', 'Filter by authors').find('option', { timeout: 10000 }).should('have.length.greaterThan', 1); cy.contains('select', 'Filter by authors').find('option').then(($options) => { const nonEmptyOptions = [...$options].filter(opt => opt.value && opt.value !== ''); expect(nonEmptyOptions.length, 'No author filter options available').to.be.greaterThan(0); cy.contains('select', 'Filter by authors').select(nonEmptyOptions[0].value); }); }Apply the same pattern to
filterByFirstAvailableTag(). The assertion at line 85/95 already ensures non-empty options exist.Additionally, consider extracting the repeated timeout value (10000) to a constant:
const DEFAULT_TIMEOUT = 10000;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cypress/homepage.cy.jscypress/pages/BlogPage.js
✅ Files skipped from review due to trivial changes (1)
- cypress/homepage.cy.js
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2024-11-01T13:32:15.472Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 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.
Applied to files:
cypress/pages/BlogPage.js
📚 Learning: 2025-12-23T06:30:43.275Z
Learnt from: katara-Jayprakash
Repo: asyncapi/website PR: 4760
File: components/layout/GenericPostLayout.tsx:50-52
Timestamp: 2025-12-23T06:30:43.275Z
Learning: In the asyncapi/website repository, `GenericPostLayout` (components/layout/GenericPostLayout.tsx) is used for rendering about pages, not blog posts, even though it accepts a post typed as `IPosts['blog'][number]`. The type is reused for convenience. Blog posts use `BlogLayout.tsx` instead. When reviewing EditPageButton usage in GenericPostLayout, `contentType='about'` is the correct value.
Applied to files:
cypress/pages/BlogPage.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). (6)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: cypress-run
- GitHub Check: Test NodeJS PR - macos-latest
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (4)
cypress/pages/BlogPage.js (4)
14-34: Link and image verification methods are well-structured.These methods appropriately verify link visibility, href attributes, and image attributes using standard Cypress assertions.
36-53: Filter verification and interaction methods look good.Appropriate use of
data-testidfor post items and straightforward text-based selectors for button interactions.
67-78: Post navigation and verification methods are correctly implemented.Good use of
.closest()to traverse from heading to link anddata-testidfor detail page verification.
100-107: Post interaction and detail page verification are correct.Straightforward methods using appropriate selectors and assertions.
3 participants
Description
Related issue(s)
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.