-
Notifications
You must be signed in to change notification settings - Fork 2
Add blog post: testing-in-2026-a-practical-guide.mdx #138
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: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| 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' | ||
| --- | ||
|
Comment on lines
+1
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🟠 Architect Review — HIGH This post is added under Suggestion: Move the MDX file into the indexed collection path ( (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
Comment on lines
+1
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 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 tsRepository: 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 -20Repository: 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 -10Repository: 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 -50Repository: 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 -20Repository: 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 -30Repository: deepu0/frontend-junction Length of output: 946 🏁 Script executed: #!/bin/bash
# Check Velite configuration
cat velite.config.tsRepository: 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 -40Repository: 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 -15Repository: 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 -20Repository: deepu0/frontend-junction Length of output: 1128 Move file to correct directory: The file is currently at Required action: Move the file to Image path: Once moved to 🤖 Prompt for AI Agents |
||
|
|
||
| # Testing in 2026: A Practical Guide | ||
|
|
||
| Testing continues to evolve in 2026, and staying current with the latest patterns and best practices is essential for building modern, performant web applications. In this guide, we'll explore practical techniques you can implement today. | ||
|
|
||
| ## Why Testing Matters | ||
|
|
||
| Understanding testing is crucial for frontend developers who want to build responsive, accessible, and maintainable applications. Whether you're working on a small project or a large-scale enterprise application, these concepts apply. | ||
|
|
||
| ## Key Concepts | ||
|
|
||
| ### 1. Foundation Principles | ||
|
|
||
| The core principles behind testing remain consistent, but implementation details have evolved. Here's what you need to know: | ||
|
|
||
| ```typescript | ||
| // Example of modern testing pattern | ||
| function useModernPattern() { | ||
| // Implementation example | ||
| return { | ||
| apply: () => { | ||
| console.log("Applying modern testing pattern"); | ||
| } | ||
| }; | ||
| } | ||
| ``` | ||
|
|
||
| ### 2. Common Pitfalls to Avoid | ||
|
|
||
| - **Ignoring performance**: Always measure before optimizing | ||
| - **Over-engineering**: Start simple, add complexity when needed | ||
| - **Not following conventions**: Stick to established patterns in your codebase | ||
|
|
||
| ### 3. Best Practices | ||
|
|
||
| 1. Start with the basics before moving to advanced patterns | ||
| 2. Test your implementations thoroughly | ||
| 3. Document your code for future reference | ||
| 4. Keep performance in mind throughout development | ||
|
|
||
| ## Real-World Example | ||
|
|
||
| Here's a practical example you can adapt for your projects: | ||
|
|
||
| ```typescript | ||
| // Real-world application example | ||
| interface Props { | ||
| data: string[]; | ||
| onUpdate: (value: string) => void; | ||
| } | ||
|
|
||
| function Component({ data, onUpdate }: Props) { | ||
| return ( | ||
| <div> | ||
| {data.map(item => ( | ||
| <button key={item} onClick={() => onUpdate(item)}> | ||
| {item} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Conclusion | ||
|
|
||
| Testing is an essential skill for modern frontend developers. By understanding these patterns and implementing them in your projects, you'll build better applications that are more maintainable and performant. | ||
|
|
||
| Start with the basics, practice regularly, and gradually incorporate more advanced techniques into your workflow. The key is consistency and continuous learning. | ||
|
|
||
| --- | ||
|
|
||
| Have questions or want to share your experience? Join the discussion in our community! | ||
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.
Suggestion: This post is added under a directory that is not indexed by the content pipeline, so it will never be included in
postsand will not appear on the blog listing or post routes. The collection config only matchescontent/blog/**/*.mdx; move this file undercontent/blog/(or update the collection pattern) so it is actually published. [incomplete implementation]Severity Level: Critical 🚨
Steps of Reproduction ✅
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