-
-
Notifications
You must be signed in to change notification settings - Fork 1k
test: add BlogPage class and tests #4551
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds a Cypress page-object Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Tester as Test Runner
participant BlogPage as BlogPage (page object)
participant Browser as Browser / DOM
Tester->>BlogPage: new BlogPage()
Tester->>BlogPage: visit('/blog')
BlogPage->>Browser: navigate to /blog
Browser-->>BlogPage: DOM loaded
rect `#E8F6EF`
Tester->>BlogPage: assert header, submit link, RSS link/image
BlogPage->>Browser: query selectors (data-testid, anchors, images)
Browser-->>BlogPage: element states
end
rect `#FFF4E6`
Tester->>BlogPage: select filter (type / author / tag)
BlogPage->>Browser: interact with filter controls
Browser-->>BlogPage: filtered DOM
Tester->>BlogPage: assert filtered posts visible / click post link
end
rect `#FBEFF2`
Tester->>BlogPage: click "clear filters"
BlogPage->>Browser: click clear button
Browser-->>BlogPage: DOM reset
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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 |
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 780 780
Branches 144 144
=========================================
Hits 780 780 ☔ 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/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| it('User filters by author and verifies filtered posts appear', () => { | ||
| blog.filterByAuthor('Akshat Nema'); | ||
| blog.verifyFilteredPostsVisible(); | ||
| }); | ||
|
|
||
| it('User filters by author, verifies specific post link, and checks post header', () => { | ||
| blog.filterByAuthor('Akshat Nema'); | ||
| blog.verifyPostLinkAndClick( | ||
| /New Tools Dashboard for AsyncAPI/i, | ||
| '/blog/new-asyncapi-tools-page', | ||
| ); | ||
| blog.verifyPostHeader('New Tools Dashboard for AsyncAPI'); | ||
| }); | ||
|
|
||
| it('User filters by tag and verifies filtered posts appear', () => { | ||
| blog.filterByTag('Avro'); | ||
| blog.verifyFilteredPostsVisible(); | ||
| }); | ||
|
|
||
| it('User filters by tag, verifies specific post link, and checks post header', () => { | ||
| blog.filterByTag('Avro'); | ||
| blog.verifyPostLinkAndClick( | ||
| /AsyncAPI and Apicurio for Asynchronous APIs/i, | ||
| '/blog/asyncapi-and-apicurio-for-asynchronous-apis', | ||
| ); | ||
| blog.verifyPostHeader('AsyncAPI and Apicurio for Asynchronous APIs'); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Refactor tests to avoid dependence on specific blog content.
All remaining tests (lines 44-70) follow the same brittle pattern - they depend on specific authors ("Akshat Nema"), tags ("Avro"), and post titles existing in the blog. This makes the test suite fragile and prone to failures when blog content changes.
Apply the same fix as suggested for lines 35-42. Either:
- Mock the blog data with fixtures (preferred for E2E stability)
- Make tests generic by verifying structure without hardcoded content
- Move these to integration tests with controlled test data
Example generic test:
- it('User filters by author, verifies specific post link, and checks post header', () => {
- blog.filterByAuthor('Akshat Nema');
- blog.verifyPostLinkAndClick(
- /New Tools Dashboard for AsyncAPI/i,
- '/blog/new-asyncapi-tools-page',
- );
- blog.verifyPostHeader('New Tools Dashboard for AsyncAPI');
- });
+ it('User filters by author and verifies filtered results', () => {
+ blog.selectFirstAvailableAuthor();
+ blog.verifyFilteredPostsVisible();
+ blog.verifyPostsAreClickable();
+ });Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In cypress/blog.cy.js around lines 44 to 70 the tests are brittle because they
assert on hardcoded authors, tags, and post titles; refactor them the same way
as lines 35-42 by either loading a blog fixture and stubbing the network request
so the tests run against controlled data, or change the assertions to be generic
(e.g., assert filtered results count/structure and that a post link/header
exists without matching exact text), and if needed move content-specific checks
into integration tests with controlled data; update the test setup to use
cy.intercept(...) with the fixture and replace hardcoded values in these specs
with references to the fixture or generic DOM assertions.
| 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ 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
cypress/pages/blog.js
Outdated
| verifyPostHeader(expectedHeaderText) { | ||
| cy.get('[data-testid="BlogLayout-main"]').should( | ||
| 'have.text', | ||
| expectedHeaderText, | ||
| ); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion | 🟠 Major
Use contain instead of have.text for robust header verification.
The have.text assertion requires an exact match, including whitespace. This makes the test fragile if the element contains additional text nodes, whitespace, or child elements. Line 96 in verifyBlogPostHeader correctly uses contain for partial matching.
verifyPostHeader(expectedHeaderText) {
- cy.get('[data-testid="BlogLayout-main"]').should(
- 'have.text',
- expectedHeaderText,
- );
+ cy.get('[data-testid="BlogLayout-main"]')
+ .should('be.visible')
+ .and('contain', expectedHeaderText);
}🤖 Prompt for AI Agents
In cypress/pages/blog.js around lines 76 to 81, the verifyPostHeader method uses
should('have.text', expectedHeaderText) which requires an exact text match and
makes the test fragile; change the assertion to should('contain',
expectedHeaderText) to allow partial/more robust matching (consistent with
verifyBlogPostHeader at line 96) so the header verification tolerates extra
whitespace or child nodes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
0305f6f to
e05eb44
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| 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'); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Refactor to avoid dependence on specific blog content.
This test relies on a specific post ("How TransferGo Adopted AsyncAPI") existing with an exact title and URL. If the post is removed or renamed, the test will break.
Consider the same approach suggested in the previous review: either mock blog data with fixtures using cy.intercept(), or make assertions generic (e.g., verify that filtering produces results and that posts are clickable without matching exact titles).
Example generic approach:
- 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('User filters by type and can navigate to filtered posts', () => {
+ blog.filterByType('Communication');
+ blog.verifyFilteredPostsVisible();
+ blog.clickFirstPost();
+ blog.verifyPostHeaderExists();
+ });Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In cypress/blog.cy.js around lines 35-42, the test hardcodes a specific post
title and URL which makes it brittle; replace this by either (a) stubbing blog
API responses with cy.intercept() and a fixture containing predictable posts,
then assert against that fixture, or (b) making assertions generic: after
blog.filterByType('Communication') assert that the results list is non-empty,
capture the text of the first post link, click that first post, and verify the
post header equals the captured link text (or simply exists) instead of matching
a hardcoded title/URL. Implement one of these approaches so the test no longer
depends on a specific external post.
Description
Related issue(s)
Summary by CodeRabbit