|
| 1 | +/* ========================================================================== |
| 2 | + * COMPONENT LAYER — RESPONSIVE MULTI-DEVICE VIEWPORT BOUNDARIES (VARIATION 7) |
| 3 | + * ========================================================================== */ |
| 4 | + |
| 5 | +import React from 'react'; |
| 6 | +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; |
| 7 | +import { render, screen } from '@testing-library/react'; |
| 8 | + |
| 9 | +const MockComparePage = ({ viewportWidth }: { viewportWidth: number }) => { |
| 10 | + const isMobile = viewportWidth <= 768; |
| 11 | + return ( |
| 12 | + <div |
| 13 | + style={{ |
| 14 | + display: 'flex', |
| 15 | + flexDirection: isMobile ? 'column' : 'row', |
| 16 | + width: '100%', |
| 17 | + maxWidth: '1200px', |
| 18 | + }} |
| 19 | + data-testid="compare-container" |
| 20 | + > |
| 21 | + <header |
| 22 | + style={{ width: '100%', padding: isMobile ? '10px' : '20px' }} |
| 23 | + data-testid="nav-header" |
| 24 | + > |
| 25 | + <span data-testid="nav-scale">{isMobile ? 'Mobile Nav' : 'Desktop Navbar'}</span> |
| 26 | + </header> |
| 27 | + |
| 28 | + <div |
| 29 | + style={{ flex: 1, minWidth: isMobile ? '100%' : '50%' }} |
| 30 | + data-testid="column-user-1" |
| 31 | + className={isMobile ? 'w-full block' : 'w-1/2 inline-block'} |
| 32 | + > |
| 33 | + User 1 Stats Card |
| 34 | + </div> |
| 35 | + <div |
| 36 | + style={{ flex: 1, minWidth: isMobile ? '100%' : '50%' }} |
| 37 | + data-testid="column-user-2" |
| 38 | + className={isMobile ? 'w-full block' : 'w-1/2 inline-block'} |
| 39 | + > |
| 40 | + User 2 Stats Card |
| 41 | + </div> |
| 42 | + |
| 43 | + {isMobile && ( |
| 44 | + <button data-testid="mobile-toggle" data-state="active"> |
| 45 | + Mobile Action View |
| 46 | + </button> |
| 47 | + )} |
| 48 | + </div> |
| 49 | + ); |
| 50 | +}; |
| 51 | + |
| 52 | +describe('ComparePage — Responsive Viewport Layout Bounds (Variation 7)', () => { |
| 53 | + const originalInnerWidth = window.innerWidth; |
| 54 | + |
| 55 | + const setViewportWidth = (width: number) => { |
| 56 | + Object.defineProperty(window, 'innerWidth', { |
| 57 | + writable: true, |
| 58 | + configurable: true, |
| 59 | + value: width, |
| 60 | + }); |
| 61 | + window.dispatchEvent(new Event('resize')); |
| 62 | + }; |
| 63 | + |
| 64 | + afterEach(() => { |
| 65 | + setViewportWidth(originalInnerWidth); |
| 66 | + vi.restoreAllMocks(); |
| 67 | + }); |
| 68 | + |
| 69 | + // 1. Mock standard mobile-width media coordinates (e.g. 375px wide viewports) |
| 70 | + it('correctly adapts layout constraints to standard mobile coordinates at 375px', () => { |
| 71 | + setViewportWidth(375); |
| 72 | + render(<MockComparePage viewportWidth={375} />); |
| 73 | + |
| 74 | + const container = screen.getByTestId('compare-container'); |
| 75 | + expect(window.innerWidth).toBe(375); |
| 76 | + expect(container).toBeDefined(); |
| 77 | + }); |
| 78 | + |
| 79 | + it('forces columns to reflow into a vertical stacked flex alignment on narrow device screens', () => { |
| 80 | + setViewportWidth(375); |
| 81 | + render(<MockComparePage viewportWidth={375} />); |
| 82 | + |
| 83 | + const container = screen.getByTestId('compare-container'); |
| 84 | + expect(container.style.flexDirection).toBe('column'); |
| 85 | + }); |
| 86 | + |
| 87 | + it('avoids absolute hardcoded pixel width definitions on columns to prevent layout truncation clipping', () => { |
| 88 | + setViewportWidth(375); |
| 89 | + render(<MockComparePage viewportWidth={375} />); |
| 90 | + |
| 91 | + const col1 = screen.getByTestId('column-user-1'); |
| 92 | + const col2 = screen.getByTestId('column-user-2'); |
| 93 | + |
| 94 | + expect(col1.style.minWidth).toBe('100%'); |
| 95 | + expect(col2.style.minWidth).toBe('100%'); |
| 96 | + expect(col1.style.minWidth).not.toBe('600px'); |
| 97 | + }); |
| 98 | + |
| 99 | + it('scales down secondary structural navigation components cleanly on tight breakpoints', () => { |
| 100 | + setViewportWidth(375); |
| 101 | + render(<MockComparePage viewportWidth={375} />); |
| 102 | + |
| 103 | + const header = screen.getByTestId('nav-header'); |
| 104 | + const navText = screen.getByTestId('nav-scale'); |
| 105 | + |
| 106 | + expect(header.style.padding).toBe('10px'); |
| 107 | + expect(navText.textContent).toBe('Mobile Nav'); |
| 108 | + }); |
| 109 | + |
| 110 | + it('activates and renders mobile-specific control toggles under small viewport modes exclusively', () => { |
| 111 | + setViewportWidth(375); |
| 112 | + render(<MockComparePage viewportWidth={375} />); |
| 113 | + |
| 114 | + const mobileToggle = screen.getByTestId('mobile-toggle'); |
| 115 | + expect(mobileToggle).toBeDefined(); |
| 116 | + expect(mobileToggle.getAttribute('data-state')).toBe('active'); |
| 117 | + }); |
| 118 | +}); |
0 commit comments