Skip to content

Conversation

@anushkaaaaaaaa
Copy link
Contributor

@anushkaaaaaaaa anushkaaaaaaaa commented Nov 6, 2025

Description

  • i have added e2e tests in cypress for the blog page.

Related issue(s)

Summary by CodeRabbit

  • Tests
    • Added an end-to-end test suite for the Blog page covering header and navigation, submit-post and RSS links plus RSS image, filter controls (type, author, tag), clear-filters/reset behavior, visibility of filtered posts, and individual post navigation and header verification. Each scenario starts from the Blog page and validates common blog browsing flows.

@netlify
Copy link

netlify bot commented Nov 6, 2025

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit f7e27f3
🔍 Latest deploy log https://app.netlify.com/projects/asyncapi-website/deploys/690e259df270b40008ef9b49
😎 Deploy Preview https://deploy-preview-4551--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Contributor

coderabbitai bot commented Nov 6, 2025

Walkthrough

Adds a Cypress page-object BlogPage and a new end-to-end test suite cypress/blog.cy.js that visits /blog, verifies header/submit/RSS, exercises filters (type/author/tag), clears filters, and asserts post links and headers.

Changes

Cohort / File(s) Summary
Blog page tests & page object
cypress/pages/blog.js, cypress/blog.cy.js
New BlogPage class (selectors and actions: visit, header/RSS/submit checks, filter controls, clear filters, post assertions) and an E2E test suite using it to verify header presence, submit and RSS links/images, clearing filters, filtering by type/author/tag, and verifying post links/headers.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Check that data-testid selectors in cypress/pages/blog.js match current app markup.
  • Review filter interaction assertions for flakiness (timing, visibility, network).
  • Confirm expected post URLs and header text used in tests align with fixture/content.

Poem

🐇📜
I hopped to /blog with whiskers keen,
I clicked the filters, cleared the scene,
RSS glowed, links took flight,
Posts appeared in morning light,
A rabbit cheered — the tests ran green!

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 PR title 'test: add BlogPage class and tests' clearly and concisely summarizes the main changes: adding both a BlogPage class and corresponding tests for blog functionality.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

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

@codecov
Copy link

codecov bot commented Nov 6, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (445e7c1) to head (f7e27f3).

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.
📢 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.

@asyncapi-bot
Copy link
Contributor

asyncapi-bot commented Nov 6, 2025

⚡️ Lighthouse report for the changes in this PR:

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

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between b5a86b7 and c4c0bc7.

📒 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.js
  • 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
🪛 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.md has type: Communication, not type: Strategy, so it won't appear in the filtered results and cy.contains('h5', /Monthly Community Update/i) cannot find it.

Update the test to either:

  1. Change the filter to match the post's actual type: blog.filterByType('Communication');
  2. Or update the blog post's frontmatter to use type: Strategy

The 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 (via HeadingLevel.h5) nested within a Next.js <Link> component, which produces an <a> tag. The Cypress selector cy.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.

Comment on lines +44 to +70
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');
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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:

  1. Mock the blog data with fixtures (preferred for E2E stability)
  2. Make tests generic by verifying structure without hardcoded content
  3. 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.

Comment on lines +57 to +67
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);
}
Copy link
Contributor

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 filter
  • data-testid="Filter-author" for author filter
  • data-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 -100

Length 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 -20

Length 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.tsx

Length 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 blog

Length 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/null

Length 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.tsx

Length 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 blog

Length of output: 46


🏁 Script executed:

#!/bin/bash
# Look for pages/blog directory
ls -la pages/ 2>/dev/null | head -20

Length of output: 847


Comment on lines 76 to 81
verifyPostHeader(expectedHeaderText) {
cy.get('[data-testid="BlogLayout-main"]').should(
'have.text',
expectedHeaderText,
);
}
Copy link
Contributor

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 custom data-testid values.

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.

verifyPostLinkAndClick combines both assertion and action. While functional, splitting this into separate verifyPostLink and clickPost methods 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

📥 Commits

Reviewing files that changed from the base of the PR and between c4c0bc7 and 86683a6.

📒 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 anushkaaaaaaaa force-pushed the BlogPage branch 4 times, most recently from 0305f6f to e05eb44 Compare November 6, 2025 18:53
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5cfbc27 and 96058e5.

📒 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 beforeEach hook 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.

Comment on lines +35 to +42
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');
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants