Skip to content

Add blog post: testing-in-2026-a-practical-guide.mdx#138

Open
deepu0 wants to merge 1 commit into
mainfrom
content/blog-post-2026-06-16
Open

Add blog post: testing-in-2026-a-practical-guide.mdx#138
deepu0 wants to merge 1 commit into
mainfrom
content/blog-post-2026-06-16

Conversation

@deepu0

@deepu0 deepu0 commented Jun 16, 2026

Copy link
Copy Markdown
Owner

User description

Blog post about Testing for Frontend Junction


CodeAnt-AI Description

Publish a new guide on testing for frontend developers in 2026

What Changed

  • Added a new published blog post titled “Testing in 2026: A Practical Guide”
  • The article covers why testing matters, core testing principles, common mistakes to avoid, and practical best practices
  • Included example code and a real-world component example to support the guide

Impact

✅ New testing guidance for readers
✅ Easier access to frontend testing best practices
✅ Clearer learning path for modern testing workflows

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@vercel

vercel Bot commented Jun 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontend-junction Ready Ready Preview, Comment Jun 16, 2026 3:33am

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

A new MDX blog post titled "Testing in 2026: A Practical Guide" is added under content/blog-post-2026-06-16/. The file includes YAML frontmatter with metadata, article sections on testing principles, pitfalls, and best practices with embedded TypeScript/React code examples, and a closing community discussion prompt.

Changes

Blog Post: Testing in 2026

Layer / File(s) Summary
Full blog post
content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx
Adds YAML frontmatter (title, description, date, tags, published, image), the full article body with section headings and embedded TypeScript/React testing code examples, and a closing separator with a community call-to-action.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A bunny hops through tests so bright,
Mocking functions left and right. 🐇
With TypeScript tricks and React flair,
Good coverage floats through the air.
"Test well," says I, "and hop with care!" 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description is significantly incomplete. It lacks required sections like issue reference, type of change selection, testing verification details, and pre-merge checklist items specified in the template. Complete the PR description template by adding issue reference, selecting 'Documentation update' as type of change, confirming testing steps, and checking the code review checklist items.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and specifically describes the main change—adding a new blog post file to the repository with a clear, concise reference to the filename.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch content/blog-post-2026-06-16

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.

@codeant-ai codeant-ai Bot added the size:M This PR changes 30-99 lines, ignoring generated files label Jun 16, 2026
Comment on lines +1 to +8
---
title: 'Testing in 2026: A Practical Guide'
description: 'A comprehensive guide to testing for modern frontend development in 2026.'
date: '2026-06-16'
tags: ['Testing', 'Frontend', '2026']
published: true
image: './images/post-image.png'
---

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggestion: This post is added under a directory that is not indexed by the content pipeline, so it will never be included in posts and will not appear on the blog listing or post routes. The collection config only matches content/blog/**/*.mdx; move this file under content/blog/ (or update the collection pattern) so it is actually published. [incomplete implementation]

Severity Level: Critical 🚨
- ⚠️ New testing article never appears in blog listing page.
- ⚠️ Post excluded from homepage latestPosts section on landing page.
- ⚠️ Direct blog slug route never generated for this post.
Steps of Reproduction ✅
1. Open `velite.config.ts` at `/workspace/frontend-junction/velite.config.ts:11-15`, where
the `posts` collection is defined with `pattern: 'blog/**/*.mdx'` and the config root is
set to `'content'` at line 31, meaning only files under `content/blog/**/*.mdx` are
indexed.

2. Note that the new article file is located at
`/workspace/frontend-junction/content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx`
(verified via BulkRead showing frontmatter on lines 1-8), which does NOT match the
`blog/**/*.mdx` pattern under the `content` root.

3. Inspect how posts are consumed in the app: `app/page.tsx` imports `{ posts }` from
`#site/content` and uses them in `getLatestPosts()` at
`/workspace/frontend-junction/app/page.tsx:5-18`, while `app/blog/page.tsx` and
`app/blog/[...slug]/page.tsx` also import `posts` from `#site/content` and rely on this
collection for listing and routing (see
`/workspace/frontend-junction/app/blog/page.tsx:1-3,29-37` and
`/workspace/frontend-junction/app/blog/[...slug]/page.tsx:1-3,18-21,71-72`).

4. Run the Next.js app (which triggers Velite via `next.config.mjs` calling
`build(this.options)` at `/workspace/frontend-junction/next.config.mjs:57-69`), then
navigate to `/blog` and the homepage `/`; observe that the "Testing in 2026: A Practical
Guide" post does not appear in the blog listing, latestPosts, or generated blog routes
because its file path is outside `content/blog/` and therefore never included in the
`posts` collection.

Fix in Cursor Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖
This is a comment left during a code review.

**Path:** content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx
**Line:** 1:8
**Comment:**
	*Incomplete Implementation: This post is added under a directory that is not indexed by the content pipeline, so it will never be included in `posts` and will not appear on the blog listing or post routes. The collection config only matches `content/blog/**/*.mdx`; move this file under `content/blog/` (or update the collection pattern) so it is actually published.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

Comment on lines +1 to +8
---
title: 'Testing in 2026: A Practical Guide'
description: 'A comprehensive guide to testing for modern frontend development in 2026.'
date: '2026-06-16'
tags: ['Testing', 'Frontend', '2026']
published: true
image: './images/post-image.png'
---

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🟠 Architect Review — HIGH

This post is added under content/blog-post-2026-06-16/, but the Velite collection is configured with pattern: 'blog/**/*.mdx' under root: 'content' (see velite.config.ts), so this published: true article will never be included in posts and therefore will not appear in /blog, blog static params, or the sitemap.

Suggestion: Move the MDX file into the indexed collection path (content/blog/...) or expand the Velite posts collection pattern to include the blog-post-* directories, and ensure referenced assets (like ./images/post-image.png) exist in that resolved location so publication is complete.

Fix in Cursor Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖
This is an **Architect / Logical Review** comment left during a code review. These reviews are first-class, important findings — not optional suggestions. Do NOT dismiss this as a 'big architectural change' just because the title says architect review; most of these can be resolved with a small, localized fix once the intent is understood.

**Path:** content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx
**Line:** 1:8
**Comment:**
	*HIGH: This post is added under `content/blog-post-2026-06-16/`, but the Velite collection is configured with `pattern: 'blog/**/*.mdx'` under `root: 'content'` (see `velite.config.ts`), so this `published: true` article will never be included in `posts` and therefore will not appear in `/blog`, blog static params, or the sitemap.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
