test(ui): verify responsive rendering and elements of HeroSection (Variation 1)#5763
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a new test suite for HeroSection Variation 1 to validate responsive rendering, accessibility roles/labels, and key UI elements across viewport widths.
Changes:
- Added a
matchMediastub helper to simulate viewport breakpoints in tests. - Added assertions for hero region accessibility, heading semantics/typography classes (including dark-mode gradients), and presence of form controls/buttons.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| vi.fn().mockImplementation((query: string) => { | ||
| const minMatch = query.match(/\(min-width:\s*(\d+)px\)/); | ||
| const maxMatch = query.match(/\(max-width:\s*(\d+)px\)/); | ||
| let matches = false; | ||
| if (minMatch) matches = width >= Number(minMatch[1]); | ||
| else if (maxMatch) matches = width <= Number(maxMatch[1]); | ||
| return { |
| it('outer container carries the hero region role and aria-label', () => { | ||
| setupMatchMedia(1280); | ||
| render(<HeroSection />); | ||
| const region = screen.getByRole('region', { name: /hero section/i }); | ||
| expect(region).toBeInTheDocument(); | ||
| expect(region.tagName).toBe('DIV'); | ||
| expect(region.className).toContain('bg-[radial-gradient'); | ||
| vi.unstubAllGlobals(); | ||
| }); |
| expect(region.tagName).toBe('DIV'); | ||
| expect(region.className).toContain('bg-[radial-gradient'); |
RavindiFernando
force-pushed
the
test/hero-section-responsive
branch
from
8c36bc8 to
8a5f47c
Compare
github-actions
Bot
added
the
status:blocked
RavindiFernando
force-pushed
the
test/hero-section-responsive
branch
from
1d68d94 to
41b77a1
Compare
github-actions
Bot
removed
the
status:blocked
📦 Next.js Bundle Size Report (Gzipped Sizes)✨ No significant bundle size changes detected. 📊 Summary of Totals
|
Aamod007
added
level:intermediate
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Thanks for the HeroSection responsive coverage. I reviewed the PR title/description, linked issue #1517, checks, and the actual diff before labeling.
Labels applied:
level:intermediate: this is an 80-line augmentation to an existing test file,app/components/HeroSection.test.tsx, adding viewport stubbing, role checks, and typography assertions in lines 112-193.quality:clean: thematchMediastub is isolated in a helper, globals are cleaned up inafterEach, and the assertions stay close to the actual hero markup and class names.type:testing: the PR adds responsive and accessibility-oriented testing forHeroSection, which is exactly what issue #1517 asked for.type:design: the assertions cover layout and gradient typography classes across breakpoints, so the change is directly about visual treatment as well as behavior.
All required checks are green and the PR is not draft or blocked, so I’m approving and adding gssoc:approved.
|
🎉 Congratulations @RavindiFernando! Your PR has been successfully merged. 🚀 Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.
Keep building! 💻✨ |
Description
Adds a Variation 1 test suite to app/components/HeroSection.test.tsx with 5 tests verifying the component's layout structure and typography across responsive viewports (375 px, 768 px, 1280 px). Tests assert the role="region" container, H1 gradient classes (text-5xl, font-extrabold, bg-clip-text, light and dark gradient stops), and correct HTML node types for the input and buttons. Uses matchMedia stubbing to simulate viewports.
Fixes #1517
Pillar
Visual Preview
N/A
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.