test(ComparisonStatsCard-responsive-breakpoints): verify Responsive M…#3946
Open
realtushartyagi wants to merge 2 commits into
Open
test(ComparisonStatsCard-responsive-breakpoints): verify Responsive M…#3946realtushartyagi wants to merge 2 commits into
realtushartyagi wants to merge 2 commits into
Conversation
…ulti-device Columns & Mobile Viewport Layouts (Variation 7) Closes JhaSourav07#2519
Contributor
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 dedicated test suite to validate ComparisonStatsCard styling hooks intended to support responsive layouts across viewport sizes.
Changes:
- Introduces a Vitest + Testing Library test file focused on responsive breakpoints and layout-related Tailwind classes
- Adds a
matchMediamock and viewport width manipulation to simulate mobile/desktop environments - Adds assertions for grid/flex structure, progress bar sizing, truncation, and breakpoint-only elements
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+7
to
+18
| const mockMatchMedia = (width: number) => { | ||
| return vi.fn().mockImplementation((query) => ({ | ||
| matches: width <= 768 ? query.includes('max-width') : query.includes('min-width'), | ||
| media: query, | ||
| onchange: null, | ||
| addListener: vi.fn(), | ||
| removeListener: vi.fn(), | ||
| addEventListener: vi.fn(), | ||
| removeEventListener: vi.fn(), | ||
| dispatchEvent: vi.fn(), | ||
| })); | ||
| }; |
Comment on lines
+30
to
+38
| beforeEach(() => { | ||
| // Default to mobile viewport (iPhone SE width) | ||
| Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 375 }); | ||
| window.matchMedia = mockMatchMedia(375); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| vi.clearAllMocks(); | ||
| }); |
Comment on lines
+91
to
+109
| it('asserts mobile-specific visual elements (like center dividers) respond cleanly', () => { | ||
| const { container } = render(<ComparisonStatsCard {...defaultProps} />); | ||
|
|
||
| // The center divider uses hidden md:block so it disappears on mobile viewports | ||
| const divider = container.querySelector('.hidden.md\\:block'); | ||
| expect(divider).not.toBeNull(); | ||
| expect(divider?.className).toContain('absolute left-1/2'); | ||
|
|
||
| // Simulate resizing to Desktop (1024px) | ||
| Object.defineProperty(window, 'innerWidth', { | ||
| writable: true, | ||
| configurable: true, | ||
| value: 1024, | ||
| }); | ||
| window.matchMedia = mockMatchMedia(1024); | ||
|
|
||
| // Viewport should reflect desktop | ||
| expect(window.innerWidth).toBe(1024); | ||
| }); |
Comment on lines
+46
to
+49
| // The component should render without crashing on mobile | ||
| expect(screen.getByText('Total Commits')).toBeDefined(); | ||
| expect(screen.getByText('1500')).toBeDefined(); | ||
| expect(screen.getByText('1200')).toBeDefined(); |
github-actions
Bot
added
the
status:blocked
|
🚨 Hey @realtushartyagi, the CI Pipeline is failing on this PR and it has been marked as Please fix the issues before this can be reviewed. Here's how: 1. Run checks locally before pushing: npm run format:check # Check Prettier formatting
npm run lint # Run ESLint
npm run typecheck # TypeScript type check
npm run test # Run unit tests (Vitest)
npm run build # Verify production build passes2. Auto-fix common issues: npm run format # Auto-fix formatting with Prettier
npm run lint -- --fix # Auto-fix lint errors where possible3. Check the full failure log here: Once you push a fix and the CI passes, the |
github-actions
Bot
added
type:testing
Aamod007
added
GSSoC 2026
mentor:Aamod007
level:beginner
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR Adds responsive layout tests for the ComparisonStatsCard component.
Fixes #2519
Covered Scenarios
-Responsive visibility of mobile-specific elements.
Pillar
Visual Preview
N/A (Test-only changes, no UI modifications)
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).npm run testand all tests pass locally.npm run test:coverageand branch coverage is at or above 70%.feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.