If a suggested approach is provided above, use it as the authoritative instruction. If no explicit code suggestion is given, you MUST still draft and apply your own minimal, localized fix — do not punt back with 'no suggestion provided, review manually'. Keep the change as small as possible: add a guard clause, gate on a loading state, reorder an await, wrap in a conditional, etc. Do not refactor surrounding code or expand scope beyond the finding.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx`:
- Around line 1-8: The blog post file is located in the wrong directory
structure for Velite to process it. Move the file from
content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx to
content/blog/testing-in-2026-a-practical-guide.mdx so it matches Velite's
expected pattern of content/blog/**/*.mdx. Do not add a slug field to the
frontmatter as Velite will automatically generate it from the file path. Verify
that the referenced image file exists at content/blog/images/post-image.png
after moving the blog post file.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e1ede8a0-d324-4d20-9de0-c482484f304f

📥 Commits

Reviewing files that changed from the base of the PR and between 3b401cf and 7565a37.

📒 Files selected for processing (1)
  • content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx

Comment on lines +1 to +8
---
title: 'Testing in 2026: A Practical Guide'
description: 'A comprehensive guide to testing for modern frontend development in 2026.'
date: '2026-06-16'
tags: ['Testing', 'Frontend', '2026']
published: true
image: './images/post-image.png'
---

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify that the image file exists and check the post metadata collection mechanism

# 1. Check if the image file exists
if [ -f "content/blog-post-2026-06-16/images/post-image.png" ]; then
  echo "✓ Image file found"
else
  echo "✗ Image file NOT found at content/blog-post-2026-06-16/images/post-image.png"
fi

# 2. Search for how slugs are generated in the metadata/collection code
rg -n "slug|getPostMetadata" --type=ts --type=tsx -A 3 app/

Repository: deepu0/frontend-junction

Length of output: 191


🏁 Script executed:

#!/bin/bash
# Fix ripgrep command and search for slug generation
rg -n "slug|getPostMetadata" -A 3 app/ --type ts

Repository: deepu0/frontend-junction

Length of output: 14752


🏁 Script executed:

#!/bin/bash
# Check directory structure for the blog post and images
ls -la content/blog-post-2026-06-16/ 2>/dev/null || echo "Directory not found"
ls -la content/blog-post-2026-06-16/images/ 2>/dev/null || echo "Images directory not found"
find content/blog-post-2026-06-16/ -type f 2>/dev/null | head -20

Repository: deepu0/frontend-junction

Length of output: 360


🏁 Script executed:

#!/bin/bash
# Look for other blog posts and how they're structured
find content -name "*.mdx" -type f 2>/dev/null | head -10

Repository: deepu0/frontend-junction

Length of output: 668


🏁 Script executed:

#!/bin/bash
# Search for how blog posts are parsed/imported
rg -n "frontmatter|post\." app/ --type ts -B 2 -A 2 | head -50

Repository: deepu0/frontend-junction

Length of output: 2377


🏁 Script executed:

#!/bin/bash
# Find getPostMetaData function and look for Velite configuration
rg -n "getPostMetaData|getPostMetadata" -A 10 lib/

Repository: deepu0/frontend-junction

Length of output: 862


🏁 Script executed:

#!/bin/bash
# Search for Velite config and how posts are imported
find . -name "velite.config.*" -o -name "config.*" -type f | grep -v node_modules | head -20
rg -n "import.*posts" app/blog --type ts | head -20

Repository: deepu0/frontend-junction

Length of output: 215


🏁 Script executed:

#!/bin/bash
# Look at how blog posts are loaded in the blog page component
cat app/blog/[...slug]/page.tsx | head -30

Repository: deepu0/frontend-junction

Length of output: 946


🏁 Script executed:

#!/bin/bash
# Check Velite configuration
cat velite.config.ts

Repository: deepu0/frontend-junction

Length of output: 1500


🏁 Script executed:

#!/bin/bash
# Also look for the actual post data structure 
rg -n "slugAsParams|slug:" lib/ app/ --type ts -B 2 -A 2 | head -40

Repository: deepu0/frontend-junction

Length of output: 1886


🏁 Script executed:

#!/bin/bash
# Verify that the file is actually in the wrong directory structure
# Check if the file matches the Velite pattern
echo "File location:"
find content -name "testing-in-2026-a-practical-guide.mdx" -type f

echo -e "\nVelite pattern expects files matching: content/blog/**/*.mdx"
echo "Checking for files in content/blog/"
ls -la content/blog/ | head -15

Repository: deepu0/frontend-junction

Length of output: 1380


🏁 Script executed:

#!/bin/bash
# Double-check by looking at an existing blog post that works
echo "Example of a working blog post file:"
cat content/blog/frontend-roadmap-2026.mdx | head -20

Repository: deepu0/frontend-junction

Length of output: 1128


Move file to correct directory: content/blog/ for Velite to pick it up.

The file is currently at content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx, but Velite's pattern (content/blog/**/*.mdx) only processes files under content/blog/. This file will not be built or included in the site.

Required action: Move the file to content/blog/testing-in-2026-a-practical-guide.mdx. The slug will be auto-generated by Velite as blog/testing-in-2026-a-practical-guide—do not add a slug field to the frontmatter.

Image path: Once moved to content/blog/, the relative path ./images/post-image.png will resolve correctly. Ensure content/blog/images/post-image.png exists.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx` around
lines 1 - 8, The blog post file is located in the wrong directory structure for
Velite to process it. Move the file from
content/blog-post-2026-06-16/testing-in-2026-a-practical-guide.mdx to
content/blog/testing-in-2026-a-practical-guide.mdx so it matches Velite's
expected pattern of content/blog/**/*.mdx. Do not add a slug field to the
frontmatter as Velite will automatically generate it from the file path. Verify
that the referenced image file exists at content/blog/images/post-image.png
after moving the blog post file.

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

Labels

size:M This PR changes 30-99 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant